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