CDC COVID-19 - Bug: Language attributes are missing for the language nav section at the top

[AccessForAll]

Issue Summary

The page language is set to English in the HTML element. The language links below the header don't have their languages set in the HTML.

Steps to reproduce

Steps to reproduce the behavior:

1. View code
2. Search for nav class="languages" aria-label="Available in other languages"
3. Note that the languages don't hav attributes to indicate the content is in a different language.

Behavior

Expected behavior

The languages on the page should have lang attributes so that screen readers will pronounce them properly.

Actual behavior

There are no lang attributes, so because the page is set to English, screen readers will try to read each language name in English.

Code

Current Code

<div class="container">
                    <nav class="languages" aria-label="Available in other languages">
                        <ul>
                            <li><a href="https://espanol.cdc.gov/enes/coronavirus/2019-ncov/index.html" aria-label="Spanish">Español</a></li>
                            <li><a href="https://chinese.cdc.gov/coronavirus/2019-ncov/index.html" aria-label="Chinese">简体中文</a></li>
                            <li><a href="https://vietnamese.cdc.gov/coronavirus/2019-ncov/index.html"  aria-label="Vietnamese">Tiếng Việt</a></li>
                            <li><a href="https://korean.cdc.gov/coronavirus/2019-ncov/index.html" aria-label="Korean">한국어</a></li>
                            <li><a href="https://wwwn.cdc.gov/pubs/other-languages?Sort=Lang%3A%3Aasc">Other Languages</a></li>
                        </ul>
                    </nav>

Suggested Code

<div class="container">
                    <nav class="languages" aria-label="Available in other languages">
                        <ul>
                            <li><a lang="es" href="https://espanol.cdc.gov/enes/coronavirus/2019-ncov/index.html" aria-label="Spanish">Español</a></li>
                            <li><a lang="zh" href="https://chinese.cdc.gov/coronavirus/2019-ncov/index.html" aria-label="Chinese">简体中文</a></li>
                            <li><a lang="vi" href="https://vietnamese.cdc.gov/coronavirus/2019-ncov/index.html"  aria-label="Vietnamese">Tiếng Việt</a></li>
                            <li><a lang="ko" href="https://korean.cdc.gov/coronavirus/2019-ncov/index.html" aria-label="Korean">한국어</a></li>
                            <li><a href="https://wwwn.cdc.gov/pubs/other-languages?Sort=Lang%3A%3Aasc">Other Languages</a></li>
                        </ul>
                    </nav>

Additional References

• WCAG 2.1 Language of parts: https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts.html

[missmatsuko]

The aria-labels with the English names of the languages should also be removed for the lang attribute to be effective. Screen readers will generally read the aria-label (which is all in English) rather than the text content.

For reference: PowerMapper screen reader results for link text replaced by aria-label attribute.