King County COVID19 - Bug: Language attributes are missing for the on all translated pages for content not in English

[alboss]

Issue Summary

Screen readers may not announce the language properly without lang attributes.

Steps to reproduce

Steps to reproduce the behavior:

1. Go to https://kingcounty.gov/depts/health/covid-19/languages.aspx
2. Click on any translated page
3. Scroll down to the content that's been translated.

Behavior

There is no language declaration, so the screen reader will inherit the page default and read the page like an American trying to sound out foreign words without knowing how to say them.

Expected behavior

Parlez-vous français, monsieur?

Actual behavior

Pahr Lez Vowze Frayn Chaise, Mawn Sewer?

Code

Current Code

<div class="col-sm-12">
   <h3 class="m-t-0"><strong>Qu'est-ce que le COVID-19?</strong></h3>
   <p>Le COVID-19 (précédemment connu sous le nom de « nouveau coronavirus ») est un 
  virus de nouvelle souche qui se transmet d'une personne à l'autre. Il est présent 
  actuellement aux États Unis et dans beaucoup d'autres pays.</p>
  ... etc. etc. etc.
</div>

Suggested Code

We are limited by what we can do in Sitecore, but within each add-on or text field in the editor, put a <div lang="en"> at the very beginning and a </div> at the very end.

<div class="col-sm-12">
  <div lang="en">
    <h3 class="m-t-0"><strong>Qu'est-ce que le COVID-19?</strong></h3>
    <p>Le COVID-19 (précédemment connu sous le nom de « nouveau coronavirus ») est 
    un virus de nouvelle souche qui se transmet d'une personne à l'autre. Il est 
    présent actuellement aux États Unis et dans beaucoup d'autres pays.</p>
    ...etc. etc. etc.
    </div>
</div>

Specifications

• WCAG Principal 3: Understandable - Information and the operation of user interface must be understandable.

Level A

• WCAG SC: 3.1.2, Language of Parts
• Severity: we don't even meet minimum criteria right now

It is important to note that in the absence of Sitecore developers able to work on the County's current platform, if we wish to fully comply with this requirement, we would have to do some fancy Javascript work to inject the language attributes into the left-hand navigation. Although that's one script we can populate downward through all pages below https://kingcounty.gov/depts/health/covid-19/languages.aspx, there's cost in terms of staff work and page load time. There's cost in terms of a Section 503 lawsuit, too, though.

Additional References

https://www.w3.org/International/questions/qa-html-language-declarations

[alboss]

Although the Public Health webmaster could open every single HTML field and put the contents inside a div, that would be rather tedious.

A reusable Javascript in the content management system's media library, that takes a value for the language and injects it into the right place would be a better solution, if we can get a Javascript developer at the county to take it on.

It will take some doing. We can’t just put it into the <div id="main-content">, because the side navigation (not translated) is inside that div. Unfortunately, the content management system isn't using an ID’d container for the actual main content.

We’d have to do something like finding the <!-- PAGE CONTENT BEGINS HERE --> comment, insert <div lang="(value)"> there, then add a </div> before the opening <footer>.

Stay tuned on this one.