Как создать дизайн, подходящий для всех пользователей?

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

Перед началом: Сначала вам следует прочитать What is accessibility?, поскольку мы не рассматриваем здесь доступность подробно.
Цель: Универсальный дизайн означает дизайн для всех, независимо от инвалидности или технических ограничений. В этой статье перечислены наиболее важные характеристики для универсального дизайна.

Краткое описание

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

Более глубокое изучение

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

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

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

Давайте загрузим и установим анализатор цветового контраста Paciello Group.

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

Например, давайте протестируем цвета на этой странице и посмотрим, как мы справляемся с анализатором цветового контраста:

Colour contrast on this page: excellent!

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

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

Вы можете указать размер шрифта на веб-сайте либо в относительных, либо в абсолютных единицах.

Абсолютные единицы

Абсолютные единицы измерения не рассчитываются пропорционально, а относятся к размеру, так сказать, набранному в камне, и выражаются большую часть времени в пикселях (px). Например, если в вашем CSS вы объявите это:

body { font-size:16px; }

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

Однако, на протяжении многих лет Internet Explorer категорически отображается 16 на 16 пикселей. В этом случае масштабирование ничего не дало, даже в последнем Internet Explorer 8, который нам все ещё приходится обслуживать, потому что он все ещё существует.

Относительные единицы

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

Относительные единицы обычно выражаются в em, % и rem:

Процентные размеры: %

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

Em размеры: em

Эта единица вычисляется так же, как и проценты, за исключением того, что вы вычисляете в частях 1, а не в частях 100. Говорят, что "em" - это ширина заглавной буквы "М" в алфавите (грубо говоря, буква "М" вписывается в квадрат).

Rem размеры: rem

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

Предположим, что нам нужен базовый размер шрифта 16px и h1 (основной заголовок) в эквиваленте 32px, но если в пределах h1 мы найдём промежуток с классом подзаголовков, он тоже должен быть отрисован с размером шрифта по умолчанию (обычно 16px).

Вот HTML, который мы используем:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Эксперимент с размером шрифта</title>
</head>
<body>

    <h1>Это наш главный заголовок
        <span class="subheading">Это подзаголовок</span>
    </h1>

</body>
</html>

CSS на основе процентов будет выглядеть следующим образом:

body { font-size:100%; } /* 100% от базового размера шрифта браузера, поэтому в большинстве случаев он будет отображаться как 16 пикселей*/
h1 { font-size:200%; } /* в два раза больше размера тела, таким образом, 32 пикселя */
span.subheading { font-size:50%; } /* половина размера h1, таким образом, 16 пикселей, чтобы вернуться к исходному размеру */

Та же проблема выражена и с ems:

body { font-size:1em; } /* 1em = 100% от базового размера браузера, так что в большинстве случаев это будет выглядеть как 16 пикселей */
h1 { font-size:2em; } /* в 2 раза больше размера тела, так что 32 пикселя */
span.subheading { font-size:0.5em; } /* половина размера h1, таким образом, 16 пикселей, чтобы вернуться к исходному размеру */

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

Теперь о rem. Эта единица измерения относится к размеру корневого элемента, а не к какому-либо другому родительскому элементу. CSS можно переписать таким образом:

body { font-size:1em; } /* 1em = 100% от базового размера браузера, так что в большинстве случаев это будет выглядеть как 16 пикселей */
h1 { font-size:2rem; } /* в 2 раза больше размера тела, так что 32 пикселя */
span.subheading { font-size:1rem; } /* исходный размер */

Так ведь проще, правда? Это работает как в Internet Explorer 9, так и в любом другом поддерживаемом браузере, поэтому, пожалуйста, не стесняйтесь использовать этот способ.

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

Почему мне следует использовать пропорциональные единицы измерения?

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

Мы бы посоветовали следующее:

  • Опишите шрифты в единицах rem, большинство браузеров будут очень довольны ими;
  • Пусть старые браузеры отображают шрифты со своим собственным внутренним движком. Браузерные движки будут игнорировать любое свойство или значение в CSS, если они не могут справиться с ними, так что ваш сайт все ещё может быть непригодным для использования, если он не соответствует видению вашего дизайнера. Старые браузеры в любом случае находятся на пути к выходу из использования.

Примечание: Если необходимо поддерживать старые браузеры, придётся использовать em и сделать немного больше вычислений.

Длина строки

Существует давняя дискуссия о длине строки в интернете, но вот история. Ещё в те времена, когда у нас были газеты, Печатники понимали, что глаза читателя будут с трудом переходить от одной строки к другой, если строки будут слишком длинными. Какое же решение? Столбцы.

Конечно, проблема не исчезает, когда мы переключаемся на интернет. Глаза читателя действуют как челнок, идущий от строки к строке. Чтобы сделать чтение проще для глаз людей, ограничьте ширину строки примерно 60 или 70 символами.

Для этого вы можете указать размер контейнера вашего текста. Давайте рассмотрим этот HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Эксперимент с размером шрифта</title>
</head>
<body>

<div class="container">
    <h1>Это наш главный заголовок
        <span class="subheading">Это наш подзаголовок</span>
    </h1>

    <p>[длинный текст, который занимает много строк]</p>
</div>

</body>
</html>

У нас есть div с классом container. Мы можем стилизовать div либо для установки его ширины (используя свойство width), либо для его максимальной ширины, чтобы он никогда не становился слишком большим (используя свойство max-width). Если вам нужен эластичный/адаптивный веб-сайт, и вы не знаете, какова ширина браузера по умолчанию, вы можете использовать свойство max-width, чтобы разрешить до 70 символов в строке и не более:

div.container { max-width:70em; }

Альтернативный контент для изображений, аудио и видео

Веб-сайты часто включают в себя разные вещи, помимо обычного текста.

Изображения

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

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

Они просто для украшения и не передают никакой полезной информации. Чаще всего их можно было бы заменить фоновым изображением. Убедитесь, что они имеют пустой атрибут alt: <img src="deco.gif" alt="">, чтобы они не засоряли текст.

Информационные изображения

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

Если изображение может быть описано кратко, вы можете предоставить атрибут alt и ничего больше. Если изображение не может быть описано кратко, вам придётся либо предоставить тот же контент в другой форме на той же странице (например, дополнить круговую диаграмму таблицей, содержащей те же данные), либо прибегнуть к атрибуту longdesc. Значение этого атрибута представляет собой URL-адрес, указывающий на ресурс, явно описывающий в деталях содержимое изображения.

Примечание: Использование и даже существование longdesc обсуждается уже довольно давно. Пожалуйста, обратитесь к расширению описания изображений W3C (longdesc) для получения полного объяснения и подробных примеров.

Аудио/видео

Также вам стоит предоставлять альтернативы мультимедийному контенту.

Субтитры / закрытие субтитров

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

Расшифровка

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

Сжатие изображения

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

  • Устанавливаемое программное обеспечение. ImageOptim (Mac), OptiPNG (все платформы), PNGcrush (DOS, Unix/Linux)
  • Онлайн инструменты. Yahoo's smushit!, Онлайн-оптимизатор изображений Dynamic drive (который может автоматически преобразовываться из одного формата в другой, если он более эффективен с пропускной способностью)