Loading...

ARIA attribute is defined in WAI-ARIA

1.3.1 Info and Relationships

Introduction

This document provides information about the related Acquia Optimize checks:

  • ARIA attribute is defined in WAI-ARIA.

What

ARIA attributes may only be used if they are included in the ARIA 1.2 standard.

Why

If the code contains attributes that start with aria- and they are not defined in the ARIA standard, it indicates that the website developer may have made a typographical or coding error. As a result, the intended accessibility features may not work as expected

Affected users

This check affects the following users who have:

  • Visual impairments: Who access the site contents with a screen reader or screen magnification software.

  • Mobility impairments: Who navigate the page with speech recognition software.

User story

Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy: 

"There are some things that are just tricky, and then there are things that do not work at all. One thing that often does not work is those drop-downs where you have to search for something. You know, where you type in text and then a list of suggestions pops up, and you have to choose from that list instead of just typing what you want. This happens a lot when I am booking flights. The field where I have to choose which airport I am flying from and to. Sometimes I can type in the text, and the screen reader will tell me there are, say, 3 or 10 results on the list. But I cannot see or select anything from that list. I just get stuck and cannot move forward."

Examples

This section gives some examples of the issue.

  • Example: Checkbox with wrong ARIA attribute

    A checkbox is coded using a <div> element, with the role and state of the checkbox added through ARIA attributes. Unfortunately, the attribute that is intended to indicate the state of the checkbox is not a valid ARIA attribute because aria-not-checked is not part of the WAI-ARIA standard.

    <div role="checkbox" aria-not-checked="false">Accept terms and conditions.</div>
    • Screen reader software may present this as an "Accept terms and conditions, Checkbox" but will not indicate whether it is actually checked or not due to the incorrect ARIA attribute aria-not-checked.
  • Example: Checkbox with correct ARIA attribute

    A checkbox is coded with a <div> element, with the role and state of the checkbox added through ARIA attributes.

    <div role="checkbox" aria-checked="true">Accept terms and conditions.</div>
    • Screen reader software correctly presents this as Accept terms and conditions, Checkbox, Checked.

How

How to fix it

The Optimize platform flags instances of attributes that start with aria- but are not defined in the ARIA standard. You need to correct these attributes so that your code only uses valid ARIA attributes as defined in the WAI-ARIA standard

The ACT rules section below  includes a link to a complete technical explanation of this check.

Additional resources

WCAG success criteria

ACT rules

Related accessibility conformance testing rules:

Other resources

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

Back to Section navigation
Back to Site navigation