Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility docs page #10006

Merged
merged 5 commits into from
Nov 29, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/blog/2018-09-27-reach-router/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ Related Gatsby docs:
- [V2 Migration Guide](/docs/migrating-from-v1-to-v2/#migrate-from-react-router-to-reachrouter)
- [Gatsby Link API reference](/docs/gatsby-link/)
- [V2 announcement blog post](/blog/2018-09-17-gatsby-v2/)
- [Making your site accessible](/docs/making-your-site-accessible)

External references:

Expand Down
37 changes: 37 additions & 0 deletions docs/docs/making-your-site-accessible.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
title: "Making your site accessible"
---

## What is accessibility?

Back in the early days of the Web, Tim Berners-Lee, inventor of the World Wide Web, [said](https://www.w3.org/Press/IPO-announce):

> "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](https://www.w3.org/WAI/fundamentals/accessibility-intro/#what) 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 a environment where you cannot listen to audio or if you had a broken arm.

Accessibility [supports](https://www.w3.org/standards/webdesign/accessibility#case) 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 has an accessible navigation experience by default.

It is possible thanks to [@reach/router](https://reach.tech/router), a routing library for React, that provides focus management on page change. It also has a ~70% smaller bundle size than the famous [react-router](https://github.com/ReactTraining/react-router).

Since the [second major release](https://www.gatsbyjs.org/blog/2018-09-17-gatsby-v2/), your Gatsby sites use `@reach/router` under the hood. The [Gatsby Link Component](https://www.gatsbyjs.org/docs/gatsby-link/) wraps [@reach/router's Link component](https://reach.tech/router/api/Link), so you don't need to think about it.

## How to improve accessibility?

Accessibility by default is a win for everyone. Learn more about web accessibility in general:

- [Free course](https://www.udacity.com/course/web-accessibility--ud891) by Google and Udacity.
- [WebAIM introduction](https://webaim.org/intro/) to web accessibility.
2 changes: 2 additions & 0 deletions www/src/data/sidebars/doc-links.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -222,6 +222,8 @@
link: /docs/creating-a-sitemap/
- title: Linking between pages
link: /docs/linking-between-pages/
- title: Making your site accessible
link: /docs/making-your-site-accessible
- title: Routing
link: /docs/routing/
items:
Expand Down