Set the lang Attribute in Gatsby: Improve Site Accessibility

Set the lang Attribute in Gatsby: Improve Site Accessibility

Set the lang Attribute in Gatsby: Improve Site Accessibility


🤗 The HTML lang Attribute

Before looking at how to set the lang attribute in Gatsby, let's first look at what it is and why it is important. You might have come across the <html> element does not have a [lang] attribute error in Lighthouse when checking your site for issues:

Set the lang Attribute in Gatsby: Lighthouse Error - Screenshot
Set the lang Attribute in Gatsby: Lighthouse Error

It must be frustrating using a fast site generator like Gatsby or SvelteKit and scoring straight 100s on everything else yet only, 98 on accessibility. One thing that makes this worse is not knowing how to fix it! We will look at three solutions for this problem below. All three are easy to implement in Gatsby so you can ace your Lighthouse test in no time. Before that though, we should answer the question, what is the lang attribute for?

The most important use of the lang attribute is in assisting screen readers. These are often used by people with accessibility needs. The lang attribute helps screen readers get the right pronunciation. For that reason, it is important not only to set the attribute, but also to ensure you set the correct region or dialect as well. More on that later. The tag appears right at the top of an HTML document. If you have developed vanilla HTML5/JavaScript websites you might already be familiar with it and know how simple it is to add it to HTML. The lang attribute should appear in your site's HTML thus:

<!DOCTYPE html>
<html lang="en-GB">

Every page on your site needs to include the attribute. Breaking it down, en tells screen readers the site is in English and GB restricts this to English as spoken in Great Britain. You can find the right code for your own language/region combination on the W3C website . Now you know what the lang attribute is, let look at how to set it in Gatsby.

🗳️ Poll

Which tool is most important to you for checking accessibility on your web apps?
Voting reveals latest results.

Set the lang Attribute in Gatsby: Method 1

How to Set the lang Attribute in Gatsby

  1. Set the lang Attribute in Gatsby: Install gatsby-plugin-html-attributes.
    At the command line change directory so that you are at the root folder of your site project. Once there, type the following command to install gatsby-plugin-html-attributes:
    npm install gatsby-plugin-html-attributes
  2. In VSCode, vim or which ever text editor you like to use, open the gatsby-config.js found in your project's root folder and add options for the plugin you just installed:
    module.exports = {
    plugins: [
    resolve: 'gatsby-plugin-html-attributes',
    options: {
    lang: 'en-GB'
    Be sure to change the language to whichever one is applicable for your site.
  3. Set the lang Attribute in Gatsby: Check your Work
    The final step is almost identical whether you use Firefox or Chrome. In Firefox open up the Developer Tools and choose Inspector. The html element should now have a lang attribute. If you use Chrome look for Elements instead of Inspector.

Set the lang Attribute in Gatsby: Method 2

If you are already using the react-helmet plugin on your Gatsby site , you can use that instead of adding the plugin we mentioned above. If you don't already have react-helmet installed, install it to get going on this method:

npm install react-helmet gatsby-plugin-react-helmet

There are no options that you need to configure for react-helmet, just let Gatsby know you are using it by editing gatsby-config.js:

module.exports = {
plugins: ['gatsby-plugin-react-helmet'],

Finally add the following code to a component that is rendered for every page. You might choose an SEO or Layout component:

import { Helmet } from 'react-helmet'
const Layout = () => (
<Helmet htmlAttributes={{ lang: 'en-GB' }} />
// other code in your component
export { Layout as default };

Set the lang Attribute in Gatsby: Method 3

This final method is also pretty easy. You do not need to install any extra components this time. We use a Gatsby Server Rendering API. Although it can sound daunting, all you need to do is create a file and add the three lines of code below (changing the language code as appropriate for your own use). You will need to create a gatsby-ssr.js file in your project's root directory (if it does not already exist):

export const onRenderBody = ({ setHtmlAttributes }) => {
setHtmlAttributes({ lang: 'en-GB' });

You can achieve the same result by editing a file src/html.jsx. However this method (above) is only three lines of code, so far quicker than the html.jsx method. You can also use onRenderBody to add scripts to the HTML head, for example. When you're looking at analytics scripts, opting for the Server Rendering API method can improve user experience. That is because those scripts will be loaded slightly later, freeing up time to get what the user is looking for displayed sooner. Read more about the this in the Gatsby documentation .

🙏🏽 Feedback

That's it! Now you know three ways to set the lang attribute in Gatsby. I hope everything was clear. However, I would love to hear from you if you have any improvements. Read on to find ways to get in touch, further below. If you have found this post useful and can afford even a small contribution, please consider supporting me through Buy me a Coffee.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Gatsby JS among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.