Skip to content

Commit

Permalink
Merge pull request #3045 from MicrosoftDocs/user/pabrosse/devtools-a11y
Browse files Browse the repository at this point in the history
Move info from DevTools > "Accessibility-testing features" to A11y > "Resources for accessibility testing"
  • Loading branch information
captainbrosset authored Feb 7, 2024
2 parents f7fdb12 + 1b755af commit 35b495c
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 188 deletions.
40 changes: 37 additions & 3 deletions microsoft-edge/accessibility/test.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ ms.author: msedgedevrel
ms.topic: conceptual
ms.service: microsoft-edge
ms.assetid: 737ac54c-ad89-4b3f-bbe2-4e4169d3f364
ms.date: 01/07/2021
ms.date: 02/06/2024
---
# Resources for accessibility testing

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


<!-- ====================================================================== -->
## Accessibility testing in DevTools
## Accessibility testing features in DevTools

* [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.
DevTools includes accessibility-testing features, such as tools that automatically generate accessibility reports for a webpage, including the **Issues** tool and the **Lighthouse** tool.

To learn more about the accessibility testing features of DevTools, see [Accessibility-testing features](../devtools-guide-chromium/accessibility/reference.md).


<!-- ====================================================================== -->
## Additional manual accessibility testing

DevTools also supports manual accessibility testing, such as:

* Inspect different parts of the page by using the **Inspect** tool.
* Use the keyboard to navigate the page.
* Look for issues that arise when interacting with the page.
* Look for issues related to changes in display, such as making the window narrow.

You might need to perform additional checks to ensure your website is usable by people with different needs, such as:

* Testing when zoomed-in.
* Testing with screen readers.
* Testing with voice recognition.
* Testing in high-contrast mode.


<!-- ====================================================================== -->
## Use testers who have different accessibility needs

Ideally, have testers with different accessibility needs do manual accessibility testing.

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.


<!-- ====================================================================== -->
## Use Accessibility Insights

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/).


<!-- ====================================================================== -->
Expand Down
48 changes: 2 additions & 46 deletions microsoft-edge/devtools-guide-chromium/accessibility/reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,54 +78,10 @@ This article lists typical accessibility aspects to test for webpages, and the c
| 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) |


<!-- ====================================================================== -->
## Further automated and manual testing

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.


#### First, use DevTools automated reports and manual testing

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.

Microsoft Edge, including DevTools, also supports manual accessibility testing, such as:
* Inspect different parts of the page by using the **Inspect** tool.
* Use the keyboard to navigate the page.
* Look for issues that arise when interacting with the page.
* Look for issues related to changes in display, such as making the window narrow.


#### Perform additional checks

After the tests that are listed above, you may need to perform additional checks, such as:

* Testing when zoomed-in.
* Testing with screen readers.
* Testing with voice recognition.
* Testing in high-contrast mode.


#### Use testers who have different accessibility needs

Ideally, have testers with different accessibility needs use these automated testing features and do manual accessibility testing.

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.


#### Use Accessibility Insights

You can also use the [Assessments](https://accessibilityinsights.io/docs/en/web/getstarted/assessment/) feature of [Accessibility Insights](https://accessibilityinsights.io).


#### Use webhint in Visual Studio Code

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.


<!-- ====================================================================== -->
## See also

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

0 comments on commit 35b495c

Please sign in to comment.