Checka11y.css icon indicating copy to clipboard operation
Checka11y.css copied to clipboard

Published 20 hours ago • verified publisher icon jackdomleo7

lang attribute on <html> is set to a known language

Open jackdomleo7 opened this issue 4 years ago • 3 comments

Describe the new a11y feature or project enhancement

It would be nice to indicate if the value set on the lang attribute on the <HTML> is set to a know language string as defined here by w3. Although this is a very long piece of work and may prove to be better suited in a JS accessibility tool.

Link(s)

  • https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
  • https://www.w3.org/International/articles/language-tags/#rfc
  • https://r12a.github.io/app-subtags

jackdomleo7 avatar Jan 29 '21 11:01 jackdomleo7

Good idea. We could try using the @each rule in Sass

SavvasStephanides avatar Jan 29 '21 13:01 SavvasStephanides

I had an idea on this:

  • Find an API that can provide us a JSON array of all the accepted lang codes (struggling with this bit)
  • Create a JS script that will dynamically create a _lang.scss file with an SCSS equivalent array (this'll be interestingly tricky)
  • Run this script on pre-build so it runs just before we convert the SCSS to CSS
  • Voila!

Only because I don't want to manually add every lang.

jackdomleo7 avatar Oct 08 '21 11:10 jackdomleo7

I was able to find an API to do this. But after reading the w3 docs on the HTML lang attribute, it seems that a lang attribute can actually be very complex: read here.

image

At the very most, I have only ever seen language-region (e.g. en-GB, en-US or fr-CA), but this isn't to say more complex lang tags exist out there.

I could easily check for just language (e.g. en) or go a step further and check for language-region and show a warning if it doesn't match, but this could give a false warning (especially if a webpage has used more attributes than just language and region). I feel trying to string all the langiages, regions, extlangs, scripts, etc would be a huge waste of time and may not be as a helpful feature as I originally anticipated.

Interested to hear your opinion @SavvasStephanides 🤔

jackdomleo7 avatar Oct 08 '21 21:10 jackdomleo7

Closing this issue since the lang attribute can have very complex structures. We already have an error that highlights if no lang is set on the <HTML> element, and this should be enough. We could update the codes.md file for the lang error to encourage a correct format.

jackdomleo7 avatar Jan 19 '23 10:01 jackdomleo7