diff --git a/docs/blog/2018-09-27-reach-router/index.md b/docs/blog/2018-09-27-reach-router/index.md index ff31832199fa1..d16888c8ba95e 100644 --- a/docs/blog/2018-09-27-reach-router/index.md +++ b/docs/blog/2018-09-27-reach-router/index.md @@ -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: diff --git a/docs/docs/making-your-site-accessible.md b/docs/docs/making-your-site-accessible.md new file mode 100644 index 0000000000000..e1f5f207a3836 --- /dev/null +++ b/docs/docs/making-your-site-accessible.md @@ -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. diff --git a/www/src/data/sidebars/doc-links.yaml b/www/src/data/sidebars/doc-links.yaml index a000b142d512f..6f807c81020f7 100644 --- a/www/src/data/sidebars/doc-links.yaml +++ b/www/src/data/sidebars/doc-links.yaml @@ -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: