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

По данным CDC (Центры по контролю и профилактике заболеваний), более 60 миллионов американцев живут с инвалидностью. Следуя Руководству по обеспечению доступности веб-контента, вы можете внести некоторые предварительные соображения, которые помогут сделать веб-сайт доступным. Вот все, что вам нужно, чтобы начать работу с веб-доступностью с помощью HTML и CSS.

Структурированный HTML с правильной семантикой

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

Например,

Прочитайте больше: Примеры простых HTML-кодов, которые вы можете изучить за 10 минут

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

или тег, это помогает в SEO.

Структурированный контент для пользователей программ чтения с экрана

Вот пример семантического HTML хорошего и хорошего. плохой.

Хороший семантический HTML
Мой заголовок

Вот как сделать доступный веб-сайт с помощью HTML и CSS

Мой второй заголовок

Плохой семантический HTML
Мой заголовок

Вот как сделать доступный веб-сайт с помощью HTML и CSS

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

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

Язык и макеты для доступного веб-сайта

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

Это заголовок



Содержание главной страницы

содержащий статью

Заголовок статьи

содержание статьи



Нижний колонтитул веб-сайта

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

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

Чаще всего элементы управления пользовательского интерфейса - это кнопки, формы и элементы управления ссылками вашего веб-документа. Как показывает практика, ими можно управлять с помощью клавиатуры. У них есть некоторый стиль по умолчанию (может отличаться в разных браузерах), где вы можете перейти к другим параметрам с помощью клавиши табуляции и нажать Enter / Return, чтобы прийти к выводу. Вы можете управлять текстовыми метками, добавляя характерные и значимые якорные тексты вместо «щелкните здесь».

Чтобы создать таблицы со специальными возможностями, добавьте заголовки таблиц

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

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

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

Красный цветок ...

Вы использовали атрибут aria-labelledby для ссылки на этот идентификатор. Это позволит программам чтения с экрана использовать замещающий текст в форме этого абзаца.

Стандартный CSS для лучшей доступности

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

,

, и

элемент, типичный CSS должен быть:

h1 {
размер шрифта: 4rem;
}
p, li {
размер шрифта: 1,5 бэр;
цвет синий;
}

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

Стилизация текста, ссылок и меток

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

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

a {
цвет: # ff0000;
}
a: active {
цвет: # 000000;
цвет фона: # a60000;
}
a: hover, a: посещено, a: focus {
цвет: # a60000;
текстовое оформление: нет;
}

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

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

Цветовой контраст и скрытые значения

Настройте цветовую схему веб-сайта так, чтобы цвет переднего плана (текста / изображения) контрастировал с цветом фона. в первую очередь потому, что людям с нарушениями зрения (например, дальтонизмом) труднее читать контент правильно. Вы можете использовать Проверка контрастности цвета получить достойную цветовую схему по критериям WCAG. Кроме того, попробуйте добавить знаки разметки (например, звездочку) вместе с предупреждениями или условиями (а не просто красным предупреждением).

Читателям с экрана не о чем беспокоиться, пока порядок исходного кода не будет правильно написан. Старайтесь избегать использования свойств display: none или visibility: hidden, поскольку они скрывают содержимое от программ чтения с экрана.

Упростите замену стиля

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

Заключение: объединение HTML и CSS

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

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

Как сделать сайт: для начинающих

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

Читать далее

Об авторе

Разверните, чтобы прочитать всю историю