{"id":315,"date":"2022-02-14T08:14:13","date_gmt":"2022-02-14T16:14:13","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/engineering-at-microsoft\/?p=315"},"modified":"2022-02-14T08:15:04","modified_gmt":"2022-02-14T16:15:04","slug":"accessibility-insights-for-web","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/engineering-at-microsoft\/accessibility-insights-for-web\/","title":{"rendered":"Accessibility Insights for Web"},"content":{"rendered":"

This month we are continuing the series about Accessibility Insights, a suite of open-source accessibility testing tools. In December, John’s post<\/a> introduced Accessibility Insights for Windows<\/a>, our tool that enables users to evaluate the accessibility of Windows applications. For this blog entry, we\u2019ll discuss Accessibility Insights for Web<\/a>, our Chrome and Edge extension that helps users find and fix web accessibility issues. You can evaluate web pages against the Web Content Accessibility Guidelines (WCAG) standards, and the extension provides support for WCAG 2.1<\/a>. The extension has two primary workflows: the lightweight FastPass experience and the more detailed Assessment process. Let\u2019s explore both and learn how Accessibility Insights for Web can help you build web apps and web sites that are more accessible than before!<\/p>\n

FastPass<\/h3>\n

The FastPass<\/a> experience helps users identify common, high-impact accessibility issues in approximately five minutes. This process involves three steps: The first step, Automated Checks<\/a>, automatically evaluates your page against dozens of accessibility requirements; these checks are powered by the axe-core<\/strong><\/a> rules engine. Failures are immediately flagged and highlighted on the target page. You can use the visual helper toggle to show or hide failures on the target page. In the extension, you are presented with a list of failed instances grouped by violation.<\/p>\n

\"Failures<\/a><\/p>\n

You can expand the list to see detailed information about each failure, its location, and a recommendation for How to fix <\/strong>it. The extension also features a Resource for this rule<\/strong> section with hyperlinks to additional documentation. This helps you learn about the \u201cwhy\u201d behind the applicable rule.<\/p>\n

\"Four<\/a><\/p>\n

For each failure instance, the extension offers options that enable you to file an issue in either a GitHub or Azure Boards repository, or to copy the details of the failure to the clipboard, allowing you to paste the information in any other tool of your choice and share your findings with others. You can also export the results of your Automated Checks <\/strong>run to an HTML report file.<\/p>\n

The second step of FastPass<\/strong> is Tab Stops<\/a>, a manual assisted test that helps you assess accessibility issues related to keyboard access. When the test starts, you will be redirected to the target page where you can navigate using the keyboard. Accessibility Insights for Web will highlight any elements which receive focus, numbering them so that it is easier for you to identify the tab order. By following the path shown, you can quickly identify accessibility issues such as missing tab stops, keyboard traps, or incorrect tab order.<\/p>\n

\"On<\/a><\/p>\n

The third, optional step is Needs Review<\/a>, which helps you identify additional potential accessibility issues on your web page or site. This automated test generates a list of elements that require human review to determine if they pass or fail accessibility criteria. Like the Automated Checks<\/strong> test, you will be presented with a list of instances grouped by rule. Expanding a rule provides How to check <\/strong>instructions so you can manually assess each instance.<\/p>\n

\"Needs<\/a><\/p>\n

Assessment<\/h3>\n

Through a mixture of 20+ manual, assisted, and automated checks, our Assessment<\/a> workflow allows you to verify your page\u2019s conformance with WCAG 2.1 level AA standards and success criteria.<\/p>\n

\"Target<\/a><\/p>\n

The first test is Automated Checks<\/strong> (the same test you run for the first step of FastPass<\/strong>). You can then run the remaining tests that evaluate your page against the additional WCAG 2.1 success criteria, with categories including headings, color contrast, etc. Each test section begins with a Getting started <\/strong>page that provides introductory information and context for this group of requirements. This includes documentation about why these tests matter, Do\u2019s and Don’ts, and links to the relevant WCAG guidance. <\/strong><\/p>\n

\"Keyboard<\/a><\/p>\n

Each requirement features step-by-step instructions, examples, and How to test<\/strong> guidance to help you diagnose and, if necessary, resolve the issue. Several tests are \u201cassisted,\u201d meaning either the tool automatically identifies potential failures for you to manually verify, or the tool provides you with a visual helper to highlight failure instances in the target page. At the end of each requirement, you indicate whether your page has passed or failed a given requirement.<\/p>\n

\"Test<\/a><\/p>\n

At any time during the Assessment <\/strong>workflow, you can access the results in the Overview<\/strong> section, where a summary of your progress, passing percentage and failing percentage are available for easy review. You can also easily export the result in your preferred format (either HTML or JSON). You can learn more about generating a report<\/a> on our documentation site.<\/p>\n

This concludes our introduction to Accessibility Insights for Web! You can visit https:\/\/accessibilityinsights.io<\/a> to learn more and download the extension for either Chrome or Edge browsers. If you\u2019re interested in contributing or want to install the Canary\/Insider versions of the tool, you can check out the GitHub repo at https:\/\/github.com\/Microsoft\/accessibility-insights-web<\/a>. Next time we’ll share more information about our Android accessibility tools, so stay tuned for even more ways you can build accessible and inclusive applications.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

In this post, Jacqueline Gibson goes over Accessibility Insights for Web, Microsoft’s open-sourced Chrome and Edge extension that helps users find and fix web accessibility issues.<\/p>\n","protected":false},"author":84002,"featured_media":113,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[4,5,21],"class_list":["post-315","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering-at-microsoft","tag-1es","tag-accessibility","tag-ally"],"acf":[],"blog_post_summary":"

In this post, Jacqueline Gibson goes over Accessibility Insights for Web, Microsoft’s open-sourced Chrome and Edge extension that helps users find and fix web accessibility issues.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/engineering-at-microsoft\/wp-json\/wp\/v2\/posts\/315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/engineering-at-microsoft\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/engineering-at-microsoft\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/engineering-at-microsoft\/wp-json\/wp\/v2\/users\/84002"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/engineering-at-microsoft\/wp-json\/wp\/v2\/comments?post=315"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/engineering-at-microsoft\/wp-json\/wp\/v2\/posts\/315\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/engineering-at-microsoft\/wp-json\/wp\/v2\/media\/113"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/engineering-at-microsoft\/wp-json\/wp\/v2\/media?parent=315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/engineering-at-microsoft\/wp-json\/wp\/v2\/categories?post=315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/engineering-at-microsoft\/wp-json\/wp\/v2\/tags?post=315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}