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
- Does anyone have ideas for alternative markup that would read the aria label on Safari and/or on Windows ?
- 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
- 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" ?