Skip to content

Commit 35b495c

Browse files
Merge pull request #3045 from MicrosoftDocs/user/pabrosse/devtools-a11y
Move info from DevTools > "Accessibility-testing features" to A11y > "Resources for accessibility testing"
2 parents f7fdb12 + 1b755af commit 35b495c

File tree

3 files changed

+107
-188
lines changed

3 files changed

+107
-188
lines changed

microsoft-edge/accessibility/test.md

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ ms.author: msedgedevrel
66
ms.topic: conceptual
77
ms.service: microsoft-edge
88
ms.assetid: 737ac54c-ad89-4b3f-bbe2-4e4169d3f364
9-
ms.date: 01/07/2021
9+
ms.date: 02/06/2024
1010
---
1111
# Resources for accessibility testing
1212

@@ -16,9 +16,43 @@ Use the following tools and testing procedures to evaluate your website for acce
1616

1717

1818
<!-- ====================================================================== -->
19-
## Accessibility testing in DevTools
19+
## Accessibility testing features in DevTools
2020

21-
* [Accessibility-testing features](../devtools-guide-chromium/accessibility/reference.md) - A list of accessibility aspects to test, and which features of DevTools to use for each test.
21+
DevTools includes accessibility-testing features, such as tools that automatically generate accessibility reports for a webpage, including the **Issues** tool and the **Lighthouse** tool.
22+
23+
To learn more about the accessibility testing features of DevTools, see [Accessibility-testing features](../devtools-guide-chromium/accessibility/reference.md).
24+
25+
26+
<!-- ====================================================================== -->
27+
## Additional manual accessibility testing
28+
29+
DevTools also supports manual accessibility testing, such as:
30+
31+
* Inspect different parts of the page by using the **Inspect** tool.
32+
* Use the keyboard to navigate the page.
33+
* Look for issues that arise when interacting with the page.
34+
* Look for issues related to changes in display, such as making the window narrow.
35+
36+
You might need to perform additional checks to ensure your website is usable by people with different needs, such as:
37+
38+
* Testing when zoomed-in.
39+
* Testing with screen readers.
40+
* Testing with voice recognition.
41+
* Testing in high-contrast mode.
42+
43+
44+
<!-- ====================================================================== -->
45+
## Use testers who have different accessibility needs
46+
47+
Ideally, have testers with different accessibility needs do manual accessibility testing.
48+
49+
Automated tools can't find all the accessibility problems of a website, because many of the barriers show up only during interactive use. None of the accessibility-testing features can replace testing with people that use assistive technologies and following a plan to check for all the required tests.
50+
51+
52+
<!-- ====================================================================== -->
53+
## Use Accessibility Insights
54+
55+
You can also use the assessment feature of [Accessibility Insights](https://accessibilityinsights.io) to measure your website's compliance with the [Web Content Accessibility Guidelines (WCAG) 2.2 Level AA](https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2&levels=aaa) success criteria. To learn more, see [Assessment in Accessibility Insights for Web](https://accessibilityinsights.io/docs/en/web/getstarted/assessment/).
2256

2357

2458
<!-- ====================================================================== -->

microsoft-edge/devtools-guide-chromium/accessibility/reference.md

Lines changed: 2 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -78,54 +78,10 @@ This article lists typical accessibility aspects to test for webpages, and the c
7878
| Verify that the webpage layout is usable when narrow | **Device Emulation** tool | [Verify that the webpage layout is usable when narrow](./narrow.md), and [Emulate mobile devices (Device Emulation)](../device-mode/index.md) |
7979

8080

81-
<!-- ====================================================================== -->
82-
## Further automated and manual testing
83-
84-
Testing the accessibility of your website is important to ensure that people with different needs can use your website. The DevTools features described above are a good start to catch accessibility problems in your products. These features range from automated checks and manual detail checks to simulation of different states and environments.
85-
86-
87-
#### First, use DevTools automated reports and manual testing
88-
89-
As covered in the tables above, DevTools includes automated accessibility-testing features, such as tools that automatically generate accessibility reports for a webpage, including the **Issues** tool and the **Lighthouse** tool. You can also use the Assessments feature of Accessibility Insights, per below.
90-
91-
Microsoft Edge, including DevTools, also supports manual accessibility testing, such as:
92-
* Inspect different parts of the page by using the **Inspect** tool.
93-
* Use the keyboard to navigate the page.
94-
* Look for issues that arise when interacting with the page.
95-
* Look for issues related to changes in display, such as making the window narrow.
96-
97-
98-
#### Perform additional checks
99-
100-
After the tests that are listed above, you may need to perform additional checks, such as:
101-
102-
* Testing when zoomed-in.
103-
* Testing with screen readers.
104-
* Testing with voice recognition.
105-
* Testing in high-contrast mode.
106-
107-
108-
#### Use testers who have different accessibility needs
109-
110-
Ideally, have testers with different accessibility needs use these automated testing features and do manual accessibility testing.
111-
112-
Automated tools can't find all the problems in a product, because many of the accessibility barriers show up only during interactive use. None of these features can replace a proper round of testing with people that use assistive technologies and following a plan to check for all the required tests.
113-
114-
115-
#### Use Accessibility Insights
116-
117-
You can also use the [Assessments](https://accessibilityinsights.io/docs/en/web/getstarted/assessment/) feature of [Accessibility Insights](https://accessibilityinsights.io).
118-
119-
120-
#### Use webhint in Visual Studio Code
121-
122-
Another way to find out what to do to improve your webpage is to use the [webhint extension for Visual Studio Code](https://aka.ms/webhint4code). This extension flags the readily detectable accessibility problems in your source code and gives insights on how to fix them.
123-
124-
12581
<!-- ====================================================================== -->
12682
## See also
12783

128-
* [Navigate DevTools with assistive technology](navigation.md)
129-
* [Accessibility testing](../../accessibility/test.md)
84+
* [Navigate DevTools with assistive technology](./navigation.md)
85+
* [Resources for accessibility testing](../../accessibility/test.md)
13086
* [Accessibility principles and best practices](https://developer.mozilla.org/docs/Web/Accessibility) at MDN
13187
* [Screen reader](https://developer.mozilla.org/docs/Glossary/Screen_reader) at MDN

0 commit comments

Comments
 (0)