Используя статью о роли Арии и / или список элементов?

Question

У меня есть список статей в списке ul. Чтение http://www.w3.org/WAI/PF/aria/roles#role_definitions я могу использовать роли list и listitem для каждого элемента, но они также рассматриваются как article.

Вариант 1: Могу ли я сделать следующее (иметь 2 роли на одном элементе):

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

Вариант 2. Должен ли я просто использовать роль article:

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

Answer 1

Вы должны использовать вариант 3:)

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

Все, что вы действительно хотите сделать, - это позволить вспомогательным технологиям понять разметку контента.

На самом деле, с большинством вспомогательных технологий, атрибут "роль" обычно требуется только для богатого интернет-контента, такого как слайдеры, и многих элементов HTML5.

Если вы беспокоитесь о том, чтобы программы чтения с экрана правильно работали с вашим кодом, было бы достаточно разметить что-то вроде списка.

Хороший пример

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

Плохой пример

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

Разница между ними заключается в том, что когда программа чтения с экрана приходит к «Хорошему примеру», она будет читать: «Это список, список содержит 1 элемент, элемент 1 из 1 - элемент списка 1»

При "плохом примере" программа чтения с экрана будет читать "Это пункт 1 списка элементов списка"

Имейте в виду, что вспомогательная технология не работает должным образом с «хорошим примером» из-за атрибута «роль». Он работает правильно просто потому, что вы использовали правильную разметку для создания списка (теги <ul> <li>). Хотя рекомендуется включать атрибут role, даже если нет необходимости делать список доступным.

Кто-то не стесняется указывать еще на некоторые вкусности:)