6 простых способов улучшить доступность вашего веб-сайта

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

Это не только плохо для бизнеса; На вашу компанию могут подать в суд за нарушение Закона об американцах-инвалидах (ADA), закона, запрещающего дискриминацию в отношении людей с ограниченными возможностями.

Ключ к смягчению судебных исков — сделать ваш веб-сайт доступным для всех пользователей и обеспечить его соответствие требованиям ADA.

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

Начните с этих шести практических способов сделать ваш сайт более доступным.

1. Запустите тест на доступность в Интернете

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

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

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

Просто укажите URL вашего веб-сайта, и инструмент просканирует весь ваш веб-сайт в течение нескольких минут.

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

Вы также получите подробную информацию о правилах доступности и конкретных проблемах, требующих исправления.

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

Вы будете знать, что именно нужно настроить, в том числе, как настроить или изменить определенные элементы веб-сайта, чтобы начать свой путь к более доступному и соответствующему требованиям ADA и Руководству по обеспечению доступности веб-контента (WCAG) сайту.

2. Разместите важные интерактивные элементы вверху

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

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

Потребовалось несколько или слишком много нажатий? Когда вы нажимали Tab, вы могли видеть, где был фокус на гиперссылке элемента управления интерфейсом?

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

Это делает ваш сайт недоступным, расстраивает ваших посетителей и портит пользовательский опыт.

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

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

3. Сделайте заголовки страниц четкими и осмысленными

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

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

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

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

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

Это может испортить пользовательский опыт и ухудшить доступность в Интернете.

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

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

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

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

4. Используйте правильные заголовки

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

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

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

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

5. Элементы формы меток

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

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

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

Если вы используете каскадные таблицы стилей (CSS), вы можете преобразовать элементы метки в значки. Вы также можете скрыть элементы этикетки от простого просмотра, выдвинув область просмотра браузера (при необходимости).

6. Разрешить пропускать навигацию

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

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

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

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

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

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

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

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

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