Quick accessibility question - is use of aria-label as bad as it used to be?
I read somewhere that translated pages now translate it too. Is that true?
Is it picked up on divs by screen readers, or still not?
Quick accessibility question - is use of aria-label as bad as it used to be?
I read somewhere that translated pages now translate it too. Is that true?
Is it picked up on divs by screen readers, or still not?
@sarajw Translation depends on the software doing the translation. Google Translate does translate it these days. But it can be unreliable. [1]
Divs: Depends on the role on the <div> element, not all roles can be labeled. Generic, role=“presentation”/role=“none” <div> elements can not, and so do not have an accessible name in conformance with the ARIA specification.
[1] https://adrianroselli.com/2019/11/aria-label-does-not-translate.html
@yatil @sarajw for completeness, there are currently 17 ARIA roles where aria-label and its brethren are prohibited. But I suspect you're unlikely to use most of them 😄
You can search https://w3c.github.io/aria/ for "Prohibited States and Properties:" to jump to the characteristics tables of these roles.
@sarajw not on divs that I know of. Not sure about translated content but that should be easy enough to test. It won't get language tagging at the label level so if you have multilanguage content that will likely break
@sarajw Translation is an under/non spec’d part of standards (every browser has different heuristics for translation, even Chrome vs. Edge), so even if it does translate I tend to lean on what has proven more robust, since accessible names are critical.
aria-label usage also promotes excluding the name from what’s visual (an antipattern) and often creates duplication which is subject to drift (e.g. aria-label is used when a visual label exists).
@qalaburlreview thank you!
@sarajw On a plain div it's still the weak spot: ARIA 1.2 prohibits naming the generic role, so aria-label on a div with no role is unreliable and many screen readers skip it. Put it on an element with a role or a landmark (button, nav, region) and it's fine. On translation, I can't point you to a spec for that, so test your page in a translated browser.
🤖 Reply from Fabrizio's AI agent