Доступность: Причёсывает демки (#4983)

* Причёсывает демку в `aria-errormessage` * Добавляет Свету в контрибьютеры * Приводит в порядок демку в `switch` * Причёсывает демку в `aria-hidden` * Улучшает демку в `contentinfo` * Увеличивает шрифт * Причёсывает демку в `aria-description` * Меняет мелочи в демке * Причёсывает демку в `aria-describedby` * Причёсывает демку в `aria-describedby` * Удаляет лишние пробелы * Удаляет лишний пробел (¬_¬") * Удаляет ещё один пробел * Добавляет Свету в контрибьютеры
doka-guide · Nov 22, 2023 · bfbba2b · bfbba2b
1 parent 8569315
commit bfbba2b
Show file tree

Hide file tree

Showing 14 changed files with 147 additions and 58 deletions.
diff --git a/a11y/aria-describedby/demos/field-with-hint/index.html b/a11y/aria-describedby/demos/field-with-hint/index.html
@@ -14,6 +14,11 @@
       box-sizing: border-box;
     }
 
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
     body {
       min-height: 100vh;
       padding: 50px;

diff --git a/a11y/aria-describedby/index.md b/a11y/aria-describedby/index.md
@@ -3,6 +3,8 @@ title: "`aria-describedby`"
 description: "Как добавить краткое описание к элементу."
 authors:
   - tatianafokina
+contributors:
+  - skorobaeus
 keywords:
   - доступность
   - ARIA

diff --git a/a11y/aria-description/demos/button-with-description/index.html b/a11y/aria-description/demos/button-with-description/index.html
@@ -6,14 +6,19 @@
   <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&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;
     }

diff --git a/a11y/aria-description/index.md b/a11y/aria-description/index.md
@@ -3,6 +3,8 @@ title: "`aria-description`"
 description: "Добавляем к элементу описание, которое видят только вспомогательные технологии."
 authors:
   - tatianafokina
+contributors:
+  - skorobaeus
 related:
   - a11y/aria-attrs
   - a11y/aria-label
@@ -24,7 +26,9 @@ tags:
 ## Пример
 
 ```html
-<button aria-description="Открыть модальное окно">Настройки</button>
+<button aria-description="Открыть модальное окно">
+  Настройки
+</button>
 ```
 
 <iframe title="Кнопка с визуально скрытым описанием" src="demos/button-with-description/" height="190"></iframe>

diff --git a/a11y/aria-errormessage/demos/field-with-aria-errormessage/index.html b/a11y/aria-errormessage/demos/field-with-aria-errormessage/index.html
@@ -1,28 +1,32 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
-  <title>aria-errormessage для пустого поля <input> — aria-errormessage — Дока</title>
+  <title>aria-errormessage для пустого поля — aria-errormessage — Дока</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;
+    }
+
     body {
       min-height: 100vh;
       padding: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: #18191C;
-      color: #FFFFFF;
       font-size: 18px;
+      color: #FFFFFF;
       font-family: "Roboto", sans-serif;
     }
 
@@ -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;
     }
@@ -130,6 +134,7 @@
       form, .container {
         width: 100%;
       }
+    }
   </style>
 </head>
 <body>

diff --git a/a11y/aria-errormessage/index.md b/a11y/aria-errormessage/index.md
@@ -3,6 +3,8 @@ title: "`aria-errormessage`"
 description: "Атрибут, который нужен для описания ошибки при вводе данных."
 authors:
   - tatianafokina
+contributors:
+  - skorobaeus
 related:
   - html/input
   - a11y/aria-invalid
@@ -40,7 +42,9 @@ tags:
 >
   Поле с почтой обязательно для заполнения.
 </span>
-<button class="button button-aqua">Отправить</button>
+<button class="button button-aqua">
+  Отправить
+</button>
 ```
 
 ```css
@@ -51,7 +55,7 @@ tags:
 
 В демо показываем ошибку, когда поле почты не заполнено и при этом нажата кнопка «Отправить».
 
-<iframe title="aria-errormessage для пустого поля input" src="demos/field-with-aria-errormessage/" height="400"></iframe>
+<iframe title="aria-errormessage для пустого поля" src="demos/field-with-aria-errormessage/" height="400"></iframe>
 
 [Скринридер](/a11y/screenreaders/) прочтёт ошибку примерно так: «Ваша почта обязательно, редактировать, обязательно, неверно. Поле с почтой обязательно для заполнения».
 
