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?"