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

Commit 298fffa

Browse files
AlmeroSteynAlmeroSteyn
committed
style-guide(add-a11y): Add accessibility quick wins
1 parent 0664a27 commit 298fffa

File tree

12 files changed

+346
-1
lines changed

12 files changed

+346
-1
lines changed

‎public/docs/_examples/style-guide/e2e-spec.ts

+1
Original file line numberDiff line numberDiff line change
@@ -206,4 +206,5 @@ describe('Style Guide', function () {
206206
let button = element(by.tagName('sg-app > toh-hero-button > button'));
207207
expect(button.getText()).toBe('OK');
208208
});
209+
209210
});

‎public/docs/_examples/style-guide/ts/10-01/app/app.component.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'sg-app',
5+
template: `<div>I am a page set to US English</div>`
6+
})
7+
export class AppComponent {
8+
}

‎public/docs/_examples/style-guide/ts/10-01/app/index.avoid.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!-- avoid -->
2+
3+
<!DOCTYPE html>
4+
<!-- #docregion page-lang-->
5+
<html>
6+
<!-- #enddocregion page-lang-->
7+
<head>
8+
<meta charset="UTF-8">
9+
<title>Title</title>
10+
</head>
11+
<body>
12+
<!--Some content-->
13+
</body>
14+
</html>

‎public/docs/_examples/style-guide/ts/10-01/app/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<!-- #docregion page-lang-->
3+
<html lang="en-US">
4+
<!-- #enddocregion page-lang -->
5+
<head>
6+
<meta charset="UTF-8">
7+
<title>Title</title>
8+
</head>
9+
<body>
10+
<!--Some content-->
11+
</body>
12+
</html>

‎public/docs/_examples/style-guide/ts/10-01/app/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './app.component';

‎public/docs/_examples/style-guide/ts/10-02/app/app.component.avoid.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/* #docregion */
2+
/* avoid */
3+
4+
:focus {
5+
outline: 0;
6+
}
7+
8+
/* or */
9+
10+
:focus {
11+
outline: none;
12+
}
13+
/* #enddocregion */

‎public/docs/_examples/style-guide/ts/10-02/app/app.component.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<label>Name:
2+
<input [(ngModel)]="name">
3+
</label>
4+
<label>Surname:
5+
<input [(ngModel)]="surname">
6+
</label>
7+
{{name}}{{surname}}

‎public/docs/_examples/style-guide/ts/10-02/app/app.component.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
moduleId: module.id,
5+
selector: 'sg-app',
6+
templateUrl: 'app.component.html'
7+
})
8+
export class AppComponent {
9+
name: string;
10+
surname: string;
11+
}

‎public/docs/_examples/style-guide/ts/10-02/app/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './app.component';

‎public/docs/_examples/style-guide/ts/app/app.routes.ts

+4
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ import { AppComponent as S0701 } from '../07-01/app';
2626
import { AppComponent as S0703 } from '../07-03/app';
2727
import { AppComponent as S0704 } from '../07-04/app';
2828
import { AppComponent as S0901 } from '../09-01/app';
29+
import { AppComponent as S1001 } from '../10-01/app';
30+
import { AppComponent as S1002 } from '../10-02/app';
2931

