E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Malthe Jepsen
Date: Thu, Nov 09 2023 4:01AM
Subject: Best practices for handling UI elements or text in all caps
No previous message | Next message →

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

From: Patrick H. Lauke
Date: Thu, Nov 09 2023 4:08AM
Subject: Re: Best practices for handling UI elements or text in all caps
← Previous message | Next message →

On 09/11/2023 11:01, Malthe Jepsen wrote:

> Furthermore, I'm wondering if there is any WCAG criteria that one might use to argue against using all caps.

Just on this last point: no, there isn't (and I'd advise against trying
to bend an existing SC to "maybe this sort of implies that...")

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke

From: Dean.Vasile@outlook.com
Date: Thu, Nov 09 2023 5:56AM
Subject: Re: Best practices for handling UI elements or text in all caps
← Previous message | Next message →

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 ADDRESS 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
> > > >

From: David Farough
Date: Thu, Nov 09 2023 7:30AM
Subject: Re: Best practices for handling UI elements or text in all caps
← Previous message | No next message

You might check to see if there is an appropriate style guide that would apply to your content.
The Canadian government uses the Canada Style Guide. https://design.canada.ca/style-guide/

The following appears under All caps.
"All caps
Don't capitalize all the letters in a word.

Exceptions

Abbreviations (although avoid them unless they're necessary)
Military exercise or operation names (for example, Operation PROVISION)