Обеспечение доступа к сети по одному (менее) DIV за раз.
Раньше я думал, что доступность - это в лучшем случае улучшение UX, а в худшем - работа с соблюдением требований. Но поскольку пандемия превратила Boxed.com в важную услугу для многих наших клиентов, я прочитал большое количество душераздирающих обращений в службу поддержки клиентов, которые раскрыли мои предубеждения и непреднамеренные исключения, вызванные моим кодом. Теперь я убежден, что сделать Интернет доступным - это самое простое решение.
Доступность - это обширная тема и подмножество более высоких принципов инклюзивного дизайна, в которых я не буду претендовать на роль эксперта. Я просто делюсь одним из множества полезных уроков, которые я усвоил как разработчик.
Итак, перейдем к основной теме.
Нам нравятся наши div
теги. Но, даже не обсуждая достоинства семантического HTML (который заслуживает отдельной статьи), просто с точки зрения опыта разработчика, button
более доступен с меньшим количеством кода по сравнению с div
. Чтобы проиллюстрировать это, давайте продолжим и создадим интерактивный div
.
<div>Click me</div> <script> function doSomething() { console.log('do something'); } document.querySelector('div').onclick = doSomething; </script>
Недостаточно хорошо, нам нужно визуально указать с помощью типа курсора, что div
можно щелкнуть (что, по-видимому, также спорно). Давайте добавим CSS.
<style> .someDiv { cursor: pointer; } </style> <div class='someDiv'>Click me</div>
Недостаточно хорошо, нам нужно устно указать через программы чтения с экрана, что div
- это кнопка, на которую можно нажимать, и что она должна быть доступна с клавиатуры с помощью навигации с помощью вкладок. Добавим атрибуты role
и tabindex
.
<div class='someDiv' tabindex='0' role='button'>Click me</div>
Недостаточно хорошо, div
также должен быть доступен с клавиатуры с помощью клавиш Enter
и Space Bar
. Давайте добавим еще JavaScript (который может быть даже не на 100% кроссбраузерным).
<script> function doSomething() { console.log('do something'); } function handleKeydown(e) { if (e.key === 'Enter' || e.key === ' ') { doSomething(); } } document.querySelector('div').onclick = doSomething; document.querySelector('div').onkeydown = handleKeydown; </script>
Итак, наконец, мы пришли к следующему.
<style> .someDiv { cursor: pointer; } </style> <div class='someDiv' tabindex='0' role='button'>Click me</div> <script> function doSomething() { console.log('do something'); } handleKeydown(e) { if (e.key === 'Enter' || e.key === 'Space Bar') { doSomething(); } } document.querySelector('div').onclick = doSomething; document.querySelector('div').onkeydown = handleKeydown; </script>
В то же время версия button
, которая одинаково доступна, выглядит так.
<button>Click here</button> <script> function doSomething() { console.log('do something'); } document.querySelector('button').onclick = doSomething; </script>
Как вы подходите к созданию интерактивных компонентов пользовательского интерфейса? Дай мне знать в комментариях.
Примечание. Я решил не обсуждать aria
атрибуты, потому что считаю, что они заслуживают отдельной статьи.
📫 Напишите мне в LinkedIn или по электронной почте!