3032
const routes: RouterConfig = [
3133
{ path: '01-01', component: S0101 },
@@ -54,6 +56,8 @@ const routes: RouterConfig = [
5456
{ path: '07-03', component: S0703 },
5557
{ path: '07-04', component: S0704 },
5658
{ path: '09-01', component: S0901 },
59+
{ path: '10-01', component: S1001 },
60+
{ path: '10-02', component: S1002 },
5761
];
5862

5963
export const APP_ROUTER_PROVIDERS = [

‎public/docs/_examples/style-guide/ts/systemjs.custom.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@
2929
'07-01', '07-01/app', '07-01/app/heroes', '07-01/app/heroes/shared',
3030
'07-03', '07-03/app', '07-03/app/heroes', '07-03/app/heroes/hero-list', '07-03/app/heroes/shared',
3131
'07-04', '07-04/app', '07-04/app/heroes', '07-04/app/heroes/shared',
32-
'09-01', '09-01/app', '09-01/app/heroes', '09-01/app/heroes/shared', '09-01/app/heroes/shared/hero-button'
32+
'09-01', '09-01/app', '09-01/app/heroes', '09-01/app/heroes/shared', '09-01/app/heroes/shared/hero-button',
33+
'10-01', '10-01/app',
34+
'10-02', '10-02/app'
3335
];
3436

3537
var packages = {};

‎public/docs/ts/latest/guide/style-guide.jade

+271
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ a(id='toc')
5757
1. [Data Services](#data-services)
5858
1. [Lifecycle Hooks](#lifecycle-hooks)
5959
1. [Routing](#routing)
60+
1. [Accessibility](#accessibility)
6061
1. [Appendix](#appendix)
6162

6263
.l-main-section
@@ -1870,6 +1871,276 @@ a(href="#toc") Back to top
18701871

18711872
+makeExample('style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.ts', 'example', 'app/heroes/shared/hero-button/hero-button.component.ts')
18721873
:marked
1874+
1875+
a(href="#toc") Back to top
1876+
1877+
.l-main-section
1878+
:marked
1879+
## Accessibility
1880+
1881+
Make your applications accessible to all forms of navigation, including keyboard-only navigation and assistive technologies.
1882+
1883+
### <a id="10-01"></a>Provide your page language
1884+
#### <a href="#01-01">Style 10-01</a>
1885+
.s-rule.do
1886+
:marked
1887+
**Do** provide a `lang` attribute on your `html` tag.
1888+
1889+
.s-why
1890+
:marked
1891+
**Why?** Assistive technologies, such as screen readers, need to know the language of the page.
1892+
1893+
.s-why
1894+
:marked
1895+
**Why?** Language tools, such as spell checkers and translators adapt to the given language.
1896+
1897+
.s-why.s-why-last
1898+
:marked
1899+
**Why?** This enables styling and font selection based on the page language.
1900+
1901+
:marked
1902+
Never omit the `lang` arrtibute:
1903+
1904+
+makeExample('style-guide/ts/10-01/app/index.avoid.html', 'page-lang', 'index.html')(avoid=1)
1905+
1906+
:marked
1907+
Provide the ISO language code as well the country code (where appropriate).
1908+
1909+
+makeExample('style-guide/ts/10-01/app/index.html', 'page-lang', 'index.html')
1910+
1911+
.l-main-section
1912+
:marked
1913+
### <a id="10-02"></a>Never remove the browser focus outline
1914+
#### <a href="#10-02">Style 10-02</a>
1915+
.s-rule.do
1916+
:marked
1917+
**Do** keep the `outline` css property intact.
1918+
1919+
.s-rule.consider
1920+
:marked
1921+
**Consider** only removing it if absolutely required and an alternate `:focus` style is provided.
1922+
1923+
.s-rule.avoid
1924+
:marked
1925+
**Avoid** totaly removing the focus outline on your page.
1926+
1927+
.s-why
1928+
:marked
1929+
**Why?** Sighted keyboard-only users fully rely on a visual indication of focus for navigation.
1930+
1931+
.s-why.s-why-last
1932+
:marked
1933+
**Why?** Removing it renders a page immediately inaccessible.
1934+
1935+
:marked
1936+
Never add one of the following styles without providing an alternate `:focus` outline style.
1937+
1938+
+makeExample('style-guide/ts/10-02/app/app.component.avoid.css', '', 'app.component.css')(avoid=1)
1939+
1940+
:marked
1941+
.l-main-section
1942+
:marked
1943+
### <a id="10-03"></a>If you can use a native HTML element, then do so.
1944+
#### <a href="#10-03">Style 10-03</a>
1945+
.s-rule.do
1946+
:marked
1947+
**Do** use native HTML elements where possible.
1948+
1949+
.s-rule.avoid
1950+
:marked
1951+
**Avoid** recreating elements such as `input`, `button` and `a` with `div` and `span`.
1952+
1953+
.s-why
1954+
:marked
1955+
**Why?** Native HTML elements contain a lot of built in functionality.
1956+
1957+
.s-why
1958+
:marked
1959+
**Why?** Native HTML elements are instantly understood by all browsers and assistive technologies, such as screen readers.
1960+
1961+
.s-why.s-why-last
1962+
:marked
1963+
**Why?** Native HTML elements automatically follow expected interaction patterns.
1964+
1965+
.l-main-section
1966+
:marked
1967+
### <a id="10-04"></a>Always support and test keyboard navigation.
1968+
#### <a href="#10-04">Style 10-04</a>
1969+
.s-rule.do
1970+
:marked
1971+
**Do** unplug your mouse and test if al functionality on your page can be reached and activated with `TAB`, `SHIFT+TAB`, `ENTER`, `SPACE` and the arrow keys alone.
1972+
1973+
.s-rule.avoid
1974+
:marked
1975+
**Avoid** any functional areas that cannot be reached this way.
1976+
1977+
.s-why
1978+
:marked
1979+
**Why?** People who cannot use a mouse due to disability or injury navigate with the keyboard alone or other related technologies.
1980+
1981+
.s-why.s-why-last
1982+
:marked
1983+
**Why?** People with visual disabilities requiring the assistance of screen readers also exclusively navigate with the keyboard alone or other related technologies.
1984+
1985+
.l-main-section
1986+
:marked
1987+
### <a id="10-05"></a>Use `dl` to display the read-only state of interactive controls / form controls.
1988+
#### <a href="#10-05">Style 10-05</a>
1989+
.s-rule.do
1990+
:marked
1991+
**Do** display read only key-value data as a definition list.
1992+
1993+
.s-rule.avoid
1994+
:marked
1995+
**Avoid** using the `label` tag without a related interactive control / form control.
1996+
1997+
.s-rule.avoid
1998+
:marked
1999+
**Avoid** using only `div` and `span` to display related key-value data.
2000+
2001+
.s-why
2002+
:marked
2003+
**Why?** Assistive technologies, such as screen readers recognize the `dl` as containing related key-value pairs.
2004+
2005+
.s-why.s-why-last
2006+
:marked
2007+
**Why?** Unrelated `label` tags are considered invalid HTML and not recognized by assistive technologies.
2008+
2009+
.l-main-section
2010+
:marked
2011+
### <a id="10-06"></a>Provide a label for all interactive controls / form controls and groups of controls.
2012+
#### <a href="#10-06">Style 10-06</a>
2013+
.s-rule.do
2014+
:marked
2015+
**Do** associate a `label` element with every interactive control / form control.
2016+
2017+
.s-rule.do
2018+
:marked
2019+
**Do** place groups of related interactive controls / form controls in a `fieldset` and label with `legend`.
2020+
2021+
.s-rule.avoid
2022+
:marked
2023+
**Avoid** unlabelled interactive controls / form controls.
2024+
2025+
.s-rule.avoid
2026+
:marked
2027+
**Avoid** any unassociated labels.
2028+
2029+
.s-why
2030+
:marked
2031+
**Why?** All users need to know the meaning of each interactive control / form control.
2032+
2033+
.s-why
2034+
:marked
2035+
**Why?** Users with visual disabilities are also unable to assume the meaning based on visual position.
2036+
2037+
.s-why.s-why-last
2038+
:marked
2039+
**Why?** Associated labels also become clickable making it easier to select interactive controls / form controls.
2040+
2041+
.l-main-section
2042+
:marked
2043+
### <a id="10-07"></a>Use links for navigation and buttons for activation.
2044+
#### <a href="#10-07">Style 10-07</a>
2045+
.s-rule.do
2046+
:marked
2047+
**Do** use `a` tag links to navigate to other pages.
2048+
2049+
.s-rule.do
2050+
:marked
2051+
**Do** use `buttons` to activate user actions requiring a response.
2052+
2053+
.s-rule.avoid
2054+
:marked
2055+
**Avoid** mixing these elements and functions.
2056+
2057+
.s-why
2058+
:marked
2059+
**Why?** Links are recognised by assistive technologies, expected to trigger a navigation and to be activated with `ENTER` alone.
2060+
2061+
.s-why.s-why-last
2062+
:marked
2063+
**Why?** Buttons are recognised by assistive technologies, expected to trigger a user action and to be activated with either `ENTER` or `SPACE`.
2064+
2065+
.l-main-section
2066+
:marked
2067+
### <a id="10-08"></a>Provide descriptive text for your HTML elements.
2068+
#### <a href="#10-08">Style 10-08</a>
2069+
.s-rule.do
2070+
:marked
2071+
**Do** provide descriptive text for elements such as `buttons` pertaining to the meaning of the element.
2072+
2073+
.s-rule.avoid
2074+
:marked
2075+
**Avoid** possible repetitive text for your elements as repetition causes confusion.
2076+
2077+
.s-why
2078+
:marked
2079+
**Why?** Due to functionality such as `*ngFor` it is possible to create multiple instances of one HTML partial. A button stating *Save Rubberman* is then clearer than *Save Hero*.
2080+
2081+
.s-why.s-why-last
2082+
:marked
2083+
**Why?** This severly impacts users relying on screen readers where multiple occurances of elements with the same text can cause the page to become unusable.
2084+
2085+
.l-main-section
2086+
:marked
2087+
### <a id="10-09"></a>Provide alternative text for all your images.
2088+
#### <a href="#10-09">Style 10-09</a>
2089+
.s-rule.do
2090+
:marked
2091+
**Do** provide descriptive text for all images using the `alt` attribute.
2092+
2093+
.s-rule.avoid
2094+
:marked
2095+
**Avoid** any images not described by text.
2096+
2097+
.s-why.s-why-last
2098+
:marked
2099+
**Why?** Users with visual disabilites will be unable to discern the meaning of images without an alternative textual description.
2100+
2101+
.l-main-section
2102+
:marked
2103+
### <a id="10-10"></a>Provide good textual color contrast
2104+
#### <a href="#10-10">Style 10-10</a>
2105+
.s-rule.do
2106+
:marked
2107+
**Do** provide a color contrast ratio of at least `4.5:1` between the text color and the text background color for small text .
2108+
2109+
.s-rule.do
2110+
:marked
2111+
**Do** provide a color contrast ratio of at least `3:1` between the text color and the text background color for large text.
2112+
2113+
.s-rule.do
2114+
:marked
2115+
**Do** use one of many freely available color contrast test tools to achieve this.
2116+
2117+
.s-rule.avoid
2118+
:marked
2119+
**Avoid** providing textual contrast below these levels.
2120+
2121+
.s-why
2122+
:marked
2123+
**Why?** Users with limited vision, who are not reliant on screen readers, may be unable to read text not conforming to these contrast ratios.
2124+
2125+
.s-why.s-why-last
2126+
:marked
2127+
**Why?** These ratios provide an enhanced reading experience for all users in a larger range of ambient light conditions.
2128+
2129+
.l-main-section
2130+
:marked
2131+
### <a id="10-11"></a>Avoid full reliance on color alone to convey meaning.
2132+
#### <a href="#10-11">Style 10-11</a>
2133+
.s-rule.do
2134+
:marked
2135+
**Do** provide readable text to convey all application-critical information.
2136+
2137+
.s-rule.avoid
2138+
:marked
2139+
**Avoid** only using color to convey application-critical information, i.e. *"Click on the green button"*.
2140+
2141+
.s-why.s-why-last
2142+
:marked
2143+
**Why?** Users with visual disabilites will be unable to recognize this important application information and therefore be unable to use it.
18732144

18742145
a(href="#toc") Back to top
18752146

0 commit comments

Comments
 (0)