Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 3712e91

Browse files
AlmeroSteynAlmeroSteyn
committed
Initial creation of a11y cb structure
1 parent 7f11a6c commit 3712e91

File tree

9 files changed

+138
-2
lines changed

9 files changed

+138
-2
lines changed

‎public/docs/_examples/cb-a11y/ts/.gitignore

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
styles.css
2+
typings
3+
typings.json
4+
*.js.map
5+
package.json
6+
karma.conf.js
7+
karma-test-shim.js
8+
tsconfig.json
9+
npm-debug*.
10+
**/protractor.config.js

‎public/docs/_examples/cb-a11y/ts/app/app.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<h1 id="top">A11y Cookbook</h1>

‎public/docs/_examples/cb-a11y/ts/app/app.component.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import {Component} from 'angular2/core';
2+
3+
@Component({
4+
selector: 'app',
5+
templateUrl: 'app/app.component.html',
6+
})
7+
export class AppComponent { }

‎public/docs/_examples/cb-a11y/ts/app/main.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import {bootstrap} from 'angular2/platform/browser';
2+
import {AppComponent} from './app.component';
3+
4+
bootstrap(AppComponent);

‎public/docs/_examples/cb-a11y/ts/example-config.json

Whitespace-only changes.

‎public/docs/_examples/cb-a11y/ts/index.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>A11y demonstration</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" href="styles.css">
7+
8+
<!-- IE required polyfills, in this exact order -->
9+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
10+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
11+
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
12+
13+
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
14+
<script src="node_modules/systemjs/dist/system.src.js"></script>
15+
<script src="node_modules/rxjs/bundles/Rx.js"></script>
16+
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
17+
<script>
18+
System.config({
19+
packages: {
20+
app: {
21+
format: 'register',
22+
defaultExtension: 'js'
23+
}
24+
}
25+
});
26+
System.import('app/main')
27+
.then(null, console.error.bind(console));
28+
</script>
29+
</head>
30+
31+
<body>
32+
<app>loading...</app>
33+
</body>
34+
35+
</html>

‎public/docs/_examples/cb-a11y/ts/plnkr.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"description": "A11y Cookbook samples",
3+
"files":[
4+
"!**/*.d.ts",
5+
"!**/*.js"
6+
],
7+
"tags":["cookbook", "component"]
8+
}

‎public/docs/ts/latest/cookbook/_data.json

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,19 @@
44
"navTitle": "Overview",
55
"description": "A collection of recipes for common Angular application scenarios"
66
},
7-
7+
88
"a1-a2-quick-reference": {
99
"title": "Angular 1 to 2 Quick Reference",
1010
"navTitle": "Angular 1 to 2 Quick Ref",
1111
"intro": "Learn how Angular 1 concepts and techniques map to Angular 2"
1212
},
13-
13+
14+
"a11y": {
15+
"title": "Angular 2 ARIA / Accessibility (a11y) reference",
16+
"navTitle": "ARIA / Accessibility (a11y)",
17+
"intro": "Learn how to make your Angular 2 sites accessible for everyone"
18+
},
19+
1420
"component-communication": {
1521
"title": "Component Interaction",
1622
"intro": "Share information between different directives and components"

‎public/docs/ts/latest/cookbook/a11y.jade

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
include ../_util-fns
2+
3+
:marked
4+
Welcome, you are about to learn some key concepts that will make your Angular&nbsp;2 application accessible for
5+
as many people as possible. This is now small goal, there is a large group of people out there who find it
6+
very hard to simply impossible to use your applications without thinking about the concepts mentioned here.
7+
8+
We would like to 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+
11+
So page through this cookbook, apply the recipes contained herein and watch your userbase grow.
12+
13+
If you are seeing the concepts `Web Accessibility`, `ARIA` or `a11y` for the first time, you are at the start of an
14+
incredible journey. And for those who already enjoy the benefits of `Accessible Web Applications`, we will
15+
show you how to apply your knowlegde in the new and exciting world of Angular&nbsp;2.
16+
17+
:marked
18+
## A11y in a nutshell
19+
20+
`Accessibility` is often referred to as `a11y`. This is because we want to say as lot while writing less. And
21+
as it has eleven letters, startes with an `a` and ends with a `y`, we shorten this word to `a11y`. We will
22+
refer to `a11y` when we actually want to say `accessibility`.
23+
24+
In short, `a11y` refers to creating web applications that everyone, including those with disabilities that would
25+
normally make web navigation hard or impossible, can use our entire web application and enjoy the full function.
26+
27+
If you are totally new to the concept you may want to have a look at what the folks are 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.
30+
31+
`ARIA`, or `Accessible Rich Internet Applications` refers to translating general `a11y` concerns to
32+
internet applications like those we are building using Angular&nbsp;2.
33+
34+
.l-main-section
35+
<a id="toc"></a>
36+
:marked
37+
## Table of contents
38+
39+
[Using text as a label for a custom component](#custom-component-label)
40+
41+
[Using keyboard shortcuts](#keyboard-shortcuts)
42+
43+
[Component that knows its own role](#component-roles)
44+
45+
[Managing focus](#managin-focus)
46+
47+
.l-main-section
48+
<a id="custom-component-label"></a>
49+
:marked
50+
## Using text as a label for a custom component
51+
52+
.l-main-section
53+
<a id="keyboard-shortcuts"></a>
54+
:marked
55+
## Using keyboard shortcuts
56+
57+
.l-main-section
58+
<a id="component-roles"></a>
59+
:marked
60+
## Component that knows its own role
61+
62+
.l-main-section
63+
<a id="managing-focus"></a>
64+
:marked
65+
## Managing focus

0 commit comments

Comments
 (0)