ARIA Labels for CSS-induced Uppercase?

Slevin#7 · 05-14-2025, 12:04 AM

Hello everybody,

To begin with I should mention that I was told readers may spell UPPERCASE words char by char rather than reading them as one word. So the first advice was to add aria labels for all uppercase words to ensure accessibility for everyone.

Then I've asked the AI of my trust whether to apply aria-label für headlines, which are transformed to UPPERCASE via CSS, or not. What I've got were two different answers within one week.

1. Yes, I have to apply aria-labels, since the reader will parse the visual output rather than the DOM, meaning it will read for e.g. "THE HEADLINE OF LOVE", which may cause problems to some readers which will try to spell the headline char by char.

2. No, no aria-labels required, since the reader pulls the content from the DOM, where the headline resides still in classic title-case, since no CSS is applied yet.

Can someone please help me to understand which is the way to go.
Many thanks in advance for any help

pdurrant · 05-14-2025, 06:25 AM

I suspect it depends on the reading software which it does. Bu I have no specific knowledge.

Turtle91 · 05-14-2025, 06:48 AM

Hmmm. Great question!

I, also, have no specific knowledge but I would hope that the device/app would follow the convention that only content and structure are in the html while styling is in the css. Thus it should be reading from the DOM.

Have you tested this on any actual assistance devices?

Edit:
Welcome to MR!

Slevin#7 · 05-14-2025, 08:56 AM

No, I haven't tested it, since I don't own any specific eBook devices. But I'm pretty sure, different devices will handle it differently.

As a former software developer I know for fact that you can't please every tool or app when dealing with HTML and CSS, or any other frontsite rendering approach. That's just headache stuff.

So I've made my peace with what's common solution and don't bother how proprietary wannabes think they want the world go round.

And for that, I thought I'd ask how you guys handle this, so I can follow common practice. In the end it's most likely best to keep it overall simple and basic. But when you can do some improvements without spending hours of trial and error I'd be happy.

Currently I'll stick with adding aria-labels, since this can be done automatically. But it adds additional code, and if it's redundant I'd rather prefer to omit it.

05-14-2025, 12:04 AM	#1
Slevin#7 Enthusiast Posts: 33 Karma: 10 Join Date: May 2025 Device: iPad	ARIA Labels for CSS-induced Uppercase? Hello everybody, To begin with I should mention that I was told readers may spell UPPERCASE words char by char rather than reading them as one word. So the first advice was to add aria labels for all uppercase words to ensure accessibility for everyone. Then I've asked the AI of my trust whether to apply aria-label für headlines, which are transformed to UPPERCASE via CSS, or not. What I've got were two different answers within one week. 1. Yes, I have to apply aria-labels, since the reader will parse the visual output rather than the DOM, meaning it will read for e.g. "THE HEADLINE OF LOVE", which may cause problems to some readers which will try to spell the headline char by char. 2. No, no aria-labels required, since the reader pulls the content from the DOM, where the headline resides still in classic title-case, since no CSS is applied yet. Can someone please help me to understand which is the way to go. Many thanks in advance for any help Last edited by Slevin#7; 05-14-2025 at 12:07 AM. Reason: fixed title spelling error

05-14-2025, 06:48 AM	#3
Turtle91 A Hairy Wizard Posts: 3,335 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	Hmmm. Great question! I, also, have no specific knowledge but I would hope that the device/app would follow the convention that only content and structure are in the html while styling is in the css. Thus it should be reading from the DOM. Have you tested this on any actual assistance devices? Edit: Welcome to MR! Last edited by Turtle91; 05-14-2025 at 08:02 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Likebook Mars - Latest Update Induced Problems	squiresque	Boyue	3	02-06-2019 05:21 PM
David Farland's Son - Medically Induced Coma	jaxx6166	General Discussions	24	04-22-2013 04:15 AM

05-14-2025, 06:25 AM	#2
pdurrant The Grand Mouse 高貴的老鼠 Posts: 73,812 Karma: 315126578 Join Date: Jul 2007 Location: Norfolk, England Device: Kindle Oasis	I suspect it depends on the reading software which it does. Bu I have no specific knowledge.

05-14-2025, 08:56 AM	#4
Slevin#7 Enthusiast Posts: 33 Karma: 10 Join Date: May 2025 Device: iPad	No, I haven't tested it, since I don't own any specific eBook devices. But I'm pretty sure, different devices will handle it differently. As a former software developer I know for fact that you can't please every tool or app when dealing with HTML and CSS, or any other frontsite rendering approach. That's just headache stuff. So I've made my peace with what's common solution and don't bother how proprietary wannabes think they want the world go round. And for that, I thought I'd ask how you guys handle this, so I can follow common practice. In the end it's most likely best to keep it overall simple and basic. But when you can do some improvements without spending hours of trial and error I'd be happy. Currently I'll stick with adding aria-labels, since this can be done automatically. But it adds additional code, and if it's redundant I'd rather prefer to omit it.

Advert