6

Recommendations on digital accessibility often include avoiding ALL CAPS. There was even a discussion on this site (All capital titles: Good or Bad?), though the focus was not specifically accessibility.

I want to know what are the recommendations about using Small Caps (and All caps) when using headers on websites and within documents, particulary when considering accessibility for disabled users. Could anyone point me to resources that discuss the accessibility implications of small caps when used as section headers and titles.

Community
  • 1
Teach Learn
  • 63
  • 5
  • Shall we assume an ideal scenario where true small capitals are available in every font and are selected reliably – or the real world where standard fonts, web browsers, office suites etc. still suck in this regard? – Crissov Feb 05 '16 at 20:20

2 Answers2

2

Small capitals for most fonts aren't web-ready yet. This article from Design for Hackers has some detail about why you should use real small capitals instead of fake (or just don't use them at all).

You could use text-transform: uppercase to make a swathe of text appear as all-caps, when it's actually normal-case in the markup; that should sidestep the accessibility issue, as it says in the linked StackOverflow answer:

Screen readers will generally read ALL UPPERCASE as individual letters, as such text is generally an acronym … UPPERCASE text that isn't an acronym should be done with CSS's text-transform: uppercase.

Community
  • 1
Nate Green
  • 2,483
  • 2
  • 13
  • 16
  • 2
    These are implementation details, which are close to off-topic, but remember that whenever you set text-transform: uppercase you should also apply font-variant-caps: titling-caps (Open Type feature titl), because someone thought it was a good idea not to activate that automatically and couldn’t be convinced to change their mind. – Crissov Feb 05 '16 at 20:18
  • Well, it hasn’t been available for long, so it’s more about future-proofing. – Crissov Feb 05 '16 at 20:22
  • 4
    Note that text-transform: uppercase is not the same as small-caps. What you are looking for is font-variant: small-caps; which will load the actual small-caps of the font in use (provided said font has a set of small-caps) – DA01 Feb 05 '16 at 20:23
  • 1
    @DA01 True, but if the font doesn't support them, it synthesizes them, which is bad news. That's what I was driving at…better to leave them out. – Nate Green Feb 05 '16 at 20:29
  • Thanks so much! So it is formatting overlaid on small letters vs underlying structure fixed at all caps? A content creator enters text using upper and lower case letters then used CSS formatting to make it all-caps (or small caps, if the font is available), then the screen will show all caps (or small caps) and screen-readers should read it just fine. However, when a content creator types the information using the Shift or Caps lock, it will look like all-caps on the screen, small caps is not possible and the screenreader is likely to read it letter-by-letter like an acronym. – Teach Learn Feb 09 '16 at 14:56
  • @TeachLearn That's my understanding, yes. :) – Nate Green Feb 09 '16 at 14:59
0

There's nothing particular inaccessible about small caps. Some would argue they are harder to read for long blocks of text JUST AS READING IN ALL CAPS CAN GET ANNOYING but it's not technically inaccessible in any way.

Quite the contrary, one can argue that measured and appropriate use of small caps can be an excellent part of the typographers toolbox and improve the overall experience.

DA01
  • 41,799
  • 5
  • 81
  • 142