The Visual ARIA Bookmarklet

• Visual ARIA can be used within classrooms by educators to physically show sighted students what ARIA does and how it works, and how the improper use of ARIA causes accessibility issues when misapplied.
• Sighted students can use Visual ARIA to evaluate their own projects as they learn accessible coding practices, with real-time feedback to identify their mistakes and coach them when necessary.
• Online learning programs can incorporate Visual ARIA to provide real-time feedback as students build test widgets to practice through experience and repetition.
• Sighted Quality Analysis teams can use Visual ARIA to reliably evaluate ARIA usage and related interactivity for all public and private services and products, without having to first understand or have experience using Assistive Technologies in advance.
• Teams of sighted engineers can incorporate Visual ARIA within the development process to see how ARIA is being used within their projects, and whether ARIA is being used correctly according to spec when interacted with.
• Any sighted person who is interested in ARIA can use Visual ARIA to see where and how ARIA is used on any website to better understand how Assistive Technology users are impacted by its use or misuse.

The bookmarklet script includes a small amount of JavaScript, which loads the Visual ARIA JavaScript setup file.

This small JavaScript file then loads the roles.css stylesheet, which comprises all of the Visual ARIA cascading logic functionality.

The JavaScript file then monitors the page for changes to ARIA roles and supporting attributes associated with HTML input and img elements, which is necessary since these elements don't support the use of the :before and :after CSS pseudo elements.

Since all of the processing power is handled using CSS, visual feedback by Visual ARIA is instantaneous, and should work correctly within any CSS3 compliant browser within any operating system on any desktop or mobile device.

Though the coaching advice within Visual ARIA is geared for desktop keyboard interactions, the ARIA spec compliance algorithms conveyed by Visual ARIA are applicable to both desktop and mobile platforms equally.

Visual ARIA is very simple to use.

1. Navigate to the webpage that you wish to examine.
2. Activate the Visual ARIA Bookmarklet from your Favorites or Bookmarks menu, and wait for Visual ARIA to load. The time for this may vary depending on the speed of your internet connection.

You will then see various colored borders where ARIA roles are detected, and tooltips to convey their purpose and supporting attributes.

These borders and tooltips follow several distinct color schemes to identify the differences between static and interactive widget roles.

To view the Alternative Text Calculation for any form field, link, or simple interactive widget role, hover the mouse over the active element.

• Purple border with purple tooltip: Identifies landmark and region roles.
• Blue border with blue tooltip: Identifies structural roles.
• Red border with red tooltip: Identifies role usage errors within structural role usage.

• Fuchsia border with fuchsia tooltip: Identifies live region roles and associated attributes.

• Orange border with orange tooltip: Identifies technically compliant interactive role usage. (Requires keyboard testing to validate functionality)
• Green border with green tooltip: Identifies technically compliant interactive role usage that matches the correct focus management for that role type.
• Red border with red tooltip: Identifies role usage and focus management errors within interactive role usage.

When interacting with keyboard accessible widget roles, the goal is to turn both the focus outline and border of the focused widget role green. This conveys that focus management and ARIA widget role usage are correctly synchronized.

If however you see two different colored borders on the same widget role, such as orange and red, then focus management and ARIA widget role usage for this implementation are incorrect and not programmed according to spec.

Visual ARIA will automatically calculate the Alternative Text Calculation for any form field, link, or simple ARIA interactive widget role, and display this information when the mouse is hovered over the element.

There are some important details about this feature that need to be explained however.

There are two properties that need to be understood within the Accessibility Tree, the Name, and the Description. The Name represents the calculated label text for the active element, and the Description represents supplementary information that can be used by Assistive Technologies to accompany the Name.

aria-labelledby

Caveats: Must not be included with aria-label, nor with the HTML label element with matching 'for' and 'id' attributes. Also, aria-labelledby cannot recursively reference other elements that include aria-labelledby. The presence of role="presentation" or role="none" will nullify aria-labelledby on the same node.

aria-label

Caveats: Only if aria-labelledby is not set. If included within a container referenced via aria-labelledby, the HTML label element with matching 'for' and 'id' attributes, or aria-describedby, the value of aria-label will supersede any embedded content or additional aria-label attribute values; which will be ignored when setting the Accessible Name of the parent role. The presence of role="presentation" or role="none" will nullify aria-label on the same node.

HTML label element with matching 'for' and 'id' attributes

Caveats: Only if aria-labelledby or aria-label is not set; on HTML input and select elements only.

HTML 'alt' attribute

Caveats: Only if aria-labelledby or aria-label is not set; on HTML img elements only. The presence of role="presentation" or role="none" will nullify 'alt' on the same node.

HTML 'title' attribute

Caveats: Only if aria-labelledby, aria-label, or 'alt' is not set; on HTML img elements only. The presence of role="presentation" or role="none" will nullify 'title' on the same node.

aria-describedby

Caveats: Must not be included with the HTML 'title' attribute, which will be overwritten by aria-describedby. The presence of role="presentation" or role="none" will nullify aria-describedby on the same node.

HTML 'title' attribute

Caveats: Only when applied to active elements that are not HTML img elements. Must not be included with aria-describedby, which will overwrite the value of 'title' as the Description. The presence of role="presentation" or role="none" will nullify 'title' on the same node.

Any use of aria-hidden="true" or the CSS properties display:none or visibility:hidden, will cancel the naming calculation for the referenced element and all elements within the subtree of that element.

Additionally, the presence of CSS content via the ::before and ::after pseudo elements are also included as part of the naming calculation.

The Name and Description exposed by Visual ARIA strictly follows the Alternative Text Calculation for interactive elements, which may not exactly match what is represented by the Accessibility Tree within certain browsers, nor what is conveyed by Assistive Technologies.

The value in exposing this calculation however, is to identify current bugs within browsers that need to be reported to their venders when discovered using Object Inspector for example, as well as bugs with Assistive Technologies that need to be reported to AT venders. This will lead to better interoperability support in the future.

It is important to note that Visual ARIA will include content added using CSS pseudo elements as part of the estimated naming calculation, but not for the element that includes the specific role. Otherwise the calculation would overwrite the status tooltips rendered by Visual ARIA.

• All HTML input, select, and button elements.
• All HTML A elements that include an 'href' attribute.
• All HTML5 progress elements.
• All of the ARIA roles: "button", "checkbox", "link", "searchbox", "scrollbar", "slider", "spinbutton", "switch", "textbox", "combobox", "option", "menuitem", "menuitemcheckbox", "menuitemradio", "radio", "tab", "treeitem"

Since the HTML img, input, textarea, and progress elements cannot support the use of the :before and :after CSS pseudo elements, tooltip and border coloration may sometimes differ.

Please address any questions or support issues to the Accessibility Innovators LinkedIn group.