Мы знаем, что адаптивный дизайн — это хорошая идея, чтобы обеспечить наилучшее взаимодействие с несколькими устройствами, но адаптивный дизайн также дает преимущество в плане доступности.
Рассмотрим такой сайт, как Udacity :
Пользователь с плохим зрением, которому трудно читать мелкий шрифт, может увеличить страницу, возможно, на 400%. Поскольку сайт спроектирован адаптивно, пользовательский интерфейс будет перестраиваться для «меньшей области просмотра» (на самом деле для более крупной страницы), что отлично подходит для пользователей настольных компьютеров, которым требуется увеличение экрана, а также для пользователей мобильных устройств чтения с экрана. Это беспроигрышный вариант. Вот та же страница, увеличенная до 400%:
Фактически, просто создавая адаптивный дизайн, мы соответствуем правилу 1.4.4 контрольного списка WebAIM , которое гласит, что страница «… должна быть читабельной и функциональной, когда размер текста увеличивается вдвое».
Рассмотрение всего адаптивного дизайна выходит за рамки этого руководства, но вот несколько важных выводов, которые принесут пользу вашему адаптивному дизайну и предоставят вашим пользователям лучший доступ к вашему контенту.
Используйте метатег области просмотра
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Установка width=device-width будет соответствовать ширине экрана в пикселях, независимых от устройства, а установка initial-scale=1 устанавливает соотношение 1:1 между пикселями CSS и пикселями, независимыми от устройства. Это дает браузеру указание подогнать ваш контент под размер экрана, чтобы пользователи не видели просто кучу скомканного текста.
Дополнительную информацию см. в разделе Размер содержимого по размеру области просмотра .
Разрешить пользователям масштабировать
Чтобы предотвратить масштабирование, можно использовать метатег области просмотра, установив maximum-scale=1 или user-scaleable=no . Избегайте этого и позвольте пользователям увеличивать масштаб, если им это необходимо.
Гибкий дизайн
Избегайте ориентации на определенные размеры экрана и вместо этого используйте гибкую сетку, внося изменения в макет, когда того требует контент. Как мы видели на примере Udacity выше, этот подход гарантирует, что дизайн будет реагировать независимо от того, вызвано ли уменьшение пространства меньшим экраном или более высоким уровнем масштабирования.
Вы можете прочитать больше об этих методах в статье «Основы адаптивного веб-дизайна» .
Используйте относительные единицы измерения для текста
Чтобы максимально эффективно использовать гибкую сетку, используйте относительные единицы измерения, такие как em или rem, для таких вещей, как размер текста, а не значения пикселей. Некоторые браузеры поддерживают изменение размера текста только в настройках пользователя, и если вы используете значение пикселя для текста, этот параметр не повлияет на вашу копию. Однако если вы повсюду использовали относительные единицы измерения, копия сайта обновится, чтобы отразить предпочтения пользователя.
Это позволит перекомпоновывать весь сайт при масштабировании пользователя, создавая удобство чтения, необходимое для использования вашего сайта.
Избегайте отключения визуального представления от исходного заказа.
Посетитель, просматривающий ваш сайт с помощью клавиатуры, будет следовать порядку содержимого в HTML-документе. При использовании современных методов макетирования, таких как Flexbox и Grid , легко сделать так, чтобы визуальный рендеринг не соответствовал исходному порядку. Это может привести к неприятным скачкам по странице для тех, кто использует клавиатуру для перемещения.
Обязательно тестируйте свой дизайн на каждой точке останова, просматривая содержимое, имеет ли смысл перемещение по странице?
Подробнее об отключении источника и визуального отображения читайте здесь.
Будьте осторожны с пространственными подсказками
При написании микротекста избегайте использования языка, указывающего расположение элемента на странице. Например, ссылка на навигацию «слева» не имеет смысла в мобильной версии, когда навигация находится в верхней части экрана.
Убедитесь, что объекты касания достаточно велики на устройствах с сенсорным экраном.
На устройствах с сенсорным экраном убедитесь, что цели касания достаточно велики, чтобы их можно было легко активировать, не затрагивая другие ссылки. Оптимальный размер для любого элемента, на который можно нажимать, — 48 пикселей. Дополнительную информацию о целях касания см. в руководстве.