SFCG

Lesson 6: Missing Page Language

Learn how to use WebAIM's WAVE browser extension to check for a page's language.

Quick note: In many lessons, we'll be using a tool from WebAIM called WAVE. I personally prefer using the browser extension. You can also go to the WAVE home page and enter your web page address there to run the same tool (unless the webpage you provide blocks automated scripts from running on the website).

Background

Today's lesson is our smallest and fastest yet. It can only happen once on a page and fixing it is a breeze. While it's reported in the 2024 WebAIM Million report as only occurring for 17.1% of sites tested, that's still 171,000 of the top websites with this teeny error.

Try to imagine a single-file line of 171,000 people. If each person is an average 1 foot in diameter (it feels weird using this term LOL) and there is an appropriate social distance of 6 feet, that line is roughly 226 miles (or 363 kilometers) long. Not quite the width of my home state of Indiana which is 270 miles wide, but still pretty wide!

The use case most people probably think of when it comes to page language is translation. It's actually very useful beyond that! Assistive technology (like screen readers and text-to-speech software) use it to present information in the correct language, search engines use it to provide results in the language requested by the searcher, and it also enables using different styles (like font family) by language.

5-minute action steps

To find the language error for a page:

  1. Go to the webpage you want to test
  2. Activate the WAVE extension
  3. Click the "Details" tab or the "View details" button
  4. Uncheck all of the top-level checkboxes except for "Errors"
  5. Within the "Errors" section, uncheck everything except "Language missing or invalid"

Analyzing the results

If this error isn't occurring for the site you're testing, congrats! If it is occurring, it shouldn't take long to fix.

  1. Determine the correct language for the page
  2. Pick the correct language tag (see Choosing a language tag from W3c for help)
  3. Set the "lang" attribute on the page's "html" element

If you find this taking longer than a few minutes, make a concrete plan to come back later. If it's not within your role or ability to fix, go ahead and share your results with the individual or team responsible.

Share your results

The end goal of this exercise is to resolve the issues you've found. Tracking them in your project management system is a huge step toward that goal. Sometimes we can't fix accessibility issues immediately, but we can always chip away at them over time.

Share the results you've noted today with the person or team responsible for fixing these kinds of issues. You might start the conversation with, "I'm learning to test for page language with WebAIM's WAVE tool, and these are some of my results."