When working on accessibility, a common issue you might come across is that your HTML tag doesn't have a lang attribute.
The lang attribute tells the user which language the page is written in.
Some examples of valid lang attributes are:
<!-- French content -->
<html lang="fr"></html>
Note: Find all languages codes here.
We can also extend the use-case to define specific versions of a language, for instance, British English.
<html lang="en-gb"></html>
Adding this lang tag to Next.js
In any regular plain HTML website, we would add this tag to the HTML element. However, in the case of Next.js, we don't have direct access to it.
So to add this tag, we need to use the next.config.js file.
module.exports = {
i18n: {
locales: ['en'],
defaultLocale: 'en',
},
};
If your website supports multiple languages, you can even put various values in the locales array.
The default locales are then used to set the current one.
You can even use this config to set up custom domains, but we might dive into that separately.
Alternative method
There is an alternative way of adding a custom HTML tag if you want to override multiple HTML properties.
Inside your pages directory, you can add a _document.js file.
This page will override the default Next.js document.
Inside of it, add the following structure, and you are good to go.
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang='en'>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
And that's it, two different ways of adding the lang tag in Next.js.
I like to use the config way as it's a bit cleaner and future-proof.
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
Top comments (7)
Thanks for sharing this. Do you know about the best practices for language toggles and selects in the realm of a11y?
Make them discoverable by placing them in the header or footer with each language labeled twice: once in the current locale and again in the original format. Look here for accessible select menus and at Headless UI for guardrails. Finally, Jacob Neilson has some pointed advice worth consuming.
Hi Max,
I haven't gotten that far in to tell you in detail, but perhaps @inhuofficial or @abbeyperini can shed some light on this?
Hey! I haven't built a language select, only written some i18next code, but there are some good resources out there:
Looks like one of the main gotchas is you should only use flags if you're having the user select countries - many languages are spoken in multiple countries and many countries have multiple languages spoken within their borders. Otherwise, making the component accessible depends on the HTML element you choose to use.
Oh wow, thanks for all the resources! I'm gonna look into i18next 👏
I totally agree with the flags vs languages. I prefer to use the ISO abbreviations :)
HTTP has a standardized header for communicating the user's preferred language to the web server. If Next.js doesn't already do it for you, you can use this npm module server-side to get the preferences.
Language subtags are registered with IANA. You can scrape the latest versions from this endpoint.