9 способов сделать свой сайт более доступным

Обеспечение доступности и удобства на вашем сайте - правильное решение сегодня.

Зачем это нужно?

Потому что, примерно 25% взрослых живут с ограниченными возможностями.

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

Это означает, что миллионы пользователей изо всех сил пытаются использовать Интернет.

Согласно Консорциуму World Wide Web (W3C), доступность Интернета - это проектирование и разработка веб-сайтов, инструментов и технологий, которые могут использовать люди с ограниченными возможностями по всему миру.

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

Доступность в Интернете распространяется на все виды инвалидности, влияющие на доступ к сети, в том числе:

• Слуховой

• Познавательная

• Неврологический

• Физический

• Речь

• Визуальный

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

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

После того, как вы проверили свой сайт на доступность в интернете, вы можете выполнить следующие шаги:

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

Им часто приходится полагаться на вспомогательные технологии, такие как устройства чтения с экрана и обновляемые устройства чтения шрифтов Брайля.

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

Однако ни одна из этих технологий не может читать изображения или текст в изображениях.

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

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

Вы можете использовать атрибут alt для кратких описаний и «Longdesc Tag» для длинных описаний.

Люди со слабым зрением часто не могут читать мелкий текст.

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

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

Кроме того, убедитесь, что ваши кнопки СТА имеют больший размер шрифта.

Также сделайте эти кнопки видимыми для людей с ослабленным зрением.

Помимо размера текста, нужно подумать о цвете и контрасте.

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

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

Избегайте использования тонких шрифтов.

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

Как и размер текста, цветовой контраст также имеет решающее значение для CTA.

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

Не используйте такие комбинаций, как зеленый текст на красном фоне и наоборот, поскольку их трудно читать.

Для слепых и слабовидящих пользователей навигация является проблемой.

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

Слепые пользователи будут использовать клавиатуру Брайля для доступа к вашему сайту.

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

• URL-адреса.

• Якорный текст.

• Выпадающие меню.

• Виджеты.

• Формы.

• CTA.

• Диалоговые окна.

Виджеты JavaScript сделайте доступными с клавиатуры.

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

Видео и другие мультимедийные элементы на вашем веб-сайте играют решающую роль в повышении активности пользователей на вашем веб-сайте.

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

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

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

Убедитесь, что у вас не закончились часы звукового описания, что сделает его бессмысленным для пользователя.

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

Убедитесь, что вы используете правильный цветовой контраст, чтобы правильно выделить подписи.

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

К счастью, проигрыватели HTML5 предоставляют больше возможностей для обеспечения доступности.

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

Содержательные описания также облегчают переход к нужному содержанию.

Например, описывая ссылку на странице «О программе», помните следующее.

• Низкая читаемость : www.abcmarketing.com/about

• Высокая читаемость : www.abcmarketing.com/about-our-company

Избегайте использования якорного текста, такого как «Подробнее» или «Щелкните здесь» в любом месте страницы.

Кроме того, не добавляйте ссылки на изображения, которые не поддерживают замещающий текст.

ARIA расшифровывается как доступные полнофункциональные интернет-приложения.

Это поможет вам сделать динамический контент более доступным.

Роли и атрибуты ARIA предоставляют дополнительную информацию или контекст об элементе веб-сайта для программ чтения с экрана и других вспомогательных инструментов.

Вы можете добавить роль ARIA с помощью атрибута role = ”ROLE TYPE”.

Шесть наиболее распространенных категорий ролей ARIA включают:

• Ориентир: программы чтения с экрана используют эту роль для навигации.

• Структура документа: предлагает структурное описание раздела.

• Виджет: описывает интерактивные элементы, не имеющие семантических эквивалентов в HTML.

• Аннотация: Это помогает организовать и упростить документ.

• Окно: создает подкатегорию или подраздел основного документа.

• Live Regions: помогает вспомогательным инструментам обнаруживать изменения динамического содержимого на веб-странице и предупреждать пользователей с ограниченными возможностями.

Однако только люди, имеющие доступ к исходному коду и знакомые с ARIA и HTML5, могут и должны вносить эти изменения.

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

В онлайн-формах часто используется текст-заполнитель для описания различных элементов для экономии места.

Однако текст-заполнитель обычно серый.

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

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

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

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

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

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

Поэтому по возможности используйте CSS для представления данных.

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

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

Вывод

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

Так что всегда помните о доступности вашего сайта для людей с ограниченными возможностями.

Эти советы помогут вам в оптимизации вашего сайта для пользователей с ограниченными возможностями.

Источник: Search Engine Journal

Написать нам