WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Best practices for handling UI elements or text in all caps

for

From: Dean.Vasile
Date: Nov 9, 2023 5:56AM

Using all caps in UI elements can indeed create accessibility challenges, and it's great that you're considering these issues. The `text-transform` property may not always address the problem, so using ARIA labels or alternative text can be a viable solution. It's crucial to prioritize inclusivity in design, and you could argue against all caps usage based on WCAG principles, such as ensuring text is easily readable and understandable. Consistency with accessibility standards is key to creating a more universally accessible experience.
Dean Vasile


617-799-1162

> On Nov 9, 2023, at 6:02 AM, Malthe Jepsen < <EMAIL REMOVED> > wrote:
>
> 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
> > > >