Can page language be set at run time for accessibility and WCAG 2 3.1.1 compliance?

4
votes

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.

1
javascripthtmlaccessibilitywcag2.0
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

1 Answers

2
votes

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.