Explanation and example of aria-owns, aria-invalid, aria-expanded

Question

I was looking at some code and one of the tags had the attributes aria-owns, and aria-expanded. I googled them and didn't find enough detail to fully understand what they do.

Could someone explain the use of these specific attributes? I have a general understanding of what the aria attributes do (I have used aria-labelledby)?

Answer 1

aria-labelledby

aria-labelledby has the same end result as an aria-label, which is that the value of the attribute will be read by screen readers. The difference is that the value of an aria-label is the label you want to use, and the value of an aria-labelledby attribute is an id reference to a different element. The text value of that other element will be the label for the first one.

aria-owns

Normally the parent-child relationship of elements is implied by the hierarchy of the DOM. Under some circumstances though, it makes more sense to think of an element as having a different parent than it technically does in the DOM, and 'aria-owns' is used for those circumstances.

It's hard to describe a simple example for aria-owns, but when you're looking at it in the code, think of it as the code trying to tell you that the given widget makes more sense if you think of this element as a parent to whatever element whose ID it is pointing to.

aria-expanded

aria-expanded is simpler. It is always set to true or false (if the attribute is not on an element, it is assumed to be false). When a screen reader navigates to an element that can be expanded (like a menuitem that contains a nested menu), reading the 'aria-expanded' tag lets the user know whether the connected popout section is activated or not.

It is the responsibility of the developer to actively manage the state of aria-expanded tags as users activate and deactivate expandable elements.

There are a lot of aria states and properties out there that can be confusing. The docs are surprisingly easy to navigate and the basics aren't too complicated, so don't be afraid to dive in: https://www.w3.org/TR/wai-aria/states_and_properties

Answer 2

aria-labelledby (property)

# Identifies the element (or elements) that labels the current element.

The purpose of aria-labelledby is the same as that of aria-label. It provides the user with a recognizable name of the object. The most common accessibility API mapping for a label is the accessible name property.

If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. Use aria-label only if the interface is such that it is not possible to have a visible label on the screen. User agents give precedence to aria-labelledby over aria-label when computing the accessible name property.

The aria-labelledby attribute is very similar to describing an object with aria-describedby, where a description is intended to provide additional information that some users might need.

See this link