4

If a page loads and then uses javascript to change the language attribute on the <html> element, could that be detrimental to accessibility? Or do screen readers and other accessibility devices usually let the page load dynamic content before parsing it? And further, does it comply with WCAG 2 3.1.1? I have read this section of the spec and it does not seem to touch on this point.

In this case, the system is a single page web app that loads content in various languages based on user preference. We are also looking into 3.1.2 (adding lang to child elements), but we still need to tag the <html> element appropriately.

My current plan for implementation is to initially fix the lang to English (since that is the default language) and then change the lang attribute when the user's preferences load.

AlexMA
  • 8,952
  • 5
  • 39
  • 55
  • 1
    Great question. The accessibility tree/api gets updated when the DOM updates (but sometimes there can be a minor delay), so I'm not sure of the impact of the `lang` attribute being added to the html element on the fly. I'll need to test. You can add `lang` on the fly to generic DOM elements as needed. – Jason Apr 04 '19 at 19:09

1 Answers1

2

There is nothing in the WCAG 3.1.1 requirement that says the lang must be set on the loaded html or that prevents setting lang as the page loads. You should be fine.

It's easy to test if you have a screen reader that will switch dialects when it sees a lang property. Just try something like:

<p>dos</p>
<p lang="es">dos</p>
<p>deux</p>
<p lang="fr">deux</p>

Then if you dynamically change your page language to either "es" or "fr" see if "dos" or "duex" is pronounced the same as the <p> with the lang specified.

slugolicious
  • 8,671
  • 1
  • 20
  • 30
  • Thanks, I’ll test that out when I get a chance. Do you have a screen reader you recommend? – AlexMA Apr 07 '19 at 02:04
  • 1
    If you have a Mac, then you already have VoiceOver (Cmd+Shift+F5 turns it on, I think). If you have a PC, then NVDA is a free screen reader (optional donation) - https://www.nvaccess.org/download/. JAWS is a very popular reader but requires a license, although there is a 40-minute trial version - https://www.freedomscientific.com/products/software/jaws/. Sometimes you need to install extra language packs to hear the language change. – slugolicious Apr 07 '19 at 16:43
  • This does seems to work correctly with Mac VoiceOver (just tested it). – AlexMA Apr 07 '19 at 23:16