UI Accessibility Checker ARIA Verifications

Contents

 

ARIA Verifications

Information and Relationships

Error - ARIA Label

Warning - ARIA Layout Table

Warning - ARIA Data Table Description

Error - ARIA Table Name and Header

Error - ARIA Grid Structure

Name, Role, Value

Error - ARIA Role Missing

Error - ARIA Role Invalid

Error - ARIA Container Role

Error - ARIA Range Control Attributes Missing

Error - ARIA Range Control Attribute Out of Range

Keyboard Accessible

Error - ARIA Click Tabindex

Error - ARIA Container Tabindex

Error - ARIA Container Keyboard Events

Error - ARIA Container (no active descendant) Tabindex

Error - ARIA Container (no active descendants) Keyboard Events

ARIA Verifications

 

Information and Relationships

 

Error - ARIA Label

Element doesn’t have the accessible name.

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

Note that AccChecker will show this error even for elements for which the accessible name is set by default based on inner HTML content (see the banner element in the above example). In such cases you can suppress this error.

 

Warning - ARIA Layout Table

Table is used for layout only but it has accessible name, accessible description or header information.

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 error applies to HTML table tags that have the role attribute set to "presentation", or with a table that has a single cell (1x1 table).

 

Warning - ARIA Data Table Description

Table contains data but it doesn’t have the recommended accessible description.

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 warning does not apply to tables with role="presentation" since these are considered to be layout tables.

 

Error - ARIA Data Table Name and Header

Table contains data but it doesn’t have accessible name or headers.

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>

 

This error applies to HTML tables with more than one cell. This warning does not apply to tables with role="presentation" since these are considered to be layout tables.

 

Error - ARIA Grid Structure

Element with the grid role doesn’t correspond with the WAI-ARIA specification.

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 applies to custom elements that have the role attribute set to ”grid”. It does NOT apply to HTML table tags that have an implicit role of "grid".

 

Name, Role, Value

 

Error - ARIA Role Missing

Element is interactive but it doesn’t have a valid WAI-ARIA role.

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 applies to elements that do not have an implicit WAI-ARIA role.

  

Error - ARIA Role Invalid

Element has an invalid WAI-ARIA role.

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)" >

 

This error applies to all elements that have the role attribute set.

 

Error - ARIA Container Role

Element is a container but it doesn’t have a valid container role.

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.

This error applies to elements that have the aria-activedescendant attribute.

 

Error - ARIA Range Control Attributes Missing

Element has progressbar, slider or spinbutton role but it is not exposing required WAI-ARIA attributes: aria-valuenow, aria-valuemin, and aria-valuemax attributes.

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 applies to elements that have a role (implicit or explicit) that is equal to progressbar, slider, or spinbutton.

 

 

Error - ARIA Range Control Attribute Out of Range

Element has progressbar, slider or spinbutton role but the exposed aria-valuenow value is outside of aria-valuemin/aria-valuemax range.

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.

This error applies to elements that have a role (implicit or explicit) equal to progressbar, slider, or spinbutton.

 

Keyboard Accessibility

 

Error - ARIA Click Tabindex

Element has a click event handler but it is not in tab order, neither by default nor with explicitly set tabindex attribute.

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)" >


This error applies to elements that have a click event handler and are not disabled.

 

Error - ARIA Container Tabindex

Element is a container with an active descendant defined but it doesn’t have the tabindex attribute set to a value greater or equal to 0.

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.

 

Error - ARIA Container Keyboard Events

Element is a container with an active descendant defined and it has mouse event handlers but it doesn’t have any keyboard event handler.

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>

 


This error applies to elements that have the aria-activedescendant attribute.

 

Error - ARIA Container (no active descendants) Tabindex

Element is a container without an active descendant defined but it doesn’t have the tabindex attribute set on one of its child elements.

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>

 

 

This error applies to elements that have a container role, do not have an aria-activedescendant attribute, and are not disabled.

 

Error - ARIA Container (without active descendant) Keyboard Events

Element is a container without an active descendant defined but it doesn’t have keyboard event handlers neither on itself nor on one of child elements.

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.