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

1. 1. Включите карту сайта
2. 2. Используйте четкие и согласованные навигационные системы
3. 3. Проверьте ваши страницы и таблицы стилей
4. 4. Просмотрите ваш сайт с помощью инструментов автоматической оценки доступности.
5. 5. Используйте HTML-разметку для предоставления семантической информации
6. 6. Включите альтернативный текст для всех изображений и графики, которые передают информацию.
7. 7. Проверьте свои страницы с помощью клавиатуры
8. 8. Обеспечить подписи для встроенного видео
9. 9. Обеспечьте стенограммы для основанных на времени СМИ
10. 10. Проверьте свои страницы на мобильном устройстве
11. Заключение

Несмотря на их различия удобство использования и доступность иногда идут рука об руку. Консорциум World Wide Web определяет доступность как «эквивалентный пользовательский опыт для людей с ограниченными возможностями, включая людей с возрастными нарушениями», в то время как удобство использования определяется как «дизайн продуктов, которые будут эффективными, действенными и удовлетворяющими» для конечных пользователей.

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

1. Включите карту сайта

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

Карта сайта также является отличным способом удовлетворения требований к доступности Руководства по доступности контента Консорциума World Wide Web (WCAG 2.0, Критерии успеха 2.4.5 ).

В WordPress есть множество плагинов для создания страницы карты сайта из постов и страниц, включая Простая карта сайта а также WP WordPress Карта сайта ,

Пользователи Drupal могут автоматически создавать карту сайта из пунктов меню или категорий, используя Модуль Карта сайта ,

2. Используйте четкие и согласованные навигационные системы

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

3. Проверьте ваши страницы и таблицы стилей

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

4. Просмотрите ваш сайт с помощью инструментов автоматической оценки доступности.

Инструменты автоматической оценки доступности Это отличный способ начать всестороннюю проверку доступности и может помочь вам определить критические проблемы доступности с вашего сайта. Эти инструменты могут помочь вам определить типичные проблемы доступности, такие как отсутствующие атрибуты alt, низкоконтрастные элементы, неверная разметка HTML / CSS и многое другое. Некоторые из этих автоматизированных инструментов также включают предупреждения о разметке и ручные проверки для дальнейшего тестирования. Проверьте еще один из основных инструментов доступности Вот ,

5. Используйте HTML-разметку для предоставления семантической информации

Одна из самых мощных функций HTML - это возможность структурировать контент. Структурированный контент позволяет браузерам (и пользователям) понимать контекст информации в документе HTML , Правильно структурированные страницы используют упорядоченные и неупорядоченные списки, заголовки (h1, h2… h6), абзацы, разделы, статьи и многое другое. Включение семантической информации и структуры в ваши страницы крайне важно для того, чтобы браузеры и вспомогательные технологические устройства могли анализировать и интерпретировать содержимое ваших страниц. Проверять, выписываться несколько замечательных статей на семантической разметке и HTML.

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

Включение альтернативного (Alt) текста является одним из рекомендуемых методов улучшение удобства использования изображений на сайте. Это также позволяет программам чтения с экрана и другим вспомогательным технологиям предоставлять информацию об изображениях, встроенных в HTML-страницы. Альтернативный текст должен быть достаточно наглядным и лаконичным, чтобы дать пользователям точное представление о контекстуальном значении изображения. Альтернативные описания, содержащие более 5-7 слов, могут быть предоставлены в виде длинных описаний либо с использованием атрибута «longdesc», либо со ссылкой на новую страницу с полным описанием. Для изображений, которые являются чисто декоративными (например, границы, разделители и т. Д.), Вы можете указать устройствам вспомогательных технологий игнорировать изображение, установив для атрибута alt значение NULL.

7. Проверьте свои страницы с помощью клавиатуры

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

Вот несколько советов по разработке страниц для обеспечения доступности клавиатуры:

• Избегайте использования «display: none» или «display: 0» в ваших таблицах стилей. Для таблиц стилей, которые используют эти свойства, обязательно включите еще один индикатор фокуса клавиатуры (например, стили: focus {}).
• Убедитесь, что порядок вкладок для элементов управления страниц и ссылок соответствует естественному порядку чтения документа.
• Включите ссылки или кнопки для реализации доступности интерактивных элементов.
• Предоставьте пользователям возможность пропустить большие блоки ссылок.

Для получения дополнительной информации, проверьте Статья WebAim на доступность клавиатуры.

8. Обеспечить подписи для встроенного видео

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

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

Популярные инструменты для создания титров включают в себя: болтун , Мастерская субтитров , а также CCPlayer , Обратите внимание, что инструменты транскрипции не являются точными на 100%, поэтому все титры, созданные с помощью этих программ, должны быть проверены на точность.

Для получения дополнительной информации о форматах подписи, проверьте Статья WebAim на подписи, стенограммы и аудио описания:.

9. Обеспечьте стенограммы для основанных на времени СМИ

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

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

10. Проверьте свои страницы на мобильном устройстве

Все большее число пользователей получают доступ к сети через мобильные устройства. Чтобы обеспечить наилучшее впечатление для ваших посетителей, рекомендуется проверить свои страницы на одном или нескольких мобильных устройствах (включая телефоны и планшеты). Помимо ручного тестирования, есть несколько автоматизированных инструментов для оценки юзабилити вашего сайта на мобильных устройствах. Гугл Аналитика включает в себя скорость страницы и анализ пользовательского опыта для мобильных устройств (в разделе «Поведение»). Вы также можете использовать W3Cs MobileOK Checker определить синтаксис и другие ошибки, которые могут повлиять на производительность сайта на мобильных устройствах.

Заключение

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

Вдохновение для этой статьи: Консорциум World Wide Web Веб-доступность и удобство использования Работаем вместе ,

(Ведущее изображение: Depositphotos )

Похожие

Комментарии