Доступность

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

дефицит цветового зрения

Разные люди воспринимают цвета по-разному. Люди с протанопией не воспринимают красный цвет как отдельный. При дейтеранопии отсутствует зеленый цвет. У людей с тританопией это синий цвет.

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

Вкладка «Специальные возможности» в Firefox содержит выпадающее меню с надписью «Имитировать» и списком параметров.

В инструментах разработчика Chrome вкладка «Рендеринг» позволяет имитировать нарушения зрения .

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

На Mac перейдите по следующему пути:

1. Системные настройки
2. Доступность
3. Отображать
4. Цветовые фильтры
5. Включить цветовые фильтры

Выберите один из вариантов.

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

a {
  color: red;
}

a {
  color: red;
  font-weight: bold;
}

Цветовой контраст

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

Вот несколько инструментов, которые можно использовать для проверки коэффициента контрастности цветов текста и фона:

• VisBug — это расширение для браузера, доступное для всех основных настольных браузеров.
• Встроенный в Firefox инструмент проверки доступности может выявить проблемы с визуальным контрастом.
• Также с помощью инструментов разработчика Chrome можно обнаружить и исправить текст с низким контрастом .
• В браузере Microsoft Edge можно проверить контрастность цвета текста с помощью палитры цветов .

В CSS всегда рекомендуется указывать color и background-color вместе. Не следует предполагать, что цвет фона будет цветом по умолчанию в браузере. Люди могут изменять и действительно изменяют цвета, используемые их браузерами.

body {
  color: black;
}

body {
  color: black;
  background-color: white;
}

Высокий контраст

Некоторые пользователи настраивают свои операционные системы на использование режима высокой контрастности. Вы можете попробовать это в своей операционной системе.

На Mac перейдите по следующему пути:

1. Системные настройки
2. Доступность
3. Отображать

Выберите параметр для повышения контрастности.

В медиафайлах есть функция, позволяющая определить, включен ли у пользователя режим высокой контрастности. Функция prefers-contrast может принимать три значения: no-preference , less и more . Вы можете использовать эту информацию для настройки цветовой палитры вашего сайта.

Пользователи также могут установить в своей операционной системе параметр на использование инвертированных цветов.

На Mac перейдите по следующему пути:

1. Системные настройки
2. Доступность
3. Отображать

Выберите опцию инвертирования цветов.

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

размер шрифта

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

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

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

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

Навигация с помощью клавиатуры

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

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

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

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

Будьте осторожны со свойством order CSS. Вы можете использовать его в сочетании с `flexbox` и `grid`, чтобы размещать элементы в визуальном порядке, отличном от их порядка в HTML. Это мощная функция, но она может запутать пользователей, использующих клавиатуру для навигации.

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

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

Ограниченная подвижность

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

Существует запрос функции, который сообщает пользователю, предпочитает ли он меньшее количество движений. Он называется prefers-reduced-motion . Включайте его везде, где используете CSS-переходы или анимации.

a:hover {
  transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
}

Медиазапрос prefers-reduced-motion предназначен специально для анимации на экране. Если вы используете переходы по цвету элемента, на это не должен влиять prefers-reduced-motion . Также допустимо изменять прозрачность и использовать кросс-фэйд. Уменьшение движения не обязательно означает отсутствие анимации.

Голос

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

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

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

Заголовки

Используйте заголовки типа <h1> , <h2> , <h3> и т. д. с умом. Программы чтения с экрана используют эти заголовки для создания структуры документа, по которой можно перемещаться с помощью сочетаний клавиш.

<div class="heading-main">Welcome to my page</div>

<div class="heading-secondary">About me</div>

<div class="heading-tertiary">My childhood</div>

<div class="heading-secondary">About this website</div>

<div class="heading-tertiary">How this site was built</div>

<h1>Welcome to my page</h1>
  <h2>About me</h2>
    <h3>My childhood</h3>
  <h2>About this website</h2>
    <h3>How this site was built</h3>

Структура

Используйте элементы-ориентиры, такие как <main> , <nav> , <aside> , <header> и <footer> , чтобы структурировать содержимое страницы. Пользователи программ чтения с экрана смогут сразу перейти к этим элементам-ориентирам.

<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

Формы

Убедитесь, что каждое поле формы имеет связанный с ним элемент <label> . Вы можете связать метку с полем формы, используя атрибут for элемента <label> и соответствующий атрибут id поля формы.

<span class="formlabel">Your name</span>
<input type="text">

<label for="name">Your name</label>
<input id="name" type="text">

Изображения

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

<img src="dog.jpg">

<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

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

<img src="texture.png">

<img src="texture.png" alt="">

Джейк Арчибальд опубликовал статью о том, как писать отличный alt текст .

Ссылки

Старайтесь размещать внутри ссылок описательный текст. Избегайте фраз типа «нажмите здесь» или «подробнее».

<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>

<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

АРИЯ

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

Некоторые элементы интерфейса, не имеющие соответствующих HTML-элементов, включая карусели, вкладки и аккордеоны, необходимо создавать с нуля, используя комбинацию HTML, CSS, JavaScript и ARIA.

ARIA расшифровывается как Accessible Rich Internet Applications (Доступные многофункциональные интернет-приложения). Ее словарь позволяет предоставлять семантическую информацию, когда подходящий HTML-элемент отсутствует.

Если вам необходимо создать элементы интерфейса, которые еще недоступны в качестве HTML-элементов, ознакомьтесь с ARIA .

Чем больше специализированной функциональности вы добавляете с помощью JavaScript, тем лучше вам потребуется понимать ARIA. Если вы будете использовать стандартные HTML-элементы, вам, возможно, ARIA вообще не понадобится.

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

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

Проверьте свое понимание

Проверьте свои знания в области доступности.