Как улучшить доступность веб-сайта – Ключевые принципы веб-доступности

Что такое доступность веб-сайта

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

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

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

Если вы хотите проверить веб-сайт на соответствие рекомендациям WCAG программным способом на C#, Aspose.HTML for .NET предоставляет пространство имен Aspose.Html.Accessibility, которое предназначено для всех манипуляций и проверок, связанных с веб-доступностью. Узнайте, соответствует ли ваш сайт требованиям WCAG!

Ниже вы найдете список некоторых ключевых принципов доступного дизайна.

Добавьте замещающий текст к изображениям

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

<img src="lioness.jpg" alt="The muzzle of a lioness close-up. The lioness looks away.">

Альтернативный текст («замещающий текст») передает назначение изображения, включая иллюстрации, диаграммы и т. д. Дополнительную информацию вы найдете в статье Альтернативный Текст – Веб-доступность.

Предоставьте альтернативы аудио и видео контенту

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

Основная цель элемента <track> – предоставить титры и субтитры для видео- и аудиоконтента. Вы можете использовать его следующим образом:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="captions.vtt" kind="subtitles" srclang="en" label="English Captions">
</video>

В этом примере элемент <video> имеет элемент <track>, который указывает на файл captions.vtt, содержащий титры или субтитры. Дополнительную информацию вы найдете в статье Веб-доступность Мультимедиа.

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

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

Ниже вы можете увидеть пример правильного контраста между шрифтом и фоном и пример плохого контраста:

Good contrast

Bad contrast

Дополнительную информацию вы найдете в статье Доступность цветового контраста.

Semantic HTML – Представление логической структуры страницы

Семантический HTML подразумевает использование элементов HTML для представления логической структуры и значения контента на веб-странице. Это фундаментальная концепция веб-разработки, которая способствует доступности, поисковой оптимизации (SEO) и лучшему пониманию веб-документов людьми и машинами.

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

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

Убедитесь, что контент четко написан и легко читается

Определите язык текста. Укажите основной язык каждой страницы, используя атрибут lang в теге html, например <html lang=“en”>. Используйте атрибут lang для определенных элементов, если язык элемента отличается от языка остальной части страницы.

<html lang="en"> <!--document head and body--> </html> 

Доступ с клавиатуры

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

1. Доступ с клавиатуры ко всем интерактивным элементам, таким как кнопки, ссылки, поля форм и меню.
2. Обеспечьте видимый индикатор фокуса, например выделенную рамку, для последовательной навигации по интерактивным элементам, когда пользователи перемещаются с помощью клавиши Tab и Shift+Tab для перемещения вперед и назад по элементам.
3. Убедитесь, что раскрывающиеся меню и меню навигации доступны с клавиатуры и что пользователи могут перемещаться по подменю с помощью клавиш со стрелками и клавиши Enter или Spacebar.
4. Убедитесь, что с помощью клавиатуры вы можете перемещать и закрывать модальные диалоги и всплывающие окна.
5. Проведите тестирование удобства использования с людьми, которые полагаются на навигацию с помощью клавиатуры, и соберите отзывы о пользовательском опыте.

Доступность навигации

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

1. Внедрите понятное навигационное меню вверху страницы, содержащее ссылки на ключевые разделы и страницы вашего сайта.
2. Используйте описательные метки для пунктов меню, чтобы помочь пользователям понять, куда ведет каждая ссылка.
3. Разместите панель поиска на видном месте на своем веб-сайте, чтобы пользователи могли искать определенный контент или продукты.
4. Убедитесь, что ваш веб-сайт адаптируется к различным размерам экрана и устройствам, обеспечивая единообразную навигацию и поиск контента.
5. Используйте четкие и описательные заголовки (<h1>, <h2> и т. д.) для структурирования контента и отображения содержимого страницы.
6. Убедитесь, что ссылки и кнопки имеют четкие и информативные надписи. Избегайте общих ярлыков, таких как «нажмите здесь» или «подробнее».

Обеспечьте предсказуемый внешний вид веб-страниц

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

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

Сделайте форму доступной. Предоставьте каждому элементу формы (текстовое поле, флажок, раскрывающийся список и т. д.) инструкции или метки, обозначающие элементы управления в форме, чтобы пользователи знали, какой ввод ожидается. В случае переключателей, флажков, полей со списком или аналогичных элементов управления, которые предоставляют пользователям варианты, каждый параметр должен иметь соответствующую метку, чтобы пользователи знали, что они на самом деле выбирают. Используйте элемент <label>, чтобы связать метки с элементами управления формы.

Заключение

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

Смотрите также

• В главе Проверка доступности веб-сайта вы узнаете, как проверить доступность веб-сайта на соответствие всем WCAG или только определенным критериям, используя классы и методы пространств имен Aspose.Html.Accessibility и Aspose.Html.Accessibility.Results.
• Ознакомьтесь со статьей Доступность цветового контраста, если вы хотите узнать, как правильно настроить контрастность вашего веб-контента в соответствии со стандартами WCAG, мирового авторитета в области веб-доступности. Вы узнаете, как проверить доступность цветового контраста с помощью C# и сделать ваш веб-контент удобным для чтения для всех пользователей.
• Посетите статью Веб-доступность Мультимедиа, если вам интересно узнать, как сделать мультимедийный контент инклюзивным и доступным для более широкой аудитории, включая людей с ограниченными возможностями. Эта статья содержит примеры C# для проверки передовых методов доступности мультимедиа в соответствии со стандартами WCAG.
• В статье Валидатор доступности вы узнаете о классе AccessibilityValidator, который можно использовать для проверки правил доступности веб-сайтов, таких как принципы, руководства и критерии.

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