In this section:
Introduction
The Web Accessibility Scan tool checks browser content during browser playback for compliance with web accessibility guidelines such as WCAG 2.2 and Section 508. Web accessibility scans must be chained to existing browser playback tests, which will scan the current state of the web page right after performing that browser playback action.
Chaining the Web Accessibility Scan Tool to Browser Playback
The Web Accessibility Scan tool tests accessibility in the browser and thus must be chained to a Browser Playback test.
To chain an accessibility scan to a browser playback test:
- Right-click the Browser Playback test to which you want to add a Web Accessibility Scan and choose Add Output.
- In the wizard that opens, enable Browser contents (rendered HTML) and click Next.
- Choose Web Accessibility Scan from the list of available tools and click Finish. The Web Accessibility Scan tool opens.
- Change the name, if desired.
- You can limit scope of the scan to an element instead of scanning the entire page. To do so, choose a method by which you will define the element from the menu at the top of the Narrow Scope to Element Locator panel. The options are:
- Use Elements Properties: When this is selected, define the element using the Element name, Attribute name, Attribute value, and/or Index value fields.
- Use XPath: When this is selected, enter a literal XPath string that identifies the element in the XPath field.
- Use Script: When this is selected, enter a script that produces an XPath string that identifies the element. See Extensibility and Scripting Basics for more information about using scripts.
- Save your changes.
Excluding Elements and Rules
It is recommended that you run the Web Accessibility Scan tool at least once without any excludes. If there are violations reported and you wish to exclude them from future scans, you can update the Web Accessibility Scan tool to ignore them.
To exclude elements and rules:
- (Optional but recommended) Run the Web Accessibility Scan tool and review the reported violations. Element locators and rule IDs from the report can be easily added to your exclude tables.
- Double-click the Web Accessibility Scan tool.
- Click Add for the table to which you wish to add an exclude. This opens a new row in the table into which you can add your element locator or rule ID.
- You can copy an element or rule from the violation report into the appropriate table. You can also manually enter element locators to the Elements to Exclude table. Refer to the table below for more details regarding the prefixes used to locate elements.
- Save your changes.
The following table describes prefixes used to locate elements during the Web Accessibility Scan:
| Prefix | Description |
|---|---|
alt= | Searches for elements by their alt attribute value. |
| class= | Searches for elements by a class associated with the element. Only one class name should be used. |
| css= | Interprets the text that follows the prefix as a CSS selector. Searches for elements using that CSS selector. |
| dom= | Interprets the text that follows the prefix as JavaScript that returns one or more web elements. Executes the JavaScript in the context of the page and returns the elements that the JavaScript returns. |
| id= | Searches for elements by their id attribute value. |
| link= | Interprets the text that follows the prefix as link text. Searches for links with that link text. |
| xpath= | Interprets the text that follows the prefix as an XPath selector. Searches for elements using that XPath selector. |
| document. | Interprets the entire string, including document., as JavaScript that returns one or more element. Executes the JavaScript in the context of the page and returns the elements that the JavaScript returns. |
| / | Interprets the entire string, including /, as an XPath selector. Searches for elements using that XPath selector. |
When none of the above prefixes are found, the value is assumed to be an ID and functions as though it were prefixed with id=.
Web Accessibility Rules Enabled
| Rule ID | Description |
|---|---|
| area-alt | Ensures <area> elements of image maps have alternate text. |
| aria-allowed-attr | Ensures an element's role supports its ARIA attributes. |
| aria-braille-equivalent | Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent. |
| aria-command-name | Ensures every ARIA button, link and menuitem has an accessible name. |
| aria-conditional-attr | Ensures ARIA attributes are used as described in the specification of the element's role. |
| aria-deprecated-role | Ensures elements do not use deprecated roles. |
| aria-hidden-body | Ensures aria-hidden="true" is not present on the document body. |
| aria-hidden-focus | Ensures aria-hidden elements are not focusable nor contain focusable elements. |
| aria-input-field-name | Ensures every ARIA input field has an accessible name. |
| aria-meter-name | Ensures every ARIA meter node has an accessible name. |
| aria-progressbar-name | Ensures every ARIA progressbar node has an accessible name. |
| aria-prohibited-attr | Ensures ARIA attributes are not prohibited for an element's role. |
| aria-required-attr | Ensures elements with ARIA roles have all required ARIA attributes. |
| aria-required-children | Ensures elements with an ARIA role that require child roles contain them. |
| aria-required-parent | Ensures elements with an ARIA role that require parent roles are contained by them. |
| aria-roles | Ensures all elements with a role attribute use a valid value. |
| aria-toggle-field-name | Ensures every ARIA toggle field has an accessible name. |
| aria-tooltip-name | Ensures every ARIA tooltip node has an accessible name. |
| aria-valid-attr-value | Ensures all ARIA attributes have valid values. |
| aria-valid-attr | Ensures attributes that begin with aria- are valid ARIA attributes. |
| autocomplete-valid | Ensure the autocomplete attribute is correct and suitable for the form field. |
| avoid-inline-spacing | Ensure that text spacing set through style attributes can be adjusted with custom stylesheets. |
| blink | Ensures <blink> elements are not used. |
| button-name | Ensures buttons have discernible text. |
| bypass | Ensures each page has at least one mechanism for a user to bypass navigation and jump straight to the content. |
| color-contrast | Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds. |
| definition-list | Ensures <dl> elements are structured correctly. |
| dlitem | Ensures <dt> and <dd> elements are contained by a <dl>. |
| document-title | Ensures each HTML document contains a non-empty <title> element. |
| duplicate-id-aria | Ensures every id attribute value used in ARIA and in labels is unique. |
| form-field-multiple-labels | Ensures form field does not have multiple label elements. |
| frame-focusable-content | Ensures <frame> and <iframe> elements with focusable content do not have tabindex=-1. |
| frame-title-unique | Ensures <iframe> and <frame> elements contain a unique title attribute. |
| frame-title | Ensures <iframe> and <frame> elements have an accessible name. |
| html-has-lang | Ensures every HTML document has a lang attribute. |
| html-lang-valid | Ensures the lang attribute of the <html> element has a valid value. |
| html-xml-lang-mismatch | Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page. |
| image-alt | Ensures <img> elements have alternate text or a role of none or presentation. |
| input-button-name | Ensures input buttons have discernible text. |
| input-image-alt | Ensures <input type="image"> elements have alternate text. |
| label | Ensures every form element has a label. |
| link-in-text-block | Ensure links are distinguished from surrounding text in a way that does not rely on color. |
| link-name | Ensures links have discernible text. |
| list | Ensures that lists are structured correctly. |
| listitem | Ensures <li> elements are used semantically. |
| marquee | Ensures <marquee> elements are not used. |
| meta-refresh | Ensures <meta http-equiv="refresh"> is not used for delayed refresh. |
| meta-viewport | Ensures <meta name="viewport"> does not disable text scaling and zooming. |
| nested-interactive | Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies. |
| no-autoplay-audio | Ensures <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio. |
| object-alt | Ensures <object> elements have alternate text. |
| role-img-alt | Ensures [role="img"] elements have alternate text. |
| scrollable-region-focusable | Ensure elements that have scrollable content are accessible by keyboard. |
| select-name | Ensures select element has an accessible name. |
| server-side-image-map | Ensures that server-side image maps are not used. |
| svg-img-alt | Ensures <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text. |
| target-size | Ensure touch target have sufficient size and space. |
| td-headers-attr | Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table. |
| th-has-data-cells | Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe. |
| valid-lang | Ensures lang attributes have valid values. |
| video-caption | Ensures <video> elements have captions. |
Viewing Web Accessibility Issues in Reports
Web accessibility issues are collected in a section of the results reports, separate from other issues. Click the Accessibility Issues link at the top of the report to jump directly to this section.
