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