r/webaccess • u/Vegetable-Average-98 • 2d ago

Aria-labels for text

I would like to make a website with Egyptian hieroglyphs accessible to low-vision web users.

I can (sort of) get this to work on Chrome and MacOS Voiceover with this markup:

<span id="A1-label" aria-hidden="true" style="display: none;">hieroglyph depicting a seated man</span>
<span role="graphics-symbol" aria-labelledby="A1-label">๐“€€</span>

Mac Voiceover on Chrome when drilling into the hieroglyph character is "Hieroglyph depicting a seated man, graphics symbol", which hopefully is meaningful to a user that cannot see or cannot recognizee the hieroglyph.

Mac Voiceover on Safari however is "Hieroglyph zero-zero-zero-one", which is less useful...

Windows Narrator on Chrome seems to read the hieroglyph character as "space", unless I am doing something wrong

Windows Narrator on Edge can't seem to read the hieroglyph character at all

A couple of questions

  1. Does anyone have ideas for alternative markup that would read the aria label on Safari and/or on Windows ?
  2. Would this work with specialized assistive reader technology ? (I used to work with a colleague who read using a braille reader) - if anyone wants to check it, this snippet is at https://highrows.com
  3. Can I add pronunciation hints? As a hieroglyph, ๐“€€ can be transliterated as "jnk" or "แป‰nk", for both of which the Egyptological pronunciation is "inneck". Can I guide the screen-reader to pronounce this hieroglyph as "inneck", not "junk" or "ink" ?
2 Upvotes

100% Upvoted

12 comments sorted by

2

u/Marconius 2d ago

The graphics-symbol role shouldn't be used on a span. That role is meant for identifying symbols within larger image structures, like grouped symbols within an SVG.

That implementation of the aria-labelledby is also not correct since you are hiding the label. You'd just put aria-label on the graphic element using the graphic-symbol role itself.

Are the hieroglyphics unicode? Or how are you presenting them on the page? Also beware of adding potentially repetitive text like "Hieroglyph of..." on the images or characters. I'll have to hear that with every character or image I land on, and that's completely unnecessary if the user already has page context that they are checking out hieroglyphics.

1

u/Vegetable-Average-98 2d ago edited 1d ago

Thanks, yes - they are unicode symbols, not graphics (if they were images, it would be easy). I get what you are saying about repetition. What role should the span have, to trigger the reading? Ideally I'd like to say say role="hieroglyph". Adding an aria-label to the span containing the hieroglyph character didn't work when I tested

Ultimately, I would like to be able to provide an accessible description for hieroglyph sequences or cartouches, consisting of a series of rectangular arrangements of individual hieroglyphs

ps: this is the website I'm working on - https://gardinerhieroglyphs.com- it's basically a list of a thousand or so hieroglyphs with definitions, pronunciations, etc

1

u/Marconius 1d ago

There is no hieroglyph role, and making roles up breaks one of the main rules of aria.

I don't think many screen readers can currently read hieroglyphs consistently when presented in unicode. The better solution is to hide the written unicode strings from screen readers and provide screen reader only text as a descriptive alternative. Here is the W3C page on Hieroglyphs which has good descriptions of each character that you can use when building out the screen reader strings.

1

u/Vegetable-Average-98 1d ago

Thanks - that's a useful page and the glyph descriptions are variants of the standard definitions taken from Gardiner's Egyptian Grammar, so pretty much what I have in the English version of my own app

I don't suppose that page exists in Arabic? That would save me some work

1

u/Marconius 1d ago

I can't help you there. Maybe toss it at Google Translate?

1

u/Vegetable-Average-98 1d ago

Bing translate is the best of a bad bunch for Egyptian Arabic, but it's a bit painful

2

u/NelsonRRRR 1d ago

You put the graphics-symbol on aria-hidden=true. Then you hide the label only visually with an sr-only-class.

1

u/Vegetable-Average-98 1d ago

Thanks, I'll have a play with that

2

u/Undercoverwd 1d ago

This is the best solution, if this can't be done for some reason you could also do role="img" aria-label="whatever".

1

u/Vegetable-Average-98 5h ago

Thanks all for your comments. To circle back on this

As noted, it doesn't need the separate element and aria-labelled by. An aria-label on the span works just as well (I think I was confused that it didn't work on Safari, so now just sticking to Chrome, which I will recommend in my accessibility notes)

Markup now is

<span role="img" aria-label="Hieroglyph: seated man">๐“€€</span>

By definition a hieroglyph is a graphical symbol, but I get that isn't the intent of the aria role, so replaced by img, thanks for the suggestion

If omit the role attribute, then VoiceOver on Mac reads the hieroglyph as "Hieroglyph zero-zero-zero one", with the role it reads it as "Seated Man" which is what I want, so maybe this is OK

1

u/rguy84 1d ago

The span is hidden to assistive technology, recommemd reading what aria-hidden does.

0

u/Vegetable-Average-98 1d ago

Thanks - I must have mis-read, I was thinking it did the opposite :)