From e95b65d685df9ce2acdf2070ec3c67176671b54d Mon Sep 17 00:00:00 2001
From: Almero Steyn <almero.steyn@gmail.com>
Date: Mon, 26 Jun 2017 19:17:05 +0200
Subject: [PATCH] [Docs: A11y] Add accessibility docs (#9519)

* [Docs: A11y] Add accessibility docs

* Fix the link

* Replace link image

* Tweak style
---
 _data/nav_docs.yml          |   2 +
 docs/accessibility.md       | 278 ++++++++++++++++++++++++++++++++++++
 img/docs/keyboard-focus.png | Bin 0 -> 7256 bytes
 3 files changed, 280 insertions(+)
 create mode 100644 docs/accessibility.md
 create mode 100644 img/docs/keyboard-focus.png

diff --git a/_data/nav_docs.yml b/_data/nav_docs.yml
index 1a015d25..0e00373a 100644
--- a/_data/nav_docs.yml
+++ b/_data/nav_docs.yml
@@ -52,6 +52,8 @@
       title: Higher-Order Components
     - id: integrating-with-other-libraries
       title: Integrating with Other Libraries
+    - id: accessibility
+      title: Accessibility
 - title: Reference
   items:
     - id: react-api
diff --git a/docs/accessibility.md b/docs/accessibility.md
new file mode 100644
index 00000000..6887820a
--- /dev/null
+++ b/docs/accessibility.md
@@ -0,0 +1,278 @@
+---
+id: accessibility
+title: Accessibility
+permalink: docs/accessibility.html
+redirect_from:
+  - "docs/index.html"
+---
+
+## Why Accessibility?
+
+Web accessibility (also referred to as [**a11y**](https://en.wiktionary.org/wiki/a11y)) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages.
+
+React fully supports building accessible websites, often by using standard HTML techniques.
+
+## Standards and Guidelines
+
+### WCAG
+
+The [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag) provides guidelines for creating accessible web sites.
+
+The following WCAG checklists provide an overview:
+
+- [WCAG checklist from Wuhcag](https://www.wuhcag.com/wcag-checklist/)
+- [WCAG checklist from WebAIM](http://webaim.org/standards/wcag/checklist)
+- [Checklist from The A11Y Project](http://a11yproject.com/checklist.html)
+
+### WAI-ARIA
+
+The [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria) document contains techniques for building fully accessible JavaScript widgets.
+
+Note that all `aria-*` HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be lowercased:
+
+```javascript{3,4}
+<input
+  type="text" 
+  aria-label={labelText}
+  aria-required="true"
+  onChange={onchangeHandler}
+  value={inputValue}
+  name="name"
+/>
+```
+
+## Accessible Forms
+
+### Labeling
+Every HTML form control, such as `<input>` and `<textarea>`, needs to be labeled accessibly. We need to provide descriptive labels that are also exposed to screen readers.
+
+The following resources show us how to do this:
+
+- [The W3C shows us how to label elements](https://www.w3.org/WAI/tutorials/forms/labels/)
+- [WebAIM shows us how to label elements](http://webaim.org/techniques/forms/controls)
+- [The Paciello Group explains accessible names](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
+
+Although these standard HTML practices can be directly used in React, note that the `for` attribute is written as `htmlFor` in JSX:
+
+```javascript{1}
+<label htmlFor="namedInput">Name:</label>
+<input id="namedInput" type="text" name="name"/>
+```
+
+### Notifying the user of errors
+
+Error situations need to be understood by all users. The following link show us how to expose error texts to screen readers as well:
+
+- [The W3C demonstrates user notifications](https://www.w3.org/WAI/tutorials/forms/notifications/)
+- [WebAIM looks at form validation](http://webaim.org/techniques/formvalidation/)
+
+## Focus Control
+
+Ensure that your web application can be fully operated with the keyboard only: 
+
+- [WebAIM talks about keyboard accessibility](http://webaim.org/techniques/keyboard/)
+
+### Keyboard focus and focus outline
+
+Keyboard focus refers to the current element in the DOM that is selected to accept input from the keyboard. We see it everywhere as a focus outline similar to the that shown in the following image:
+
+<img src="/react/img/docs/keyboard-focus.png" alt="Blue keyboard focus outline around a selected link." />
+
+Only ever use CSS that removes this outline, for example by setting `outline: 0`, if you are replacing it with another focus outline implementation.
+
+### Mechanisms to skip to desired content
+
+Provide a mechanism to allow users to skip past navigation sections in your application as this assists and speeds up keyboard navigation.
+
+Skiplinks or Skip Navigation Links are hidden navigation links that only become visible when keyboard users interact with the page. They are very easy to implement with 
+internal page anchors and some styling:
+
+- [WebAIM - Skip Navigation Links](http://webaim.org/techniques/skipnav/)
+
+Also use landmark elements and roles, such as `<main>` and `<aside>`, to demarcate page regions as assistive technology allow the user to quickly navigate to these sections.
+
+Read more about the use of these elements to enhance accessibility here:
+
+- [Deque University - HTML 5 and ARIA Landmarks](https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html)
+
+### Programmatically managing focus
+
+Our React applications continuously modify the HTML DOM during runtime, sometimes leading to keyboard focus being lost or set to an unexpected element. In order to repair this, 
+we need to programmatically nudge the keyboard focus in the right direction. For example, by resetting keyboard focus to a button that opened a modal window after that modal window is closed.
+
+The Mozilla Developer Network takes a look at this and describes how we can build [keyboard-navigable JavaScript widgets](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
+
+To set focus in React, we can use [Refs to Components](refs-and-the-dom.html).
+
+Using this, we first create a ref to an element in the JSX of a component class:
+
+```javascript{2-3,7}
+render() {
+  // Use the `ref` callback to store a reference to the text input DOM
+  // element in an instance field (for example, this.textInput).
+  return (
+    <input
+      type="text"
+      ref={(input) => { this.textInput = input; }} />
+  );
+}
+```
+
+Then we can focus it elsewhere in our component when needed:
+
+ ```javascript
+ focus() {
+   // Explicitly focus the text input using the raw DOM API
+   this.textInput.focus();
+ }
+ ```
+
+A great focus management example is the [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). This is a relatively rare example of a fully accessible modal window. Not only does it set initial focus on 
+the cancel button (preventing the keyboard user from accidentally activating the success action) and trap keyboard focus inside the modal, it also resets focus back to the element that 
+initially triggered the modal.
+
+>Note:
+
+>While this is a very important accessibility feature, it is also a technique that should be used judiciously. Use it to repair the keyboard focus flow when it is disturbed, not to try and anticipate how
+>users want to use applications.
+
+## More Complex Widgets
+
+A more complex user experience should not mean a less accessible one. Whereas accessibility is most easily achieved by coding as close to HTML as possible,
+even the most complex widget can be coded accessibly.
+
+Here we require knowledge of [ARIA Roles](https://www.w3.org/TR/wai-aria/roles) as well as [ARIA States and Properties](https://www.w3.org/TR/wai-aria/states_and_properties). 
+These are toolboxes filled with HTML attributes that are fully supported in JSX and enable us to construct fully accessible, highly functional React components.
+
+Each type of widget has a specific design pattern and is expected to function in a certain way by users and user agents alike:
+
+- [WAI-ARIA Authoring Practices - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
+- [Heydon Pickering - ARIA Examples](http://heydonworks.com/practical_aria_examples/)
+- [Inclusive Components](https://inclusive-components.design/)
+
+## Other Points for Consideration
+
+### Setting the language
+
+Indicate the human language of page texts as screen reader software uses this to select the correct voice settings:
+
+- [WebAIM - Document Language](http://webaim.org/techniques/screenreader/#language)
+
+### Setting the document title
+
+Set the document `<title>` to correctly describe the current page content as this ensures that the user remains aware of the current page context:
+
+- [WCAG - Understanding the Document Title Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)
+
+We can set this in React using the [React Document Title Component](https://github.com/gaearon/react-document-title).
+
+### Color contrast
+
+Ensure that all readable text on your website has sufficient color contrast to remain maximally readable by users with low vision:
+
+- [WCAG - Understanding the Color Contrast Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
+- [Everything About Color Contrast And Why You Should Rethink It](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
+- [A11yProject - What is Color Contrast](http://a11yproject.com/posts/what-is-color-contrast/)
+
+It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](http://jxnblk.com/colorable/).
+
+Both the aXe and WAVE tools mentioned below also include color contrast tests and will report on contrast errors.
+
+If you want to extend your contrast testing abilities you can use these tools:
+
+- [WebAIM - Color Contrast Checker](http://webaim.org/resources/contrastchecker/)
+- [The Paciello Group - Color Contrast Analyzer](https://www.paciellogroup.com/resources/contrastanalyser/)
+
+## Development and Testing Tools
+
+There are a number of tools we can use to assist in the creation of accessible web applications.
+
+### The keyboard
+
+By far the easiest and also one of the most important checks is to test if your entire website can be reached and used with the keyboard alone. Do this by:
+
+1. Plugging out your mouse.
+1. Using `Tab` and `Shift+Tab` to browse.
+1. Using `Enter` to activate elements.
+1. Where required, using your keyboard arrow keys to interact with some elements, such as menus and dropdowns. 
+
+### Development assistance
+
+We can check some accessibility features directly in our JSX code. Often intellisense checks are already provided in JSX aware IDE's for the ARIA roles, states and properties. We also 
+have access to the following tool:
+
+#### eslint-plugin-jsx-a11y
+
+The [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) plugin for ESLint provides AST linting feedback regarding accessibility issues in your JSX. Many
+IDE's allow you to integrate these findings directly into code analysis and source code windows.
+
+[Create React App](https://github.com/facebookincubator/create-react-app) has this plugin with a subset of rules activated. If you want to enable even more accessibility rules, 
+you can create an `.eslintrc` file in the root of your project with this content:
+                                                                                                      
+  ```json
+  {
+    "extends": ["react-app", "plugin:jsx-a11y/recommended"],
+    "plugins": ["jsx-a11y"]
+  }
+  ```
+
+### Testing accessibility in the browser
+
+A number of tools exist that can run accessibility audits on web pages in your browser. Please use them in combination with other accessibility checks mentioned here as they can only
+test the technical accessibility of your HTML.
+
+#### aXe, aXe-core and react-axe
+
+Deque Systems offers [aXe-core](https://www.deque.com/products/axe-core/) for automated and end-to-end accessibility tests of your applications. This module includes integrations for Selenium.
+
+[The Accessibility Engine](https://www.deque.com/products/axe/) or aXe, is an accessibility inspector browser extension built on `aXe-core`.
+
+You can also use the [react-axe](https://github.com/dylanb/react-axe) module to report these accessibility findings directly to the console while developing and debugging.
+
+#### WebAIM WAVE
+
+The [Web Accessibility Evaluation Tool](http://wave.webaim.org/extension/) is another accessibility browser extension.
+
+#### Accessibility inspectors and the Accessibility Tree
+
+[The Accessibility Tree](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) is a subset of the DOM tree that contains accessible objects for every DOM element that should be exposed 
+to assistive technology, such as screen readers.
+
+In some browsers we can easily view the accessibility information for each element in the accessibility tree:
+
+- [Activate the Accessibility Inspector in Chrome](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a)
+- [Using the Accessibility Inspector in OS X Safari](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html)
+
+### Screen readers
+
+Testing with a screen reader should form part of your accessibility tests.
+
+Please note that browser / screen reader combinations matter. It is recommended that you test your application in the browser best suited to your screen reader of choice.
+
+#### NVDA in FireFox
+
+[NonVisual Desktop Access](https://www.nvaccess.org/) or NVDA is an open source Windows screen reader that is widely used.
+
+Refer to the following guides on how to best use NVDA:
+
+- [WebAIM - Using NVDA to Evaluate Web Accessibility](http://webaim.org/articles/nvda/)
+- [Deque - NVDA Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)
+
+#### VoiceOver in Safari
+
+VoiceOver is an integrated screen reader on Apple devices. 
+
+Refer to the following guides on how activate and use VoiceOver:
+
+- [WebAIM - Using VoiceOver to Evaluate Web Accessibility](http://webaim.org/articles/voiceover/)
+- [Deque - VoiceOver for OSX Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
+- [Deque - VoiceOver for iOS Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts)
+
+#### JAWS in Internet Explorer
+
+[Job Access With Speech](http://www.freedomscientific.com/Products/Blindness/JAWS) or JAWS, is a prolifically used screen reader on Windows. 
+
+Refer to the following guides on how to best use JAWS:
+
+- [WebAIM - Using JAWS to Evaluate Web Accessibility](http://webaim.org/articles/jaws/)
+- [Deque - JAWS Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)
diff --git a/img/docs/keyboard-focus.png b/img/docs/keyboard-focus.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec83f2846e88f58ebc4cc4f33dfa08002883e814
GIT binary patch
literal 7256
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

literal 0
HcmV?d00001