This article, aria-mistakes is written with my own experiences. While teaching, writing code or reviewing some one else’s code I often see interesting aria-mistakes. I just want to show of them to you now. I have categorized them into 4 types and hence the article is titled 4 aria-mistakes. For mistakes specific to ARIA roles […]

Aria-valuetext property works similar to a aria-valuenow property. It Defines the human readable text alternative of aria-valuenow for a range widget. If aria-valuetext property is defined for any widget, author should also specify aria-valuenow unless aria-valuenow cannot be determined. The major difference between aria-valuetext and aria-value now is the type of value determined through them. […]

aria-valuemin property is used while developing range widgets. For a range widget a minimum and maximum values need to be defined. Examples of a range widget are sliders such as volume button on windows operating system. The volume button has a minimum value of 0% to a maximum value of 100%. Other range widgets include […]

aria-sort (property) is used to inform the screen reader user whether the columns or rows in a grid can be sorted. Aria-sort (property) is used to a table header or a grid header. This aria-sort (property) can be used both for column headers or row headers. aria-sort (property) has two possible values “ascending” and “descending”. […]

ARIA-owns (Property) Aria-owns identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. In other words aria-owns property defines element relationships and associations that cannot be readily determined from the document structure. Aria-owns sets or […]

aria-multiselectable is used to notify the users about the existence of the components where more than one element can be selected. aria-multiselectable is not an alternate for aria-selected. Tablists, listbox, tree and grid are the roles which allows the users to select more than one element. Do not use aria-multiselectable property where only one element […]

Before understanding aria-labelledby it is worth reading aria-label (property). Similar to aria-label, aria-labelledby is also used to provide alternate text for an informative image, label a form element etc. Unlike aria-label, aria-labelledby refers the existing text on the page and uses it as the labelling text. For example If the heading on the page and […]