Изучение доступности в первый раз может показаться ошеломляющим. Вы начинаете читать, и в какой-то момент вас осеняет: Так многому нужно научиться! А если вы похожи на меня и считаете, что это ваша обязанность — сделать доступными те вещи, которые вы создаете, это может даже заставить вас почувствовать беспокойство.
И да, вам предстоит многое узнать о доступности. Но вам не нужно знать все и сразу. Как напоминает нам Мерил Эванс в своем твите (и в сообщении в блоге, на которое она ссылается), речь идет о прогрессе, а не о совершенстве:
Мерил Эванс, CPACC 🦻 Закажите меня на октябрь@merylkevans#Доступность — это не «все или ничего». Вот более мягкий и эффективный способ подойти к доступности с позиции прогресса, а не совершенства: buff.ly/3jEzfjS#A11y
17:34 PM — 14 Jul 2022
Итак, вот некоторые вещи, которые я хотел бы знать, когда только начинал изучать доступность. Черт возьми, я хотел бы знать эти вещи, когда начал изучать веб-разработку! Я расскажу о семантическом HTML, клавиатурной навигации и о том, как слушать людей с ограниченными возможностями.
Изучите семантический HTML и используйте его
Итак, первое: изучите семантический HTML. Но что это значит? Семантический HTML, или семантическая разметка, описывает свое значение для браузера и разработчика в человеко- и машиночитаемом виде. Таким образом, при использовании семантических элементов человек понимает, о чем идет речь в HTML, а браузер знает, что он должен отображать и как себя вести, когда пользователь взаимодействует с ним.
Вот пример:
<button onClick={...}>I'm an honest button</button>
Эта кнопка использует семантический элемент button. Когда она так делает, браузер знает, что она должна делать, когда пользователь либо щелкает по ней, либо активирует ее с помощью клавиатуры или другого устройства ввода. Вот пример несемантической «кнопки»:
<div className="button" onClick={...}>
I look like a button
</div>
Итак, эта «кнопка», сделанная из div, выглядит как кнопка и даже имеет обработчик onClick. Так разве человек не распознает ее как кнопку? И да, и нет. Это зависит от человека.
Видите ли, эта «кнопка» работает только для пользователей мыши. Поскольку div по своей природе не является интерактивным элементом, он не обрабатывает взаимодействие так же, как, например, элемент button. При использовании семантического элемента кнопки, событие onClick-event распространяется таким образом, что он также обрабатывает взаимодействие с клавиатурой. Однако div не делают этого.
Еще одна причина, по которой пользователь, не использующий мышь, поймет, что это не кнопка, заключается в том, что вы не можете сфокусироваться на ней. Это означает, что кнопка не находится в порядке фокуса/вкладки. А это, в свою очередь, означает, что пользователь без мыши не может с ней взаимодействовать.
В HTML существует множество семантических элементов. По какой-то причине мы склонны использовать div для многих вещей. Знаете ли вы, например, что вы можете аннотировать адреса с помощью элемента address? Или обернуть дату или время с помощью элемента time? Или отображать прогресс с помощью элемента progress? В MDN перечислены элементы HTML, так что не забудьте проверить этот список.
Если вы хотите прочитать о других преимуществах использования семантического HTML, я недавно написал статью в блоге «Ода семантическому HTML».
Узнайте о навигации по клавиатуре
Еще один совет, который я хочу дать, мы затронули в предыдущем разделе: Узнайте о навигации по клавиатуре.
Что и зачем нужно знать о навигации по клавиатуре
Теперь вы можете задаться вопросом: «Зачем кому-то использовать клавиатуру для навигации?». Ну, во-первых: не все могут пользоваться мышью, или просто не хотят. Иногда выполнение задач на компьютере происходит гораздо быстрее, например, с помощью клавиатуры.
Существует множество различных способов использования цифровых устройств. Некоторые люди пользуются программой для чтения с экрана, которая читает содержимое экрана вслух. Некоторые используют клавиатуру для навигации, потому что не могут пользоваться мышью. А некоторые люди используют вспомогательные средства, такие как трости для рта, специальные клавиатуры, переключатели и другие инструменты для работы с цифровыми устройствами. Не будем забывать и о голосовых интерфейсах или технологиях отслеживания взгляда, которыми пользуются некоторые люди.
В общем, суть в том, что существует множество других способов взаимодействия с цифровым устройством, кроме мыши. И нам, как разработчикам, необходимо создавать интерфейсы, которые работают для всех наших пользователей и не исключают никого.
Теперь вы можете почувствовать себя ошеломленным. «Как я могу создавать веб-сайты для всех этих потребностей?». У меня хорошие новости: вам не нужно думать о каждом методе ввода. Многие из вышеупомянутых методов ввода эмулируют то, что делает обычная клавиатура.
Я предлагаю следующее: сначала изучите, как должна работать клавиатурная навигация на сайте. После этого можно переходить к изучению специфики других методов ввода.
Давайте поговорим немного больше о взаимодействии с клавиатурой. Есть две вещи, которые я настоятельно рекомендую вам изучать и применять на практике: шаблоны навигации по клавиатуре и как их тестировать (и регулярно это делать).
Паттерны навигации по клавиатуре
Итак, как работает клавиатурная навигация? Когда пользователи хотят перейти вперед, они нажимают клавишу Tab-клавишу, и это приводит (или должно приводить, в зависимости от того, насколько хорошо сайт был закодирован) их к следующему интерактивному элементу. Это означает ссылку, кнопку, поле ввода или что-то подобное, а не, например, заголовок.
Когда пользователи клавиатуры хотят прочитать что-то или перейти вперед на сайте без интерактивных элементов, они прокручивают страницу с помощью клавиш со стрелками. Я хочу подчеркнуть это, потому что вижу много сайтов, где разработчик добавил tabIndex-атрибут к неинтерактивным элементам, чтобы пользователи клавиатуры могли перемещаться вперед.
Это замечательно, что разработчик думает о пользователях клавиатуры. Однако этот шаблон увеличивает количество остановок табуляции, чтобы добраться до реальных интерактивных элементов. Для кого-то это расстраивает, а для кого-то может быть даже болезненным, если, например, каждое нажатие клавиши вызывает боль.
Итак, вернемся к шаблонам. Когда пользователь клавиатуры хочет перейти к предыдущему интерактивному элементу, он использует клавишу Shift + Tab.
Существуют различные шаблоны для активации интерактивных элементов. Я перечислю несколько из них:
- Введите или Пробел
- Enter
- Пробел
- Tab вход (и выход) в группу радиовходов, клавиши со стрелками — для изменения значения.
Как видно, кнопки и ссылки активируются разными клавишами. В частности, клавиша пробела не активирует ссылку. Это различие между элементами полезно запомнить — когда пользователи видят что-то вроде кнопки, они думают, что это работает как кнопка. Если базовым компонентом является ссылка, она не активируется клавишей Пространство а прокручивается вниз по странице. Это очень расстраивает.
Ожидаемые шаблоны клавиатурной навигации для более сложных элементов пользовательского интерфейса вы можете найти в практиках WAI-ARIA Authoring.
Тестирование с помощью клавиатуры
Когда вы создаете пользовательские интерфейсы, обязательно тестируйте их с помощью клавиатуры. Основной метод — это навигация по всему сайту с помощью клавиатуры. Когда вы встретите интерактивный элемент, попробуйте запустить его. Убедитесь, что он работает так, как ожидалось — это означает, что с помощью клавиатуры вы можете делать все то же самое, что и с помощью мыши.
И еще одно замечание, если вы используете Mac и Safari. Вам нужно включить клавиатурную навигацию для них — не знаю почему, но она не работает из коробки. Вот инструкции по включению клавиатурной навигации для Mac и Safari.
Прислушивайтесь к людям с ограниченными возможностями
Последний совет, который я дам в этой статье, — прислушиваться к людям с ограниченными возможностями. Этот совет состоит из двух вещей: Слушать и узнавать об их (нашей) жизни в целом и слушать обратную связь, которую мы/они дают.
Я поделюсь некоторыми ресурсами, которые показались мне полезными и информативными. В интернете есть много других ресурсов, и если вы считаете, что что-то должно быть включено, я обязательно хочу знать о них!
Одно из хороших мест для поиска таких историй — это Twitter. Есть несколько хэштегов, за которыми я рекомендую следить:
— #ActuallyAutistic
— #EverydayAbleism
— #DisabilityPrideMonth
Я с удовольствием добавлю сюда еще несколько, так что если вы знаете другие хорошие хэштеги, дайте мне знать.
Также хорошим источником информации об опыте и ожиданиях людей с ограниченными возможностями является серия подкастов A11y Rules Soundbite Николаса Стинхаутса. Эти короткие беседы с людьми с ограниченными возможностями дают много хороших точек зрения для проектирования и создания веба.
Я также хочу упомянуть блестящую книгу Эмили Ладау: Demystifying Disability. Я написал несколько мыслей по поводу этой книги после ее прочтения, так что загляните и в этот блог: «Мысли после прочтения книги «Демистификация инвалидности» Эмили Ладау».
Еще один замечательный ресурс — Disability Visibility-project. На странице «О проекте» он описывается следующими словами:
Disability Visibility Project — это онлайн-сообщество, занимающееся созданием, распространением и усилением медиа и культуры инвалидности.
Есть ли у вас другие ресурсы? Или другие советы, о которых должен знать начинающий разработчик?
Ссылки в записи блога
- MDN перечисляет элементы HTML
- «Ода семантическому HTML»
- Практика WAI-ARIA Authoring
- Инструкции по включению клавиатурной навигации для Mac и Safari.
- #ActuallyAutistic
- #EverydayAbleism
- #DisabilityPrideMonth
- Серия подкастов Nicolas Steenhouts «A11y Rules Soundbite».
- Эмили Ладау: Демистификация инвалидности
- «Мысли после прочтения книги Эмили Ладо «Демистификация инвалидности»».
- Проект «Видимость инвалидности