Are all-caps headings bad for accessibility?

[mattheu]

@missjwo posted on updates

I’m kind of worried, the titles being in uppercase makes it hard for people with dyslexia and austism to read.

I think we should look into this. The all-caps headings are purely aesthetic.

However I'm also wary of making a big change like this now we've just released v1.0. That said - best to address this sooner rather than later.

Some thoughts:

• It would be useful to refer to any studies on this before changing anything.
• Does it matter less since its only for headings? I'd totally agree for longer passages of text, but perhaps its OK for headings?
• Would it be a usability win for all? e.g. would it be easier to scan the sidebar nav if it wasn't all caps?
• I'd like to encourage more consistent typography across the HM brand, so getting this right is important. (Think slides, client pitches etc.)

Interested in hearing other opinions on this one.

[missjwo]

There are a bunch of articles when you search about it :

https://www.sitepoint.com/15-rules-making-accessible-links/

There are two problems with capitalized text in links.

Firstly, some screen readers read capitalized text letter-by-letter. And this occasionally even occurs when the HTML is in sentence-case and the CSS forces the capitalization.

The second problem is that capital letters are harder to read (for everyone, but especially people with reading disabilities).

Capitalized text has no difference in shape: all the words are just one big rectangle. Sentence capitals have differentiated shapes based on the letters used.

https://www.mity.com.au/blog/writing-readable-content-and-why-all-caps-is-so-hard-to-read

the use of All Caps can reduce the readability of your text. Usability expert Jakob Nielsen has found that reading on screen can be around 25% slower than reading from paper, and reading All Caps can be a further 10% slower.

When we read, we don't actually look at every letter in a sentence, but actually the shapes of the words. When text is in All Caps, the height of every letter is identical making every word an even rectangular shape, forcing us to read letter-by-letter, reducing our reading speed.

http://uxmovement.com/content/how-letterspacing-can-make-all-caps-easier-to-read/

Increasing the letterspacing gives the edges of each word a teeth shape instead of a straight line. The teethy edges give off a unique shape for each word. This allows users to perceive each word differently for faster word recognition. Users don’t need to focus as closely and can read words at a quick glance.

http://ux.stackexchange.com/questions/67454/how-does-capitalization-affect-readability
http://www.sciencedirect.com/science/article/pii/S0042698907002830

Using a single unaltered font and all upper-, all lower-, and mixed-case text, we assessed size thresholds for words and random strings, and reading speeds for text with normal and visually impaired participants.

Lower-case thresholds were roughly 0.1 log unit higher than upper. Reading speeds were higher for upper- than for mixed-case text at sizes twice acuity size; at larger sizes, the upper-case advantage disappeared. Results suggest that upper-case is more legible than the other case styles, especially for visually-impaired readers, because smaller letter sizes can be used than with the other case styles, with no diminution of legibility.

http://www.dyslexia.ie/information/computers-and-technology/making-information-accessible-dyslexia-friendly-style-guide/

For people with dyslexia, the ability to read and understand text can be affected by the way in which text has been written and produced.

If you are producing information to be read by others, it is important to remember that up to 10% of your readers may have dyslexia.

Dyslexia friendly text will have improved readability and better visual impact for all readers, but especially those with dyslexia.

The following are some simple recommendations to help ensure that your text is dyslexia friendly: ... Use lower case letters. Avoid unnecessary use of capitals. Using all capital letters can make it harder to read, and it can also appear that you are shouting at the reader.

https://bdatech.org/what-technology/typefaces-for-dyslexia/
http://www.dyslexia-reading-well.com/dyslexia-font.html

Things to avoid: ALL CAPS. The letters tend to fuse together

[pdewouters]

I like the all caps on the table headers, anything larger than that not so much

[rianrietveld]

This is not included into WCAG, but I agree with Jenny, caps are harder to read.
But used wisely and not to often they can add to a beautiful design.

[mattheu]

I'm going to close this. We just redesigned and whilst this was definitely raised, the new design also uses caps for headings.

[eric-harms]

For those stating that you shouldn't use uppercase because text is harder to read, please look at some of the newer studies debunking the myth of the word-shape model. In some papers, the case is made for capitals being more legible for low vision readers and smaller font sizes (like Material Design buttons).
It also can be used to stress a level of importance like Actions on Cards (Title->Actions->Description)

https://docs.microsoft.com/en-us/typography/develop/word-recognition
https://www.sciencedirect.com/science/article/pii/S0042698907002830?via%3Dihub

[fuzzbomb]

Nice to see this detailed account. There's a similar discussion in the Drupal issue queue:
Readability problem with all-caps text in core themes. We haven't reached a consensus for changing our existing core themes, but it's something we have are taking into account for the next Drupal admin theme.

One of the main stumbling blocks is that lots of style guides recommend using it sparingly, but none give much advice about what situations are OK for all-caps. It's hard to form a policy when no-one knows the answer to "how much is too much?"

