"alt" attribute but for text?

Help
1

i’m working on a shrine to the drag queen M1ss Jade So. i’m worried that for screenreaders the “M1ss” will be read weirdly (when it’s just meant to be read as “Miss”). i know the “alt” tag is just for images, so i was wondering if there was a similar alternative for text? or should i not worry about it?

2

i haven’t tested it with a screenreader myself, but this example from WCAG recommends using <abbr>! so you’d include something like this:

<abbr title="Miss">M1ss</abbr>
2 Likes
3

Unfortunately it looks like <abbr> isn’t consistently exposed:

Don’t use <abbr> with or without title. Exposure continues to be inconsistent across browsers and assistive technologies. Some set of users will always miss some piece of information.

Explain abbreviations, acronyms, initialisms, numeronyms, etc. on first use and then feel free to fall back to the shortened form.

(Adrian Roselli is basically the first person I check when looking for comprehensive overviews of specific things with various assistive tech and scenarios.)

“M1ss” is closest to a numeronym, so maybe his suggestion applies? “M1ss Jade So (Miss Jade So)” the first time on a page, then subsequent times use “M1ss Jade So” alone?

This has the benefit of helping with cognitive accessibility, if any sighted folks aren’t able to intuit that the 1 is an i.

2 Likes
4

I say aria-label is better than <abbr> in this case. Something like this:

<span aria-label=Miss>M1ss</span>
1 Like
5

I’m don’t think aria-label is supported for non-interactive elements without roles (like span).

The aria-label attribute is intended for interactive elements only. When placed on non-interactive elements, such as those listed above, it may not be read or may confuse your users as a non-interactive element that acts like an interactive one.
MDN.

While looking around, I came across another article, Don’t Override Screen Reader Pronunciation. It’s more general, but I think it probably applies here? Screen reader users have likely encountered words with numbers replacing letters before. If it sounds weird, they can step through it letter by letter to learn how her name is spelled and use surrounding text (like the pronunciation in my suggestion) to figure it out.

1 Like
6

whoa, i didn’t know this! i’m feeling a little betrayed by WCAG; they’re supposed to be the experts! :devastated:

i’ll check out more of Adrian’s site. i’m impressed by how thorough the testing is. thanks for sharing this! i’m always happy to be corrected and learn something new.

7

In your specific case, I wouldn’t bother, but in general, there are 2 ways you can achieve this:

A visually hidden block, primarily used for icons:

<span aria-hidden="true">Incomprehensible mess here</span>
<span class="visually-hidden">Proper caption here</span>

Where:

.visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

And an image role, primarily used for ASCII art:

<pre role="img" aria-label="A snake with really big ears">
    8===D
</pre>
2 Likes
8

You’re welcome!

And yeah, as far as I understand it, WCAG is definitely the correct resource when it comes to success criteria (the end result you aim for), but sometimes their techniques/suggested code are more aspirational. But other times the techniques do work reliably; the page you linked includes the second technique @npw mentioned. :slightly_smiling_face: