Frage

I have a list of articles in a ul list. Reading http://www.w3.org/WAI/PF/aria/roles#role_definitions i can either use the roles list and listitem per item, but they are also considered as an article.

Option 1: Can I do the following (have 2 roles on the same element):

<ul role="list">
<li role="listitem article">...<li>
</ul>

Option 2: Should I just use the article role:

<ul>
<li role="article">...<li>
</ul>
War es hilfreich?

Lösung

You should use Option 3 :)

<ul role="list">
<li role="listitem">...<li>
</ul>

All you really want to do is let assistive technologies understand the markup of the content.

Actually, with most assisted technologies, the "role" attribute is usually only required on rich internet content, like sliders, and many HTML5 elements.

If you are worried about screen readers properly working with your code, marking up something such as the list correctly would be suffice.

Good Example

<p> This is a list </p>
<ul role="list">
<li role="listitem"> List Item 1 <li>
</ul>

Bad Example

<p> This is a list </p>
<p> - List Item 1 </p>

The difference between the two, is that when a screen reader comes to the "Good Example" it will read, "This is a list, List contains 1 item, item 1 of 1 - List item 1"

With the "bad example", the screen reader would read "This is a list dash List item 1"

Keep in mind though, the assitive technology is not working properly with the "Good Example" because of the "role" attribute. It is working properly simply because you used correct markup to create the list (<ul> <li> tags). Although, it is good practice to include the role attribute even though it is not required to make a list accessible.

Someone feel free to point out some more goodies :)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top