508 / Правила доступности для (1) ссылок должны иметь различимый текст, (2) пустые ячейки таблицы (плагин Ax) - PullRequest
0 голосов
/ 25 января 2019

Я использую плагин Ax , чтобы обеспечить действительность и доступность 508 моего приложения, а некоторые описанные нарушения носят слишком ограничительный характер, и я не знаю, как их исправить, поскольку они действительныслучаи:

1.«Ссылки должны иметь различимый текст»

В отношении ссылки на всплывающую подсказку, в которой не должно быть текста.Это рисунок и должен существовать на странице сам по себе.Как вообще вы обрабатываете безтекстовые ссылки, которые очень распространены?

<a href="#" rel="tooltip" data-toggle="tooltip" title="" data-original-title="This is a tooltip icon by itself">

2.Все элементы th с элементом role = columnheader / rowheader должны иметь ячейки данных, которые они описывают

«Мы не уверены, что это проблема, потому что: ячейки данных таблицы отсутствуют или пусты»

У меня есть таблица, где последний столбец «Действия», который содержит только графические значки, без текста;Например, есть кнопка «Просмотр», «Редактировать» и «Удалить».Столбец имеет структуру

<table>
   <tr>
     <td>
        <a href="javascript:void(0)" title="Edit"> 
           <i class="fa fa-pencil" alt="Edit"></i>
        </a>
        <a href="javascript:void(0)" title="Delete">
           <i class="fa fa-trash" alt="Delete"></i>
        </a>
     </td>

. Отсутствие внутреннего HTML-текста вызывает нарушение Axe "Пустая ячейка".Я просто игнорирую это?Это распространенный сценарий, я не хочу, чтобы его постоянно били.

1 Ответ

0 голосов
/ 25 января 2019

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

Либо добавьте атрибут aria-label к ссылкам, описывающим их назначение, либо поместите тег span с описательным текстом внутри ссылки, которая скрыта от глаз с помощью CSS, но будет доступна для программ чтения с экрана.

Кроме того, вы неправильно используете атрибут alt в элементах i.Вы должны скрыть значок, используя aria-hidden="true", и предоставить текстовую альтернативу через другой элемент.

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

https://www.w3.org/TR/wai-aria-1.1/#cell

Anпроблема возникнет, если у вас будет пустой элемент th, поскольку он будет выполнять роль либо заголовка строки, либо заголовка столбца, а для обоих требуется доступное имя.

https://www.w3.org/TR/wai-aria-1.1/#columnheader

https://www.w3.org/TR/wai-aria-1.1/#rowheader

Полезная информация для использования значков: https://www.w3.org/WAI/GL/wiki/Icon_Font_with_an_On-Screen_Text_Alternative

Информация об описании назначения ссылки: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html#navigation-mechanisms-refs-techniques-head

Скрытие контента от зрячих пользователей: https://webaim.org/techniques/css/invisiblecontent/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...