Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
AccessForAll opened this issue Apr 29, 2020 · 1 comment
Labels
bug Something isn't working CDC COVID-19 Issues logged for the CDC COVID-19 site

Comments

@AccessForAll
Copy link

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

@smhigley smhigley added bug Something isn't working CDC COVID-19 Issues logged for the CDC COVID-19 site labels Apr 29, 2020
@missmatsuko
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working CDC COVID-19 Issues logged for the CDC COVID-19 site
Projects
None yet
Development

No branches or pull requests

3 participants