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

А известно ли вам, что существуют особенные инструкции веб-доступности для веб-порталов?

Они именуются «WCAG», и были созданы Web Accessibility.

Кто сталкивается с ними впервые, они могут показаться чем-то весьма угрожающим, их же очень много!

Но сразу отчаиваться не стоит — начинать проверку веб-доступности несложно.

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

Инструмент Wave

Очень простой и несложный вариант выполнить проверку номинальной доступности тестируемого сайта — заручится помощью инструмента WAVE.

Данное расширение доступно для браузеров Chrome, Firefox и Microsoft Edge.

Для инсталляции необходимо перейти по ссылке https://wave.webaim.org/extension/ и подобрать именно тот веб-браузер, который вы используете.

Как только инсталляция будет завершена, оно станет активным в специальном блоке панели инструментов пользовательского браузера.

Чтобы использовать расширение, необходимо перейти к тестируемой странице, далее кликнуть по расширению, дабы активировать его работу.

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

При клике на иконку вы узнаете дополнительную информацию об инструкции, а также получите ссылку на страницу справочника WCAG, а также ссылку, направляющую вас прямо в структуру HTML-кода.

Исправление багов веб-доступности, традиционно, тоже несложная работа.

Пример работы с WAVE. Исправление некоторых HTML-ошибок

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

Данное ПО «умеет» говорить, какие элементы и где именно они расположены на странице.

А если же, к примеру, на странице есть картинка, но без альтернативного текста, ПО прочитать её не сможет.

Тогда то и требуется добавить альтернативный текст, который содержит описание фото.

Небольшой пример такой картинки без альтернативного текста:

<img src=”/img/Logo.png”>

Вот пример фотографии, но с alt-текстом:

<img src=”/img/Logo.png” alt=”logo”>

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

Одной метки уже недостаточно: параметр «for» делает любое поле кристально ясным для понимания.

Вот небольшой пример для поля ввода с меткой без конфигурации «for»:

<label>Email</label>

<input id=”email” placeholder=”Email”>

А вот так всё выглядит с параметрами «for»

<label for=”email address”>Email</label>

<input id=”email” placeholder=”Email”>

Данные простые корректировки никак не повлияют на визуальное отображение веб-страниц, но очень сильно помогут именно тем, кто использует экранные ридеры!

Итоги

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