1
1
include ../_util-fns
2
2
3
3
:marked
4
- Welcome! You are about to learn some key concepts that will make your Angular 2 application accessible for
4
+ ## Welcome to A11y!
5
+
6
+ You are about to learn how to make your Angular 2 application accessible for
5
7
as many people as possible. This is no small goal, there is a large group of people out there who find it
6
- very hard or even impossible to use your applications without thinking about the concepts mentioned here .
8
+ very hard or even impossible to use applications that has not been built with these concepts in mind .
7
9
8
- We will show you that this can often be achieved with little to no extra effort on your part,
9
- if you bring these concepts right into the design phase of your application.
10
+ We will show you that these concepts can be integrated with little to no extra effort on your part,
11
+ provided you take them into account right from the design phase of your application.
10
12
11
13
So page through this cookbook, apply the recipes contained herein and watch your userbase grow.
12
14
13
- If you are seeing the concepts `Web Accessibility`, `ARIA` or `a11y` for the first time, you are at the start of an
15
+ If you are seeing the terms `Web Accessibility`, `ARIA` or `a11y` for the first time, you are at the start of an
14
16
incredible journey. And for those who already enjoy the benefits of `Accessible Web Applications`, we will
15
17
show you how to apply your knowledge in the new and exciting world of Angular 2.
16
18
@@ -22,16 +24,18 @@ include ../_util-fns
22
24
as it has eleven letters, starts with an `a` and ends with a `y`, we shorten this word to `a11y`. We will
23
25
refer to `a11y` when we actually want to say `accessibility`.
24
26
25
- In short, `a11y` refers to creating web applications that everyone can use.
27
+ In short, `a11y` refers to creating web applications that everyone can use. Thus making it accessible to everyone.
26
28
27
- If you are totally new to the concept you may want to have a look at what the folks at the `W3C` have to say about
28
- [a11y](http://www.w3.org/WAI/intro/accessibility.php), to put the rest of the article into perspective. We will be
29
- right here waiting for you when you come back.
29
+ If you are totally new to the term you may want to have a look at what the folks at the `W3C` have to say about
30
+ [a11y](https://www.w3.org/WAI/intro/accessibility.php), to put the rest of the article into perspective.
30
31
31
32
But what is that other word?
32
33
33
- `ARIA`, or `Accessible Rich Internet Applications` refers to bringing `a11y` concepts right into
34
- internet applications like those we are building using Angular 2.
34
+ `ARIA`, or `Accessible Rich Internet Applications` refers to bringing `a11y` concepts into
35
+ internet applications like those we are building with Angular 2. You can also see what they say about
36
+ [ARIA](https://www.w3.org/WAI/intro/aria) at the `W3C`.
37
+
38
+ We will be right here waiting for you when you come back.
35
39
36
40
.l-main-section
37
41
:marked
@@ -41,7 +45,7 @@ include ../_util-fns
41
45
thought for the standard `HTML` elements before you decide to build something new.
42
46
43
47
The makers of the browsers have spent a lot of time thinking about the very same issue that has brought
44
- us to this page today and have provided you with a lot of functionality out-of-the-box when you make use of
48
+ you to this page today and have provided you with a lot of functionality out-of-the-box when you make use of
45
49
standard `HTML` elements in your component templates.
46
50
47
51
We would like to suggest the following rule of thumb when building your applications:
@@ -60,7 +64,7 @@ include ../_util-fns
60
64
61
65
So without further ado, let us see how easy it is to get big accessibility gains in our applications!
62
66
63
- **Feel free to follow along in this [live example](/resources/live-examples/cb-a11y/ts/plnkr.html)**.
67
+
64
68
65
69
.l-main-section
66
70
:marked
@@ -92,6 +96,8 @@ include ../_util-fns
92
96
93
97
[Managing focus](#managin-focus)
94
98
99
+ **Feel free to follow along in this [live example](/resources/live-examples/cb-a11y/ts/plnkr.html)**.
100
+
95
101
.l-main-section
96
102
<a id =" form-control-labels" ></a >
97
103
:marked
0 commit comments