Каков наиболее доступный способ отображения примера гиперссылки?

Question

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

Для более подробного объяснения рассмотрим следующий сценарий.

Сайт имеет некоторый пользовательский ввод для измененияязык представления гиперссылки на ресурс (ы): Thanks for joining! Checkout these guides to get started {{resources}}!

Затем {{resources}} заменяется гиперссылкой, содержащей выбранные имена ресурсов.Затем отображается пример, чтобы показать пользователю, как он будет выглядеть.Что-то вроде следующего:

<input id="welcome-language" />
<div class="language-preview">
  Thanks for joining! Checkout these guides to get started
  <a href="#faux-link" aria-label="example resource link">Membership Agreement</a>
  ,
  <a href="#faux-link" aria-label="example resource link">Quickstart Guide</a>
  , and
  <a href="#faux-link" aria-label="example resource link">Becoming a Rockstar (for power-users)</a>
  !
</div>

Обратите внимание, что ссылки на самом деле никуда не уходят и не предназначены.

Как я могу сделать это доступным? достаточно просто добавить aria-label?Есть ли другие атрибуты, которые я мог / должен добавить?

Answer 1

Для пользователя программы чтения с экрана ссылки будут по-прежнему считаться «ссылками», и пользователь будет ожидать перехода на какую-либо страницу, если она выбрана. Вам потребуется дополнительная информация, чтобы они знали, что ссылки - это просто «предварительный просмотр» того, как будет выглядеть страница.

Я бы не указывал атрибут href, чтобы ссылки становились " ссылками-заполнителями ", а затем добавлял tabindex="0", чтобы они были фокусируемыми на клавиатуре (по умолчанию ссылки-заполнители не являются интерактивными, поэтому не получает фокус клавиатуры по умолчанию).

А потом я добавлю описание через aria-describedby, чтобы позволить читать визуальный ярлык ссылки в дополнение к примечанию, что ссылка не является реальной. В исходном примере использовался aria-label, который переопределяет видимый текст в ссылке («Соглашение о членстве»). Пользователь программы чтения с экрана услышит только вашу aria-метку, «пример ссылки на ресурс, ссылка».

( Примечание: нет необходимости произносить слово "ссылка" в вашем ярлыке, потому что программа чтения с экрана объявит, что это ссылка, потому что это элемент . Это приведет к появлению ссылки " "будет объявлено дважды - один раз с вашего лейбла и один раз, потому что элемент является ).

Элемент, на который вы указываете aria-describedby, может быть скрыт (display:none), чтобы его не было видно на экране. « Доступное вычисление имени и описания 1.1 » описывает, как вычисляется имя / описание. Первый шаг, 2А, говорит, что элемент может быть скрыт.

Итак, ваш окончательный код может выглядеть примерно так:

<span id="dummy" style="display:none">example resource, link is not active</span>

<input id="welcome-language" />
<div class="language-preview">
  Thanks for joining! Checkout these guides to get started
  <a tabindex="0" aria-describedby="dummy">Membership Agreement</a>
  ,
  <a tabindex="0" aria-describedby="dummy">Quickstart Guide</a>
  , and
  <a tabindex="0" aria-describedby="dummy">Becoming a Rockstar (for power-users)</a>
  !
</div>

Программа чтения с экрана объявит ссылку как «Соглашение о членстве, ссылка, пример ресурса, ссылка не активна».

Обратите внимание, некоторые программы чтения с экрана не читают атрибут aria-describedby по умолчанию. Они могут просто сказать, что есть дополнительное описание для элемента и нажать клавишу быстрого доступа, чтобы услышать описание. Это нормально. Считыватель экрана должен решить, как представить атрибут aria-describedby.