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)?

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)?

• javascript
• html
• accessibility
• wai-aria

• 4 They are tags to assist screen readers in determining what information is being presented to the user. Here is the W3C spec: w3/WAI/intro/aria – thatidiotguy Commented Jun 19, 2013 at 16:28
• 2 I know what aria is. I dont understand what the specific aria-owns attribute does. – user1410270 Commented Jun 19, 2013 at 16:55
• 1 I guess I shouldve put more specific questions. I had read that before the post...Basically, it links a dom node as a child to something that it is not physically a child of, right? What is the benefit of using it? – user1410270 Commented Jun 19, 2013 at 17:20
• 1 See a tree example and W3C's perhaps? – Ryan B Commented Jun 20, 2013 at 1:17
• If you want to learn through examples, follow the following link. oaa-accessibility/examples – Keen Sage Commented Jun 29, 2013 at 3:08

2 Answers 2

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 plicated, so don't be afraid to dive in: https://www.w3/TR/wai-aria/states_and_properties

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 mon 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 puting 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