WebAIM - Web Accessibility In Mind

E-mail List Archives

can you make a native <select>/<option> honor the LANG attribute?

for

From: glen walker
Date: Dec 17, 2020 10:35AM

I love to demo how JAWS will switch voices/accents when it encounters
language changes on a webpage. (I have not been able to get NVDA to do
that, even when I have different languages installed.)

When there's a feature to change the language, and the feature is a custom
element, it's easy to put the LANG attribute on the different language
elements. But if we want to honor semantic html and encourage the first
rule of ARIA use and recommend the use of a native <select> over a custom
combo, how do you get the language honored?

For example, if you go to the UPS home page,
https://www.ups.com/us/en/global.page (if you've been to UPS before and
already selected a language, you'll have to bring up a private or incognito
browser window to get the language selection again), there are options to
choose your location. The list of languages has the LANG attribute on the
<li> elements. JAWS switches accents just fine.

But if you go to Thoughtexchange,
https://my.thoughtexchange.com/scroll/693698427, they have a native
<select> for the languages. I tried putting the LANG attribute on the
<option> elements (via the code inspector) but it didn't cause JAWS to
change languages. (On other pages where I add LANG dynamically via the
code inspector, it works, so this isn't an issue with JAWS not updating its
buffer or anything. I also tried adding LANG before starting JAWS.)

LANG is a global attribute (
https://www.w3.org/TR/html53/dom.html#global-attributes-2) so technically
can be used on any element and in theory should work on <option>.

Perhaps this is a bug in the browser not surfacing the language to
assistive tech. I tried it on Firefox, Chrome, and Safari. VoiceOver is
similar to JAWS in that it'll switch voices based on the language. The UPS
page works with Mac/VoiceOver but a <select>/<option> with the LANG
attribute does not.

Is this a case where we would recommend a custom element instead of a
native one?