·

Understanding WCAG SC 1.4.12 Text Spacing

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated : WCAG, Perceivable
1.4.12 Text Spacing
1.4.12 Text Spacing

Success Criterion 1.4.12 Text Spacing (Level AA): In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.

Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.

The intent of this success criterion is to make sure that people with low vision & cognitive challenges are provided with option to modify the spacing between characters, lines & paragraphs. Users will be able to read much better when there is enough spacing between letters, lines & paragraphs. Users can avail one or more of these options by loading an alternative CSS style sheet or use an accessibility bookmarklet or a browser extension.

The web page author doesn’t have to provide these options on the website but need to ensure that content adjusts properly when some of these options are applied. Making sure that website is in responsive design & not using the fixed containers will help achieve this success criterion. Also, ensure there is no loss of functionality when the text spacing is applied by the users.

Exceptions

PDF’s, video captions, images of text & logos are not covered by this success criterion because this guideline applies to the content created by markup languages.

Points to Ponder

  • Don’t use fixed containers in your CSS styles.
  • Make sure that content reflows without overlapping or text cut-offs
  • Use relative units of font size, line height, spaces between characters, words, lines and paragraphs.
  • Line Spacing: Ensure consistent and appropriate line spacing between text lines. A suitable line height helps users read content more comfortably without cramming text too close together or spreading it too far apart.
  • Paragraph Length: Avoid large blocks of text. Break content into smaller paragraphs to enhance readability. Shorter paragraphs make it easier for users to follow the flow of information.
  • Text Alignment: Use justified or left-aligned text. Avoid fully justified text, as it can create uneven spacing between words and affect readability.
  • Letter and Word Spacing: Be cautious with letter and word spacing adjustments. While they might be helpful for some users, excessive spacing could lead to awkward reading experiences for others.
  • Contrast: Ensure sufficient contrast between text and background colors. High contrast makes text easier to distinguish for people with visual impairments or reading difficulties.
  • Responsive Design: Ensure text spacing is maintained on different devices and screen sizes. Responsive design ensures that the text remains accessible and readable regardless of the user’s device.

You can test text spacing using the text spacing bookmarklet or the DigitalA11y Tublets Chrome extension. Both approaches are robust and can easily help with text spacing and identify accessibility failures.

Related Reads

Read Next: Understanding SC 1.4.13: Content on Hover or Focus
Explore our WCAG Checklist

Explore more on DigitalA11Y Insights

Share A11y Love
Avatar for Raghavendra Satish Peri

Raghavendra Satish Peri empowers enterprises with his expertise in digital accessibility and marketing. Through his impactful work, he collaborates with both small businesses and large enterprises, spearheading digital transformation initiatives. Raghavendra is the author behind the influential Accessibility Blog hosted at DigitalA11Y.com, where he delves into the intricate realm of digital accessibility and its significance.
Passionate about fostering change within the tech landscape, Raghavendra actively inspires local tech communities through engaging meetups and mentorship. He is the driving force behind HelloA11Y.com, a vibrant platform that unites accessibility professionals, developers, and enthusiasts, propelling the adoption of accessible practices.
Beyond the digital realm, Raghavendra seeks diverse experiences. You might find him exploring various cuisines at local cafes and restaurants or immersing himself in thought-provoking audio books. His insights and musings also find a home on his Personal Blog at raghava.in, where he shares his thoughts and experiences with a wider audience.

Similar Posts

WCAG 2.1: What’s up with Accessibility Guidelines

WCAG 2.1: What’s up with Accessibility Guidelines

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
4 Comments

The fifth of June 2018 saw a lot of buzz in the world of digital accessibility, social media and in blogs. What was this all about? Well, many may know; if no, wake up to hear, read and see Web Content Accessibility Guidelines 2.1 becoming the published recommendation. Yes, on June 5, 2018, W3C published…

WCAG 2.2 is Finally Here!

WCAG 2.2 is Finally Here!

Avatar for Sathish KumarAuthored By :Sathish Kumar Last Updated On :
0 Comments

After 5 years of research, much deliberations, constant feedback, several drafts and edits, the Web Content Accessibility Guidelines (WCAG) 2.2 has arrived as a W3C recommendation. This version was made as a W3C recommendation on October 05, 2023 and calls for appreciations and celebrations as the inclusivity of the digital world has achieved one more…

2.3.1 Three Flashes & Below Threshold
|

Understanding WCAG SC 2.3.1 Three Flashes or Below Threshold

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
4 Comments

2.3.1 Three Flashes or Below Threshold: Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds. (Level A) Note: Since any content that does not meet this success criterion can interfere with a user’s ability to…

1.2.2 Captions (Prerecorder)
|

Understanding WCAG SC 1.2.2 Captions (Prerecorded)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

1.2.2 Captions (Prerecorded): Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such. (Level A) Captions (Prerecorded) Transcript Hello everyone. Today, we’re going to talk about captions. We’re also going to talk about its importance, benefits, types, and…

1.1.1 Non-Text Content
|

Understanding WCAG SC 1.1.1 Non-text Content

Avatar for Sathish KumarAuthored By :Sathish Kumar Last Updated On :
3 Comments

1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A) Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for…

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *