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 | Ensure <area> elements of image maps have alternate text. |
| aria-allowed-attr | Ensure 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 | Ensure every ARIA button, link and menuitem has an accessible name. |
| aria-conditional-attr | Ensure ARIA attributes are used as described in the specification of the element's role. |
| aria-deprecated-role | Ensure elements do not use deprecated roles. |
| aria-hidden-body | Ensure aria-hidden="true" is not present on the document body. |
| aria-hidden-focus | Ensure aria-hidden elements are not focusable nor contain focusable elements. |
| aria-input-field-name | Ensure every ARIA input field has an accessible name. |
| aria-meter-name | Ensure every ARIA meter node has an accessible name. |
| aria-progressbar-name | Ensure every ARIA progressbar node has an accessible name. |
| aria-prohibited-attr | Ensure ARIA attributes are not prohibited for an element's role. |
| aria-required-attr | Ensure elements with ARIA roles have all required ARIA attributes. |
| aria-required-children | Ensure elements with an ARIA role that require child roles contain them. |
| aria-required-parent | Ensure elements with an ARIA role that require parent roles are contained by them. |
| aria-roles | Ensure all elements with a role attribute use a valid value. |
| aria-toggle-field-name | Ensure every ARIA toggle field has an accessible name. |
| aria-tooltip-name | Ensure every ARIA tooltip node has an accessible name. |
| aria-valid-attr-value | Ensure all ARIA attributes have valid values. |
| aria-valid-attr | Ensure attributes that begin with aria- are valid ARIA attributes. |
| autocomplete-valid | Ensures that the autocomplete attribute is correct and suitable for the form field. |
| avoid-inline-spacing | Ensures that text spacing set through style attributes can be adjusted with custom stylesheets. |
| blink | Ensure <blink> elements are not used. |
| button-name | Ensure buttons have discernible text. |
| bypass | Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content. |
| color-contrast | Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds. |
| definition-list | Ensure <dl> elements are structured correctly. |
| dlitem | Ensure <dt> and <dd> elements are contained by a <dl>. |
| document-title | Ensure each HTML document contains a non-empty <title> element. |
| duplicate-id-aria | Ensure every id attribute value used in ARIA and in labels is unique. |
| form-field-multiple-labels | Ensure form field does not have multiple label elements. |
| frame-focusable-content | Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1. |
| frame-title-unique | Ensure <iframe> and <frame> elements contain a unique title attribute. |
| frame-title | Ensure <iframe> and <frame> elements have an accessible name. |
| html-has-lang | Ensure every HTML document has a lang attribute. |
| html-lang-valid | Ensure 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 | Ensure <img> elements have alternate text or a role of none or presentation. |
| input-button-name | Ensure input buttons have discernible text. |
| input-image-alt | Ensure <input type="image"> elements have alternate text. |
| label | Ensure 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 | Ensure links have discernible text. |
| list | Ensure that lists are structured correctly. |
| listitem | Ensure <li> elements are used semantically. |
| marquee | Ensure <marquee> elements are not used. |
| meta-refresh | Ensure <meta http-equiv="refresh"> is not used for delayed refresh. |
| meta-viewport | Ensure <meta name="viewport"> does not disable text scaling and zooming. |
| nested-interactive | Ensure 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 | Ensure <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 | Ensure <object> elements have alternate text. |
| role-img-alt | Ensure [role="img"] elements have alternate text. |
| scrollable-region-focusable | Ensure elements that have scrollable content are accessible by keyboard. |
| select-name | Ensure select element has an accessible name. |
| server-side-image-map | Ensure that server-side image maps are not used. |
| summary-name | Ensure summary elements have discernible text. |
| svg-img-alt | Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text. |
| target-size | Ensure touch targets 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 | Ensure lang attributes have valid values. |
| video-caption | Ensure <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.
