UI Accessibility Checker ARIA Verifications
Contents
ARIA Verifications
Warning - ARIA Data Table Description
Error - ARIA Table Name and Header
Error - ARIA Range Control Attributes Missing
Error - ARIA Range Control Attribute Out of Range
Error - ARIA Container Tabindex
Error - ARIA Container Keyboard Events
Error - ARIA Container (no active descendant) Tabindex
Error - ARIA Container (no active descendants) Keyboard Events
All semantically important UI elements such as form fields (for example, input, select, textarea), images, buttons and landmarks (tags representing logical regions) must have the accessible name to allow screen readers to correctly announce them.
To fix this error, set the accessible name in one of the following ways (listed in the order of preference):
- Form fields: Use the LABEL tag and set the for attribute to the id of the target field.
- Image/image button: Set the alt attribute.
- Buttons: Set the button caption text.
- For any element:
o aria-labelledby attribute: Set to the id of the element containing the accessible name string .
o aria-label attribute: Set to the accessible name string.
o title attribute: Set to the accessible name string (also create a tooltip).
Example:
<!-- For landmark tags, set the accessible name by using the aria-labelledby attribute to reference the visible headers. -->
<h1 id="formHeader">Application Form</h1>
<form aria-labelledby="formHeader">
<!-- For input fields, use the LABEL tag with the for attribute. -->
<label for="fullName">Full Name</label>
<input id="fullName" type="text" />
<!-- If there is no visible text that can be referenced, set the accessible name by using aria-label or title attributes. -->
<input type="file" aria-label="Your photo"/>
<!-- For images, use the alt attribute. -->
<img src="…" alt="Uploaded photo" />
<!-- For buttons, caption text is also used as the accessible name. -->
<button onclick="processForm()">Send</button>
<!-- For image buttons, use the alt attribute to define the accessible name. -->
<input type="image" src="images/moreinfo.png" alt="Show more info"/>
<!--
For elements with inner text this error can be
suppressed because the accessible name is set by default. -->
<div
role="banner">Accessible
name set by default</div>
</form >
This error applies to:
Form input fields:
- HTML tags:
INPUT[type= "text|password|checkbox|radio|file|email|tel|color|date|datetime|datetime-local|time|week|month|number|range|search|url"],
SELECT, DATALIST, TEXTAREA
- WAI-ARIA roles: checkbox, combobox, listbox, radiogroup, radio, textbox, tree, slider, spinbutton
Images/image buttons/ buttons
- HTML tags: IMG, INPUT[type=“image”|“button”], BUTTON
- WAI-ARIA roles: img, button
Landmarks:
- WAI-ARIA roles: region, banner, complementary, contentinfo, form, main, navigation, search
This warning indicates that a table is marked as layout only (has role="presentation"), but it also contains accessibility information as if it was a data table, which can be confusing for screen reader users.
To address this warning, determine whether the table actually is just a layout table and, if so, remove the accessible markup:
- CAPTION tag, aria-labelledby, aria-label, or title attributes
- summary or aria-describedby attributes
- TH header tags
If you determine that a table does need accessibility markup, remove the role attribute or set it to a value other than "presentation".
Example:
<!-- Layout tables shoudn’t contain accessibility markup. -->
<table role="presentation" summary="…">
<caption>…</caption>
<thead>
<tr>
<th>…</th>
<th>…</th>
…
</tr>
</thead>
<tbody>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
</tbody>
</table>
This warning indicates that the table is identified as a data table but it doesn’t have an accessible description defined.
To address this warning, define a table accessible description by using the summary attribute or the aria-describedby attribute.
Example:
<!-- Define a table description by using the summary attribute. -->
<table summary="The first column contains the list of examples. In the second column ...">
…
</table>
<!-- Define a table description using the aria-describedby attribute. -->
<p id="tableHeader" >The first column contains the list of examples. In the second column ...</p>
<table aria-describedby="tableHeader" >
…
</table>
Note: Not all data tables are required to have an accessible description. You
should define an accessible description if user need more information to
understand the data table structure and content.
This warning applies to HTML tables with more than one cell.
This error indicates that a data table doesn’t have an accessible name or header information.
To fix this error, define an accessible name by using the CAPTION tag, or the aria-labelledby, aria-label or title attributes. If the table is missing header information, use TH header tags
to mark header cells.
Example:
<!-- Data tables must contain an accessibile name and header information. -->
<table >
<caption>ARIA Examples</caption>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
…
</tr>
</thead>
<tbody>
<tr>
<td>Accessible tables</td>
<td>This example illustrates how to make data tables accessible using ARIA</td>
…
</tr>
</tbody>
</table>
An element that has its role attribute set to "grid" must have the structure defined by the WAI-ARIA grid role, including the accessible name for the grid and its header subelements.
To fix this error, review your implementation to ensure that it complies with the WAI-ARIA specification. Specifically, ensure that the structure meets the following rules:
- grid contains row or rowgroup elements
- rowgroup contains row elements
- row elements contain columnheader or gridcell or rowheader elements
An accessible name should be defined for grid, columnheader, gridcell and rowheader elements by using one of the following attributes:
- aria-labelledby attribute for referencing the element containing text
- aria-label attribute to set the accessible name directly
- title attribute for creating a tooltip which is at the same time used as a name
This error indicates that an element has a mouse or keyboard event handler (click, mousedown, mouseup, mousemove, mouseout, mouseover, keyup, keydown, or keypress), but doesn’t have the role attribute set, and is not one of the HTML tags that has an implicit WAI-ARIA role (for example, A, BUTTON, IMG, INPUT, SELECT and so on).
Setting the role attribute for interactive elements that have no implicit role (such as a DIV tag) is necessary to expose the element's behavior patterns to screen readers and other assistive technologies.
To fix this error, set the role attribute to a valid WAI-ARIA role that best fits this element's behavior patterns and required attributes. For example, if a DIV tag is a button, set the role attribute to ”button”.
Example:
<!-- Setting role attribute allows screen readers to know it can be clicked -->
<div role="button" tabindex="0" aria-label="Back" onclick="mouseAction(event)" onkeyup="keyAction(event)" >
This error indicates that a role attribute is set but its value is not a valid WAI-ARIA role value as defined by the WAI-ARIA specification. Setting a valid role is important to ensure that the element is correctly interpreted by screen readers and other assistive technology tools.
To fix this error, set the role attribute to a valid WAI-ARIA role value. Note: Abstract WAI-ARIA roles are not considered to be valid values for the role attribute.
Example:
<!—The invalid role will not expose this element as a button. -->
<div role="backbutton" tabindex="0" aria-label="Back" onclick="mouseAction(event)" onkeyup="keyAction(event)" >
<!—Setting the correct role will expose this as a button that can be clicked. -->
<div role="button" tabindex="0" aria-label="Back" onclick="mouseAction(event)" onkeyup="keyAction(event)" >
An element appears to be a container that has the
aria-activedescendant attribute set, but the element's role attribute doesn’t have a value that is valid for a container.
Example:
<div role="listbox" id="listbox1" tabindex="0" aria-activedescendant="listbox1-1">
<div role="option" id="listbox1-1" class="selected">Item 1</div>
<div role="option" id="listbox1-2">Item 2</div>
<div role="option" id="listbox1-3">Item 3</div>
...
<div>
To fix this error, set the role attribute to a WAI-ARIA role value that is valid for a container element: combobox, grid, listbox, menu, menubar, radiogroup, tablist, tree, or treegrid.
According to the WAI-ARIA specification, elements that have the progressbar, slider, or spinbutton role must expose the
aria-valuemax,
aria-valuemin, and
aria-valuenow attributes.
To fix this error, set the aria-valuemax,
aria-valuemin, and aria-valuenow attributes, and dynamically maintain the aria-valuenow value to ensure that the current value is exposed. You should also set the aria-valuetext attribute to add more meaning to the exposed aria-valuenow value.
Example:
<div role="slider" id="sl" aria-valuemin="1" aria-valuemax="5" aria-valuenow="3" aria-valuetext="good"…>
</div>
<script>
// This function should be triggered when the slider value changes.
function manageValue()
{
...
sl.setAttribute("aria-valuenow", currentValue);
sl.setAttribute("aria-valuetext", currentValueText);
..
}
</script>
This error indicates that the exposed
aria-valuenow value is not in the range defined by the
aria-valuemin and
aria-valuemax attributes.
To fix this error,
check your implementation to ensure that the aria-valuemin and aria-valuemax attributes are correctly set,
and that the aria-valuenow attribute value is properly maintained.
All elements that have a click event handler and are not disabled must be in the tab order. This ensures that an element can be reached using the TAB key, which is how screen reader users typically navigate the UI.
To fix this error, set the tabindex attribute to a value that is equal to or greater than 0. You do not need to explicitly set the tabindex attribute for tags that are in the tab order by default, such as A
(with href attriute), BUTTON, INPUT (excluding "hidden"), SELECT, TEXTAREA, and AREA (as part of the image map). For more information, see HTML focusable tags.
Example:
<div role="button" tabindex="0" aria-label="Back" onclick="mouseAction(event)" onkeyup="keyAction(event)" >
An element that has the
aria-activedescendant attribute defined, and is not disabled must be in tab order because it is responsible for handling keyboard events for its child elements.
To fix this error, set the tabindex attribute to a value that is greater than or equal to 0.
Example:
<div role="listbox" id="listbox1" tabindex="0" aria-activedescendant="listbox1-1">
<div role="option" id="listbox1-1" class="selected">Item 1</div>
<div role="option" id="listbox1-2">Item 2</div>
<div role="option" id="listbox1-3">Item 3</div>
...
<div>
This error applies to elements that have the aria-activedescendant attribute, are not disabled, and do not have the tabindex attribute set to a value that is greater than or equal to 0.
An element that has the
aria-activedescendant attributed defined has one or more mouse event handlers (mousemove,
mousedown or mouseup), but is missing the equivalent keyboard event handlers (keydown,
keyup or keypress). The keyboard event handlers are needed to ensure that the user can invoke the element's functionality by using the keyboard, and to ensure that the element maintains the aria-activedescendant attribute.
To fix this error, implement one of the keyboard event handlers.
Example:
<div role="listbox" id="listbox1" tabindex="0" aria-activedescendant="listbox1-1">
<div role="option" id="listbox1-1" class="selected">Item 1</div>
<div role="option" id="listbox1-2">Item 2</div>
<div role="option" id="listbox1-3">Item 3</div>
</div>
<script>
...
listbox1.addEventListener('keyup', function(e)
{
var itm = document.getElementById(this.getAttribute('aria-activedescendant'));
var prev = itm.previousElementSibling;
var next = itm.nextElementSibling;
if ( e.keyCode 38 && prev ){
// Arrow up to move active descendant to the previous item
itm.removeAttribute('class’);
prev.setAttribute("class", "selected");
this.setAttribute ('aria-activedescendant', prev.id)
} else if ( e.keyCode == 40 && next){
// Arrow down to move focus to the next item
itm.removeAttribute('class’);
next.setAttribute("class", "selected");
this.setAttribute ('aria-activedescendant', next.id)
}
});
</script>
Container elements that do not have the
aria-activedescendant attribute implement keyboard navigation among child elements by using the concept known as “roving index”. In this concept, the tabindex attributes of child elements are maintained dynamically, ensuring that at all times only one child element is in tab order.
This error indicates that a container element that does not have the aria-activedescendant attribute, and is not disabled, is not accessible to keyboard users because none of the container's child elements are in the tab order.
To fix this error, set the tabindex attribute of one of the child elements to a value equal to or greater than 0.
<div id="listbox" role="listbox1">
<div role="option" id="listbox1-1" tabindex="0" class="selected">Item 1</div>
<div role="option" id="listbox1-2">Item 2</div>
<div role="option" id="listbox1-3">Item 3</div>
</div>
<script>
...
listbox1.addEventListener('keyup', function(e)
{
var itm = e.srcElement;
var prev = itm.previousElementSibling;
var next = itm.nextElementSibling;
if ( e.keyCode == 38 && prev){
// Arrow up to move focus to the previous item.
itm.setAttribute('tabindex', '-1');
prev.setAttribute('tabindex','0');
prev.focus();
} else if ( e.keyCode == 40 && next){
// Arrow down to move focus to the next item.
itm.setAttribute('tabindex', '-1');
next.setAttribute('tabindex','0');
next.focus();
}
});
</script>
Container elements that do not have the
aria-activedescendant attribute implement keyboard navigation among child elements by using the concept known as “roving index”. In this concept, the tabindex attributes of child elements are maintained dynamically, ensuring that at all times only one child element is in tab order.
This error indicates that a container element that does not have the aria-activedescendant attribute, and that is not disabled, is not accessible to keyboard users. The problem exists because the container does not have the needed keyboard event handlers (keydown, keyup, or keypress), and neither do any of the container's child elements.
To fix this error, define a keydown, keyup, or keypress event handler for the container or one of child elements.
<div role="listbox" id="listbox1" >
<div role="option" id="listbox1-1" tabindex="0" class="selected">Item 1</div>
<div role="option" id="listbox1-2">Item 2</div>
<div role="option" id="listbox1-3">Item 3</div>
...
<div>
<script>
...
listbox1.addEventListener('keyup', function(e)
{
var itm = e.srcElement;
var prev = itm.previousElementSibling;
var next = itm.nextElementSibling;
if ( e.keyCode == 38 && prev){
// On arrow up move focus to the previous item
itm.setAttribute('tabindex', '-1');
prev.setAttribute('tabindex','0');
prev.focus();
} else if ( e.keyCode == 40 && next){
// On arrow down move focus to the next item
itm.setAttribute('tabindex', '-1');
next.setAttribute('tabindex','0');
next.focus();
}
});
</script>
This error applies to elements that have a container role, do not have an aria-activedescendant attribute, and are not disabled.