Skip to content

The Accessibility category

Jump to bottom
Rémy Greinhofer edited this page Oct 22, 2018 · 7 revisions

The problems

This audit already has a high score, but we can very easily do better. The only problem identified by Lighthouse is:

  1. element does not have a [lang] attribute

Updating the attribute

Again, Next.js has very good documentation on the subject.

Let's create a ./pages/_document.js file:

import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx)
        return { ...initialProps }
    }

    render() {
        return (
            <html lang="en">
                <Head>
                    <style>{`
                    * {
                        margin: 0;
                        padding: 0;
                    }
                    html, body {
                        width: 100%;
                        min-height: 100%;
                        font-family: Helvetica, sans-serif;
                    }
                    `}
                    </style>
                </Head>
                <body className="custom_class">
                    <Main />
                    <NextScript />
                </body>
            </html>
        )
    }
}

We tweaked the code from the documentation a little bit to set our global CSS selectors.

Restart the dev server, run the Accessibility audit in lighthouse again. We now have a score of 💯!

⬅️ The Best Practices category | 🏠 PWA | The SEO category ➡️

Custom footer

Clone this wiki locally