diff --git a/.yaspeller.json b/.yaspeller.json index 7f79d3c28a..da81db9537 100644 --- a/.yaspeller.json +++ b/.yaspeller.json @@ -106,6 +106,7 @@ "геометричность", "геопозици(и|ей|)", "гитхаб(е|а|у)", + "глассморфизм", "глиф(ы|ов|ами|ам|ах|)", "Гонсало", "ГПСЧ", diff --git a/a11y/index.md b/a11y/index.md index d2a11e21db..01168d099a 100644 --- a/a11y/index.md +++ b/a11y/index.md @@ -16,6 +16,7 @@ groups: items: - css-impact-on-a11y - prefers-reduced-motion + - prefers-reduced-transparency - prefers-contrast - forced-colors - inverted-colors diff --git a/a11y/prefers-reduced-transparency/demos/basic-example/index.html b/a11y/prefers-reduced-transparency/demos/basic-example/index.html new file mode 100644 index 0000000000..5ef50c485f --- /dev/null +++ b/a11y/prefers-reduced-transparency/demos/basic-example/index.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html lang="ru"> +<head> + <title>Пример с полупрозрачным фоном для текста — prefers-reduced-transparency — Дока</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"> +</head> +<style> + *, *::before, *::after { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + html { + color-scheme: dark; + font-size: 18px; + } + + body { + min-height: 100vh; + padding: 50px 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='200' height='200' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(139)'%3E%3Crect width='100%25' height='100%25' fill='rgba(24, 25, 28,1)'/%3E%3Cpath d='M-10 30h60v8h-60zM-10-10h60v8h-60' fill='rgba(16, 243, 175,1)'/%3E%3Cpath d='M-10 10h60v8h-60zM-10-30h60v8h-60z' fill='rgba(244, 152, 173,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E "); + background-color: #18191C; + color: #FFFFFF; + font-family: "Roboto", sans-serif; + } + + h2 { + font-weight: 500; + font-size: 1.375rem; + } + + article { + width: 100%; + padding: 55px 40px; + color: #FFFFFF; + background: #18191C; + text-align: center; + opacity: 0.9; + } + + @media (prefers-reduced-transparency: reduce) { + article { + opacity: 1; + } + } + + @media (max-width: 768px) { + body { + padding: 30px 0; + } + + article { + padding: 55px 30px; + } + } +</style> +<body> + <article> + <h2>Люблю полосы и вышивать крестиком</h2> + </article> +</body> +</html> diff --git a/a11y/prefers-reduced-transparency/demos/card-with-bg-image/images/daycare.png b/a11y/prefers-reduced-transparency/demos/card-with-bg-image/images/daycare.png new file mode 100644 index 0000000000..77e5674de4 Binary files /dev/null and b/a11y/prefers-reduced-transparency/demos/card-with-bg-image/images/daycare.png differ diff --git a/a11y/prefers-reduced-transparency/demos/card-with-bg-image/images/walking.png b/a11y/prefers-reduced-transparency/demos/card-with-bg-image/images/walking.png new file mode 100644 index 0000000000..86719c770f Binary files /dev/null and b/a11y/prefers-reduced-transparency/demos/card-with-bg-image/images/walking.png differ diff --git a/a11y/prefers-reduced-transparency/demos/card-with-bg-image/index.html b/a11y/prefers-reduced-transparency/demos/card-with-bg-image/index.html new file mode 100644 index 0000000000..0541a3398b --- /dev/null +++ b/a11y/prefers-reduced-transparency/demos/card-with-bg-image/index.html @@ -0,0 +1,124 @@ +<!DOCTYPE html> +<html lang="ru"> +<head> + <title>Пример с градиентом и фоновой картинкой — prefers-reduced-transparency — Дока</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500&display=swap"> +</head> +<style> + *, *::before, *::after { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + html { + color-scheme: dark; + font-size: 16px; + } + + body { + min-height: 100vh; + padding: 50px; + gap: 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #18191C; + color: #FFFFFF; + font-family: "Roboto", sans-serif; + } + + h3 { + margin-top: 15px; + margin-bottom: 10px; + font-weight: 500; + font-size: 1.25rem; + } + + p { + font-size: 1rem; + line-height: 1.4; + } + + code { + font-size: 1.125rem; + font-family: "Roboto Mono", monospace; + color: inherit; + } + + code + article { + margin: 20px 0 30px; + } + + article { + display: grid; + align-items: end; + grid-template-rows: 1fr auto; + overflow: clip; + } + + article span { + display: grid; + width: 100%; + padding: 25px 20px; + color: #FFFFFF; + background: linear-gradient(to top, #000000, #0000); + } + + img { + display: block; + width: 480px; + max-width: 100%; + height: 250px; + object-fit: cover; + } + + article > * { + grid-area: 1 / 1; + } + + @media (prefers-reduced-transparency: reduce) { + .with-mediaquery span { + padding: 0; + background: unset; + } + + .with-mediaquery article > * { + grid-area: unset; + } + } + + @media (max-width: 768px) { + body { + padding: 30px; + } + } +</style> +<body> + <div> + <code>no-preference</code> + <article> + <img src="./images/daycare.png" alt=""> + <span> + <h3>Ясли для питомцев</h3> + <p>Присмотрим за животными, пока вы на работе.</p> + </span> + </article> + </div> + <div class="with-mediaquery"> + <code>reduce</code> + <article> + <img src="./images/walking.png" alt=""> + <span> + <h3>Прогулки</h3> + <p>Выгуляем животных вместо вас.</p> + </span> + </article> + </div> +</body> +</html> diff --git a/a11y/prefers-reduced-transparency/demos/card-with-glass-effect/images/grass.png b/a11y/prefers-reduced-transparency/demos/card-with-glass-effect/images/grass.png new file mode 100644 index 0000000000..e5fb317b06 Binary files /dev/null and b/a11y/prefers-reduced-transparency/demos/card-with-glass-effect/images/grass.png differ diff --git a/a11y/prefers-reduced-transparency/demos/card-with-glass-effect/index.html b/a11y/prefers-reduced-transparency/demos/card-with-glass-effect/index.html new file mode 100644 index 0000000000..cb2c67fb41 --- /dev/null +++ b/a11y/prefers-reduced-transparency/demos/card-with-glass-effect/index.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<html lang="ru"> +<head> + <title>Пример с эффектом матового стекла — prefers-reduced-transparency — Дока</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"> +</head> +<style> + *, *::before, *::after { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + html { + color-scheme: dark; + font-size: 20px; + } + + body { + min-height: 100vh; + padding: 50px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-image: url(./images/grass.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + background-color: #18191C; + font-family: "Roboto", sans-serif; + } + + article { + width: 65%; + padding: 55px 40px; + color: #FFFFFF; + background-color: #18191C; + } + + h2 { + margin-bottom: 17px; + font-weight: 500; + font-size: 1.375rem; + } + + p { + margin: 7px 0; + font-size: 1rem; + line-height: 1.4; + } + + @media (prefers-reduced-transparency: no-preference) { + article { + color: #000000; + backdrop-filter: blur(15px); + background: hsl(none none 100% / 20%); + } + } + + @media (max-width: 768px) { + body { + padding: 30px; + } + + article { + width: 100%; + padding: 55px 30px; + } + } +</style> +<body> + <article> + <h2>Добавь ярких красок</h2> + <p>Чтобы жизнь пользователей была красочной, интересной и насыщенной, используй везде эффект стекла. Или не везде?</p> + </article> +</body> +</html> diff --git a/a11y/prefers-reduced-transparency/index.md b/a11y/prefers-reduced-transparency/index.md new file mode 100644 index 0000000000..237b941284 --- /dev/null +++ b/a11y/prefers-reduced-transparency/index.md @@ -0,0 +1,172 @@ +--- +title: "`prefers-reduced-transparency`" +description: "Значение директивы `@media`, которое отслеживает настройки прозрачности." +authors: + - tatianafokina +contributors: + - skorobaeus +keywords: + - a11y + - @-правило + - media + - media-query + - accessible glassmorphism +related: + - a11y/prefers-reduced-motion + - css/media + - a11y/prefers-contrast +tags: + - doka +--- + +## Кратко + +Одно из значений директивы [`@media`](/css/media/) для проверки пользовательских настроек. Отслеживает отключение или уменьшение прозрачности в операционной системе. + +<aside> + +🚧 У `prefers-reduced-transparency` пока что не самая впечатляющая поддержка. Следить за поддержкой можете [на Can I Use](https://caniuse.com/?search=prefers-reduced-transparency). + +</aside> + +## Пример + +```css +article span { + background: #18191C; + opacity: 0.9; +} + +@media (prefers-reduced-transparency: reduce) { + article span { + opacity: 1; + } +} +``` + +<iframe title="Пример с полупрозрачным фоном для текста" src="demos/basic-example/" height="600"></iframe> + +## Как пишется + +Задайте после `@media` в скобках условие `prefers-reduced-transparency` с одним из значений: + +- `no-preference` — прозрачность в системе по умолчанию. +- `reduce` — прозрачность уменьшена или полностью выключена. + +С помощью `prefers-reduced-transparency` можно отменять прозрачность, заданную фону через [`opacity`](/css/opacity/), перемещать текст под блок с фоновыми картинками, паттернами и так далее. + +На сайтах часто встречаются карточки с фоновыми картинками и текстом. В примере для первой карточки используем стили без `prefers-reduced-transparency`, для второй устанавливаем специальные CSS-правила на случай отключения прозрачности. Они переносят текст под картинку. + +```html +<div class="with-mediaquery"> + <code>reduce</code> + <article> + <img src="./images/walking.png" alt=""> + <span> + <h3>Прогулки</h3> + <p>Выгуляем животных вместо вас.</p> + </span> + </article> +</div> +``` + +```css +@media (prefers-reduced-transparency: reduce) { + .with-mediaquery span { + padding: 0; + background: unset; + } + + .with-mediaquery article > * { + grid-area: unset; + } +} +``` + +<iframe title="Пример с градиентом и фоновой картинкой" src="demos/card-with-bg-image/" height="840"></iframe> + +Если любите глассморфизм, то `prefers-reduced-transparency` тоже спешит на помощь. На этот раз покажем эффект матового стекла только тогда, когда не изменена настройка прозрачности. + +```css +article { + color: #FFFFFF; + background-color: #18191C; +} + +@media (prefers-reduced-transparency: no-preference) { + article { + color: #000000; + backdrop-filter: blur(15px); + background: hsl(none none 100% / 20%); + } +} +``` + +<iframe title="Пример с эффектом матового стекла" src="demos/card-with-glass-effect/" height="590"></iframe> + +### Тестирование и отладка + +Условие `prefers-reduced-transparency` можно тестировать в браузере или отключив прозрачность в системе. + +В Chrome эмуляция `prefers-reduced-transparency` находится в дополнительной вкладке «Отрисовка» (Rendering) в инструменте разработчика. Чтобы добраться до неё, откройте список с дополнительными настройками (кнопка с тремя точками рядом с кнопкой закрытия), а потом разверните список «Другие инструменты» (More tools). + +<video controls width="640"> + <source src="video/chrome-devtools.mp4" type="video/mp4"> + <track + label="Russian" + kind="subtitles" + srclang="ru" + src="video/closed-captions.vtt" + > +</video> + +В операционных системах настройки прозрачности находятся разделах доступности и специальных возможностей. В некоторых системах прозрачность можно уменьшить, в других полностью отключить. + +<details> + <summary>Windows 10</summary> + + Настройки > Персонализация > Цвета > Эффекты прозрачности + +</details> + +<details> + <summary>Windows 11</summary> + + Настройки > Универсальный доступ > Визуальные эффекты > Эффекты прозрачности + +</details> + +<details> + <summary>macOS</summary> + + Системные настройки > Универсальный доступ > Дисплей > Уменьшить прозрачность + +</details> + +<details> + <summary>iOS</summary> + + Настройки > Основные > Универсальный доступ > Экран и размер текста > Уменьшить прозрачность + +</details> + +<details> + <summary>Android</summary> + + Настройки > Специальные возможности > Улучшение видимости > Уменьшить прзрачность и размытие + +</details> + +## Как понять + +Прозрачный фон увеличивает когнитивную нагрузку на пользователей и уменьшает уровень читаемости текста. Этой настройкой пользуются: + +- Люди с особенностями зрения. Например, с астигматизмом или сниженным зрением. +- Пользователи с когнитивными особенностями. К примеру, люди с дислекси́ей или синдром дефицита внимания. +- Люди с мигренями и головными болями. + +<aside> + +🧠 Когнитивная нагрузка — это нагрузка на рабочую память человека, где хранится информация, которая помогает решать текущие задачи. + +</aside> diff --git a/a11y/prefers-reduced-transparency/video/chrome-devtools.mp4 b/a11y/prefers-reduced-transparency/video/chrome-devtools.mp4 new file mode 100644 index 0000000000..0cb048ff19 Binary files /dev/null and b/a11y/prefers-reduced-transparency/video/chrome-devtools.mp4 differ diff --git a/a11y/prefers-reduced-transparency/video/closed-captions.vtt b/a11y/prefers-reduced-transparency/video/closed-captions.vtt new file mode 100644 index 0000000000..b91d62ceae --- /dev/null +++ b/a11y/prefers-reduced-transparency/video/closed-captions.vtt @@ -0,0 +1,38 @@ +WEBVTT + +00:00:00.207 --> 00:00:02.712 +(NVDA) +Настройка инструментов разработчика + +00:00:02.713 --> 00:00:05.928 +и управления ими. Меню, кнопка, +подменю. Меню. + +00:00:06.420 --> 00:00:12.393 +Док… поиск, выпол…, открыть +файл, другие инструменты. Анимация, 1 из 22. + +00:00:12.591 --> 00:00:21.744 +(Недоговаривая названия пунктов) +Отрисовка, 11 из 22. + +00:00:21.999 --> 00:00:24.495 +Выдвигающаяся панель, показано. + +00:00:25.598 --> 00:00:37.169 +(Недоговаривая названия пунктов) + +00:00:37.177 --> 00:00:41.267 +Эмулировать медиафункцию CSS +prefers-reduced-transparency. + +00:00:41.268 --> 00:00:44.985 +Запускает медиафункцию CSS +prefers-reduced-transparency. + +00:00:44.986 --> 00:00:47.328 +Комбобокс, без эмуляции, свёрнуто. + +00:00:48.392 --> 00:00:53.769 +Развёрнуто, список. +prefers-reduced-transparency: reduced, 2 из 2.