@@ -61,8 +65,8 @@ tags:
 
 Этот атрибут раньше использовали для всех тегов и ролей, но сейчас его можно задавать только некоторым интерактивным элементам:
 
-- [`<textarea>`](/html/textarea/), [`<input>` с типами](/html/input/#type) `text`, `email`, `tel`, `url` или роли [`textbox`](/a11y/role-textbox/).
-- [`<input type="checkbox">`](/html/input/#type) или роли [`checkbox`](/a11y/role-checkbox/).
+- [`<textarea>`](/html/textarea/), [`<input>` с типами](/html/input/#type) `text`, `email`, `tel`, `url` или [роли `textbox`](/a11y/role-textbox/).
+- [`<input type="checkbox">`](/html/input/#type) или [роли `checkbox`](/a11y/role-checkbox/).
 - [`<input type="range">`](/html/input/#type) или роли [`slider`](/a11y/role-slider/).
 - [`<input type="number">`](/html/input/#type) или роли [`spinbutton`](/a11y/role-spinbutton/).
 - [`<select>`](/html/select/) или ролям [`combobox`](/a11y/role-combobox/) и [`listbox`](/a11y/role-listbox/).

diff --git a/a11y/aria-hidden/demos/button-with-icon-font/index.html b/a11y/aria-hidden/demos/button-with-icon-font/index.html
@@ -6,14 +6,18 @@
   <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=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,600,0,0" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,600,0,0"/>
   <style>
     *, *::before, *::after {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
 
+    html {
+      color-scheme: dark;
+    }
+
     body {
       min-height: 100vh;
       padding: 50px;

diff --git a/a11y/aria-hidden/index.md b/a11y/aria-hidden/index.md
@@ -3,14 +3,18 @@ title: "`aria-hidden`"
 description: "Атрибут для скрытия элементов от вспомогательных технологий."
 authors:
   - tatianafokina
+contributors:
+  - skorobaeus
 keywords:
+  - a11y
   - доступность
   - ARIA
-  - ARIA-атрибут
+  - ридер
+  - screen reader
 related:
+  - a11y/content-hidden
   - a11y/aria-intro
   - a11y/aria-attrs
-  - a11y/aria-roles
 tags:
   - doka
 ---
@@ -23,12 +27,16 @@ tags:
 
 ```html
 <button class="button button-aqua">
-  <span class="material-symbols-outlined" aria-hidden="true">logout</span>
-  <span class="visually-hidden">Выйти из аккаунта</span>
+  <span class="material-symbols-outlined" aria-hidden="true">
+    logout
+  </span>
+  <span class="visually-hidden">
+    Выйти из аккаунта
+  </span>
 </button>
 ```
 
-<iframe title="Кнопка с иконочным шрифтом и скрытым текстом" src="demos/button-with-icon-font/index.html" height="150"></iframe>
+<iframe title="Кнопка с иконочным шрифтом и скрытым текстом" src="demos/button-with-icon-font/" height="160"></iframe>
 
 ## Как пишется
 

diff --git a/a11y/aria-labelledby/demos/figure-with-aria-labelledby/index.html b/a11y/aria-labelledby/demos/figure-with-aria-labelledby/index.html
@@ -6,14 +6,19 @@
   <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@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;
@@ -32,6 +37,7 @@
 
     figcaption {
       margin-top: 10px;
+      font-size: 1rem;
     }
 
     @media (max-width: 768px) {

diff --git a/a11y/aria-labelledby/index.md b/a11y/aria-labelledby/index.md
@@ -3,10 +3,11 @@ title: "`aria-labelledby`"
 description: "Как добавить подпись к элементу с помощью ARIA."
 authors:
   - tatianafokina
+contributors:
+  - skorobaeus
 keywords:
   - доступность
   - a11y
-  - ARIA
   - доступная подпись
   - подпись для элемента
   - подпись для тега
@@ -46,20 +47,20 @@ tags:
 
 `aria-labelledby` можно использовать для всех интерактивных и неинтерактивных элементов вроде таблиц и графики, кроме:
 
-- [`<caption>`](/html/caption/) и роли [`caption`](/a11y/role-caption/).
-- [`<code>`](/html/code/) и роли [`code`](/a11y/role-code/).
-- [`<dd>`](/html/dl-dd-dt/) и роли [`definition`](/a11y/role-definition/).
-- [`<dt>`](/html/dl-dd-dt/), [`<dfn>`](/html/dfn/) и роли [`term`](/a11y/role-term/).
-- [`<del>`](/html/del/) и роли [`deletion`](/a11y/role-deletion/).
-- [`<em>`](/html/em/) и роли [`emphasis`](/a11y/role-emphasis/).
-- [`<ins>`](/html/ins/) и роли [`insertion`](/a11y/role-insertion/).
-- [`<mark>`](/html/mark/) и роли [`mark`](/a11y/role-mark/).
-- [`<p>`](/html/p/) и роли [`paragraph`](/a11y/role-paragraph/).
-- [`<strong>`](/html/strong/) и роли [`strong`](/a11y/role-strong/).
-- [`<sub>`](/html/sub/) и роли [`subscript`](/a11y/role-subscript/).
-- [`<sup>`](/html/sup/) и роли [`superscript`](/a11y/role-superscript/).
-- [`<time>`](/html/time/) и роли [`time`](/a11y/role-time/).
-- [`<span>`](/html/span/), [`<div>`](/html/div/) и роли [`generic`](/a11y/role-generic/).
+- [`<caption>`](/html/caption/) и [роли `caption`](/a11y/role-caption/).
+- [`<code>`](/html/code/) и [роли `code`](/a11y/role-code/).
+- [`<dd>`](/html/dl-dd-dt/) и [роли `definition`](/a11y/role-definition/).
+- [`<dt>`](/html/dl-dd-dt/), [`<dfn>`](/html/dfn/) и [роли `term`](/a11y/role-term/).
+- [`<del>`](/html/del/) и [роли `deletion`](/a11y/role-deletion/).
+- [`<em>`](/html/em/) и [роли `emphasis`](/a11y/role-emphasis/).
+- [`<ins>`](/html/ins/) и [роли `insertion`](/a11y/role-insertion/).
+- [`<mark>`](/html/mark/) и [роли `mark`](/a11y/role-mark/).
+- [`<p>`](/html/p/) и [роли `paragraph`](/a11y/role-paragraph/).
+- [`<strong>`](/html/strong/) и [роли `strong`](/a11y/role-strong/).
+- [`<sub>`](/html/sub/) и [роли `subscript`](/a11y/role-subscript/).
+- [`<sup>`](/html/sup/) и [роли `superscript`](/a11y/role-superscript/).
+- [`<time>`](/html/time/) и [роли `time`](/a11y/role-time/).
+- [`<span>`](/html/span/), [`<div>`](/html/div/) и [роли `generic`](/a11y/role-generic/).
 - роли [`presentation`или `none`](/a11y/role-presentation-none/) и [`suggestion`](/a11y/role-suggestion/).
 
 Для [`<input>`](/html/input/) в первую очередь используйте `<label>`. У этого HTML-тега есть важная особенность — при клике по тегу фокус перемещается на поле по умолчанию.

diff --git a/a11y/role-contentinfo/demos/footer-with-contentinfo/index.html b/a11y/role-contentinfo/demos/footer-with-contentinfo/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
-  <title>Футер страницы с ролью contentinfo — contentinfo — Дока</title>
+  <title>Футер страницы с явной ролью — contentinfo — Дока</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -14,6 +14,11 @@
       box-sizing: border-box;
     }
 
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
     body {
       min-height: 100vh;
       padding: 50px;
@@ -25,15 +30,31 @@
       font-family: "Roboto", sans-serif;
     }
 
+    h1 {
+      margin-bottom: 17px;
+      font-weight: 500;
+      font-size: 1.625rem;
+    }
+
     p {
       margin: 7px 0;
       font-size: 1rem;
       line-height: 1.4;
     }
 
-    div {
-      width: 65%;
+    main {
+      min-height: 200px;
       padding: 55px 40px;
+      background-color: #282A2E;
+      color: #E6E6E6;
+    }
+
+    .container {
+      width: 65%;
+    }
+
+    .footer {
+      padding: 10px 20px;
       text-align: center;
       background-color: #10F3AF;
     }
@@ -43,16 +64,21 @@
         padding: 30px;
       }
 
-      div {
+      .container {
         width: 100%;
-        padding: 55px 30px;
       }
     }
   </style>
 </head>
 <body>
-  <div role="contentinfo">
-    <p>© Cyberpunk, 2077</p>
+  <div class="container">
+    <main>
+      <h1>Сайт о тапирах</h1>
+      <p>Остальное содержимое страницы.</p>
+    </main>
+    <div class="footer" role="contentinfo">
+      <p>© Мистер Тапир, 2077</p>
+    </div>
   </div>
 </body>
 </html>