5 необходимых вещей для каждой веб страницы

5 необходимых вещей для каждой веб страницы

Разработчикам отводится ключевая роль в создании или нарушении доступности сайта. Именно поэтому так важно следовать «Руководствам по обеспечению доступности веб-контента» (WCAG), а также методам разработки и тестирования веб-доступности. Подробнее о веб-доступности можно почитать  здесь.


Ключевые моменты при работе над доступностью:

1) Определяйте язык страницы

Определение языка страницы помогает программам экранного доступа переключать языковые профили и подстраивать скорость речи для подбора правильного акцента и произношения. Для определения языка или раздела страницы используется атрибут lang .

<html lang="en">
</html>

2) Пишите HTML с умом

Приходилось ли вам сталкиваться с сайтами, на которых все – от текстовой информации до кнопок, – было упаковано в div? С одной стороны, использование div придает некую гибкость в разработке, а с другой – блокирует все встроенные и удобные функции HTML. Поэтому создавая функционирующую кнопку определенной формы через div, надо готовиться к написанию объемного CSS кода и добавлению всех событий для и клавиатуры вручную. 


В то же время все события клавиатуры можно прописать через тег <button>! Так можно не только экономить ценное время, но и достичь большей доступности.  Вспомогательные устройства получают информацию из DOM. А DOM игнорирует весь JS и CSS код, написанный вручную. Эффективно решить данную проблему позволяет использование семантического HTML. Вот несколько советов:

  1. Правильно структурируйте/добавляйте теги. Так вспомогательные устройства смогут формировать и проговаривать текст в нужной последовательности. К тому же, упростится навигация.
  2. Для текстового содержимого пользуйтесь тегами <p>, <span> или <h1to6>.
  3. Правильно создавайте  макет страницы. Например, не стоит прописывать шапку или подвал в теге <main>.
  4. Для макета страницы пользуйтесь тегами 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) Обработка и исправление ошибок

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

  1. Отображайте ошибки под нужным полем или рядом с ним. Выделяйте неправильный текст и подчеркивайте поле с ошибкой.
  2. При проверке введенных значений автоматически удаляйте все проблемы из всех полей, включая номер телефона.
  3. Добавляйте текст или аудио подсказки, предлагайте варианты замены – так пользователь быстрее поймет, что именно от него требуется.
  4. Продумывайте схему для просмотра, подтверждения и исправления введенной информации до конечной ее отправки на сервер.


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

(3.3)
6 Декабря 2018

Возврат к списку