Доступность: кнопка показать / скрыть пароль при вводе пароля

Question

Обычно при вводе пароля есть кнопка «показать / скрыть», но я нахожу в Интернете мало информации о каких-либо проблемах с доступностью - нужно ли мне добавлять какие-либо атрибуты ARIA к кнопке или вводу пароля? Имеет ли смысл, чтобы это было чекбокс или кнопка, которая также запускает JS для достижения хорошего эффекта?

Не уверен, на что мне следует обращать внимание, если кто-то не очень погружен в это, но хочет понять лучшие практики доступности.

Answer 1

Интересный вопрос.

Это, пожалуй, наиболее значимые фрагменты литературы, которые я смог найти по этому вопросу:

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

(и)

• Элемент, который отображает и скрывает содержимое, играет роль button.
• Когда содержимое отображается, элемент с кнопкой роли имеет aria-expanded, установленный в значение true. Если область содержимого скрыта, для нее устанавливается значение false.
• При желании элемент с кнопкой роли имеет значение, указанное для aria-controls, которое относится к элементу, содержащему весь отображаемый или скрытый контент.

См. https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure

Я вообще не специалист по юзабилити, но не похоже на сумасшествие видеть связь с вашим использованием дело. Поэтому, чтобы ответить на ваш вопрос, я бы применил атрибуты ARIA, а также некоторые JavaScript.

function toggle_visibility(el) {
  const control = el.getAttribute('aria-controls');
  const expanded = el.getAttribute('aria-expanded') === 'false';
  document.querySelector(`#${control}`).type = expanded ? 'text' : 'password';
  el.setAttribute('aria-expanded', String(expanded));
  el.textContent = expanded ? 'hide' : 'show';
}

document.querySelector('button').addEventListener('click', ({
  target
}) => toggle_visibility(target));

<div>
  <label for="password">password</label>
  <input type="password" id="password">
  <button aria-controls="password" aria-expanded="false">show</button>
</div>

А вот скриншот из Chrome Dev Tools. Обратите внимание, что на панели специальных возможностей мы можем ссылаться на управление паролем.

Answer 2

Поскольку ни один из приведенных к настоящему времени ответов полностью не охватывает топи c, я постараюсь сделать это здесь.
У вас есть как минимум три возможности:

1. Флажок ;
2. Кнопка переключения;
3. Кнопка с изменяемым текстом.

Флажок

Это самое простое решение.

<label><input id="showPwd" type="checkbox"> Show Password</label>

И затем вы добавляете немного JavaScript, чтобы изменить тип ввода пароля с password, когда флажок снят, на text, когда он установлен.
С точки зрения пользователя это решение также является наиболее очевидно: и пользователи программы чтения с экрана, и пользователи других вспомогательных технологий обычно легко воспринимают состояние флажка. Еще одним преимуществом этого подхода является то, что статус виден сразу же, и нет необходимости перепроверять его с помощью дополнительных команд.

Кнопка переключения

Это требует некоторого ARIA, но не очень.

<button id="showPwd" aria-pressed="false">Show password</button>

Таким образом, вам потребуется изменить стиль кнопки CSS и значение атрибута aria-pressed в вашем JavaScript (и, конечно, соответственно изменить тип ввода пароля) .
С точки зрения пользователя, этот подход имеет как преимущества, так и недостатки. Основным преимуществом для пользователей программ чтения с экрана является то, что при нажатии кнопки пользователь будет слышать " Нажать кнопку Показать пароль " против " Показать кнопку пароля ", что поможет определить статус кнопки для пользователей с нарушениями слуха и / или когнитивных функций лучше и быстрее.

Кнопка с изменяющимся текстом

Простое, но устаревшее решение sh. В основном у вас есть <button> с надписью «Показать пароль», и когда пароль будет раскрыт, кнопка скажет «Скрыть пароль».
Это худшее решение с точки зрения пользователя вспомогательных технологий, так как программа чтения с экрана будет не уведомлять пользователя автоматически при изменении текста на кнопке (если только вы не добавите некоторые дополнительные черные маги c, такие как оповещения ARIA, но я уверен, что это того не стоит). Как правило, когда текст изменяется, пользователь должен перепроверить статус с помощью команды, которая объявляет текущую строку или объект.
Существует еще один недостаток, который охватывает оба решения кнопок: программы чтения с экрана обычно имеют возможность навигации по элементам и для порождают списки элементов одного типа. В этом случае может возникнуть путаница, так как форма содержит больше кнопок (по крайней мере, одну из них). С флажками вероятность такой путаницы намного ниже, если форма не переполнена множеством флажков.

Answer 3

Поскольку я не уверен, хотите ли вы увидеть ответ, подобный тому, который дал вам Фарид, или вы хотите увидеть код, стоящий за такой реализацией, я все равно ответил на него. Реализация довольно проста, взгляните на это:

let showButton = document.getElementById("showPassword");
let password = document.getElementById("password");

showButton.onmousedown = function(){
	password.type = "text";
};

showButton.onmouseup = function(){
	password.type = "password";
};

<form action="/">
  <label for="password">Password</label>
  <input type="password" id="password" name="password"><br><br>
  <button type="button" id="showPassword">Show</button>
</form>

Надеюсь, это поможет!