Причёсывает демки, улучшает тексты для aria-details, aria-label, …

…`aria-invalid`, Введение в ARIA (#4977) * Улучшает демку, форматирует код `aria-details` * Форматирует код в `aria-label` * Приводит в порядок демки, код в статье про ARIA * Приводит в порядок демку в `aria-invalid` * Слегка улучшает текст * Добавляет уточнение про `aria-invalid` * Ещё раз улучшает демку `aria-invalid` * Добавляет Свету в контрибьютеры * Улучшает текст дополнения * Форматирует код ещё лучше * Увеличивает шрифт * Обновляет схему --------- Co-authored-by: Svetlana Korobtseva <[email protected]>
doka-guide · Nov 16, 2023 · da2e446 · da2e446
1 parent bf075a2
commit da2e446
Show file tree

Hide file tree

Showing 11 changed files with 152 additions and 62 deletions.
diff --git a/a11y/aria-details/demos/image-with-details/index.html b/a11y/aria-details/demos/image-with-details/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
-  <title><img> с дополнительным описанием — aria-details — Дока</title>
+  <title>Картинка с дополнительным описанием — aria-details — Дока</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -47,6 +47,7 @@
     }
 
     a:hover, a:focus {
+      color: #000000;
       background-color: #10F3AF;
       transition: background-color 0.2s linear;
       outline-width: 0;

diff --git a/a11y/aria-details/index.md b/a11y/aria-details/index.md
@@ -3,6 +3,13 @@ title: "`aria-details`"
 description: "Атрибут для элемента с подробной информацией о другом."
 authors:
   - tatianafokina
+contributors:
+  - skorobaeus
+keywords:
+  - a11y
+  - доступность
+  - ARIA
+  - accessible description
 related:
   - a11y/aria-attrs
   - a11y/aria-description
@@ -28,15 +35,23 @@ tags:
 ```html
 <img
   src="turtle.png"
-  alt="Взрослая зелёная черепаха повернулась боком и развернула голову вправо. У неё коричневый овальный панцирь со светлыми разводами. Лапы похожи на ласты, при этом передние больше задних. Снаружи на лапах и на коже головы коричневые пятна, шея и внутрення часть лап почти белые."
+  alt="Взрослая зелёная черепаха повернулась боком и развернула
+  голову вправо. У неё коричневый овальный панцирь со светлыми разводами.
+  Лапы похожи на ласты, при этом передние больше задних.
+  Снаружи на лапах и на коже головы коричневые пятна, шея и внутрення часть
+  лап почти белые."
   aria-details="more-info"
 >
-<p>Узнать больше про
-  <a href="https://en.wikipedia.org/wiki/Green_sea_turtle" id="more-info">зелёных морских черепах</a>
+
+<p>
+  Узнать больше про
+  <a href="https://en.wikipedia.org/wiki/Green_sea_turtle" id="more-info">
+    зелёных морских черепах
+  </a>.
 </p>
 ```
 
-<iframe title="Изображение с расширенным описанием" src="demos/image-with-details/" height="440"></iframe>
+<iframe title="Картинка с дополнительным описанием" src="demos/image-with-details/" height="440"></iframe>
 
 ## Как пишется
 

diff --git a/a11y/aria-intro/demos/fake-button/index.html b/a11y/aria-intro/demos/fake-button/index.html
@@ -1,27 +1,31 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
-  <title>Ненастоящая кнопка — Введение в ARIA — Статья</title>
+  <title>Ненастоящая кнопка — Введение в ARIA — Дока</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">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap">
   <style>
     *, *::before, *::after {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
 
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
     body {
       min-height: 100vh;
       padding: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: #18191C;
-      font-size: 18px;
       color: #FFFFFF;
       font-family: "Roboto", sans-serif;
     }
@@ -34,7 +38,7 @@
       padding: 9px 15px;
       text-align: center;
       color: #000000;
-      font-size: 18px;
+      font-size: 1rem;
       font-weight: 300;
       font-family: inherit;
       transition: background-color 0.2s linear;

diff --git a/a11y/aria-intro/demos/status-message/index.html b/a11y/aria-intro/demos/status-message/index.html
@@ -1,19 +1,24 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
-  <title>Сообщение об успешной очистке формы — Введение в ARIA — Статья</title>
+  <title>Кнопка с сообщением об успешной очистке формы — Введение в ARIA — Дока</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">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap">
   <style>
     *, *::before, *::after {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
 
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
     body {
       min-height: 100vh;
       padding: 50px;
@@ -22,7 +27,6 @@
       align-items: center;
       justify-content: center;
       background-color: #18191C;
-      font-size: 18px;
       color: #FFFFFF;
       font-family: "Roboto", sans-serif;
     }
@@ -33,9 +37,10 @@
       border: 2px solid transparent;
       border-radius: 6px;
       padding: 9px 15px;
+      margin-bottom: 10px;
       text-align: center;
       color: #000000;
-      font-size: 18px;
+      font-size: 1rem;
       font-weight: 300;
       font-family: inherit;
       transition: background-color 0.2s linear;
@@ -61,9 +66,8 @@
       background-color: #10F3AF;
     }
 
-    .alert-message {
-      display: none;
-      margin-top: 9px;
+    .status-message {
+      height: 20px;
     }
 
     @media (max-width: 768px) {
@@ -79,12 +83,12 @@
 
   <script>
     document.body.addEventListener('click', function() {
-      const button = document.querySelector('.button');
-      const alert = document.querySelector('.status-message');
+      const button = document.querySelector('.button')
+      const statusmMessage = document.querySelector('.status-message')
 
-      alert.innerHTML = 'Форма очищена!';
-      alert.style.display = 'block';
-    });
+      statusmMessage.innerHTML = 'Форма успешно очищена 🎉'
+      statusmMessage.style.display = 'block'
+    })
   </script>
 </body>
 </html>
diff --git a/a11y/aria-intro/images/0.png b/a11y/aria-intro/images/0.png
diff --git a/a11y/aria-intro/index.md b/a11y/aria-intro/index.md
@@ -3,7 +3,10 @@ title: "Введение в ARIA"
 description: "Что такое ARIA и как правильно этим пользоваться."
 authors:
   - tatianafokina
+contributors:
+  - skorobaeus
 keywords:
+  - a11y
   - доступность
   - ARIA
 related:
@@ -20,7 +23,7 @@ _ARIA (Accessible Rich Internet Applications)_ — это набор допол
 
 <aside>
 
-💰 _RIA (Rich Internet Applications, Насыщенное интернет-приложение)_ — веб-приложение, которое загружается через интернет близко к десктопному приложению по опыту взаимодействия с ним.
+💰 _ARIA (Rich Internet Applications, Насыщенное интернет-приложение)_ — веб-приложение, которое загружается через интернет близко к десктопному приложению по опыту взаимодействия с ним.
 
 </aside>
 
@@ -44,38 +47,55 @@ ARIA не влияет на внешний вид элементов и их п
 
 Внешний вид элементов не всегда совпадает с их функциями. К примеру, элемент в демо выглядит внешне как кнопка с текстом «Очистить форму».
 
-<iframe title="Ненастоящая кнопка с <div>" src="demos/fake-button/" height="250"></iframe>
+<iframe title="Ненастоящая кнопка" src="demos/fake-button/" height="250"></iframe>
 
 Для этого элемента используется семантически нейтральный тег [`<div>`](/html/div/). Поэтому для пользователей скринридеров это не кнопка, и они не могут сфокусироваться на элементе.
 
 ```html
-<div class="button button-blue">Очистить форму</div>
+<div class="button button-aqua">Очистить форму</div>
 ```
 
-В этой ситуации ARIA поможет превратить `<div>` в кнопку. Добавим ARIA-роль [`button`](/a11y/role-button/), а ещё поместим элемент в порядок фокуса с помощью HTML-атрибута `tabindex="0"`.
+В этой ситуации ARIA поможет превратить `<div>` в кнопку. Добавим ARIA-роль [`button`](/a11y/role-button/), а ещё поместим элемент в порядок фокуса с помощью HTML-атрибута [`tabindex="0"`](/html/tabindex/).
 
 ```html
-<div class="button button-blue" role="button" tabindex="0">Очистить форму</div>
+<div
+  class="button button-aqua"
+  role="button"
+  tabindex="0"
+>
+  Очистить форму
+</div>
 ```
 
 Теперь элемент доступен для скринридеров. Пользователи могут установить на нём фокус и узнать, что это кнопка с названием «Очистить форму».
 
 Самое лучшее решение проблемы с доступностью этой кнопки — HTML-тег [`<button>`](/html/button/). Тогда не нужно добавлять к элементу дополнительные атрибуты и отслеживать клики с помощью скрипта. Это всё уже есть в теге по умолчанию. Звучит странно, но одно из главных правил использования ARIA — стараться не использовать ARIA.
 
 ```html
-<button class="button button-blue">Очистить форму</button>
+<button class="button button-aqua">Очистить форму</button>
 ```
 
 Более сложный пример — сообщение об успешности или неуспешности действия. Как рассказать пользователям вспомогательных технологий, что на странице что-то произошло? Например, что форма успешно очищена.
 
 Тут снова ARIA спешит на помощь. Добавим для сообщения об успешной очистке формы [`role="status"`](/a11y/role-status/) и свяжем с ним кнопку с помощью атрибута [`aria-controls`](/a11y/aria-controls/). Благодаря этой ARIA-роли скринридер автоматически объявит сообщение, когда пользователь нажмёт на кнопку.
 
 ```html
-<button class="button button-aqua" aria-controls="message">Очистить форму</button>
-<div class="status-message" role="status" id="message"></div>
+<button
+  class="button button-aqua"
+  aria-controls="message"
+>
+  Очистить форму
+</button>
+
+<div
+  class="status-message"
+  role="status"
+  id="message"
+>
+</div>
 ```
 
-<iframe title="Кнопка с сообщением об успешной очистке формы" src="demos/status-message/" height="250"></iframe>
+<iframe title="Кнопка с сообщением об успешной очистке формы" src="demos/status-message/" height="300"></iframe>
 
 ## Когда не нужно использовать
 
@@ -185,10 +205,14 @@ ARIA-атрибуты тоже бывают разными. Какие-то ат
 
 ```html
 <!-- Неправильно ⛔ -->
-<span role="button" tabindex="1">Загрузить фото</span>
+<span role="button" tabindex="1">
+  Загрузить фото
+</span>
 
 <!-- Правильно ✅ -->
-<span role="button" tabindex="0">Загрузить фото</span>
+<span role="button" tabindex="0">
+  Загрузить фото
+</span>
 ```
 
 Подробнее про навигацию с клавиатуры для разных интерактивных элементов рассказано в [разделе про паттерны APG](https://www.w3.org/WAI/ARIA/apg/patterns/) (ARIA Authoring Practices Guide, Руководства по авторским ARIA-практикам).
@@ -203,12 +227,18 @@ ARIA-атрибуты тоже бывают разными. Какие-то ат
 
 ```html
 <!-- Неправильно ⛔ -->
-<button role="presentation">Передать привет</button>
+<button role="presentation">
+  Передать привет
+</button>
 
-<button aria-hidden="true">Передать привет</button>
+<button aria-hidden="true">
+  Передать привет
+</button>
 
 <div aria-hidden="true">
-  <button>Передать привет</button>
+  <button>
+    Передать привет
+  </button>
 </div>
 
 <!-- Правильно ✅ -->
@@ -218,7 +248,10 @@ ARIA-атрибуты тоже бывают разными. Какие-то ат
 -->
 <div role="img" aria-labelledby="caption">
   <img src="dog.png" alt="" role="presentation">
-  <p id="caption">Собака наклонила голову, прижала уши и смотрит с интересом прямо в камеру.</p>
+  <p id="caption">
+    Собака наклонила голову, прижала уши и смотрит
+    с интересом прямо в камеру.
+  </p>
 </div>
 
 <button>

diff --git a/a11y/aria-invalid/demos/field-with-aria-invalid/index.html b/a11y/aria-invalid/demos/field-with-aria-invalid/index.html
@@ -1,19 +1,24 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
-  <title>aria-invalid для пустого поля <input> — aria-invalid — Дока</title>
+  <title>Валидация пустого поля с помощью ARIA — aria-invalid — Дока</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">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap">
   <style>
     *, *::before, *::after {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
 
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
     body {
       min-height: 100vh;
       padding: 50px;
@@ -22,7 +27,6 @@
       justify-content: center;
       background-color: #18191C;
       color: #FFFFFF;
-      font-size: 18px;
       font-family: "Roboto", sans-serif;
     }
 
@@ -33,7 +37,7 @@
       border-radius: 6px;
       padding: 9px 15px;
       color: #000000;
-      font-size: 18px;
+      font-size: 1rem;
       font-weight: 300;
       font-family: inherit;
       transition: background-color 0.2s linear;
@@ -72,7 +76,7 @@
       padding: 10px 15px;
       background-color: transparent;
       color: #FFFFFF;
-      font-size: 18px;
+      font-size: 1rem;
       font-weight: 300;
       font-family: inherit;
       -webkit-appearance: none;
@@ -90,7 +94,7 @@
 
     label {
       margin-right: 55px;
-      font-size: 24px;
+      font-size: 1.5rem;
       font-weight: 500;
       line-height: 1;
     }
@@ -109,6 +113,10 @@
       margin-bottom: 25px;
     }
 
+    .error-message {
+      font-size: 1rem;
+    }
+
     @media (max-width: 768px) {
       body {
         padding: 30px;
@@ -126,6 +134,7 @@
       form, .container {
         width: 100%;
       }
+    }
   </style>
 </head>
 <body>