Вскоре после того, как я получил свою первую работу разработчика, я начал узнавать о важности веб-доступности. Дело не в том, что я не знал об этом или не думал, что это важно, у меня есть слепой двоюродный брат и отец с множественными физическими недостатками, включая тремор рук, вызванный рассеянным склерозом. Не то чтобы я не слышал об этом, когда изучал веб-разработку. Честно говоря, это никогда не подчеркивалось ни в одном из ресурсов, которые я нашел для изучения веб-разработки, и я тоже не знал достаточно, чтобы искать какие-либо ресурсы.

Итак, я был младшим разработчиком, полным синдрома самозванца, и обнаружил, что у меня есть еще одна огромная дыра в моей базе знаний, и если я признаю это кому-либо, то окажется, что я мошенник. Поэтому я продолжал писать код, чувствуя себя виноватым из-за того, что потенциально пишу недоступный код. (Никогда не замечал, что меня никто не вызывал при проверке кода, потому что они тоже не знали)

Затем я пошел на конференцию, и основной докладчик был слепым и говорил о том, что технологии не только позволяют ему это делать, но и о том, как много недоступных технологий запрещает ему в его повседневной жизни. Именно в этот момент я поставил перед собой задачу изменить определение «готово» и всегда делать все возможное, чтобы мой код был доступен, насколько мне известно.

Дело в том, что, как и во многих других вещах, наибольшую отдачу от вложенных средств принесут небольшие и простые вещи, которые очень легко реализовать. Просто нужно знать о них, чтобы вы знали о них, когда их используете. Вот список простых исправлений доступности, о которых я хотел бы знать, когда начинаю.

Всегда используйте описательный заголовок страницы

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

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

Используйте теги заголовков как ориентиры, а не для стилизации

Теги заголовков бывают 6 уровней, h1 - h6, и организуют поток нашей страницы. Они также предоставляют программы чтения с экрана ориентиры, позволяющие легко переходить к различным разделам в зависимости от этого потока.

Проблема в том, что у них также есть стили по умолчанию, предоставляемые браузером и / или фреймворком CSS, который мы используем. Это означает, что может быть очень заманчиво использовать теги заголовков для их стилей, даже если это делает поток нашей страницы невозможным для понимания.

Вот несколько простых правил, которые могут упростить эту задачу:

  1. На странице ВСЕГДА должен быть только один тег h1.
  2. Никогда не пропускайте уровень заголовка. т.е. h4 никогда не должен идти после h2,, вместо этого следует использовать h3.
  3. Используйте CSS, чтобы стилизовать элемент так, как вы хотите. Если заголовок слишком большой или слишком маленький, измените стили с помощью CSS. Если вам нужно что-то большое и жирное, но это не ориентир заголовка, не используйте тег заголовка. Вероятно, вам нужно использовать либо сильный тег, либо тег emp, а затем добавить стиль, который вам нужен, чтобы он выглядел так, как вы хотите.

Теперь бывают моменты, когда визуально заголовок не нужен. Списки сообщений в блогах или тому подобное легко понять, просто взглянув на них. В этом случае не нужно добавлять заголовок для зрячих пользователей, но заголовок там все равно нужен. Это потому, что, как только вы удалите все визуальные подсказки, он потеряет смысл в том, что там происходит. В этих случаях я бы рекомендовал использовать визуально скрытый хак. Отличный пример того, как реализовать этот взлом, есть в ReachUI.

Заполнители - это не ярлыки

На современных веб-страницах пространство стоит дорого. Обычно стараются минимизировать количество пикселей, используемых в наших полях формы, максимально увеличивая ограниченное пространство, которое у нас есть. Один из способов, которыми разработчики начали это делать, - это использование атрибута placeholder в качестве метки.

К сожалению, это создает неприятные ощущения не только для тех, кто зависит от программ чтения с экрана, но и для зрячих пользователей. Без правильной метки у вас нет контекста для того, для чего это поле формы. Визуально значение заполнителя удаляется в тот момент, когда вы что-либо вводите, требуя удалить текст, который вы написали, просто чтобы снова увидеть значение заполнителя. Это плохой опыт для всех.

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

