Как мне найти ссылки без текста?

Question

Я работаю над соответствием WCAG и мне нужно исправить ошибки "Пустая ссылка".

Это пример одного из элементов, обеспечивающих ошибку:

<a style="bottom: 0px; left: 7px; width: 25px; cursor: default;" class="histogram_bar_link" title="Less than 2,016 (0)" href="#"
    onclick="AjaxControlToolkit.SliderRefinementControl.FindAndSetSliderHandlesAndValuesToRange(" ctl00_ctl43_g_453d6d26_9535_440a_ba72_b7b88de22f31_csr5
    ", 0, 1, this); return false;" activebarid="ctl00_ctl43_g_453d6d26_9535_440a_ba72_b7b88de22f31_csr5_HistogramActiveBar0" disabled="disabled">
    <div id="ctl00_ctl43_g_453d6d26_9535_440a_ba72_b7b88de22f31_csr5_HistogramBgBar0" class="histogram_bar_background">
        <div id="ctl00_ctl43_g_453d6d26_9535_440a_ba72_b7b88de22f31_csr5_HistogramActiveBar0" class="histogram_bar_active" style="height: 0px; margin-top: 50px;">
    </div>
</a>

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

Answer 1

Это не ссылка. Не пытайтесь исправить это на стороне клиента, просто исправьте HTML. В идеале, если вы обновляете какой-либо элемент управления, генерирующий этот HTML, вам не нужно полагаться на сценарий на стороне клиента.

1. Выбор правильного контроля

Давайте обратимся к первому вопросу, используя правильный элемент...

Контроль переносит меня на другую страницу? Используйте Якорь

Если при нажатии, постукивании или активации с помощью клавиатуры или голоса (или вставке нового метода взаимодействия здесь) пользователь перенаправляется на другой URL-адрес (включая привязку на той же странице), тогда используйте <a href="[URL]">, Убедитесь, что вы используете href атрибут и что он имеет реальный URL, а не "#" (в противном случае вы, вероятно, полагаетесь на JavaScript, который вовсе не необходим для гиперссылки). Если href указывает только на "#", тогда вы, вероятно, делаете это неправильно. Если это указывает на именованный якорь как часть ваших усилий по прогрессивному улучшению, то это совершенно верно.

Изменяет ли что-то элемент управления на текущей странице? Используйте кнопку

Если при активации пользователь не перемещается со страницы (или на якорь на странице), а вместо этого получает новый вид (окна сообщений, изменения в макете и т. Д.), Тогда используйте <button>, Хотя вы могли бы использовать <input type="button"> более вероятно, что вы столкнетесь с ранее существовавшими стилями и последующими разработчиками (такими как я).

Элемент управления отправляет поля формы? Используйте Отправить

Если при активации информация, введенная пользователем (введя вручную или выбрав элементы на экране), отправляется обратно на сервер, используйте <input type="submit">, Это лучше жить в <form>, Если вам нужно больше контроля над стилем или вам нужно встраивать больше, чем просто текстовую строку, используйте <button type="submit"> вместо. Я склонен предпочесть <input type="submit"> как я считаю, он сталкивается с меньшим количеством конфликтов (как умственных, так и стилистических) с разработчиками.

Замечание пользователя клавиатуры

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

У меня есть демонстрационная программа CodePen, которая показывает это в действии: http://s.codepen.io/aardrian/debug/PZQJyd

Я думаю, что также стоит упомянуть, что события, запускаемые пробелом, запускаются только при отпускании клавиши, тогда как использование клавиши Enter запускает событие, как только вы нажимаете клавишу (до ее отпускания).

Для справки: http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html

2. Дать ему доступное имя

Теперь давайте поговорим о том, как вы вводите доступное имя в эту кнопку. Я предполагаю, что вы не хотите, чтобы это было видно визуально. В этом случае, дайте ему класс visually-hidden и применить эти стили:

.visually-hidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding:0 !important;
  border:0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
 }

Это позволит читать программы чтения с экрана. Это также означает, что вы можете (и должны) title атрибут

3. Объедините это

Теперь возьмите под свой контроль и настройте его соответственно:

<button style="…" class="histogram_bar_link" onclick="…" disabled="disabled">
  <span class="visually-hidden">Less than 2,016 (0)</span>
  <div id="…" class="histogram_bar_background">
    <div id="…" class="histogram_bar_active" style="…"></div>
  </div>
</button>

Я превратил это в <button> и дал ему доступное имя, вставив <span> с visually-hidden класс, чтобы скрыть это от глаз.