Colin MacdonaldJul 27, 2024

Web accessibility experts, I need your help. Specifically, how to properly code the Hawaiian ʻokina (glottal stop) diacritical mark for best results with screen readers (Voiceover, NVDA, JAWS).

We currently use aria-label (e.g., <span aria-label="Hawaii">Hawaiʻi</span>) and although this isn't what aria-label was designed for, we use it because screen readers typically don't know how to handle the ʻokina. (1/2)

Show threadColin MacdonaldJul 27, 2024

Would it better to use <span lang="haw">Oʻahu</span> even though the results won't be read properly, at least for the foreseeable future, by screen readers?

Or is there another solution that would provide better accessibility support while also being syntactically correct?

Thanks for your help!

#accessibility #accessibleweb #a11y #oleloHawaii (2/2)

Show threadDarrell Hilliker 👨‍🦯♾️📡
@colinmac What prevents using both attributes on the same span? The aria-label will override the text inside the span for screen readers.
Jul 27, 2024 at 4:28amWeb
Show threadColin MacdonaldJul 27, 2024
@darrell73 Thank you! So something like <span aria-label="Hawaii" lang="haw">Hawaiʻi</span>? Suppressing the (correct) Hawaiian spelling for screen readers to interpret is what we’re going for, at least until they support the language adequately.
Show threadJoshJul 27, 2024
@colinmac @darrell73 Using aria-label on a generic element (span or div with no role) has inconsistent support, which makes it a code smell that maybe the approach is off. Trying to steer pronunciation is usually a cure worse than the disease — I would probably just mark the language and leave it at that, even if current AT doesn’t give the results you’d hope. See https://adrianroselli.com/2023/04/dont-override-screen-reader-pronunciation.html by @aardrian.
Don’t Override Screen Reader Pronunciation

When many devs, testers, and authors first start listening to content through a screen reader, they are surprised to hear dates, pricing, names, abbreviations, acronyms, etc. announced differently than they expect. With the best of intentions (or branding panic) they may seek to force screen readers to announce content as…

Adrian Roselli
Show threadDarrell Hilliker 👨‍🦯♾️📡Jul 27, 2024
@press1forjosh @colinmac @aardrian I guess, but, as a screen-reader user I would rather have something than nothing at all. I do struggle when a screen reader doesn't support or inconsistently supports a particular attribute or code pattern.
Show threadAdrian Roselli, pH0Jul 27, 2024

@darrell73
Then the example of `aria-label` on a `<span>` will be a challenge given it is not allowed and therefore poorly supported (but some combos will, though I cannot recall which off the top of my head).

@press1forjosh @colinmac

Show threadColin MacdonaldJul 29, 2024
@press1forjosh @darrell73 @aardrian Sorry for my belated reply and thanks. I followed up with the Adrian Roselli post you linked to as well as some of his other posts. Great stuff. And I clearly have more research to do.