[gidgey]

There are a bunch of articles when you search about it :

https://www.sitepoint.com/15-rules-making-accessible-links/

There are two problems with capitalized text in links.
Firstly, some screen readers read capitalized text letter-by-letter. And this occasionally even occurs when the HTML is in sentence-case and the CSS forces the capitalization.
The second problem is that capital letters are harder to read (for everyone, but especially people with reading disabilities).
Capitalized text has no difference in shape: all the words are just one big rectangle. Sentence capitals have differentiated shapes based on the letters used.

https://www.mity.com.au/blog/writing-readable-content-and-why-all-caps-is-so-hard-to-read

the use of All Caps can reduce the readability of your text. Usability expert Jakob Nielsen has found that reading on screen can be around 25% slower than reading from paper, and reading All Caps can be a further 10% slower.
When we read, we don't actually look at every letter in a sentence, but actually the shapes of the words. When text is in All Caps, the height of every letter is identical making every word an even rectangular shape, forcing us to read letter-by-letter, reducing our reading speed.

http://uxmovement.com/content/how-letterspacing-can-make-all-caps-easier-to-read/

Increasing the letterspacing gives the edges of each word a teeth shape instead of a straight line. The teethy edges give off a unique shape for each word. This allows users to perceive each word differently for faster word recognition. Users don’t need to focus as closely and can read words at a quick glance.

http://ux.stackexchange.com/questions/67454/how-does-capitalization-affect-readability http://www.sciencedirect.com/science/article/pii/S0042698907002830

Using a single unaltered font and all upper-, all lower-, and mixed-case text, we assessed size thresholds for words and random strings, and reading speeds for text with normal and visually impaired participants.
Lower-case thresholds were roughly 0.1 log unit higher than upper. Reading speeds were higher for upper- than for mixed-case text at sizes twice acuity size; at larger sizes, the upper-case advantage disappeared. Results suggest that upper-case is more legible than the other case styles, especially for visually-impaired readers, because smaller letter sizes can be used than with the other case styles, with no diminution of legibility.

http://www.dyslexia.ie/information/computers-and-technology/making-information-accessible-dyslexia-friendly-style-guide/

For people with dyslexia, the ability to read and understand text can be affected by the way in which text has been written and produced.
If you are producing information to be read by others, it is important to remember that up to 10% of your readers may have dyslexia.
Dyslexia friendly text will have improved readability and better visual impact for all readers, but especially those with dyslexia.
The following are some simple recommendations to help ensure that your text is dyslexia friendly: ... Use lower case letters. Avoid unnecessary use of capitals. Using all capital letters can make it harder to read, and it can also appear that you are shouting at the reader.

https://bdatech.org/what-technology/typefaces-for-dyslexia/ http://www.dyslexia-reading-well.com/dyslexia-font.html

Things to avoid: ALL CAPS. The letters tend to fuse together

This is one of the best things I have read on the internet in a long time. And it completely helps backup my gut instinct. I find ALL CAPS very difficult to read as a non-neurodivergent person.

Thank you so much for writing this. I will be referencing it many times.

Bridget

BridgetWillard.com

[Myndex]

SOME COMMENTS

I find ALL CAPS very difficult to read as a non-neurodivergent person.

Blocks or columns of body text in all upper case is hard for EVERYONE to read.

One of the main stumbling blocks is that lots of style guides recommend using it sparingly, but none give much advice about what situations are OK for all-caps. It's hard to form a policy when no-one knows the answer to "how much is too much?"

Large headlines, headers, CTA buttons with few words, short menu items, all can work well with all upper case. Upper case words for emphasis in longer texts can sometimes be useful, when used "sparingly". "Sparingly" is really what you judge to work well. For instance, in THIS POST I am pushing the limits of using all-upper-case sparingly.

But blocks of body text need mixed & predominantly lowercase, and with substantial contrast (i.e. 4.5:1 is woefully insufficient for body-text).

...some screen readers read capitalized text letter-by-letter...

Not good ones. Good screen readers can recognize the difference between actual words and acronyms. That said, it might be best practice to use text-transform: uppercase; or an all upper case font, rather than HARD CODING TEXT in upper case.

ALL CAPS is a useful method of emphasis, as is using bold, or larger sizes, or a different font. And like all forms of emphasis, it should be sparingly applied.

OPINION: It is not the page author's responsibility to try and fix unknown deficient technology for some $10,000 screen reader program(s) that should be reasonably capable of distinguishing between a word and an acronym, abbreviation, or initialism. The screen readers I use do this.

ACTUALLY IMPORTANT

What is actually important is a good visual hierarchy, with main content at best readability contrast.

REGARDING DYSLEXIA: it is a language issue and not a visual issue. This article at the IDA does a good job of covering the myths and putting things into a correct perspective.

Thank you for reading,

Andy