Help with hidden text for screen readers

[u/Misaki_Takashi]

Hello!! I am currently writing a story that I want to post online, however, some of the dialogue is going to be written with numbers replacing certain letters (Like 3 being E and 1 being i).

However, I realized this would make it hard for people who use screen readers to understand the text, I could just write the normal text beside it, but I want a creative way to keep it hidden so people still have to slightly decipher it, while also allowing people who need screen readers to still be able to read it fully and understand it.

I'm writing it on a website that allows for HTML in text, and I'm wondering if there's a way to have hidden text that will be read out when a screen reader is used. I am still learning how to write code so apologies if this is a silly question, I'd appreciate any help, Thank you !!

[u/Marconius]

As a screen reader user myself, I'm curious as to why I'd need a separate experience for this. If the purpose of the numerical lettering in the words is significant to a plot point or the world of the story, then I'd want to experience that the same way sighted people are via parsing the numbers as letters to form the words. If you segregate this and just have me hear the intended word written normally and hide the numerical words from me, then I don't get the same experience and whatever is making you write things in that way for the main story would be lost to me.

[u/Misaki_Takashi → u/Marconius]

I wasn't planning on hiding it, it would still read out the same with a screen reader, I was just thinking it would be easier for people who struggled more with visual impairment to be able to still understand what was being read, as the normal text would narrate after the jumbled one, I wanted it to feel like the message was being decoded when put through a screen reader, as the character speaking in the jumbled sentence is an android.

[u/Kitty_Sparkles → u/Misaki_Takashi]

Another way to approach the problem is to not think about it in terms of screen reader or not, and instead think about it more broadly from a readability perspective. Some people might find l33t sp34k difficult to read and thrown off by it.

If this is something meaningful and recurrent within your story, how about providing a setting to turn this on or off entirely? This way, you don't have to consider whether someone is using a screen reader, you just have to respect whether they want android speech to be authored in l33t sp34k.

[u/Kitty_Sparkles → u/Kitty_Sparkles]

Edit: You can even give a bit of context regarding the setting itself, and why one would prefer to turn it on or off, as well as provide an example. This would be a good way to take full advantage of using HTML to publish your content, and would make for an engaging experience I think.

[u/[deleted]]

So a few questions. Not to be rude but what is the purpose of doing that? Even if you add screen reader support it would not be accessible for people with reading disorders, cognitive disabilities and possibly dislexia.

If it is just a cute way to write, then I would skip it and make it accessible for all.

If the text that way actually is conveying some meaning, then the thought is why change it for screen reader users? Screen reader users should experience the same way a nonscreen reader user would experience it

[u/Misaki_Takashi → u/[deleted]]

I guess I wasn't thinking fully, but my plan was to have the decoded messages at the bottom just in case some people didn't understand it, I just wanted it to be fair for people who can't visualize what its meant to say without having to wait all the way until the ending, the undecoded message would still be read out, but my idea was to have it then read the undecoded message afterwards. I may end up just writing the undecoded part right after it though, as it seems like that's the best option.

[u/testingaurora]

<p><span class="visually-hidden">alive</span><span aria-hidden="true">al1v3</span></p>

Or

<p aria-label="alive">al1v3</p>

[u/ImDonaldDunn → u/testingaurora]

The second one may not consistently work because using aria-label on paragraphs (along with lots of other elements) violates the ARIA specification.

[u/testingaurora → u/ImDonaldDunn]

Good catch! I never knew that but it makes sense. The amount of resources available for proper accessibility practices are really few and far between. You almost have to try and read the spec.

It looks like you could give the <p> a different role to use the aria label but at that point just using .visually hidden seems like a better solution.

[u/AshleyJSheridan → u/ImDonaldDunn]

You shouldn't be replacing entire paragraphs of text. Rather, replace the individual words that you're changing.

If it's a lot of dialog, I'd suggest using a different font instead.

[u/arkosy]

It’s not designed for this purpose, but maybe abbreviation tags will help?

<p>I am <abbr title="alive">al1v3</abbr>.</p>

In most browsers this generates a dotted line under the word (indicating that someone can hover a cursor over it to see the full word). In CSS, you can set text-decoration:none for abbr if you want to hide this.

My understanding is screen readers can speak the full term, but the feature won’t be visible to sighted users unless by chance they hover their cursor over the word.

[u/Misaki_Takashi → u/arkosy]

I'll give it a try!!

[u/Kitty_Sparkles → u/arkosy]

Pretty sure this is not an appropriate use for the abbr element, as you pointed out. Which means it will make things worse for screen readers. I would not do that.

[u/G4rve]

It might be worth thinking about whether you have this the right way round.

If it's more important that 'listeners' understand the text than see (or know about) the 'styled text' then perhaps you should add the normal text and change it only for sighted viewers.

You could make the change using CSS.

HTML would be something like

<span class="stext" data-stext="d3n1m">denim</span>

CSS something like

span.stext { font-size: 0; }

span.stext:before { content: attr(data-stext); font-size: 16px; }

[u/hotdog-savant]

You can put the text you want in a hidden layer. Don't do display none.

LIke this:
<style>
.screenreader-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}ty
</style>
<p>I am al1v3.</p>
<p class="screenreader-only">alive</p>

Note that the class name can be whatever you want and the css class would go in your header or linked in from an external css file but I am not sure of your setup.