Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 7103297

Browse files
felixzapatafelixzapata
committedJun 21, 2016
docs(step_15.ngdoc): update the step 15
add definitions about accessibility and WAI-ARIA ngAria module now is not neccesary, so the section has been moved to explain how to use it if you need it explain how to fix the problem with the keyboard in the detail page.
1 parent 6e9015f commit 7103297

File tree

1 file changed

+127
-117
lines changed

1 file changed

+127
-117
lines changed
 

‎docs/content/tutorial/step_15.ngdoc

+127-117
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,31 @@
77

88
In this step, we will learn how to fix the accessibility issues in our application.
99

10-
* We will use the {@link ngAria ngAria} module to enable WAI-ARIA.
1110
* We will fix some issues in the templates.
1211
* We will use the [protractor-accessibility-plugin](protractor-a11y-plugin) to review the accessibility of our application when we run our e2e tests.
12+
* We will explain how to add the {@link ngAria ngAria} module to use WAI-ARIA easily if you need it in your project.
1313

1414
<div doc-tutorial-reset="15"></div>
1515

1616
## Why accessibility matters
1717

18+
A website or application accessible allows the users with different preferences and abilitities, to consume the content in a way that suits their needs.
19+
1820
* [Creating an accessible web - Access iQ](https://www.youtube.com/watch?v=47n0wEcm6JU)
1921
* [Web Accessibility](https://www.youtube.com/watch?v=bEM9Fn9aOG8)
2022
* [Google Accessibility course](https://webaccessibility.withgoogle.com/course)
2123
* [Accessibility in AngularJS and Beyond](http://marcysutton.com/slides/fluent2015/)
24+
* [Introduction to Web Accessibility](https://www.w3.org/WAI/intro/accessibility.php)
2225
* [Apps For All: Coding Accessible Web Applications](https://shop.smashingmagazine.com/products/apps-for-all)
2326

27+
## WAI-ARIA
28+
29+
WAI-ARIA (_the Accessible Rich Internet Applications Suite_) gives you the ability to reclassify and otherwise augment the perceived meaning (or semantics) of your HTML.
30+
31+
Currently certain functionality used in Web sites is not available to some users with disabilities, especially people who rely on screen readers and people who cannot use a mouse. WAI-ARIA addresses these accessibility challenges, for example, by defining new ways for functionality to be provided to assistive technology. With WAI-ARIA, developers can make advanced Web applications accessible and usable to people with disabilities.
32+
33+
AngularJS has a module called {@link ngAria ngAria} to help developers to add some WAI-ARIA attributes easily in your application.
34+
2435
## Main accessibility issues in the application
2536

2637
If you make a review of the accessibility of the application you will find some issues:
@@ -32,119 +43,7 @@ If you make a review of the accessibility of the application you will find some
3243

3344
In the next sections we are going to show you, how to fix some of these issues to make the application accessible.
3445

35-
To help us, we will use the {@link ngAria ngAria} module, and we will install the [protractor-a11y-plugin] plugin too.
36-
37-
## Dependencies
38-
39-
The `ngAria` module, is distributed separately from the core Angular framework.
40-
41-
Since we are using [Bower][bower] to install client-side dependencies, this step updates the
42-
`bower.json` configuration file to include the new dependencies:
43-
44-
<br />
45-
**`bower.json`:**
46-
47-
```
48-
{
49-
"name": "angular-phonecat",
50-
"description": "A starter project for AngularJS",
51-
"version": "0.0.0",
52-
"homepage": "https://github.com/angular/angular-phonecat",
53-
"license": "MIT",
54-
"private": true,
55-
"dependencies": {
56-
"angular": "1.5.x",
57-
"angular-animate": "1.5.x",
58-
"angular-aria": "1.5.x",
59-
"angular-mocks": "1.5.x",
60-
"angular-resource": "1.5.x",
61-
"angular-route": "1.5.x",
62-
"bootstrap": "3.3.x",
63-
"jquery": "2.2.x"
64-
}
65-
}
66-
```
67-
68-
* `"angular-aria": "1.5.x"` tells bower to install a version of the angular-aria module that
69-
is compatible with version 1.5.x of Angular.
70-
71-
To install the [protractor-a11y-plugin], we can add the plugin into the `devDependencies` section in the `package.json` file,
72-
73-
<br />
74-
**`package.json`:**
75-
76-
```
77-
{
78-
"devDependencies": {
79-
"bower": "^1.7.7",
80-
"http-server": "^0.9.0",
81-
"jasmine-core": "^2.4.1",
82-
"karma": "^0.13.22",
83-
"karma-chrome-launcher": "^0.2.3",
84-
"karma-firefox-launcher": "^0.1.7",
85-
"karma-jasmine": "^0.3.8",
86-
"protractor": "^3.2.2",
87-
"protractor-accessibility-plugin": "^0.1.1",
88-
"shelljs": "^0.6.0"
89-
}
90-
}
91-
```
92-
93-
Now, we must tell bower to download and install these dependencies.
94-
95-
```
96-
npm install
97-
```
98-
99-
<div class="alert alert-info">
100-
**Note:** If you have bower installed globally, you can run `bower install`, but for this project
101-
we have preconfigured `npm install` to run bower for us.
102-
</div>
103-
104-
<div class="alert alert-warning">
105-
**Warning:** If a new version of Angular has been released since you last ran `npm install`, then
106-
you may have a problem with the `bower install` due to a conflict between the versions of
107-
angular.js that need to be installed. If you run into this issue, simply delete your
108-
`app/bower_components` directory and then run `npm install`.
109-
</div>
110-
111-
112-
## How to use the `ngAria` module
113-
114-
The `ngAria` module provides support for common ARIA attributes that convey state or semantic information about the application for users of assistive technologies, such as screen readers.
115-
116-
### Template
117-
118-
In order to enable the module, we need to update `index.html`, loading the necessary dependencies
119-
(**angular-aria.js**) that contain JavaScript code.
120-
121-
The WAI-ARIA module, {@link ngAria ngAria}, contains the code necessary to help you to add WAI-ARIA attributes in your application.
122-
123-
<br />
124-
**`app/index.html`:**
125-
126-
```html
127-
...
128-
<!-- Adds WAI-ARIA module in AngularJS -->
129-
<script src="bower_components/angular-aria/angular-aria.js"></script>
130-
...
131-
```
132-
133-
### Dependencies
134-
135-
We need to add a dependency on `ngAria` to our main module first:
136-
137-
<br />
138-
**`app/app.module.js`:**
139-
140-
```js
141-
angular.
142-
module('phonecatApp', [
143-
...
144-
'ngAria',
145-
...
146-
]);
147-
```
46+
To help us, we will install the [protractor-a11y-plugin] plugin to check potential issues in the application.
14847

14948
## How to inform the user that _something_ is happening
15049

@@ -162,7 +61,7 @@ To fix this, we add two directives to inform the user how many items are know in
16261
```html
16362
<div>
16463
<label for="search">Search:</label>
165-
<input id="search" ng-model="$ctrl.query" ng-model-options="{ debounce: 900 }">
64+
<input id="search" ng-model="$ctrl.query" ng-model-options="{ debounce: 300 }">
16665
</div>
16766

16867
<div class="aria-status" aria-live="assertive" aria-atomic="true"></div>
@@ -292,11 +191,123 @@ _Tip_: Try to navigate over the application using only the _TAB_ key. You will d
292191
...
293192
```
294193

194+
To fix this issue, we add a `button` element, wrapping the image to allow the user to access the content via keyboard.
195+
196+
Why we are using a `button` element instead of an `a` element? It is more correct to use buttons elements to call actions like show content, hidden content or similar.
197+
198+
199+
## How to use the `ngAria` module
200+
201+
The `ngAria` module provides support for common WAI-ARIA attributes that convey state or semantic information about the application for users of assistive technologies, such as screen readers.
202+
203+
### Dependencies
204+
205+
The `ngAria` module, is distributed separately from the core Angular framework.
206+
207+
Since we are using [Bower][bower] to install client-side dependencies, this step updates the
208+
`bower.json` configuration file to include the new dependencies:
209+
210+
<br />
211+
**`bower.json`:**
212+
213+
```
214+
{
215+
"name": "angular-phonecat",
216+
"description": "A starter project for AngularJS",
217+
"version": "0.0.0",
218+
"homepage": "https://github.com/angular/angular-phonecat",
219+
"license": "MIT",
220+
"private": true,
221+
"dependencies": {
222+
"angular": "1.5.x",
223+
"angular-animate": "1.5.x",
224+
"angular-aria": "1.5.x",
225+
"angular-mocks": "1.5.x",
226+
"angular-resource": "1.5.x",
227+
"angular-route": "1.5.x",
228+
"bootstrap": "3.3.x",
229+
"jquery": "2.2.x"
230+
}
231+
}
232+
```
233+
234+
* `"angular-aria": "1.5.x"` tells bower to install a version of the angular-aria module that
235+
is compatible with version 1.5.x of Angular.
236+
237+
We need to add a dependency on `ngAria` to our main module first:
238+
239+
<br />
240+
**`app/app.module.js`:**
241+
242+
```js
243+
angular.
244+
module('phonecatApp', [
245+
...
246+
'ngAria',
247+
...
248+
]);
249+
```
250+
251+
In order to enable the module, we need to update `index.html`, loading the necessary dependencies
252+
(**angular-aria.js**) that contain JavaScript code.
253+
254+
The WAI-ARIA module, {@link ngAria ngAria}, contains the code necessary to help you to add WAI-ARIA attributes in your application.
255+
256+
<br />
257+
**`app/index.html`:**
258+
259+
```html
260+
...
261+
<!-- Adds WAI-ARIA module in AngularJS -->
262+
<script src="bower_components/angular-aria/angular-aria.js"></script>
263+
...
264+
```
265+
295266
## How to run the e2e tests using the Protractor accessibility plugin
296267

268+
### Dependencies
269+
270+
To install the [protractor-a11y-plugin], we can add the plugin into the `devDependencies` section in the `package.json` file,
271+
272+
**`package.json`:**
273+
274+
```
275+
{
276+
"devDependencies": {
277+
"bower": "^1.7.7",
278+
"http-server": "^0.9.0",
279+
"jasmine-core": "^2.4.1",
280+
"karma": "^0.13.22",
281+
"karma-chrome-launcher": "^0.2.3",
282+
"karma-firefox-launcher": "^0.1.7",
283+
"karma-jasmine": "^0.3.8",
284+
"protractor": "^3.2.2",
285+
"protractor-accessibility-plugin": "^0.1.1",
286+
"shelljs": "^0.6.0"
287+
}
288+
}
289+
```
290+
291+
Now, we must tell bower to download and install these dependencies.
292+
293+
```
294+
npm install
295+
```
296+
297+
<div class="alert alert-info">
298+
**Note:** If you have bower installed globally, you can run `bower install`, but for this project
299+
we have preconfigured `npm install` to run bower for us.
300+
</div>
301+
302+
<div class="alert alert-warning">
303+
**Warning:** If a new version of Angular has been released since you last ran `npm install`, then
304+
you may have a problem with the `bower install` due to a conflict between the versions of
305+
angular.js that need to be installed. If you run into this issue, simply delete your
306+
`app/bower_components` directory and then run `npm install`.
307+
</div>
308+
297309
Once the plugin is installed, we have to modify the `protractor.conf.js` file to inform Protractor to use this plugin too.
298310

299-
<br />
300311
**`protractor.conf.js`:**
301312

302313
```
@@ -311,7 +322,6 @@ Once the plugin is installed, we have to modify the `protractor.conf.js` file to
311322
After that, every time we run the e2e tests, Protractor will review the accessibility of your application using the [Accessibility Developer Tools](https://github.com/GoogleChrome/accessibility-developer-tools).
312323

313324

314-
315325
# Summary
316326

317327
Our application is now accessible, thanks to these small changes.

0 commit comments

Comments
 (0)
This repository has been archived.