Skip to content

Commit

Permalink
feat(docs): Add accessibility doc (#10006)
Browse files Browse the repository at this point in the history
* Created the page.

* Page content.

* Link in the blog post.

* Source attribution, language tweaks

* Fixed Prettier error.
  • Loading branch information
enzoferey authored and amberleyromo committed Nov 29, 2018
1 parent 994ac97 commit 228a866
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 0 deletions.
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

0 comments on commit 228a866

Please sign in to comment.