--- title: "Undefined ARIA attribute must not be used" date: "2024-10-25T05:28:49+00:00" summary: "Learn how to use valid ARIA attributes for improved accessibility, benefiting users with visual and mobility impairments." image: type: "page" url: "/web-governance/undefined-aria-attribute-must-not-be-used" id: "36160aab-436b-4568-b873-b7dbdff85202" --- Table of contents will be added 1.3.1 Info and Relationships Introduction ------------ This document provides information about the Acquia Web Governance accessibility check: * Undefined ARIA attribute must not be used. 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 ### Who ### 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 ![Woman smiling while doing yoga, with a child playfully climbing on her back in a cozy living room.](https://acquia.widen.net/content/emulr2ozqg/web/Mon_AccessibilityHelpCenter-UserStory-WomanDoingYogaWithGirl.png?v=ab902dae-f391-4c4d-a431-77ca08d2adc6) 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 provides some examples of the issue. ### Example: Checkbox with wrong ARIA attribute * A checkbox is coded using a `
` 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.
Accept terms and conditions.
* ![A form is displaying on a website. At the bottom of the form, a checkbox with the label "Accept terms and conditions" is showing.](https://acquia.widen.net/content/ufvs7gufkv/web/Mon_AccessibilityHelpCenter_example_form_checkbox_embedded.png?w=480&v=3cab908c-cf3c-452e-bba9-6a994a89579e&itok=IUYFouSk) * 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 `
` element, with the role and state of the checkbox added through `ARIA` attributes.
Accept terms and conditions.
* ![A form is displaying on a website. At the bottom of the form, a checkbox with the label "Accept terms and conditions" is showing.](https://acquia.widen.net/content/ufvs7gufkv/web/Mon_AccessibilityHelpCenter_example_form_checkbox_embedded.png?w=480&v=3cab908c-cf3c-452e-bba9-6a994a89579e&itok=IUYFouSk) * Screen reader software correctly presents this as _Accept terms and conditions, Checkbox, Checked_. How --- This section provides information on how to identify and fix the issue. ### How to identify it The Acquia Web Governance platform flags instances of attributes that start with `aria-` but are not defined in the ARIA standard.  ### How to fix it You must correct these attributes so that your code only uses valid ARIA attributes as defined in the [WAI-ARIA standard](https://www.w3.org/TR/wai-aria/) The _ACT rules_ section below includes a link to a complete technical explanation of this check. Additional resources -------------------- ### WCAG success criteria [1.3.1 Info and Relationship](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships). ### ACT rules Related accessibility conformance testing rules: [ARIA attribute is defined in WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/act/rules/5f99a7/proposed/) ### Other resources * [WAI-ARIA standard](https://www.w3.org/TR/wai-aria/) * [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/)