Мы знаем, что адаптивный дизайн — это хорошая идея, чтобы обеспечить наилучший опыт использования на нескольких устройствах, но адаптивный дизайн также обеспечивает выигрыш в плане доступности.
Рассмотрим такой сайт, как Udacity :
Пользователь со слабым зрением, которому трудно читать мелкий шрифт, может увеличить масштаб страницы, возможно, до 400%. Поскольку сайт использует адаптивный дизайн, интерфейс автоматически перестраивается для «меньшей области просмотра» (фактически, для большей страницы), что отлично подходит как для пользователей настольных компьютеров, которым требуется увеличение экрана, так и для пользователей мобильных программ чтения с экрана. Это выигрышная ситуация для всех. Вот та же страница, увеличенная до 400%:
Фактически, просто разрабатывая адаптивный дизайн, мы выполняем правило 1.4.4 контрольного списка WebAIM , которое гласит, что страница должна быть «читабельной и функциональной при удвоении размера текста».
Going over all of responsive design is outside the scope of this guide, but here are a few important takeaways that improve your responsive experience and give your users better access to your content.
Используйте метатег viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Setting width=device-width matches the screen's width in device-independent pixels, and setting initial-scale=1 establishes a 1:1 relationship between CSS pixels and device-independent pixels. Doing this instructs the browser to fit your content to the screen size, so users don't just see a bunch of scrunched-up text.
Более подробную информацию см. в разделе Изменение размера содержимого по размеру области просмотра .
Разрешить пользователям масштабировать
Вы можете использовать метатег viewport, чтобы запретить масштабирование, установив maximum-scale=1 или user-scaleable=no . Избегайте этого и позвольте пользователям увеличивать масштаб при необходимости.
Гибкий дизайн
Avoid targeting specific screen sizes and instead use a flexible grid, making changes to the layout when the content dictates. As we saw with the Udacity example, this approach ensures that the design responds whether the reduced space is due to a smaller screen or a higher zoom level.
Подробнее об этих методах читайте в статье «Основы адаптивного веб-дизайна» .
Используйте относительные единицы измерения для текста
Чтобы максимально эффективно использовать гибкую сетку, используйте относительные единицы измерения, такие как em или rem, для таких параметров, как размер текста, а не пиксельные значения. Некоторые браузеры поддерживают изменение размера текста только в пользовательских настройках, и если вы используете для текста значение в пикселях, эта настройка не повлияет на ваш текст. Однако, если вы использовали относительные единицы измерения, текст сайта обновится в соответствии с предпочтениями пользователя.
Это позволяет всему сайту перестраиваться по мере того, как пользователь масштабирует страницу, создавая для него тот опыт чтения, который ему необходим при использовании вашего сайта.
Избегайте отсоединения визуального представления от исходного заказа.
Keyboard users that tab through your site follow the order of the content in your HTML documents. When using layout methods like Flexbox and Grid , you can change the visual ordering of elements, which may lead to a mismatch with the source order. This can lead to the user jumping around the page with each tab.
Проверяйте свой дизайн на каждой контрольной точке, перемещаясь по контенту клавишей Tab. Спросите себя: «По-прежнему ли сохраняется смысл в структуре страницы?»
Узнайте больше о разрывах связи между источником и визуальным отображением .
Будьте осторожны с пространственными подсказками
When writing microcopy, avoid using language that indicates the location of an element on the page. For users with visual impairments, they may not have that shared context, and would better benefit from identification of the exact element copy, making it searchable.
Это также полезно для всех пользователей, поскольку обозначение навигации как «слева» может быть нелогичным в мобильной версии, где навигация может переместиться в другое место.
Убедитесь, что цели нажатия достаточно велики на устройствах с сенсорным экраном.
On touchscreen devices make sure your tap targets are large enough to make them easier to activate without hitting other links. A good size for any tappable element is 48px, read more guidance on tap targets .