Skip to main content

Making Your Site Accessible

The Gatsby team is passionate about helping you create websites that work for everyone, with helpful defaults that bake in web accessibility as well as performance optimizations. By making your website accessible to people with disabilities, you can make more inclusive sites that reach and remove barriers for more people on the Internet.

What is accessibility?

Back in the early days of the Web, Tim Berners-Lee, inventor of the World Wide Web, said:

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

The web of today is an important resource in many aspects of life such as health care, education, or commerce. Accessibility is an important consideration when building for the web.

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. But not only people with permanent disabilities benefit from it. Accessibility also benefits people with temporary disabilities. For example, imagine being in an environment where you cannot listen to audio or you can’t use a computer because of a broken arm.

Accessibility supports social inclusion for everyone, and has a strong business case.

Gatsby helps build in accessibility

While ultimately it’s up to you to develop your site with accessibility in mind, Gatsby aims to provide as much out-of-the-box support as possible.

Accessible routing

One of the most common features of every site is navigation. People should be able to navigate across your pages and content in an intuitive and accessible way.

That’s why every Gatsby site aims to have an accessible navigation experience by default. Thanks to @reach/router, a routing library for React, Gatsby handles page announcements for screen readers on page change. We’re actively making improvements to this experience, and we welcome your feedback.

Since the second major release, your Gatsby sites use @reach/router under the hood. While additional accessibility testing is always a good idea, the Gatsby Link Component wraps @reach/router’s Link component to improve accessibility without you having to think about it.

Gatsby builds HTML pages by default

For websites, rendering static HTML pages means that JavaScript isn’t required to access and navigate through content. Gatsby compiles HTML pages by default from React components using Node.js, meaning you don’t have to worry about setting up server-rendering yourself to support progressive enhancement. With Gatsby’s static support out of the box, you can build dynamic sites that still enable user access without requiring client-side scripting.

Linting with eslint-jsx-plugin-a11y

Gatsby ships with eslint-config-react-app by default, which includes the eslint-jsx-plugin-a11y package. eslint-plugin-jsx-a11y is an accessibility linting tool for your code, helping you develop more inclusive Gatsby projects. This plugin encourages you to include alternative text for image tags, validates ARIA props, and eliminates redundant role properties, among other things. It’s a start to testing for accessibility: further recommendations can be found below.

Including this plugin and its recommended rule set reduces the time required to implement accessibility by reminding you throughout development. The rules enabled in eslint-plugin-jsx-a11y by default can be customized in .eslintrc.

For more on supported rules, check out the docs for eslint-plugin-jsx-a11y.

How to improve accessibility?

Accessibility by default is a win for everyone. Here’s a starting point for accessibility testing when making a Gatsby site or theme:

Accessibility resources

Edit this page on GitHub
Docs
Tutorials
Plugins
Blog
Showcase