Разработчикам отводится ключевая роль в создании или нарушении доступности сайта. Именно поэтому так важно следовать «Руководствам по обеспечению доступности веб-контента» (WCAG), а также методам разработки и тестирования веб-доступности. Подробнее о веб-доступности можно почитать .
Ключевые моменты при работе над доступностью:
1) Определяйте язык страницы
Определение языка страницы помогает программам экранного доступа переключать языковые профили и подстраивать скорость речи для подбора правильного акцента и произношения. Для определения языка или раздела страницы используется атрибут lang .
<html lang="en">
</html>2) Пишите HTML с умом
Приходилось ли вам сталкиваться с сайтами, на которых все – от текстовой информации до кнопок, – было упаковано в div? С одной стороны, использование div придает некую гибкость в разработке, а с другой – блокирует все встроенные и удобные функции HTML. Поэтому создавая функционирующую кнопку определенной формы через div, надо готовиться к написанию объемного CSS кода и добавлению всех событий для и клавиатуры вручную.
В то же время все события клавиатуры можно прописать через тег <button>! Так можно не только экономить ценное время, но и достичь большей доступности. Вспомогательные устройства получают информацию из DOM. А DOM игнорирует весь JS и CSS код, написанный вручную. Эффективно решить данную проблему позволяет использование семантического HTML. Вот несколько советов:
- Правильно структурируйте/добавляйте теги. Так вспомогательные устройства смогут формировать и проговаривать текст в нужной последовательности. К тому же, упростится навигация.
- Для текстового содержимого пользуйтесь тегами <p>, <span> или <h1to6>.
- Правильно создавайте макет страницы. Например, не стоит прописывать шапку или подвал в теге <main>.
- Для макета страницы пользуйтесь тегами HTML5 <header>, <main>, <section>, <article>, <aside> и <footer>. Тогда пользователи смогут с легкостью переходить из одной части страницы в другую.
Семантический HTML помогает вспомогательным технологиям понять, как лучше «преподнести» каждый элемент пользователю. Более подробно о семантическом HTML и доступности написано .
3) Метки куда важнее, чем вам кажется
Создавайте метки для каждого элемента управления. Тогда программы экранного доступа смогут корректно определить и прочитать нужное поле. Как это делается:
a) добавляется текст метки:
<label for="name">Название</label>
<input id="name" type="text" name="username">b) если не хотите отображать описание метки в видимой области, то выбирайте aria-label:
<button aria-label="Отправка формы: данные формы будут отправлены для дальнейшей обработки">Отправить </button>4) Используйте замещающий текст для медиафайлов
Для картинок и подписей отлично подходит атрибут alt , а для аудио/видео файлов на сайте можно добавить аудио-описание. Это отличное решение в случае, если по каким-то причинам (не поддерживается форма или проблемы с браузером) посетители сайта не могут открыть медиафайл.
5) Обработка и исправление ошибок
Иногда результат заполнения формы выглядит весьма печально. Например, в «Имени пользователя» недопустимы специальные символы или числа, а «Пароль», наоборот, должен быть сильным, поэтому требует использования спецсимволов и буквенно-числовых значений. «Номер телефона» всегда указывается в определенном формате, с добавлением или удалением пробелов.
- Отображайте ошибки под нужным полем или рядом с ним. Выделяйте неправильный текст и подчеркивайте поле с ошибкой.
- При проверке введенных значений автоматически удаляйте все проблемы из всех полей, включая номер телефона.
- Добавляйте текст или аудио подсказки, предлагайте варианты замены – так пользователь быстрее поймет, что именно от него требуется.
- Продумывайте схему для просмотра, подтверждения и исправления введенной информации до конечной ее отправки на сервер.
Всегда помните, что ваша главная цель заключается не столько в соответствии стандартам разработки, сколько в положительном пользовательском опыте. Создавайте такой опыт, который порадует пользователей с любыми физическими возможностями.