Web designers have a responsibility to think about users with disabilities when building content. That extends to the visual appearance of fonts — and whether they’re presented in all-caps.
In this article, we’ll discuss how uppercase headings affect accessibility. If you’re looking for a quick answer, though, we’ll give it to you right away: You can use all-caps headings, but the best practice is to use a standard capitalization scheme.
What does WCAG say about all-caps headings?
The Web Content Accessibility Guidelines (WCAG) does not have specific guidelines for all-caps text. In fact, WCAG doesn’t provide much guidance for choosing typefaces (and as we’ve discussed in earlier blogs, digital accessibility won’t dramatically restrict your design options or make your websites ugly).
WCAG simply requires text to maintain an appropriate level of contrast with its background. The guidelines also require appropriate font sizes, but stops short of requiring specific fonts.
But remember, accessibility isn’t just about compliance with WCAG. The goal of inclusive design is to create products that work better for everyone, and all-caps headings can present issues for some users:
- All-caps text may be difficult to read for people with dyslexia and other language disorders.
- Certain font choices may make uppercase headings less understandable for all visual users.
- Some older screen readers (software that converts text to audio) and text-to-speech (TTS) software may read capitalized text letter-by-letter.
- Even on full-featured screen readers, capitalization may affect pronunciation depending on the user’s verbosity settings.
Use uppercase headings in an accessible way
While uppercase headings can impact accessibility, some people prefer them in specific situations. Just as there’s no “perfect font" for accessibility, there’s no hard-and-fast rule that you cannot use your caps lock key.
In some contexts, all-caps headings make perfect sense. For example, newspapers might use uppercase headings for articles, which helps people quickly identify the most important information on the page. A theater’s website might put the movie titles in all-caps to draw users' attention, or an eCommerce website might use all-caps for product names to improve the visual organization of a detail-rich page.
There’s nothing wrong with any of these practices. If you decide to use all-caps, however, we recommend following these tips:
- Limit the length of your headings where possible. This is a good practice in general; if your subheadings are longer than one line, you should probably trim them a bit.
- Choose a widely supported, sans serif font. Read more: Best Fonts To Use for Website Accessibility.
- If necessary, add letter-spacing to improve readability. However, if you adjust the spacing, make sure that your content can be magnified without overlapping other page content. Read more: Give Yourself an Accessibility Test: Zoom Your Page to 200%.
- Use appropriate HTML to identify your headings, then use CSS to style your headings as needed. Read more: Why Headings Aren't Simply Style Elements.
The bottom line: You can use all-caps sparingly — as long as you think about your readers when creating your designs. Ultimately, your typeface, font size, and font color are more important for accessibility.
For more tips, download our free eBook: Developing the Accessibility Mindset.
