An interesting notification from @cyishere popped up in my Twitter feed the other day:
I use a Chrome extension Read Aloud to read the web pages for improving my English. The reading voice for most web pages is American accent, but when it reads @CSSInRealLife, it switches to British, which is very interesting.😁
— CY is here 👩🏻💻🚀🖖🏻 (@cyishere) November 29, 2021
I replied that I thought this was likely due to the page’s lang attribute, which on this site is en-GB — British English. The default for many frameworks is en, (general English) or en-US (American English). While there might not be huge differences between those and British English, it can affect how certain words are pronounced to assistive technologies such as screenreaders. Of course, it would have a much bigger impact on web pages that are in a different language altogether, so you should always make sure you change it to the appropriate value!
Update
Kitty Giraudel mentioned that it might be best to use en rather than localised English (such as en-GB or en-US), as it allows people using screenreaders to pick the locale that they’re used to. (Link to tweet.) The only source I can find for this is the comments section of a 2015 by Adrian Roselli (On Use of the Lang Attribute). It sounds like a good call, but I’m not sure there’s a consensus. It seems not to affect spellchecking, as the browser’s settings override it. When I view this demo in Chrome the word “color” (American English spelling) is underlined as being incorrectly spelled, but in Firefox it’s the British English spelling, “colour”.
You can read more about the lang attribute on MDN.
The experience shared by @cyishere serves an important reminder that people browse the web in all sorts of ways we might not be aware of when building our sites, and we should make sure we build with that flexibility in mind. While it’s easy to see this unknowability as a hindrance, I believe that it’s something to be embraced. In building for the web, we have the opportunity to deliver content to users in a way that suits them, and the web platform provides us with all sorts of features in HTML and CSS that help us do that. Starting with semantic HTML and layering on top with progressive enhancement is a solid strategy.
Speaking of the lang attribute reminded me of Manuel Matuzović’s excellent article analysing his HTML boilerplate. It contains tons of useful information about many of the elements and attributes most of us don’t give much thought to day-to-day if, like Manuel, we recycle the same boilerplate from project to project. It’s well worth a read.