Должны ли метки ARIA обеспечивать контекст?

Я работаю над сайтом, который перечисляет множество радиопрограмм в формате MP3. Каждая программа имеет несколько разных элементов с вкладками: ссылку на заголовок, теги, элементы управления для выбора языка и кнопку воспроизведения. Когда пользователь перебирает содержимое с помощью средства чтения с экрана, он слышит что-то вроде:

История Дэна

Тайна

French // Там может быть тег с именем this

Погром

английский

Французский

испанский язык

Играть в

Под домиком на дереве

Природа

На открытом воздухе

английский

Французский

Играть в

Это довольно сбивает с толку, чтобы отличить только звук.

Итак, мой вопрос в том, что лучше всего делать в ситуациях, когда у вас есть повторяющиеся компоненты, у которых есть элементы управления. Должен ли программа чтения с экрана предоставлять контекст того, какому компоненту он принадлежит, при нажатии на элемент управления?

Например, следует ли мне установить aria-label для кнопки воспроизведения на что-то вроде aria-label="Play Under the Treehouse"? Точно так же я должен добавлять метки aria к тегам, которые описывают их как теги, например aria-label="Mystery Tag"?


accessibility wai-aria screen-readers
person Pete    schedule 02.09.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

В наборе тегов заголовок хорошо справляется со своей задачей, не будучи слишком многословным:

<h#>Tags</h#>

<p>
Nature, Outdoors, English, French
</p>

В идеале, если у вас есть группировка контента, это естественно. Вы можете стилизовать заголовок, чтобы минимизировать его по своему усмотрению.

Для кнопки воспроизведения это тоже зависит. Если кнопка воспроизведения явно предназначена для единственного объекта на странице, то, вероятно, она вам не нужна. Если кнопка воспроизведения одна из многих, но сгруппирована по названию вещи, она может вам не понадобиться. Если есть только кнопки воспроизведения и нет хорошей группировки, или кнопка воспроизведения смещает контекст, то вам, вероятно, нужна метка.

Главное здесь - в первую очередь полагаться на хороший контент и структуру HTML. Затем подумайте, насколько многословной является страница в противном случае (подробные страницы доставляют неудобства пользователям программ чтения с экрана). Тогда, только когда вы абсолютно не можете найти подходящий способ в стандартном HTML или структуре страницы, можете ли вы рассмотреть возможность использования ARIA.

person aardrian    schedule 06.09.2016

arrow_upward
1
arrow_downward

У вас может быть какой-нибудь текст для чтения с экрана между разделами, например «Теги» и «Языки».

Просто разместите текст за пределами экрана:

.screenreader-only
{
        position: absolute;
        left: -10000px;
}

Ваше aria-label решение может работать в зависимости от HTML, но программы чтения с экрана обычно читают это, только если это элемент управления формы или фактическая метка - оно не считывается для <div> или <span>

person Fiona - myaccessible.website    schedule 02.09.2016
comment
Просто обратите внимание, что вам следует избегать использования такой закадровой метки на элементах, на которые можно сфокусироваться; когда пользователь с клавиатурой нажимает на элемент, он создает контур фокуса далеко за краем экрана. Хотя это не серьезная проблема, но о чем следует знать. - person discojoe; 02.09.2016
comment
@discojoe О, определенно, это было основано на предположении, что это будет скрытый диапазон или div. Если бы его можно было сфокусировать, то лейбл aria работал бы. Спасибо за разъяснения! - person Fiona - myaccessible.website; 02.09.2016