You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
31
+
32
+
### WCAG
33
+
34
+
The [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag) provides guidelines for creating accessible web sites.
35
+
36
+
The following WCAG checklists provide an overview:
-[WCAG checklist from Wuhcag](https://www.wuhcag.com/wcag-checklist/)
41
+
-[WCAG checklist from WebAIM](http://webaim.org/standards/wcag/checklist)
42
+
-[Checklist from The A11Y Project](http://a11yproject.com/checklist.html)
43
+
44
+
### WAI-ARIA
45
+
46
+
The [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria) document contains techniques for building fully accessible JavaScript widgets.
47
+
48
+
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 hyphen-cased (also known as kebab-case, lisp-case, etc) as they are in plain HTML:
49
+
50
+
```javascript{3,4}
51
+
<input
52
+
type="text"
53
+
aria-label={labelText}
54
+
aria-required="true"
55
+
onChange={onchangeHandler}
56
+
value={inputValue}
57
+
name="name"
58
+
/>
59
+
```
60
+
61
+
## Other Points for Consideration
62
+
63
+
### Setting the language
64
+
65
+
Indicate the human language of page texts as screen reader software uses this to select the correct voice settings:
Set the document `<title>` to correctly describe the current page content as this ensures that the user remains aware of the current page context:
72
+
73
+
-[WCAG - Understanding the Document Title Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)
74
+
75
+
We can set this in React using the [React Document Title Component](https://github.com/gaearon/react-document-title).
76
+
77
+
### Color contrast
78
+
79
+
Ensure that all readable text on your website has sufficient color contrast to remain maximally readable by users with low vision:
80
+
81
+
-[WCAG - Understanding the Color Contrast Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
82
+
-[Everything About Color Contrast And Why You Should Rethink It](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
83
+
-[A11yProject - What is Color Contrast](http://a11yproject.com/posts/what-is-color-contrast/)
84
+
85
+
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/).
86
+
87
+
Both the aXe and WAVE tools mentioned below also include color contrast tests and will report on contrast errors.
88
+
89
+
If you want to extend your contrast testing abilities you can use these tools:
90
+
91
+
-[WebAIM - Color Contrast Checker](http://webaim.org/resources/contrastchecker/)
92
+
-[The Paciello Group - Color Contrast Analyzer](https://www.paciellogroup.com/resources/contrastanalyser/)
93
+
94
+
## Development and Testing Tools
95
+
96
+
There are a number of tools we can use to assist in the creation of accessible web applications.
97
+
98
+
### The keyboard
99
+
100
+
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:
101
+
102
+
1. Plugging out your mouse.
103
+
1. Using `Tab` and `Shift+Tab` to browse.
104
+
1. Using `Enter` to activate elements.
105
+
1. Where required, using your keyboard arrow keys to interact with some elements, such as menus and dropdowns.
106
+
107
+
### Development assistance
108
+
109
+
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:
110
+
111
+
### Testing accessibility in the browser
112
+
113
+
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
114
+
test the technical accessibility of your HTML.
115
+
116
+
#### aXe, aXe-core and react-axe
117
+
118
+
Deque Systems offers [aXe-core](https://github.com/dequelabs/axe-core) for automated and end-to-end accessibility tests of your applications. This module includes integrations for Selenium.
119
+
120
+
[The Accessibility Engine](https://www.deque.com/products/axe/) or aXe, is an accessibility inspector browser extension built on `aXe-core`.
121
+
122
+
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.
123
+
124
+
#### WebAIM WAVE
125
+
126
+
The [Web Accessibility Evaluation Tool](http://wave.webaim.org/extension/) is another accessibility browser extension.
127
+
128
+
#### Accessibility inspectors and the Accessibility Tree
129
+
130
+
[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
131
+
to assistive technology, such as screen readers.
132
+
133
+
In some browsers we can easily view the accessibility information for each element in the accessibility tree:
134
+
135
+
-[Activate the Accessibility Inspector in Chrome](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a)
136
+
-[Using the Accessibility Inspector in OS X Safari](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html)
137
+
138
+
### Screen readers
139
+
140
+
Testing with a screen reader should form part of your accessibility tests.
141
+
142
+
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.
143
+
144
+
### Commonly Used Screen Readers
145
+
146
+
#### NVDA in Firefox
147
+
148
+
[NonVisual Desktop Access](https://www.nvaccess.org/) or NVDA is an open source Windows screen reader that is widely used.
149
+
150
+
Refer to the following guides on how to best use NVDA:
151
+
152
+
-[WebAIM - Using NVDA to Evaluate Web Accessibility](http://webaim.org/articles/nvda/)
[ChromeVox](http://www.chromevox.com/) is an integrated screen reader on Chromebooks and is available [as an extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) for Google Chrome.
179
+
180
+
Refer to the following guides on how best to use ChromeVox:
181
+
182
+
-[Google Chromebook Help - Use the Built-in Screen Reader](https://support.google.com/chromebook/answer/7031755?hl=en)
This project was bootstrapped with [Create Guten Block](https://github.com/ahmadawais/create-guten-block).
192
+
193
+
Below you will find some information on how to run scripts.
194
+
195
+
>You can find the most recent version of this guide [here](https://github.com/ahmadawais/create-guten-block).
196
+
197
+
## 👉 `npm start`
198
+
- Use to compile and run the block in development mode.
199
+
- Watches for any changes and reports back any errors in your code.
200
+
201
+
## 👉 `npm run build`
202
+
- Use to build production code for your block inside `dist` folder.
203
+
- Runs once and reports back the gzip file sizes of the produced code.
204
+
205
+
## 👉 `npm run eject`
206
+
- Use to eject your plugin out of `create-guten-block`.
207
+
- Provides all the configurations so you can customize the project as you want.
208
+
- It's a one-way street, `eject` and you have to maintain everything yourself.
209
+
- You don't normally have to `eject` a project because by ejecting you lose the connection with `create-guten-block` and from there onwards you have to update and maintain all the dependencies on your own.
210
+
211
+
---
212
+
213
+
###### — Feel free to tweet and say 👋 at me [@MrAhmadAwais](https://twitter.com/mrahmadawais/)
214
+
215
+
[](https://www.npmjs.com/package/create-guten-block)[](https://www.npmjs.com/package/create-guten-block)[](https://github.com/ahmadawais/create-guten-block)[](https://twitter.com/mrahmadawais/)[](https://github.com/ahmadawais/create-guten-block/stargazers)[](https://github.com/ahmadawais?tab=followers)
0 commit comments