WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Dec 17, 2020 1:13PM

Yeah, this is a tricky one.
So, ideally, (and not everything is ideal), changing the langauge
should be a click action, as opposed to a select/focus action.
If possible, I'd code it as a series of links (if it loads a different
page) or toggle buttons (if the content on the page is updated).
Activating the button would update the langauge of the page.
I know the lang attribute works on a link, I'd have to test if it
works on a button.
So, if you have control and if you don't have hundreds of languages,
I'd use links or buttons for language change, not a dropdown.
For the rest, well, I think you'd have to use a custom dropdown and
see if that works. If the native one cannot update the language, it'd
be a good enough reason for creating a custom one.
I'm also curious what the behavior is like for radiobuttons.



On 12/17/20, glen walker < <EMAIL REMOVED> > wrote:
> 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?
> > > > >


--
Work hard. Have fun. Make history.