Как соотнести два элемента для доступности?

Question

У меня есть следующий макет в моем веб-приложении:

Чтобы сделать его совместимым со специальными возможностями, необходимо ли связать «Al Allbrook» сЯрлык "реквестер"?Если да, то как мы можем этого добиться?

«Аль Олбрук» - это ссылка на профиль пользователя.

Если они не связаны, как читатель узнает, что «Аль Олбрук»запрашивающая?То же самое в случае с «Сайтом».

Answer 1

В дополнение к тому, что сказал @andy, вы также можете использовать таблицу.Первый столбец может иметь заголовок таблицы «запросчик» ().Сам заголовок может быть визуально скрыт, если вы не хотите, чтобы он «загромождал» дисплей, но оставался доступным для пользователей программы чтения с экрана (SR).Второй столбец будет выглядеть как «контактная информация», а последний столбец - «сайт».Это позволяет пользователю SR перемещаться по строке таблицы, и он будет слышать заголовок столбца перед ячейкой данных.

Конечно, вы можете использовать комбинацию этих методов.У таблицы и есть дополнительная информация по ссылкам.Я бы рекомендовал aria-labelledby вместо aria-describedby.Хотя оба атрибута будут приводить к тому, что дополнительная информация будет считываться SR (*), в списке ссылок будет отображаться только атрибут aria-labelledby.

(*) Некоторые SR объявляют атрибут aria-describedbyнапрямую, но другие SR просто скажут вам, что есть описание, связанное со ссылкой, и вы должны нажать другую комбинацию клавиш, чтобы услышать описание.

Приятная вещь в обоих атрибутах состоит в том, что элемент может ссылаться насам как часть лейбла.Тип рекурсивной маркировки, но правила " Доступное имя и описание вычисления " обрабатывают рекурсию.

, если вычисляется имя, и текущий узел имеет атрибут aria-labelledby, которыйсодержит по крайней мере один действительный IDREF, , и текущий узел еще не является частью обхода aria-labelledby , обработайте его IDREF в порядке их появления

Вероятно, легче увидетьпример этого.

<span id="comma" style="display:none">,</span>
...
<span id="requestor">Requestor</span>
<a href="#" id="myself" aria-labelledby="myself comma requestor">Al Allbrook</a>

Несколько вещей на заметку.

• Во-первых, ссылка ссылается на себя в атрибуте aria-labelledby (идентификатор себя).
• Во-вторых, я использую трюк с программами чтения с экрана, добавляя запятую в метке «Al Allbrook, Requestor», чтобы у SR была небольшая пауза при чтении метки «Al Allbrook * 1036».* Запрашивающий ", вместо того, чтобы слышать это, как если бы имя парня было" Al Allbrook Requestor ".Обратите внимание, что сама запятая имеет display:none, поэтому она не видна, но, поскольку идентификатор элемента запятой указан в aria-labelledby, он все равно будет использоваться.(См. Правило 2A в URL-адресе «Доступное имя» выше)
• Наконец, мой пример использовал для «Запросчика», но вы можете захотеть, чтобы это был заголовок ( или или любой другой уровень).вместо)

Например:

<span id="comma" style="display:none">,</span>
...
<h3 id="requestor">Requestor</h3>
<a href="#" id="myself" aria-labelledby="myself comma requestor">Al Allbrook</a>

И тогда весь этот код может быть в

, если вы используете таблицу.

Answer 2

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

1. В DOM порядке

   В этом случае, если ваш «Запрашивающий» находится перед ссылкой в ​​DOM, он будет прочитан перед именем человека. Кроме того, текст прямо перед и после ссылки может быть прочитан с помощью определенных ярлыков.

2. Доступ к списку ссылок

   Существуют различные списки экранов, которые пользователи могут запрашивать, например список всех заголовков или список всех ссылок на странице.

Если для вас важно, чтобы при переходе по ссылке непосредственно читалось «запросчик», вы можете связать два элемента с помощью aria-describedby или aria-labelledby .

Кроме того, вы можете снова добавить текст к самой ссылке, скрытый визуально. Как "Аль Олбрук, реквестер".