Добавляет доку про роль mark (#4774)

* Причёсывает демку * Дополняет текст * Переисмысливает картинку * Принимает правочку Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com> --------- Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com>
doka-guide · Oct 16, 2023 · 7cbcbe8 · 7cbcbe8
1 parent 65bac14
commit 7cbcbe8
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 18 deletions.
diff --git a/a11y/role-mark/demos/text-with-role-mark/index.html b/a11y/role-mark/demos/text-with-role-mark/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
-  <title>Демонстрация работы ARIA-роли mark — mark — Дока</title>
+  <title>Элементы с ролью mark и кастомными стилями — mark — Дока</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -13,35 +13,54 @@
       padding: 0;
       box-sizing: border-box;
     }
+
+    html {
+      color-scheme: dark;
+      font-size: 24px;
+    }
+
     body {
       min-height: 100vh;
       padding: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: #18191C;
-      color: #FFFFFF;
+      color: #000000;
       font-family: "Roboto", sans-serif;
     }
+
     .container {
-      width: 50%;
+      width: 65%;
+      padding: 55px 40px;
+      background-color: #10F3AF;
     }
+
     p {
       margin: 7px 0;
-      font-size: 18px;
+      font-size: 1rem;
       line-height: 1.4;
-      text-align: center;
     }
+
     .mark {
-      color: #000000;
-      background: #10F3AF;
+      background-color: #FFFFFF;
     }
+
     @media (max-width: 768px) {
       body {
         padding: 30px;
       }
+
       .container {
-        width: 80%;
+        width: 100%;
+        padding: 55px 30px;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .mark {
+        color: HighlightText;
+        background-color: Highlight;
       }
     }
   </style>

diff --git a/a11y/role-mark/images/night-sky-example.png b/a11y/role-mark/images/night-sky-example.png
diff --git a/a11y/role-mark/index.md b/a11y/role-mark/index.md
@@ -3,18 +3,19 @@ title: "`mark`"
 description: "ARIA-роль, которая определяет выделенный или подсвеченный важный фрагмент текста."
 authors:
   - bellabzhu
+contributors:
+  - tatianafokina
 related:
   - html/mark
   - a11y/aria-roles
   - a11y/aria-intro
 tags:
   - doka
-  - placeholder
 ---
 
 ## Кратко
 
-[ARIA-роль](/a11y/aria-roles/#ustarevshie-i-nestandartnye-roli), которая определяет выделенный или подсвеченный важный фрагмент текста.
+[ARIA-роль структуры документа](/a11y/aria-roles/#ustarevshie-i-nestandartnye-roli), которая определяет выделенный или подсвеченный важный фрагмент текста.
 
 Эквивалент в HTML — [`<mark>`](/html/mark/).
 
@@ -26,26 +27,62 @@ tags:
 
 ## Пример
 
+```html
+<p>
+  Одной из нерешённых проблем строения галактик является
+  <span role="mark" class="mark">тёмная материя</span>,
+  проявляющая себя только в гравитационном взаимодействии.
+  Она может составлять до 90% от общей массы галактики, а может
+  и <span role="mark" class="mark">полностью отсутствовать</span>,
+  как в некоторых карликовых галактиках.
+</p>
+```
+
 `mark` не изменяет внешний вид элемента, так что нужно не забывать самим добавлять стили с помощью CSS.
 
 ```css
 .mark {
-  color: #000000;
-  background-color: #10F3AF;
+  background-color: #FFFFFF;
 }
 ```
 
-<iframe title="Элементы с ролью mark и кастомными стилями" src="demos/text-with-role-mark/" height="270px"></iframe>
+<iframe title="Элементы с ролью mark и кастомными стилями" src="demos/text-with-role-mark/" height="500px"></iframe>
 
 ## Как пишется
 
-```html
-<p>
-  Рекомендую вооружиться маркером и подчёркивать <span role="mark">важные мысли</span>
-  в каждой главе, если вам нужно запомнить большой объем информации.
-</p>
+Задайте любому статичному HTML-тегу или ARIA-роли `role="mark"`, лучше всего семантически нейтральным [`<span>`](/html/span/) или [`<div>`](/html/div/).
+
+Пока скринридеры и другие вспомогательные технологии никак не обозначают выделения в тексте, в том числе с помощью интонации. Если это крайне важное выделение в тексте, используйте хак с псевдоклассами [`::before`](/css/before/), [`::after`](/css/after/) и свойством [`content`](/css/content/):
+
+```css
+span[role="mark"]::before {
+  content: " [начало выделения] ";
+}
+
+span[role="mark"]::after {
+  content: " [конец выделения] ";
+}
 ```
 
+Благодаря этому трюку пользователи узнают о выделениях в тексте, если в скринридере выбрана специальная настройка, благодаря которой технология зачитывает содержимое из `content`.
+
+### Особенности использования
+
+Если поддерживаете режим высокой контрастности в Windows, не забудьте задать элементу `mark` системный цвет с помощью [значения `forced-colors`](/a11y/forced-colors/) у [директивы `@media`](/css/media/). Благодаря этому цвет выделения заменится на системный и будет таким же контрастным, как остальные цвета.
+
+```css
+@media (forced-colors: active) {
+  span[role="mark"] {
+    color: HighlightText;
+    background-color: Highlight;
+  }
+}
+```
+
+Например, в теме «Ночное небо» элементы с ролью `mark` будут выделятся фиолетовым цветом.
+
+![Текст с выделенными фрагментами в режиме высокой контартсности.](images/night-sky-example.png)
+
 ## Как понять
 
 ARIA-роли помогают только вспомогательным технологиям. `mark` не изменяет внешний вид элемента и не добавляет никакую функциональность. В большинстве случаев лучше использовать тег `<mark>`.