WCAG 1.4.12 🟠 (Partially Supports): Text Spacing

[StephDriver]

WCAG 1.4.12: Text Spacing

Level: AA
Principle: Perceivable
Result: 🟠 Partially Supports
Details:

• OLH 🟠 Partially Supports
• Clean 🟠 Partially Supports
• Material
  • desktop width ❌ Does not Support
  • mobile width 🟠 Partially Supports

Resources

WCAG 2.2 Success Criterion 1.4.12

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.

Note 1
Content is not required to use these text spacing values. The requirement is to ensure that when a user overrides the authored text spacing, content or functionality is not lost.

Note 2
Writing systems for some languages use different text spacing settings, such as paragraph start indent. Authors are encouraged to follow locally available guidance for improving readability and legibility of text in their writing system.

Audit Checklist

• Review previous Audit Result
• Review work identified in previous audit and list open issues.
• Check for any other relevant open issues.
• Retest open issues, are these issues still present?
• Test for any new issues that may have been introduced.
• Determine compliance status, add this to issue name.
• Add any new issues to the Accessibility project for triage.

Previous audit

#4127

❌ text spacing
There are a handful of places where text overflows its container when the spacing is adjusted. There are a couple of bugs which are more likely at higher text spacing.

Progress since last audit

• Text spacing audit #4260
• Readability - overriding user's prefered font #4230
• Dyslexia Features across themes #755
• Clean theme references overflowing table of contents #4261
• Clean theme table of contents not scrolling #4264
• Material theme, DOI overflows container on change of text spacing #4265
• Clean theme Iframes overflowing article container #4304

Audit Notes

Our themes are intended to allow for text spacing, but there are a handful of places where this has not yet been achieved such that none of our three themes are compliant.

The article page works across all three themes on both mobile and desktop widths.

For OLH and Clean, the bugs affect isolated pieces of content, and so these two themes partially support.

However for Material the main navigation is not usable at higher text spacing which have a significant impact on any user who needed this feature, and therefore Material does not support it. The mobile navigation does work, and is available to desktop users by reducing their window size. This or the accessibility mode could be signposted to users as an alternative.

Work arising

• Fix Text spacing across all themes #5135

[StephDriver]

Testing for Text Spacing using DigitA11y Tublets

Using #5098 branched from Master at f23d166

** in progress **

Theme	OLH	OLH	Material	Material	Clean	Clean
Width	Wide	Narrow	Wide	Narrow	Wide	Narrow
article page	✅	✅	✅	✅	✅	✅
article modals	✅	✅	N/A	N/A	✅	✅
homepage	✅	✅	✅	❌	✅	✅
contact	✅	✅	✅	✅	✅	✅
articles	✅	✅	✅	✅	✅	✅
search	✅	✅	✅	✅	✅	✅
press home	✅	✅	N/A	N/A	✅	✅
press journals	❌	✅	N/A	N/A	❌	❌
journal nav	✅	✅	❌	✅	✅	✅
journal header	✅	✅	❌	✅	✅	✅
journal footer	✅	✅	✅	✅	✅	✅
press nav	✅	✅	N/A	N/A	❌	✅
press header	✅	✅	N/A	N/A	✅	✅
press footer	✅	✅	N/A	N/A	✅	✅
carousel	✅	✅	✅	❌	✅	❌
issues	✅	✅	✅	✅	✅	✅
issue	✅	✅	✅	✅	✅	✅
contact	✅	✅	✅	✅	✅	✅
special collections	✅	✅	❌	❌	✅	✅
news index	✅	✅	✅	✅	✅	✅
news items	✅	✅	✅	✅	✅	✅
editorial team	❌	✅	❌	❌	✅	✅

[StephDriver]

Note:

• Material article page doesn't use modals.
• Material is not offered as a Press theme.

Areas that do not support:

Theme	Screen Width	Target	Notes
OLH	Wide	press journals	Journal blubs overlap rather than reflow.
OLH	Wide	editorial team	Profile blurb  overflows bottom profile box border
Material	Wide	journal nav	Positioning of links moves up and behind the logo, making parts of the nav unreachable.
Material	Wide	journal header	Nav and Logo overlap
Material	Wide	special collections	Collection blub is truncated rather than space expanding.
Material	Wide	editorial team	Profile blurb  overflows profile box
Material	Narrow	homepage	Article boxl title text does not reflow - requiring horizontal scrolling
Material	Narrow	carousel	Carousel text area does not expand, truncating text.
Material	Narrow	special collections	The blurb for each collection is truncated rather than the space expanding.
Material	Narrow	editorial team	Profile blurb  overflows profile box
Clean	Wide	press journals	Filter placeholder text is truncated
Clean	Wide	press nav	Nav bar is full width at standard spacing, and does not reflow.
Clean	Narrow	press journals	Filter placeholder text is truncated
Clean	Narrow	carousel	The back/forward slide buttons end up behind the reflowed article link.  This can happen anyway, but more likely with increased text spacing.