You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: microsoft-edge/accessibility/build/index.md
+87-29Lines changed: 87 additions & 29 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -41,7 +41,9 @@ For more information on web accessibility, check out the [Introduction to Web Ac
41
41
42
42
The [Accessible Rich Internet Applications (ARIA)](https://www.w3.org/TR/wai-aria) specification by the W3C's [Web Accessibility Initiative](https://www.w3.org/WAI) defines as a syntax for making dynamic web content and custom user interfaces accessible to all people. ARIA extends HTML by using additional attributes (roles, properties, and states) that are designed to convey custom semantics. These attributes are used by browsers to pass along the controls' state and role to the accessibility API.
43
43
44
-
### Roles, properties, and states
44
+
45
+
<!-- ------------------------------ -->
46
+
#### Roles, properties, and states
45
47
46
48
ARIA roles are set on elements using the [role](https://developer.mozilla.org/docs/Web/HTML/Reference) attribute to give assistive technologies and accessibility APIs information about the element. For example, the below `<li>` element is assigned `role="menuitem"` to signify that it's an item in a menu.
47
49
@@ -82,17 +84,23 @@ Different browsers might map elements to the platform accessibility APIs differe
82
84
83
85
WebAIM conducts surveys with [screen reader](https://webaim.org/projects/screenreadersurvey8) and [low vision](https://webaim.org/projects/lowvisionsurvey2) users that help you decide which assistive technologies and browsers to test.
84
86
85
-
### Learning how to test
87
+
88
+
<!-- ------------------------------ -->
89
+
#### Learning how to test
86
90
87
91
Assistive technologies are sophisticated tools. Don't assume that you're able to immediately start testing with an assistive technology without first learning about how it works. Learning to test with a screen reader has an especially steep learning curve. A novice user of screen readers might think that a screen reader has a bug, while the issue might actually be an error in using the screen reader.
88
92
89
93
[Testing with Screen Readers](https://webaim.org/articles/screenreader_testing) at WebAIM provides more information about learning to test with assistive technologies.
90
94
91
-
### Testing locally
95
+
96
+
<!-- ------------------------------ -->
97
+
#### Testing locally
92
98
93
99
Most devices include assistive technology that is built-in to the OS. Microsoft Windows includes the [Windows Narrator](https://support.microsoft.com/help/22798) screen reader and [Windows Magnifier](https://support.microsoft.com/windows/414948ba-8b1c-d3bd-8615-0e5e32204198). 3rd party assistive technologies like [NVDA](https://www.nvaccess.org/about-nvda), [FreedomscientificSoftwareJaws](https://www.freedomscientific.com/products/software/jaws), and [ZoomText](https://www.freedomscientific.com/products/software/zoomtext) are available to download. Apple macOS includes the [VoiceOver](https://www.apple.com/accessibility/mac/vision) screen reader. And iOS, Android, and Linux all support a variety of assistive technologies.
94
100
95
-
### Testing in virtual machines and emulators
101
+
102
+
<!-- ------------------------------ -->
103
+
#### Testing in virtual machines and emulators
96
104
97
105
Under macOS, if you want to test with an assistive technology only available for Windows, like Windows Narrator or NVDA, create a Windows virtual machine.
98
106
@@ -101,7 +109,9 @@ Under macOS, if you want to test with an assistive technology only available for
101
109
> [!NOTE]
102
110
> The iOS Simulator doesn't currently include VoiceOver.
103
111
104
-
### Cloud-based testing tools
112
+
113
+
<!-- ------------------------------ -->
114
+
#### Cloud-based testing tools
105
115
106
116
If an assistive technology isn't available on your OS or you not possible to install one on a virtual machine or emulator, cloud-based assistive technology testing tools are the next best thing.
107
117
@@ -115,11 +125,15 @@ See also [Cloud-based emulators and simulators](../../devtools-guide-chromium/de
115
125
116
126
These are projects and initiatives for accessibility.
117
127
118
-
### The A11Y project
128
+
129
+
<!-- ------------------------------ -->
130
+
#### The A11Y project
119
131
120
132
[The A11Y Project](http://a11yproject.com) is a community-driven effort to make web accessibility easier. Check out [The A11Y Project](https://a11yproject.com) site to learn about basic accessibility principles, their accessible pattern and widget [library](https://a11yproject.com/patterns), and their [resources](http://a11yproject.com/resources.html) on accessibility software, blogs, books, and tools.
121
133
122
-
### Web Accessibility Initiative (WAI)
134
+
135
+
<!-- ------------------------------ -->
136
+
#### Web Accessibility Initiative (WAI)
123
137
124
138
The W3C [Web Accessibility Initiative (WAI)](https://w3.org/WAI) is an effort to help improve the accessibility of the web. Their site provides a variety of resources for [Getting Started with Web Accessibility](https://www.w3.org/WAI/gettingstarted/Overview.html), [Designing for Inclusion](https://www.w3.org/WAI/users/Overview.html), [tutorials and presentations](https://www.w3.org/WAI/train.html), and more.
125
139
@@ -129,11 +143,15 @@ The W3C [Web Accessibility Initiative (WAI)](https://w3.org/WAI) is an effort to
129
143
130
144
These are blogs about accessibility.
131
145
132
-
### TPGi, LLC
146
+
147
+
<!-- ------------------------------ -->
148
+
#### TPGi, LLC
133
149
134
150
[TPGi, LLC](https://www.tpgi.com/blog) provides consulting and technology solutions to organizations around the world to ensure that their clients reach all audiences effectively and efficiently, while meeting governmental and international standards. Their blog covers topics like web accessibility best practices, accessibility tools, and accessibility trends.
135
151
136
-
### Level Access
152
+
153
+
<!-- ------------------------------ -->
154
+
#### Level Access
137
155
138
156
[Level Access](https://www.levelaccess.com/blog) is a digital accessibility firm supporting their clients in developing and deploying accessible products and services. Their blog addresses topics like ARIA best practices, accessibility trends, webinars, and more.
139
157
@@ -143,15 +161,21 @@ These are blogs about accessibility.
143
161
144
162
These are libraries and examples for accessibility.
145
163
146
-
### ally.js - Tutorials
164
+
165
+
<!-- ------------------------------ -->
166
+
#### ally.js - Tutorials
147
167
148
168
JavaScript library to help modern web applications with accessibility concerns by making accessibility simpler. For more information, go to [ally.js - Tutorials](http://allyjs.io/tutorials).
149
169
150
-
### OpenAjax examples
170
+
171
+
<!-- ------------------------------ -->
172
+
#### OpenAjax examples
151
173
152
174
The [OpenAjax Alliance website](http://oaa-accessibility.org) is an excellent resource for verifying the rules for WAI-ARIA and provides a number of examples of WAI-ARIA implementations.
153
175
154
-
### Patterns
176
+
177
+
<!-- ------------------------------ -->
178
+
#### Patterns
155
179
156
180
[The A11Y Project](http://a11yproject.com) offers a library of accessible widgets and patterns like menus, buttons, tooltips, and more. For more information, go to [Patterns](http://a11yproject.com/patterns.html).
157
181
@@ -161,70 +185,104 @@ The [OpenAjax Alliance website](http://oaa-accessibility.org) is an excellent re
161
185
162
186
These are techniques and tools for improving accessibility.
163
187
164
-
### Accessibility: Creating accessible extension icons for Microsoft Edge
188
+
189
+
<!-- ------------------------------ -->
190
+
#### Accessibility: Creating accessible extension icons for Microsoft Edge
165
191
166
192
Get guidance on creating accessible extensions icons for Microsoft Edge. For more information, go to [Accessibility: Creating accessible extension icons for Microsoft Edge](/archive/microsoft-edge/legacy/developer/extensions/guides/accessibility).
167
193
168
-
### Accessible Name and Description: Computation and Mappings 1.1
194
+
195
+
<!-- ------------------------------ -->
196
+
#### Accessible Name and Description: Computation and Mappings 1.1
169
197
170
198
This W3C mapping document explains how browsers determine name and descriptions of accessible objects from web content languages and expose them in accessibility APIs. For more information, go to [Accessible Name and Description: Computation and Mappings 1.1](https://www.w3.org/TR/accname-1.1).
171
199
172
-
### Accessibility Evaluation Resources
200
+
201
+
<!-- ------------------------------ -->
202
+
#### Accessibility Evaluation Resources
173
203
174
204
Accessibility Evaluation Resources is a multi-page resource by the W3C that outlines different approaches for evaluating websites for accessibility. For more information, go to [Accessibility Evaluation Resources](https://www.w3.org/WAI/eval/Overview.html).
175
205
176
-
### Assistive technology compatibility tests
206
+
207
+
<!-- ------------------------------ -->
208
+
#### Assistive technology compatibility tests
177
209
178
210
Test results showing how different content types and standards behave in assistive technologies (AT) like screen readers. For more information, go to [Assistive technology compatibility tests](http://www.powermapper.com/tests).
179
211
180
-
### Building accessible websites just got a lot easier
212
+
213
+
<!-- ------------------------------ -->
214
+
#### Building accessible websites just got a lot easier
181
215
182
216
This .NET Web Development and Tools blog post describes the Visual Studio extension [Web Accessibility Checker](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebAccessibilityChecker). For more information, go to [Building accessible websites just got a lot easier](https://devblogs.microsoft.com/aspnet/building-accessible-websites-just-got-a-lot-easier).
183
217
184
-
### Core Accessibility API Mappings 1.1
218
+
219
+
<!-- ------------------------------ -->
220
+
#### Core Accessibility API Mappings 1.1
185
221
186
222
This W3C mapping document explains how the semantics of web content languages are exposed to accessibility APIs. For more information, go to [Core Accessibility API Mappings 1.1](https://www.w3.org/TR/core-aam-1.1).
187
223
188
-
### Easy Checks – A First Review of Web Accessibility
224
+
225
+
<!-- ------------------------------ -->
226
+
#### Easy Checks – A First Review of Web Accessibility
189
227
190
228
A series of quick checks by the WAI that help you assess the accessibility of a web page. For more information, go to [Easy Checks – A First Review of Web Accessibility](https://www.w3.org/WAI/eval/preliminary.html).
191
229
192
-
### How to Meet WCAG 2.0
230
+
231
+
<!-- ------------------------------ -->
232
+
#### How to Meet WCAG 2.0
193
233
194
234
A quick reference to Web Content Accessibility Guidelines (WCAG) 2.0 requirements (success criteria) and techniques. For more information, go to [How to Meet WCAG 2.0](https://www.w3.org/WAI/WCAG20/quickref).
195
235
196
-
### HTML Accessibility API Mappings 1.0
236
+
237
+
<!-- ------------------------------ -->
238
+
#### HTML Accessibility API Mappings 1.0
197
239
198
240
This W3C mappings document explains how HTML5.1 element and attributes map to platform accessibility APIs. For more information, go to [HTML Accessibility API Mappings 1.0](https://www.w3.org/TR/html-aam-1.0).
199
241
200
-
### Quick Tips
242
+
243
+
<!-- ------------------------------ -->
244
+
#### Quick Tips
201
245
202
246
A list of quick web development tips for accessibility by [The A11Y Project](http://a11yproject.com). For more information, go to [Quick Tips](http://a11yproject.com#Quick-tips).
203
247
204
-
### Site Scan
248
+
249
+
<!-- ------------------------------ -->
250
+
#### Site Scan
205
251
206
252
The Site Scan tool on Microsoft Edge Dev Center checks for out-of-date libraries, layout issues, and accessibility issues. For more information, go to [Site Scan](https://developer.microsoft.com/microsoft-edge/tools).
207
253
208
-
### Techniques for WCAG 2.0
254
+
255
+
<!-- ------------------------------ -->
256
+
#### Techniques for WCAG 2.0
209
257
210
258
Techniques from the W3C that provide guidance for web developers on meeting [Web Content Accessibility Guidelines (WCAG) 2.0](https://w3.org/TR/WCAG20) success criteria. For more information, go to [Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/Overview.html).
211
259
212
-
### Tips on Developing for Web Accessibility
260
+
261
+
<!-- ------------------------------ -->
262
+
#### Tips on Developing for Web Accessibility
213
263
214
264
Tips from the W3C on developing web content that is more accessible to people with disabilities. For more information, go to [Tips on Developing for Web Accessibility](https://w3.org/WAI/gettingstarted/tips/developing.html).
215
265
216
-
### WAI-ARIA Authoring Practices 1.1
266
+
267
+
<!-- ------------------------------ -->
268
+
#### WAI-ARIA Authoring Practices 1.1
217
269
218
270
A document by the W3C that provides readers with an understanding of how to use WAI-ARIA 1.1 and recommends approaches to make widgets, navigation, and behaviors accessible using WAI-ARIA roles, states, and properties. For more information, go to [WAI-ARIA Authoring Practices 1.1](http://w3c.github.io/aria-practices).
219
271
220
-
### WAI Guidelines and Techniques
272
+
273
+
<!-- ------------------------------ -->
274
+
#### WAI Guidelines and Techniques
221
275
222
276
A series of web accessibility guidelines and standards developed by the WAI. For more information, go to [WAI Guidelines and Techniques](https://w3.org/WAI/guid-tech.html).
223
277
224
-
### Web Accessibility Evaluation Tools List
278
+
279
+
<!-- ------------------------------ -->
280
+
#### Web Accessibility Evaluation Tools List
225
281
226
282
A list of web accessibility evaluation tools to help determine if websites meet accessibility guidelines. For more information, go to [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/ER/tools/index.html).
227
283
228
-
### Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone
284
+
285
+
<!-- ------------------------------ -->
286
+
#### Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone
229
287
230
288
A series of short situational videos by the W3C about the impact of accessibility and the benefits for everyone. For more information, go to [Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone](https://w3.org/WAI/perspectives).
0 commit comments