add product pronunciation hint for screen readers (fix #15530) #15847
Conversation
wen-2018
added
Needs Review
| <a class="m24-c-menu-item-link" href="https://fakespot.com/?{{ utm_params }}" data-link-text="Fakespot" data-link-position="topnav - products" aria-labelledby="fakespot"> | ||
| <img loading="lazy" src="{{ static('img/logos/fakespot/logo-blue.svg') }}" class="m24-c-menu-item-icon" width="32" height="32" alt=""> | ||
| <h2 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-fakespot') }}</h2> | ||
| <span id="fakespot" aria-label="fake spot"></span> |
There was a problem hiding this comment.
Lovely!
Just a quick note, another prominent occurrence for "Fakespot" is home launchpad, and products.landing page. In case the same treatment is repeated for those instances, it would probably reuse the same id target. Maybe make the id more explicit in a way to tell a bit about what function it has (without having to add explanatory comments et al.), and to be more unique in case more places refer to it over time?
(NB: Normally it would not be too much different to have an element labelledby with a reference that has no content and just its own aria-label — in which case it would be the same as defining the aria-label right away. But this reference allows for more occurrences to be labelledby with it, which was probably the plan?)
There was a problem hiding this comment.
Lovely!
Just a quick note, another prominent occurrence for "Fakespot" is home
launchpad, andproducts.landingpage. In case the same treatment is repeated for those instances, it would probably reuse the same id target. Maybe make the id more explicit in a way to tell a bit about what function it has (without having to add explanatory comments et al.), and to be more unique in case more places refer to it over time?(NB: Normally it would not be too much different to have an element labelledby with a reference that has no content and just its own aria-label — in which case it would be the same as defining the aria-label right away. But this reference allows for more occurrences to be labelledby with it, which was probably the plan?)
One-line summary
This PR adds product pronunciation hint for "Fakespot" for screen readers.
Significant changes and points to review
Navigation product menu.
Issue / Bugzilla link
#15530
Testing
I have run this through VoiceOver.