Доступность: причёсывает последние демки

* Улучшает демку в статье про скрытие * Улучшает демки в статье про CSS и a11y * Улучшает демку со skip link * Исправляет ошибку * Увеличивает высоту демок, исправляет ошибки * Улучшает демку * Использует правильный дефис * Заменяет иконку * Правит мелочи в демке
doka-guide · Nov 23, 2023 · 7a24abb · 7a24abb
1 parent 65e8371
commit 7a24abb
Show file tree

Hide file tree

Showing 12 changed files with 575 additions and 414 deletions.
diff --git a/a11y/content-hidden/demos/hide-text/index.html b/a11y/content-hidden/demos/hide-text/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+Mono: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;
       font-family: "Roboto", sans-serif;
-      font-size: 16px;
       color: #FFFFFF;
     }
 
@@ -32,18 +36,29 @@
       justify-content: space-between;
     }
 
+    .container-row {
+      position: relative;
+    }
+
     .container-row, .button {
       display: flex;
     }
 
+    .label {
+      margin-right: 55px;
+      font-size: 1.5rem;
+      font-weight: 500;
+      line-height: 1;
+    }
+
     .input {
+      width: 300px;
       border: 1px solid #FFFFFF;
       border-radius: 6px;
-      width: 100%;
-      padding: 10px 15px;
+      padding: 10px 60px 10px 15px;
       background-color: transparent;
       color: #FFFFFF;
-      font-size: 18px;
+      font-size: 1rem;
       font-weight: 300;
       font-family: inherit;
       -webkit-appearance: none;
@@ -55,23 +70,14 @@
       outline: none;
     }
 
-    .label {
-      margin-right: 55px;
-      font-size: 24px;
-      font-weight: 500;
-      line-height: 1;
-    }
-
     .button {
       display: block;
+      position: absolute;
+      right: 3px;
+      top: 3px;
       border: 2px solid transparent;
       border-radius: 6px;
-      margin-left: 25px;
-      padding: 9px 15px;
-      color: #000000;
-      font-size: 18px;
-      font-weight: 300;
-      font-family: inherit;
+      padding: 3px 12px;
       transition: background-color 0.2s linear;
     }
 
@@ -121,6 +127,10 @@
         margin-right: 10px;
         margin-bottom: 10px;
       }
+
+      .input {
+        width: 100%;
+      }
     }
   </style>
 </head>
@@ -131,8 +141,9 @@
       <input class="input" id="search" type="text">
       <button class="button button-aqua">
         <span class="sr-only">Искать на странице</span>
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 17 17">
-          <path fill="#000000" d="M16.958 15.527L11.75 10.32A6.455 6.455 0 0 0 13 6.5 6.5 6.5 0 1 0 6.5 13a6.465 6.465 0 0 0 3.839-1.263l5.205 5.204 1.414-1.414zM6.5 11C4.019 11 2 8.981 2 6.5S4.019 2 6.5 2 11 4.019 11 6.5 8.981 11 6.5 11z"></path>
+        <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="11" cy="11" r="8"/>
+          <path d="m21 21-4.3-4.3"/>
         </svg>
       </button>
     </div>

diff --git a/a11y/content-hidden/index.md b/a11y/content-hidden/index.md
@@ -3,9 +3,11 @@ title: "Как скрыть содержимое от скринридеров"
 description: "Как скрыть содержимое страницы от скринридеров и других вспомогательных технологий."
 authors:
   - minich
+contributors:
+  - skorobaeus
 keywords:
+  - a11y
   - доступность
-  - ARIA
 related:
   - a11y/aria-hidden
   - a11y/role-presentation-none
@@ -29,7 +31,9 @@ tags:
 Можно использовать атрибут [`aria-hidden`](/a11y/aria-hidden/) со значением `true`, чтобы скрыть содержимое от программ чтения с экрана, но оставить его видимым на странице.
 
 ```html
-<p aria-hidden="true">Этот текст виден на странице, но скрыт от скринридера.</p>
+<p aria-hidden="true">
+  Этот текст виден на странице, но скрыт от скринридера.
+</p>
 ```
 
 <aside>
@@ -51,17 +55,22 @@ tags:
 </aside>
 
 ```css
+.sr-only {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   width: 1px;
+}
 ```
 
 ```html
-<p class="sr-only">Этот текст скрыт визуально, но доступен для скринридеров.</p>
+<p class="sr-only">
+  Этот текст скрыт визуально, но доступен
+  для скринридеров.
+</p>
 ```
 
 Свойство [`clip`](/css/clip/) устарело, но его можно использовать для браузеров, которые не поддерживают более новое свойство `clip-path`.
@@ -76,11 +85,16 @@ tags:
   <span class="sr-only">Искать на странице</span>
   <svg
     aria-hidden="true"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#000000"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
     xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    width="30"
-    height="30"
-    viewBox="0 0 17 17">
+  >
     <!-- Описание фигуры -->
   </svg>
 </button>
@@ -116,9 +130,15 @@ tags:
 
 ```html
 <article>
-  <p class="visibility-visible">Этот текст виден всем пользователям.</p>
-  <p class="visibility-hidden">Этот текст скрыт, но элемент занимает место в потоке.</p>
-  <p class="visibility-none">Этот текст снова скрыт и не занимает место на странице.</p>
+  <p class="visibility-visible">
+    Этот текст виден всем пользователям.
+  </p>
+  <p class="visibility-hidden">
+    Этот текст скрыт, но элемент занимает место в потоке.
+  </p>
+  <p class="visibility-none">
+    Этот текст снова скрыт и не занимает место на странице.
+  </p>
 </article>
 ```
 
@@ -137,7 +157,9 @@ tags:
 HTML-атрибут [`hidden`](/html/hidden/) работает как `display: none`. Если добавить атрибут к элементу, он визуально скроется со страницы и не будет занимать место, как-будто его совсем нет.
 
 ```html
-<p hidden>Этот текст не виден на странице и не виден для скринридера.</p>
+<p hidden>
+  Этот текст не виден на странице и не виден для скринридера.
+</p>
 ```
 
 <aside>

diff --git a/a11y/css-impact-on-a11y/demos/flex-order-property/index.html b/a11y/css-impact-on-a11y/demos/flex-order-property/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&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&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;
@@ -29,10 +34,8 @@
       margin-bottom: 17px;
       font-weight: 500;
       font-size: 1.625rem;
-      text-align: center;
     }
 
-
     .element-wrapper {
       max-width: 600px;
       margin-top: 24px;
@@ -79,14 +82,26 @@
       flex-direction: column;
       padding: 16px;
       font-size: 1em;
-      color: #ffffff;
+      font-weight: 300;
+      font-family: inherit;
+      color: #FFFFFF;
       background-color: transparent;
-      border: 1px solid #ffffff;
-      border-radius: 8px;
+      border: 2px solid #FFFFFF;
+      transition: background-color 0.2s linear;
+    }
+
+    .item:hover {
+      color: #000000;
+      background-color: #10F3AF;
+      cursor: pointer;
+      transition: background-color 0.2s linear;
     }
 
     .item:focus {
-      outline: solid 4px #10F3AF;
+      border: 0;
+      outline-width: 4px;
+      outline-style: solid;
+      outline-color: #10F3AF;
     }
 
     .item__icon {
@@ -95,7 +110,6 @@
     }
 
     @media (max-width: 768px) {
-
       .flex-list__item {
         width: calc(100%/2 - 16px);
         margin: 24px 8px 0;