Using the aria-owns attribute

Сообщение для российских читателей

Здравствуйте российские читатели. Ваша страна платит высокую цену за вторжение Путина в Украину. Путин лжет вам; не верьте кремлевской пропаганде. В России нет свободных СМИ, а интернет подвергается цензуре, потому что Путин не хочет, чтобы вы знали правду. За постыдное поведение Путина заплатят не только украинцы, но и добрые люди России. Пожалуйста, не допустите этого!

Hello Russian readers. Your country is paying a high price for Putin's invasion of Ukraine. Putin is lying to you; do not believe the Kremlin propaganda. There is no free media in Russia and the internet is censored because Putin doesn't want you to know the truth. It is not only the Ukrainians that will pay the price of Putin's shameful behaviour, so will the good people of Russia. Please do not let this happen!

When a parent/child relationship is evident on-screen, but it isn’t represented in the DOM, the aria-owns attribute can be used to establish that relationship in the accessibility layer.

The parent/child relationship is a cornerstone of HTML structure. Every element in an HTML document is the parent, sibling or child of another.

In some cases these relationships are critical to the semantics of a document. A table contains rows, headers and cells for example. Without the correct arrangement of all the elements that the table consists of, the structure breaks down and becomes meaningless.

These relationships are not always available in the DOM though. Sometimes because of the way code is written, sometimes because the structures themselves do not exist. HTML has no elements for tree structures, and SVG has no concept of data structures like lists or tables for example.

Let’s take an artificial example, which isn’t likely to happen in the wild, but which makes it easier to explain how aria-owns works.

HTML
<ul>
  <li>Fruit</li>
  <li>Vegetables</li>
</ul>

<ul>
  <li>Apples</li>
  <li>Bananas</li>
</ul>

The two lists are separate in the DOM. Beyond the fact they are siblings in the DOM tree, they have no relationship with each other.

Now suppose that we want to change the way the lists are displayed, so that the second list appears as a child of the first. We could rewrite the source code and rebuild the DOM, or we could style the lists so they have the appearance of being nested.

The problem with the first option is that it takes effort and could effect performance. The problem with the second option is that it’s only cosmetic. An assistive technology like a screen reader (that relies on the DOM for information) will still consider the two lists as completely separate.

We can use the aria-owns attribute to fix this problem though.

HTML
<ul>
  <li aria-owns="child">Fruit</li>
  <li>Vegetables</li>
</ul>

<ul id="child">
  <li>Apples</li>
  <li>Bananas</li>
</ul>

The aria-owns attribute creates a parent/child relationship between the two lists in the accessibility layer. The DOM tree remains unchanged, but the accessibility tree now exposes the two lists as though they were nested. In other words, the lists are now exposed like this in the accessibility tree:

HTML
<ul>
  <li>Fruit
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>

  <li>Vegetables</li>
</ul>

Which is to say that is what should happen. Unfortunately screen reader support for aria-owns is still inconsistent.

Using this aria-owns test case, Jaws has support with Chrome, firefox and Internet Explorer. NVDA has support with chrome, but not Edge, Firefox or Internet Explorer. TalkBack does with Chrome, but VoiceOver does not in Safari (OSX or iOS).

Updated on 19th October to include results for Narrator (on Windows 10). The aria-owns attribute is not supported by Narrator with either Edge or Internet Explorer.

Tagged with

Comments