A11Y 101: WAI-ARIA Properties

In the previous article, we had a look at what the WAI-ARIA is and which global parts it comes with.

I'll go a bit deeper into WAI-ARIA properties in this specific article.

As a reminder, properties give extra meaning to an attribute, as to states that describe a condition.

WAI-ARIA properties list

aria-autocomplete: Described if and how a to autocomplete is provided, values are: none, inline, list, and both.
aria-label: Can be used to label an element, for example, an SVG button with no text.
aria-labelledby: Reference the element that has the label text.
aria-level: Define the level of an element that can be used for headings, although we should opt to use h1 etc. for this. Furthermore, it can be used on tree grids.
aria-orientation: Describe the orientation of the element values are: horizontal, vertical, or undefined.
aria-placeholder: Describe a placeholder for an element that doesn't support the native placeholder attribute.
aria-sort: Describe the sorting order for a table or list. Values are: ascending, descending, none, or other.
aria-valuemax: Set the max value users can use.
aria-valuemin: Set the minimum value users can use.
aria-valuenow: Set the current numeric value.
aria-valuetext: Define a text value instead of aria-valuenow.
aria-live: Describe a live aria. More information on this is separate.
aria-relevant: Used inside a live aria to describe what type of notification will trigger, values are: additions, all, removals, text.
aria-dropeffect: Describe the type of drop effect, values are: copy, execute, link, move, none, or popup.
aria-activedescendant: Describe the current active focus for a composite widget.
aria-colcount: Describe the total count of columns in a table, grid, or tree grid.
aria-rowcount: Describe the total count of rows in table, grid, or tree grids.
aria-colindex: Describe an elements column index or position.
aria-rowindex: Describe the elements' row index.
aria-colspan: Describe the number of columns an element spans.
aria-rowspan: Describe the number of rows an element spans.
aria-controls: Describe the element(s) that are controlled by the current element.
aria-describedby: Identify the element(s) that describe the object.
aria-description: Attribute that defines a description for the element. (Similar to label, but longer text)
aria-details: Identify the element that describes more information for this object.
aria-errormessage: Identify the element that describes the error message.
aria-flowto: Describe the natural next element.
aria-owns: Set all elements owned by this element
aria-posinset: The current position of this element within a set.
aria-setsize: Describe the total number of items in a set.
aria-current: Describe the current element in a set of related items, for example in a breadcrumb list.
aria-keyshortcuts: Describe shortcuts for a specific element.
aria-roledescription: Describe a more readable role representation for an element.

With all these properties, it's good to note they should always only suffice as a last resort. A lot of these properties are available in semantic HTML solutions.

For example, valuemin, valuemax etc., are also available on input elements.

<input min="0" max="255" current="100" />

The key is only to use the ARIA properties when you opt to go off semantic for a particular reason.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

A11Y 101: WAI-ARIA Properties

Comments (1)

A11Y 101

A11Y 101: WAI-ARIA States

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

WAI-ARIA properties list

Thank you for reading, and let's connect!

Command Palette

Comments (1)

A11Y 101

A11Y 101: WAI-ARIA States

More from this blog

WAI-ARIA properties list

Thank you for reading, and let's connect!