Доступность HTML-ссылки для чтения, а не метки? - PullRequest
Новая
       43

Доступность HTML-ссылки для чтения, а не метки?

1 голос
/ 27 сентября 2019

Привет У меня есть следующий вопрос относительно доступности, я использую программное обеспечение для чтения с экрана JAWS, чтобы проверить мой код, и у меня возникает следующая проблема:

JAWS считывает метку заголовка для категории, ноон не представляет категорию и повторяется дважды.Программное обеспечение говорит "Создать ссылку на тире"; "Создать ссылку на тире".

Программное обеспечение должно быть прочитано. Задайте вопрос "

Пожалуйста, сообщите, мой HTML ниже 

<div class="col-12 col-sm-6 col-md-4">
<article class="icon-feature icon-feature--first">
<a class="icon-feature__link" href="/support/create-case/"></a>

<div class="icon-feature__icon bg--blue-primary" style="height: 150px;">
<a class="icon-feature__link" href="/support/create-case/">

<span class="icon icon--signs"></span>

<div class="imghoveropacity">
<img class="img-fluid" title="Ask a question" src="/Illustration__SS_illo_Ask_a_question" alt="Ask a question" width="150px" height="150px">
</div>
</a>
</div>
<a class="icon-feature__link" href="/support/create-case/">
<h3 class="icon-feature__title">Ask a question</h3>
 </a>
<p class="icon-feature__excerpt">Submit an enquiry</p>
</article></div>

1 Ответ

0 голосов
/ 29 сентября 2019

JAWS прав, с его точки зрения читать нечего.Ну, почти ничего.
Если вы хотите, чтобы JAWS с настройками по умолчанию считывал ваши ссылки, они должны иметь либо A) текст ссылки , т. Е. Что-то значимое между <a> и </a>, либо B) Атрибут aria-label, который не должен быть пустым.

У вас есть здесь: 

<a class="icon-feature__link" href="/support/create-case/"></a>

Эта ссылка содержит ничего для глаз JAWS.Я имею в виду, нада.Самый простой способ исправить это - добавить атрибут aria-label, например: 

<a class="icon-feature__link" href="/support/create-case/" aria-label="Ask Question"></a>

Тогда JAWS будет знать, что читать, когда фокус попадет на эту ссылку.В противном случае, поскольку это ссылка, поэтому приоритетная часть данных, которую необходимо * как-то объявить , пытается получить хотя бы что-то и читает (относительный) URL, поэтому вы слышите «Создать дело».
Другая ссылка - более громоздкий случай.У вас есть ссылка, div внутри нее и img внутри нее div.Здесь JAWS также сбит с толку, поскольку текст ссылки снова пуст, поэтому, вероятно, ему следует прочитать атрибут alt изображения, но это изображение находится в другом div, поэтому он не уверен, чтоdiv следует читать как содержание ссылки.О да, и есть также пустой span, и это первый элемент ссылки, так что возникает еще больше путаницы.
На вашем месте я бы просто добавил aria-label если , вам тоже нужна эта ссылка.А если span не нужен и предназначен только для украшения, спрячьте его из поля зрения JAWS, в противном случае у вас также возникнут некоторые трудно заметные проблемы.После этого, если вы дважды услышите «Задать вопрос» по этой ссылке, скройте div с изображением, оно вам больше не нужно (этот последний пункт необходимо обсудить, его необходимо проверить более тщательно): 

<a class="icon-feature__link" href="/support/create-case/" aria-label="Ask Question">
<span class="icon icon--signs" aria-hidden="true"></span>
<div class="imghoveropacity" aria-hidden="true">
<img class="img-fluid" title="Ask a question" src="/Illustration__SS_illo_Ask_a_question" alt="Ask a question" width="150px" height="150px">
</div>
</a>
...