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

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

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

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

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

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

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

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

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

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

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

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

![Colour contrast on this page: excellent!](/ru/docs/Learn/Common_questions/Design_and_accessibility/Design_for_all_types_of_users/colour-contrast.png)

Коэффициент контрастности яркости между текстом и фоном составляет 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, если они не могут справиться с ними, так что ваш сайт все ещё может быть непригодным для использования, если он не соответствует видению вашего дизайнера. Старые браузеры в любом случае находятся на пути к выходу из использования.

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

### Длина строки

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

Конечно, проблема не исчезает, когда мы переключаемся на интернет. Глаза читателя действуют как челнок, идущий от строки к строке. Чтобы сделать чтение проще для глаз людей, ограничьте ширину строки примерно 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 (который может автоматически преобразовываться из одного формата в другой, если он более эффективен с пропускной способностью)