Если вы хотите по-прежнему максимизировать пространство, есть хорошо задокументированные приемы, которые позволяют метке плавать прямо над полем, когда поле пусто, а затем переходить непосредственно над полем, когда пользователь начинает вводить значения. Значения-заполнители по-прежнему полезны. Они позволяют вам предоставить дополнительную информацию о поле формы, например, примеры. Просто помните, что вы никогда не должны вводить важную информацию после того, как поле было заполнено.

Каждый тег изображения должен иметь атрибут Alt

Как вы заметили, одна из самых важных вещей, которые нам нужно помнить при написании веб-страниц, - это то, что они предназначены не только для визуальных пользователей. Нам нужно писать наши веб-страницы таким образом, чтобы это приносило пользу и незрячим пользователям. Так что же нам делать с img тегами, которые на сто процентов являются «визуальными». Здесь на помощь приходит атрибут alt. Атрибут alt позволяет вам предоставить подробное описание того, что должно было показывать изображение. Браузер отобразит значение атрибута alt, а затем покажет изображение, если оно получено. В случае программ чтения с экрана используется только значение alt.

Так что вы добавляете в атрибут alt? Проще говоря, достаточно деталей, чтобы, если кто-то не видит изображение, он может получить то же значение. У кого-то может возникнуть соблазн сказать «используйте изображение» или «изображение», но это уже подразумевается из контекста. Вместо этого просто запишите, какую важную информацию пользователь получил бы, если бы увидел изображение.

В некоторых случаях изображение не представляет никакой дополнительной ценности, а просто делает страницу более привлекательной. Сюда входят фотографии профиля или изображения на кнопке, у которой уже есть метка. В этих случаях описание действительно отвлекает. Это не значит, что вы можете обойтись без атрибута alt. Если атрибут alt не указан, используется имя файла изображения, что ухудшит восприятие. Вместо этого вы должны указать пустое значение, подобное этому:

<img src="/bob_smith_100_300.jpg" alt=""/>

Это заставит браузер / программу чтения с экрана игнорировать это изображение. Еще раз, делайте это только в том случае, если изображение действительно не предоставляет никакой информации, которую необходимо передать пользователю.

Не удаляйте контур фокуса

Последнее, что я затрону, - это контур фокуса. Часто, когда мы говорим об инвалидах, мы сразу думаем о слепых. Но инвалидность бывает разных форм и уровней постоянства. Одним из таких недостатков может быть тот, кто прекрасно видит, но не может пользоваться мышью по какой-либо причине.

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

Почему так происходит? Две основные причины, почему это происходит. Во-первых, ни один из двух браузеров не использует одинаковый стиль контура фокуса, и, во-вторых, браузеры также показывают контур фокуса, когда вы щелкаете фокусируемый элемент, если стиль по умолчанию вообще был изменен. Это означает, что если вы вообще используете какой-либо стиль CSS, как это делают все, то вы видите эти странные нестандартные кольца фокусировки вокруг элементов, даже когда вы не используете клавиатуру.

Первая проблема решается легко. Создать стиль контура фокуса в CSS так же легко, как и отключить его. Затем вы можете стандартизировать его внешний вид во всех браузерах.

Вторую проблему тоже довольно легко решить. В настоящее время рабочая группа CSS работает над собственным способом лучшего управления, когда фокус виден, особенно при навигации с помощью клавиатуры, а не мыши. Существует полифилл, называемый focus-visible, который вы можете легко добавить в свой проект и использовать его преимущества.

Этот список никоим образом не является исчерпывающим. Я настоятельно рекомендую вам взглянуть на инструменты разработчика, такие как google lighthouse, web aim и ax, чтобы помочь вам проверить свои веб-страницы на предмет проблем с доступностью. Установите и / или активируйте бесплатные программы чтения с экрана, доступные на ваших машинах, и узнайте, как они работают.

Я закончу последней мыслью. Когда был принят Закон американцев об инвалидах, во многих городах и зданиях пришлось добавить пандусы и бордюры, чтобы облегчить доступ для людей в инвалидных колясках. Самое безумное в том, что, несмотря на то, что они вводили эти возможности для «инвалидов», все заметили преимущества этого. Доставщикам с тележками было легче добраться до зданий. Тем, кто толкает детские коляски, будет легче гулять по городам. Точно так же, делая Интернет более доступным, улучшают пользовательский интерфейс для всех.