Обеспечение доступа к сети по одному (менее) 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 или по электронной почте!