-
Notifications
You must be signed in to change notification settings - Fork 4
/
navigation.html
131 lines (113 loc) · 4.37 KB
/
navigation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>HTML and CSS: Accessible Future Workshop</title>
<link href='http://fonts.googleapis.com/css?family=Noto+Serif|Noto+Sans' rel='stylesheet' type='text/css'>
<link href="http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header role="banner">
<h1><abbr title="Hypertext Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr>: Accessible Future Workshop</h1>
<p class="byline">Jeremy Boggs · Scholars’ Lab · University of Virginia Library</p>
</header>
<main id="content">
<h2>Starting Points</h2>
<ul>
<li>Humans are responsible for using the tools and in accessible ways.</li>
<li>Easy to make accessible web pages; more work to make them inaccessible.</li>
<li>Always ask: What do these design/development decisions do for accessibility?</li>
</ul>
<h2 id="what-is-html">What is HTML?</h2>
<ul>
<li>A markup language to add structure and meaning to documents.</li>
<li>Helps a browser read/interpret a document</li>
<li>Helps other tech understand/interpret your document.
</ul>
<h2 id="what-is-css">What is CSS?</h2>
<ul>
<li>A style language to government presentation of specific parts of a document.</li>
<li>Helps a browser display a document</li>
<li>Selectors help you pick specific parts of a document for styles</li>
<li>Separating from HTML helps you establish rules to use across documents.</li>
</ul>
<h2 id="accessibility-and-html">Accessibility and HTML</h2>
<h3 id="oldies-but-goodies">Oldies but Goodies</h3>
<ul>
<li>abbreviations</li>
<li>images </li>
<li>tables</li>
</ul>
<h3 id="simple-page-structure"><a href="structure.html">Simple page structure</a></h3>
<ul>
<li>Semantic Elements
<ul>
<li>header</li>
<li>footer</li>
<li>main</li>
<li>article</li>
<li>section</li>
<li>aside</li>
<li>figure; figcaption</li>
<li>time</li>
</ul>
</li>
<li><a href="http://www.w3.org/TR/wai-aria/roles">Aria roles</a>
<ul>
<li>banner</li>
<li>main</li>
<li>contentinfo</li>
<li>search</li>
<li>navigation</li>
</ul>
</li>
</ul>
<h3 id="navigation"><a href="navigation.html">Navigation</a></h3>
<ul>
<li><code><nav></code> element</li>
<li>role="navigation"</li>
</ul>
<h3 id="forms"><a href="forms.html">Forms</a></h3>
<ul>
<li>label</li>
<li>textarea</li>
<li>input
<ul>
<li>text</li>
<li>checkbox</li>
<li>radio</li>
<li>email</li>
<li>telephone</li>
<li>search</li>
</ul>
</li>
<li>attributes
<ul>
<li>placeholder</li>
<li>required</li>
</ul>
</li>
</ul>
<h2 id="accessibility-and-css">Accessibility and CSS</h2>
<ul>
<li><a href="links.html">Link styling</a></li>
<li><a href="hiding.html">Hiding content</a></li>
<li><a href="colors.html">Colors and Contrast</a></li>
<li><a href="typography.html">Typography</a>
<ul>
<li>Web fonts instead of images of text</li>
<li>Google web fonts</li>
</ul>
</li>
<li><a href="forms.html">Forms</a>
<ul>
<li>Focus</li>
<li>Required Fields</li>
</ul>
</li>
<li><a href="responsive.html">Responsive layouts</a></li>
</ul>
</main>
</body>
</html>