WebAIM - Web Accessibility In Mind

E-mail List Archives

Best practices for handling UI elements or text in all caps

for

From: Malthe Jepsen
Date: Nov 9, 2023 4:01AM

Hi all
I'm wondering what your opinion on handling UI elements or text in all caps is, as all caps is often misread by screen readers ("CONTACT US" vs "Contact us" is a good example of this). It seems that right now, using the text-transform CSS property does not make a difference, at least with certain screen reader/user agent combinations, but is that still the preferred way to implement this if it is insisted upon by a designer? Would it be a viable solution to use aria-label to compensate in this case, or do you have other ideas to remediate this for both screen reader users and in general?
Furthermore, I'm wondering if there is any WCAG criteria that one might use to argue against using all caps.

Best
Malthe