Исправьте 85% проблем с доступностью веб-сайтов с помощью 5 простых шагов

От автора: в предыдущем посте мы рассмотрели важность Веб-доступности и упомянули The WebAIM Million — проведенный WebAIM анализ текущего состояния веб-доступности 1 миллиона популярных страниц. Результаты оказались удручающими: на главных страницах проанализированных сайтов в среднем был обнаружено почти по 60 ошибок, а процент чистых сайтов составлял менее 3%.

Большинство ошибок можно было сгруппировать в несколько категорий. Из 59,6 миллионов ошибок 52,1 миллиона были вызваны только пятью проблемами с доступностью сайта, которые легко исправить:

Исправление этих пяти типов проблем устранит большинство обнаруженных проблем.

1. Увеличьте цветовой контраст текста

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

Разница между действительным и недействительным цветовым контрастом иногда неуловима

Для меня это может быть самым ограничивающим требованием (по крайней мере, с точки зрения творчества), так как много раз я нахожу интересную цветовую палитру, которую в итоге отбрасываю, потому что она не соответствует спецификациям WCAG. Один из вариантов состоит в том, чтобы следовать менее строгим критериям уровня AA, поскольку в любом случае невозможно для некоторого контента удовлетворить все критерии уровня AAA.

У WebAIM есть действительно отличный инструмент для проверки цветового контраста, и вы можете найти онлайн много других инструментов. На самом деле, вы даже можете действительно просто реализовать свой собственный. Это требует некоторых математических вычислений, но ничего особенного, и это может стать отличным опытом обучения. Например, я сам разработал средство проверки контрастности, чтобы проверять цвета RGB, поскольку все средства проверки, которые я нашел в Интернете, работали только со значениями HEX.

2. Добавьте к изображениям альтернативный текст

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

<img src="guernica.jpg" alt="Guernica painting by Pablo Picasso" />

Хотя это кажется простым — всего лишь нужно добавить атрибут alt с описанием к тегу img, альтернативный текст может потребоваться немного обдумать. Какова роль изображения? Какой текст окружает его? Мы не хотим игнорировать изображение (добавляя alt=»»), и мы не хотим, чтобы программы чтения с экрана повторяли одну и ту же информацию дважды.

Любой из alt справа может подойти для данного изображения, это будет зависеть от контекста

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

3. Метки элементов формы

Метки предоставляют много преимуществ, таких как: (1) они помогают идентифицировать и предоставлять дополнительную информацию о поле; (2) при нажатии выделяется фокусом связанный элемент формы; и (3) они просты в реализации. Вам просто нужно обернуть текст в тег label и использовать атрибут for, чтобы указать на идентификатор элемента:

<label for="username">Username:</label>
<input id="username" type="text" name="user">
<label for="password">Password:</label>
<input id="password" type="password" name="pass">

Иногда могут быть сложные ситуации, в которых поля ввода могут не иметь определенной метки для каждого из них (например, таблица со строками, которые допускают редактирование, или метка, которая должна применяться к нескольким полям). В этих случаях вы можете использовать атрибут aria-labelledby, чтобы указать на элемент, который будет служить меткой:

<table> <thead> <tr> <th id="namelabel">Name</th> <th id="addresslabel">Address</th> <th id="agelabel">Age</th> </tr> </thead> <tbody> <tr> <td><input aria-labelledby="namelabel" name="name" /></td> <td><input aria-labelledby="addresslabel" name="address" /></td> <td><input aria-labelledby="agelabel" name="age" /></td> </tr> ... </tbody>
</table>

Если у вас есть форма или компонент, который включает такие элементы формы, как поля ввода или переключатели, не забудьте добавить метку для различных элементов формы или добавить атрибут aria-labelledby.

4. Добавьте значение для ссылок

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

Одна из этих ссылок предоставляет актуальную информацию о связанном контенте

Теперь некоторые могут сказать: «Но наличие длинной значимой ссылки нарушает способ представления нашего сайта! У нас есть место только для надписи «Читать дальше»!» И для них есть альтернатива: используйте aria-label в ссылках:

<a href="#" aria-label="Read more about Web Accessibility"> Read more
</a>

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

5. Организуйте контент правильно

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

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

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

Кроме того, не забудьте использовать правильные семантические теги; важно использовать заголовки (h1, h2 и т. д.) вместо стилизации других элементов, чтобы они выглядели как заголовки. Они могут быть похожи визуально, но не все пользователи полагаются на свое зрение.

Заключение

Тот факт, что 87% проблем с веб-доступностью, обнаруженных при анализе WebAIM, были на самом деле легко исправимыми ошибками, может показаться хорошей новостью, но мы должны воспринимать эти результаты с осторожностью: проанализированные страницы были просто домашними страницами, которые обычно не включают сложные компоненты, для которых характерны более сложные проблемы доступности.

Кроме того, утверждение о том, что 85% всех проблем с доступностью может быть исправлено с помощью 5 вышеприведенных шагов, немного утрировано. (Извините за заголовок клик-приманку.) Хотя, скорее всего, фактический процент не так уж далек от реальности (что могло бы оправдать старое правило в вычислительной технике — 80/20).

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

Автор: Alvaro Montoro

Источник: https://dev.to

Редакция: Команда webformyself.