diff --git a/a11y/content-hidden/demos/hide-text/index.html b/a11y/content-hidden/demos/hide-text/index.html
index c889ba749f..3fb03cb1d9 100644
--- a/a11y/content-hidden/demos/hide-text/index.html
+++ b/a11y/content-hidden/demos/hide-text/index.html
@@ -6,7 +6,7 @@
   <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;
@@ -14,6 +14,11 @@
       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
index 004351657f..75d9b2b9a1 100644
--- 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,6 +55,7 @@ tags:
 </aside>
 
 ```css
+.sr-only {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
@@ -58,10 +63,14 @@ tags:
   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
index de0f0c5f2c..9c4abebd41 100644
--- 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,7 +6,7 @@
   <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;
@@ -14,6 +14,11 @@
       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;
diff --git a/a11y/css-impact-on-a11y/demos/list-style-none/index.html b/a11y/css-impact-on-a11y/demos/list-style-none/index.html
index 5554b5995b..2bb998650a 100644
--- a/a11y/css-impact-on-a11y/demos/list-style-none/index.html
+++ b/a11y/css-impact-on-a11y/demos/list-style-none/index.html
@@ -6,13 +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;
@@ -21,86 +27,72 @@
       justify-content: center;
       background-color: #18191C;
       color: #FFFFFF;
-      font-family: Roboto, sans-serif;
+      font-family: "Roboto", sans-serif;
     }
+
     h1 {
       margin-bottom: 17px;
       font-weight: 500;
       font-size: 1.625rem;
-      text-align: center;
     }
+
     h2 {
       margin-top: 40px;
       margin-bottom: 17px;
       font-weight: 500;
       font-size: 1.25rem;
     }
+
     code {
       padding: 4px 6px;
-      border-radius: 4px;
       font-family: "Roboto Mono", monospace;
       font-size: calc(1em - 1px);
       background-color: rgba(16, 243, 175, 0.2);
     }
+
+    .container {
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+    }
+
     .list-wrapper {
-      min-width: 700px;
       display: flex;
-      justify-content: space-evenly;
+      gap: 60px;
     }
+
     .list li {
       position: relative;
       text-transform: lowercase;
       line-height: 1.5;
     }
+
     .list_default {
       margin-left: 20px;
     }
+
     .list_bulletless {
       list-style: none;
     }
-    .button {
-      display: block;
-      min-width: 210px;
-      margin: 16px auto 0;
-      border: 2px solid transparent;
-      border-radius: 6px;
-      padding: 9px 15px;
-      color: #000000;
-      font-size: 18px;
-      font-weight: 300;
-      font-family: inherit;
-      transition: background-color 0.2s linear;
-    }
-    .button-aqua {
-      background-color: #10F3AF;
-    }
-    .button:hover {
-      background-color: #FFFFFF;
-      cursor: pointer;
-      transition: background-color 0.2s linear;
-    }
-    .button:focus-visible {
-      border: 2px solid #FFFFFF;
-      outline: none;
-    }
-    .button:focus {
-      border: 2px solid #FFFFFF;
-      outline: none;
-    }
+
     @media (max-width: 768px) {
       body {
         padding: 30px;
       }
+
+      .container {
+        width: 60%;
+      }
+
       .list-wrapper {
-        max-width: 100%;
-        min-width: unset;
         flex-direction: column;
+        gap: 0;
       }
     }
   </style>
 </head>
 <body>
-<div>
+<div class="container">
   <h1>Список покупок</h1>
   <div class="list-wrapper">
     <div>
@@ -122,7 +114,6 @@ <h2><code>list-style: none</code></h2>
       </ul>
     </div>
   </div>
-  <button type="button" class="button button-aqua">Добавить пункт</button>
 </div>
 </body>
 </html>
diff --git a/a11y/css-impact-on-a11y/demos/lists-with-custom-markers/index.html b/a11y/css-impact-on-a11y/demos/lists-with-custom-markers/index.html
index 9132617e64..b3f21fd653 100644
--- a/a11y/css-impact-on-a11y/demos/lists-with-custom-markers/index.html
+++ b/a11y/css-impact-on-a11y/demos/lists-with-custom-markers/index.html
@@ -6,13 +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;
@@ -21,48 +27,59 @@
       justify-content: center;
       background-color: #18191C;
       color: #FFFFFF;
-      font-family: Roboto, sans-serif;
+      font-family: "Roboto", sans-serif;
     }
+
     h1 {
       margin-bottom: 17px;
       font-weight: 500;
       font-size: 1.625rem;
-      text-align: center;
     }
+
     h2 {
       margin-top: 40px;
       margin-bottom: 17px;
       font-weight: 500;
       font-size: 1.25rem;
     }
+
     code {
       padding: 4px 6px;
-      border-radius: 4px;
       font-family: "Roboto Mono", monospace;
       font-size: calc(1em - 1px);
       background-color: rgba(16, 243, 175, 0.2);
     }
+
+    .container {
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+    }
+
     .list-wrapper {
-      min-width: 700px;
       display: flex;
-      justify-content: space-evenly;
-      margin-top: 12px;
+      gap: 60px;
     }
+
     .list {
       margin-left: 20px;
     }
+
     .list li {
       position: relative;
       text-transform: lowercase;
       line-height: 1.5;
     }
+
     .list_bulletless {
       list-style: none;
     }
+
     .list_emoji li {
       position: relative;
       padding-left: 2px;
     }
+
     .list_emoji li::before {
       content: '📌';
       display: block;
@@ -70,60 +87,74 @@
       top: -3px;
       left: -22px;
     }
+
     .list_markered li {
       padding-left: 4px;
     }
+
     .list_markered li::marker {
       content: '✅';
       margin-right: 2px;
     }
+
     .button {
       display: block;
+      align-self: start;
       min-width: 210px;
-      margin: 16px auto 0;
+      margin-top: 30px;
       border: 2px solid transparent;
       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;
     }
+
     .button-aqua {
       background-color: #10F3AF;
     }
+
     .button-uppercase {
       text-transform: uppercase;
     }
+
     .button:hover {
       background-color: #FFFFFF;
       cursor: pointer;
       transition: background-color 0.2s linear;
     }
+
     .button:focus-visible {
       border: 2px solid #FFFFFF;
       outline: none;
     }
+
     .button:focus {
       border: 2px solid #FFFFFF;
       outline: none;
     }
+
     @media (max-width: 768px) {
       body {
         padding: 30px;
       }
+
+      .container {
+        width: 60%;
+      }
+
       .list-wrapper {
-        max-width: 100%;
-        min-width: unset;
         flex-direction: column;
         margin-top: 0;
+        gap: 0;
       }
     }
   </style>
 </head>
 <body>
-<div>
+<div class="container">
   <h1>Список покупок</h1>
   <div class="list-wrapper">
     <div>
diff --git a/a11y/css-impact-on-a11y/demos/prefers-reduced-motion/index.html b/a11y/css-impact-on-a11y/demos/prefers-reduced-motion/index.html
index 1348dc70ae..4df2ada793 100644
--- a/a11y/css-impact-on-a11y/demos/prefers-reduced-motion/index.html
+++ b/a11y/css-impact-on-a11y/demos/prefers-reduced-motion/index.html
@@ -6,7 +6,7 @@
   <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:wght@500&display=swap">
   <style>
     *, *::before, *::after {
       margin: 0;
@@ -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/css-impact-on-a11y/demos/table-and-grid-layout/index.html b/a11y/css-impact-on-a11y/demos/table-and-grid-layout/index.html
index 3513c28f3a..80667bba72 100644
--- a/a11y/css-impact-on-a11y/demos/table-and-grid-layout/index.html
+++ b/a11y/css-impact-on-a11y/demos/table-and-grid-layout/index.html
@@ -6,7 +6,7 @@
   <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;
@@ -14,6 +14,11 @@
       box-sizing: border-box;
     }
 
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
     body {
       min-height: 100vh;
       padding: 50px;
@@ -22,14 +27,13 @@
       justify-content: center;
       background-color: #18191C;
       color: #FFFFFF;
-      font-family: Roboto, sans-serif;
+      font-family: "Roboto", sans-serif;
     }
 
     h1 {
       margin-bottom: 17px;
       font-weight: 500;
       font-size: 1.625rem;
-      text-align: center;
     }
 
     h2 {
@@ -41,7 +45,6 @@
 
     code {
       padding: 4px 6px;
-      border-radius: 4px;
       font-family: "Roboto Mono", monospace;
       font-size: calc(1em - 1px);
       background-color: rgba(16, 243, 175, 0.2);
@@ -55,47 +58,50 @@
     .table {
       margin-top: 16px;
       min-width: 100%;
+      border-top: 7px solid #10F3AF;
+      border-collapse: collapse;
+      text-align: center;
     }
 
     .table, td, th {
-      padding: 6px;
-      border-bottom: 1px solid #ffffff;
-      border-right: 1px solid #ffffff;
-      border-collapse: collapse;
-      text-align: left;
+      padding: 14px;
+      border-bottom: 1px solid #10F3AF;
+      border-right: 1px solid #10F3AF;
+      border-left-width: 0;
+      vertical-align: top;
+      line-height: 1.2;
     }
 
-    .table,
-    .table th:last-child,
-    .table td:last-child {
-      border-right: none;
+    th:first-child, td:first-child {
+      text-align: left;
+      padding-left: 0;
     }
 
-    .table,
-    .table tr:last-child td {
-      border-bottom: none;
+    th, .grid-layout__item--heading {
+      font-weight: 500;
     }
 
     .grid-layout {
       display: grid;
       grid-template-columns: 6fr 2fr 2fr;
       margin-top: 16px;
+      border-top: 7px solid #10F3AF;
+      line-height: 1.2;
     }
 
     .grid-layout__item {
-      padding: 6px;
-      border-bottom: 1px solid #ffffff;
-      border-right: 1px solid #ffffff;
+      padding: 14px;
+      border-bottom: 1px solid #10F3AF;
+      border-right: 1px solid #10F3AF;
     }
 
-    .grid-layout__item:nth-child(3n) {
-      border-right: none;
+    .grid-layout__item:not(.grid-layout__item--heading:first-of-type):not(.grid-layout__item--name) {
+      text-align: center;
     }
 
-    .grid-layout__item:nth-last-child(1),
-    .grid-layout__item:nth-last-child(2),
-    .grid-layout__item:nth-last-child(3) {
-      border-bottom: none;
+    .grid-layout__item--name,
+    .grid-layout__item--heading:first-of-type {
+      padding-left: 0;
     }
 
     @media (max-width: 768px) {
@@ -138,18 +144,18 @@ <h2 id="heading">Таблица и <code>display: table</code></h2>
   <div class="element-wrapper">
     <h2>Контейнеры и <code>display: grid</code></h2>
     <div class="grid-layout">
-        <p class="grid-layout__item">Продукт</p>
-        <p class="grid-layout__item">Количество</p>
-        <p class="grid-layout__item">Цена</p>
-        <p class="grid-layout__item">Апельсины</p>
-        <p class="grid-layout__item">1 килограмм</p>
-        <p class="grid-layout__item">💰💰</p>
-        <p class="grid-layout__item">Молоко</p>
-        <p class="grid-layout__item">1 литр</p>
-        <p class="grid-layout__item">💰</p>
-        <p class="grid-layout__item">Воздушный змей</p>
-        <p class="grid-layout__item">1 штука</p>
-        <p class="grid-layout__item">💰💰💰</p>
+      <p class="grid-layout__item grid-layout__item--heading">Продукт</p>
+      <p class="grid-layout__item grid-layout__item--heading">Количество</p>
+      <p class="grid-layout__item grid-layout__item--heading">Цена</p>
+      <p class="grid-layout__item grid-layout__item--name">Апельсины</p>
+      <p class="grid-layout__item">1 килограмм</p>
+      <p class="grid-layout__item">💰💰</p>
+      <p class="grid-layout__item grid-layout__item--name">Молоко</p>
+      <p class="grid-layout__item">1 литр</p>
+      <p class="grid-layout__item">💰</p>
+      <p class="grid-layout__item grid-layout__item--name">Воздушный змей</p>
+      <p class="grid-layout__item">1 штука</p>
+      <p class="grid-layout__item">💰💰💰</p>
     </div>
   </div>
 </div>
diff --git a/a11y/css-impact-on-a11y/demos/table-with-grid-layout/index.html b/a11y/css-impact-on-a11y/demos/table-with-grid-layout/index.html
index 55a33c6e83..3168da85de 100644
--- a/a11y/css-impact-on-a11y/demos/table-with-grid-layout/index.html
+++ b/a11y/css-impact-on-a11y/demos/table-with-grid-layout/index.html
@@ -6,7 +6,7 @@
   <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;
@@ -14,6 +14,11 @@
       box-sizing: border-box;
     }
 
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
     body {
       min-height: 100vh;
       padding: 50px;
@@ -22,14 +27,13 @@
       justify-content: center;
       background-color: #18191C;
       color: #FFFFFF;
-      font-family: Roboto, sans-serif;
+      font-family: "Roboto", sans-serif;
     }
 
     h1 {
       margin-bottom: 17px;
       font-weight: 500;
       font-size: 1.625rem;
-      text-align: center;
     }
 
     h2 {
@@ -41,7 +45,6 @@
 
     code {
       padding: 4px 6px;
-      border-radius: 4px;
       font-family: "Roboto Mono", monospace;
       font-size: calc(1em - 1px);
       background-color: rgba(16, 243, 175, 0.2);
@@ -53,50 +56,66 @@
     }
 
     .table {
-      margin-top: 16px;
       min-width: 100%;
+      border-collapse: collapse;
     }
 
     .table, td, th {
-      padding: 6px;
-      border-bottom: 1px solid #ffffff;
-      border-right: 1px solid #ffffff;
-      border-collapse: collapse;
-      text-align: left;
+      padding: 14px;
+      border-bottom: 1px solid #10F3AF;
+      border-right: 1px solid #10F3AF;
+      border-left-width: 0;
+      vertical-align: top;
+      line-height: 1.2;
     }
 
-    .table,
     .table th:last-child,
-    .table td:last-child {
+    .table td:last-child,
+    .table-layout__col:last-child {
       border-right: none;
     }
 
-    .table,
-    .table tr:last-child td {
+    .table tr:last-child td,
+    .table-layout__row:last-child {
       border-bottom: none;
     }
 
+    th:first-child, td:first-child {
+      text-align: left;
+      padding-left: 0;
+    }
+
+    th, .table-layout__col--heading {
+      font-weight: 500;
+    }
+
     .table_grid {
       display: grid;
       margin-top: 16px;
+      padding: 0;
+      border-top: 7px solid #10F3AF;
+      text-align: center;
     }
 
     .table-layout {
       display: table;
+      margin-top: 16px;
+      border-top: 7px solid #10F3AF;
+      text-align: center;
     }
 
     .table-layout__row {
       display: flex;
+      flex-wrap: wrap;
+      border-bottom: 1px solid #10F3AF;
     }
 
     .table-layout__col {
-      padding: 6px;
-      border-bottom: 1px solid #ffffff;
-      border-right: 1px solid #ffffff;
-    }
-
-    .table-layout__row:nth-child(4) .table-layout__col {
-      border-bottom: none;
+      padding: 14px;
+      border-right: 1px solid #10F3AF;
+      border-left-width: 0;
+      vertical-align: top;
+      line-height: 1.2;
     }
 
     .table-layout__col:nth-child(3n + 1) {
@@ -104,18 +123,35 @@
     }
 
     .table-layout__col:nth-child(3n + 2) {
-      min-width: 110px;
+      min-width: 140px;
     }
 
     .table-layout__col:nth-child(3n) {
       min-width: 110px;
-      border-right: none;
+    }
+
+    .table-layout__col--heading:first-of-type,
+    .table-layout__col--name {
+      padding-left: 0;
+      text-align: left;
     }
 
     @media (max-width: 768px) {
       body {
         padding: 30px;
       }
+
+      .table-layout__col:nth-child(3n + 1) {
+        min-width: 50%;
+      }
+
+      .table-layout__col:nth-child(3n + 2) {
+        min-width: 30%;
+      }
+
+      .table-layout__col:nth-child(3n) {
+        min-width: 20%;
+      }
     }
   </style>
 </head>
@@ -124,25 +160,25 @@
   <h1>Чек</h1>
 
   <div class="element-wrapper">
-    <h2>Контейнеры и <code>display: table</code></h2>
-    <div class="table-layout">
+    <h2 id="fake-heading">Контейнеры и <code>display: table</code></h2>
+    <div class="table table-layout" aria-labelledby="fake-heading">
       <div class="table-layout__row">
-        <p class="table-layout__col">Продукт</p>
-        <p class="table-layout__col">Количество</p>
-        <p class="table-layout__col">Цена</p>
+        <p class="table-layout__col table-layout__col--heading">Продукт</p>
+        <p class="table-layout__col table-layout__col--heading">Количество</p>
+        <p class="table-layout__col table-layout__col--heading">Цена</p>
       </div>
       <div class="table-layout__row">
-        <p class="table-layout__col">Апельсины</p>
+        <p class="table-layout__col table-layout__col--name">Апельсины</p>
         <p class="table-layout__col">1 килограмм</p>
         <p class="table-layout__col">💰💰</p>
       </div>
       <div class="table-layout__row">
-        <p class="table-layout__col">Молоко</p>
+        <p class="table-layout__col table-layout__col--name">Молоко</p>
         <p class="table-layout__col">1 литр</p>
         <p class="table-layout__col">💰</p>
       </div>
       <div class="table-layout__row">
-        <p class="table-layout__col">Воздушный змей</p>
+        <p class="table-layout__col table-layout__col--name">Воздушный змей</p>
         <p class="table-layout__col">1 штука</p>
         <p class="table-layout__col">💰💰💰</p>
       </div>
@@ -152,22 +188,22 @@ <h2>Контейнеры и <code>display: table</code></h2>
   <h2 id="heading">Таблица и <code>display: grid</code> 💀?</h2>
     <table class="table table_grid" aria-labelledby="heading">
       <tr>
-        <th style="width: 360px">Продукт</th>
+        <th style="width: 61%">Продукт</th>
         <th>Количество</th>
         <th>Цена</th>
       </tr>
       <tr>
-        <td style="width: 360px">Апельсины</td>
+        <td style="width: 61%">Апельсины</td>
         <td>1 килограмм</td>
         <td>💰💰</td>
       </tr>
       <tr>
-        <td style="width: 360px">Молоко</td>
+        <td style="width: 61%">Молоко</td>
         <td>1 литр</td>
         <td>💰</td>
       </tr>
       <tr>
-        <td style="width: 360px">Воздушный змей</td>
+        <td style="width: 61%">Воздушный змей</td>
         <td>1 штука</td>
         <td>💰💰💰</td>
       </tr>
diff --git a/a11y/css-impact-on-a11y/index.md b/a11y/css-impact-on-a11y/index.md
index 570369a101..84048f8ba2 100644
--- a/a11y/css-impact-on-a11y/index.md
+++ b/a11y/css-impact-on-a11y/index.md
@@ -5,6 +5,7 @@ authors:
   - ipogorelova
 contributors:
   - tatianafokina
+  - skorobaeus
 related:
   - a11y/screenreaders
   - a11y/content-hidden
@@ -45,7 +46,7 @@ tags:
 
 Допустим, в этом случае нам не важно, сколько пунктов в списке, поэтому мы используем ненумерованный список — [`<ul>`](/html/ul/).
 
-<iframe title="Списки с маркерами и без них" src="demos/list-style-none/" height="400"></iframe>
+<iframe title="Списки с маркерами и без них" src="demos/list-style-none/" height="450"></iframe>
 
 ### Свойство `list-style: none`
 
@@ -97,7 +98,7 @@ tags:
 
 Посмотрим на получившийся «нарядный» список. В демке он под заголовком «`::before`».
 
-<iframe title="Списки с кастомными маркерами" src="demos/lists-with-custom-markers/" height="400"></iframe>
+<iframe title="Списки с кастомными маркерами" src="demos/lists-with-custom-markers/" height="450"></iframe>
 
 А как это звучит?
 
@@ -121,7 +122,7 @@ tags:
 
 Снова глянем на демку — теперь нас интересует список с маркерами-галочками.
 
-<iframe title="Списки с кастомными маркерами" src="demos/lists-with-custom-markers/" height="400"></iframe>
+<iframe title="Списки с кастомными маркерами" src="demos/lists-with-custom-markers/" height="450"></iframe>
 
 В этом случае NVDA не будет зачитывать содержимое псевдоэлемента и опустит слово «маркер» перед элементом списка. То есть, как и в примере с `list-style: none` без кастомных маркеров, снова получим:
 
@@ -147,7 +148,7 @@ tags:
 
 Список собрали и теперь самое время отправляться за покупками. Допустим, в нашем магазине карточки товаров выглядят как кнопки с эмодзи и текстами.
 
-<iframe title="Изменение порядка элементов с помощью свойства order" src="demos/flex-order-property/" height="420"></iframe>
+<iframe title="Изменение порядка элементов с помощью свойства order" src="demos/flex-order-property/" height="480"></iframe>
 
 В демке обычный блок с [`display: flex`](/css/display/#kak-pishetsya). Попробуем озвучить весь список товаров скринридером.
 
@@ -173,7 +174,7 @@ tags:
 
 Итак, мы закупились в магазине согласно нашего списка и получили чек с перечнем купленного.
 
-<iframe title="Таблицы и гриды" src="demos/table-and-grid-layout/" height="580"></iframe>
+<iframe title="Таблицы и гриды" src="demos/table-and-grid-layout/" height="840"></iframe>
 
 Первый вариант чека — стандартная таблица, свёрстанная с помощью тега [`<table>`](/html/tables/). Она выглядит как таблица и ~~крякает~~ читается скринридером как таблица.
 
@@ -197,7 +198,7 @@ tags:
 
 Окей, у таблицы есть свойство `display: table`. Может, всё дело в нём? Попробуем сверстать псевдо-таблицу с помощью обычных `<div>`, но зададим блоку-обёртке `display: table`. В демке это первый вариант с заголовком «Таблица и `display: table`».
 
-<iframe title="Таблицы и гриды" src="demos/table-with-grid-layout/" height="590"></iframe>
+<iframe title="Таблицы и гриды" src="demos/table-with-grid-layout/" height="840"></iframe>
 
 Увы, скринридер всё ещё не считает это таблицей и снова читает только контент внутри блоков в ожидаемом нами порядке:
 
@@ -223,7 +224,10 @@ tags:
 
 ```html
 <div class="container">
-  <p>Наша замечательна рассылка лучшая рассылка среди всех рассылок.</p>
+  <p>
+    Наша замечательна рассылка лучшая рассылка
+    среди всех рассылок.
+  </p>
   <button>Подписаться на рассылку</button>
 </div>
 ```
@@ -231,7 +235,10 @@ tags:
 Как видят код скринридеры:
 
 ```html
-<span>Наша замечательна рассылка лучшая рассылка среди всех рассылок.</span>
+<span>
+  Наша замечательна рассылка лучшая рассылка
+  среди всех рассылок.
+</span>
 <span>Подписаться на рассылку</span>
 ```
 
@@ -259,7 +266,7 @@ tags:
 
 Ура, кажется, мы всё купили и теперь можем посмотреть на красивый экран с анимацией 🎉
 
-<iframe title="Управление анимацией с помощью prefers-reduced-motion" src="demos/prefers-reduced-motion/" height="220"></iframe>
+<iframe title="Управление анимацией с помощью prefers-reduced-motion" src="demos/prefers-reduced-motion/" height="300"></iframe>
 
 Однако, на доступном сайте должна быть возможность отключить анимацию, если пользователю это важно. Такое поведение описано в одном из требований [WCAG 2 (Web Content Accessibility Guidelines 2)](https://www.w3.org/WAI/standards-guidelines/wcag/) — [2.3.3. Анимация при взаимодействии](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions).
 
@@ -299,7 +306,7 @@ tags:
 
 Дело в том, что скринридер читает не просто контент страницы или её разметку, а общается с браузером при помощи _Accessibility API (Accessibility Application Programming Interface)_.
 
-Accessibility API передаёт скринридеру данные о странице в виде _дерева доступности (acessibility tree)_. Оно похоже на [DOM-дерево](/js/dom/#iz-chego-sostoit-dom), но состоит из _доступных объектов (accessible object)_. То есть, именно Accessibility API превращает разметку страницы в «сценарий чтения». Как этот сценарий будет выглядеть зависит от многих факторов. Например, от семантической разметки и используемых CSS-свойств.
+Accessibility API передаёт скринридеру данные о странице в виде _дерева доступности (accessibility tree)_. Оно похоже на [DOM-дерево](/js/dom/#iz-chego-sostoit-dom), но состоит из _доступных объектов (accessible object)_. То есть, именно Accessibility API превращает разметку страницы в «сценарий чтения». Как этот сценарий будет выглядеть зависит от многих факторов. Например, от семантической разметки и используемых CSS-свойств.
 
 <aside>
 
diff --git a/a11y/skip-link/demos/basic/index.html b/a11y/skip-link/demos/basic/index.html
index fe13f0729e..6f896a4966 100644
--- a/a11y/skip-link/demos/basic/index.html
+++ b/a11y/skip-link/demos/basic/index.html
@@ -6,219 +6,237 @@
   <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">
-    <style>
-      *, *::before, *::after {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-
+  <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;
+      justify-content: center;
+      font-family: "Roboto", sans-serif;
+      background-color: #18191c;
+      color: #FFFFFF;
+    }
+
+    .main-container {
+      width: 65%;
+    }
+
+    main {
+      margin-top: 40px;
+    }
+
+    h1 {
+      margin-bottom: 17px;
+      font-weight: 500;
+      font-size: 2.2rem;
+    }
+
+    p {
+      margin: 7px 0;
+      font-size: 1rem;
+      line-height: 1.4;
+    }
+
+    ul {
+      position: relative;
+      list-style-type: none;
+      font-size: 1.5rem;
+    }
+
+    ul::before {
+      content: 'меню';
+      position: absolute;
+      right: calc(100% + 25px);
+      top: 7px;
+      padding: 2px 7px;
+      background-color: #10F3AF;
+      color: #000000;
+      font-size: 0.875rem;
+    }
+
+    a {
+      border-radius: 3px;
+      color: inherit;
+      -webkit-text-decoration-color: #10F3AF;
+      text-decoration-color: #10F3AF;
+      text-decoration-thickness: 2px;
+      text-transform: lowercase;
+      transition: background-color 0.2s linear;
+    }
+
+    a:hover, a:focus {
+      color: #000000;
+      background-color: #10F3AF;
+      transition: background-color 0.2s linear;
+      outline-width: 0;
+    }
+
+    .button {
+      display: block;
+      width: 100%;
+      border: 2px solid transparent;
+      border-radius: 6px;
+      padding: 9px 15px;
+      color: #000000;
+      font-size: 1rem;
+      font-weight: 300;
+      font-family: inherit;
+      transition: background-color 0.2s linear;
+    }
+
+    .button:hover {
+      background-color: #FFFFFF;
+      cursor: pointer;
+      transition: background-color 0.2s linear;
+    }
+
+    .button:focus-visible {
+      border: 2px solid #FFFFFF;
+      outline: none;
+    }
+
+    .button:focus {
+      border: 2px solid #FFFFFF;
+      outline: none;
+    }
+
+    .button-aqua {
+      background-color: #10F3AF;
+    }
+
+    form {
+      width: 600px;
+      margin-top: 50px;
+    }
+
+    input {
+      width: 100%;
+      margin-bottom: 25px;
+      border: 1px solid #FFFFFF;
+      border-radius: 6px;
+      padding: 10px 15px;
+      background-color: transparent;
+      color: #FFFFFF;
+      font-size: 1rem;
+      font-weight: 300;
+      font-family: inherit;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    input:focus {
+      border-color: #10F3AF;
+      outline: none;
+    }
+
+    label {
+      margin-right: 55px;
+      font-size: 24px;
+      font-weight: 500;
+      line-height: 1;
+    }
+
+    .form-row {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .container {
+      width: 350px;
+    }
+
+    @media (max-width: 768px) {
       body {
-        min-height: 100vh;
-        padding: 50px;
-        display: flex;
-        justify-content: center;
-        font-family: Roboto, sans-serif;
-        font-size: 20px;
-        background-color: #18191c;
-        color: #FFFFFF;
-      }
-
-      h1 {
-        margin-bottom: 17px;
-        font-weight: 500;
-        font-size: 2.2rem;
-      }
-
-      p {
-        margin: 7px 0;
-        font-size: 1.2rem;
-        line-height: 1.4;
+        padding: 30px;
       }
 
       ul {
-        display: flex;
-        align-items: center;
-        list-style: none;
-      }
-
-      li {
-        height: 40px;
-        line-height: 40px;
-        margin: 0 20px;
-      }
-
-      li:first-child {
-        margin-left: 0;
-      }
-
-      main {
-        margin-top: 40px;
-      }
-
-      a {
-        border-radius: 3px;
-        color: inherit;
-        -webkit-text-decoration-color: #10F3AF;
-        text-decoration-color: #10F3AF;
-        text-decoration-thickness: 2px;
-        transition: background-color 0.2s linear;
+        flex-direction: column;
       }
 
-      a:hover, a:focus {
-        color: #000000;
-        background-color: #10F3AF;
-        transition: background-color 0.2s linear;
-        outline-width: 0;
-      }
-
-      .button {
-        display: block;
-        width: 100%;
-        border: 2px solid transparent;
-        border-radius: 6px;
-        padding: 9px 15px;
-        color: #000000;
-        font-size: 18px;
-        font-weight: 300;
-        font-family: inherit;
-        transition: background-color 0.2s linear;
-      }
-
-      .button:hover {
-        background-color: #FFFFFF;
-        cursor: pointer;
-        transition: background-color 0.2s linear;
-      }
-
-      .button:focus-visible {
-        border: 2px solid #FFFFFF;
-        outline: none;
-      }
-
-      .button:focus {
-        border: 2px solid #FFFFFF;
-        outline: none;
-      }
-
-      .button-aqua {
-        background-color: #10F3AF;
-      }
-
-      form {
-        width: 600px;
-        margin-top: 30px;
-      }
-
-      input {
-        width: 100%;
-        margin-bottom: 25px;
-        border: 1px solid #FFFFFF;
-        border-radius: 6px;
-        padding: 10px 15px;
-        background-color: transparent;
-        color: #FFFFFF;
-        font-size: 18px;
-        font-weight: 300;
-        font-family: inherit;
-        -webkit-appearance: none;
-        appearance: none;
-      }
-
-      input:focus {
-        border-color: #10F3AF;
-        outline: none;
+      ul::before {
+        right: calc(100% - 50px);
+        top: -40px;
       }
 
       label {
-        margin-right: 55px;
-        font-size: 24px;
-        font-weight: 500;
-        line-height: 1;
+        display: inline-block;
+        margin: 0 0 10px;
       }
 
       .form-row {
-        display: flex;
-        justify-content: space-between;
+        display: block;
       }
 
-      .container {
-        width: 350px;
+      form, .container, .main-container {
+        width: 100%;
       }
 
-      @media (max-width: 768px) {
-        body {
-          padding: 30px;
-        }
-
-        ul {
-          flex-direction: column;
-        }
-
-        li:first-child {
-          margin-left: 20px;
-        }
-
-        label {
-          display: inline-block;
-          margin: 0 0 10px;
-        }
-
-        .form-row {
-          display: block;
-        }
-
-        form, .container {
-          width: 100%;
-        }
-    </style>
-  </head>
-  <body>
-    <div>
-      <nav>
-        <ul>
-          <li>
-            <a href="#">Главная</a>
-          </li>
-          <li>
-            <a href="#">О леммингах</a>
-          </li>
-          <li>
-            <a href="#">Фотографии</a>
-          </li>
-          <li>
-            <a href="#">О нас</a>
-          </li>
-          <li>
-            <a href="#">Контакты</a>
-          </li>
-        </ul>
-      </nav>
-      <main>
-        <h1>Лемминги</h1>
-        <p>
-          Лемминги — группа из нескольких близкородственных родов подсемейства полёвковых (Arvicolinae) семейства хомяков (Cricetidae) отряда грызунов.
-          К леммингам близки пеструшки.
-          Лемминг питается семенами, листьями и корнями.
-          В спячку он не впадает и поэтому летом припрятывает еду в расщелинах земли, а зимой роет в снегу ходы и отыскивает свои запасы.
-          Лемминги весьма плодовиты, у самки бывает от 3 до 4 помётов в год, в каждом по 5-6 детёнышей.
-        </p>
-        <p>
-          Интересуетесь леммингами? Оставьте свою почту, и мы будем каждый день присылать вам интересные факты про леммингов.
-        </p>
-        <form>
-          <div class="form-row">
-            <label for="input">
-              Email:
-            </label>
-            <div class="container">
-              <input type="email" id="input"></input>
-              <button class="button button-aqua">Подписаться на рассылку</button>
-            </div>
+      .main-container {
+        padding-top: 45px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="main-container">
+    <nav>
+      <ul>
+        <li>
+          <a href="#">Главная</a>
+        </li>
+        <li>
+          <a href="#">О леммингах</a>
+        </li>
+        <li>
+          <a href="#">Фотографии</a>
+        </li>
+        <li>
+          <a href="#">О нас</a>
+        </li>
+        <li>
+          <a href="#">Контакты</a>
+        </li>
+      </ul>
+    </nav>
+    <main>
+      <h1>Лемминги</h1>
+      <p>
+        Лемминги — группа из нескольких близкородственных родов подсемейства полёвковых (Arvicolinae) семейства хомяков (Cricetidae) отряда грызунов. К леммингам близки пеструшки.
+      </p>
+      <p>
+        Лемминг питается семенами, листьями и корнями. В спячку он не впадает и поэтому летом припрятывает еду в расщелинах земли, а зимой роет в снегу ходы и отыскивает свои запасы.
+      </p>
+      <p>
+        Лемминги весьма плодовиты, у самки бывает от 3 до 4 помётов в год, в каждом по 5–6 детёнышей.
+      </p>
+      <p>
+        Интересуетесь леммингами? Оставьте свою почту, и мы будем каждый день присылать вам интересные факты про леммингов.
+      </p>
+      <form>
+        <div class="form-row">
+          <label for="input">
+            Почта:
+          </label>
+          <div class="container">
+            <input type="email" id="input"></input>
+            <button class="button button-aqua">Подписаться на рассылку</button>
           </div>
-        </form>
-      </main>
-    </div>
-  </body>
+        </div>
+      </form>
+    </main>
+  </div>
+</body>
 </html>
diff --git a/a11y/skip-link/demos/with-skip-link/index.html b/a11y/skip-link/demos/with-skip-link/index.html
index 44b4a2f317..bc051fb54e 100644
--- a/a11y/skip-link/demos/with-skip-link/index.html
+++ b/a11y/skip-link/demos/with-skip-link/index.html
@@ -6,7 +6,7 @@
   <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:wght@300;400;500&display=swap"">
   <style>
     *, *::before, *::after {
       margin: 0;
@@ -14,17 +14,29 @@
       box-sizing: border-box;
     }
 
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
     body {
       min-height: 100vh;
       padding: 50px;
       display: flex;
       justify-content: center;
-      font-family: Roboto, sans-serif;
-      font-size: 20px;
+      font-family: "Roboto", sans-serif;
       background-color: #18191c;
       color: #FFFFFF;
     }
 
+    .main-container {
+      width: 65%;
+    }
+
+    main {
+      margin-top: 40px;
+    }
+
     h1 {
       margin-bottom: 17px;
       font-weight: 500;
@@ -33,28 +45,25 @@
 
     p {
       margin: 7px 0;
-      font-size: 1.2rem;
+      font-size: 1rem;
       line-height: 1.4;
     }
 
     ul {
-      display: flex;
-      align-items: center;
-      list-style: none;
-    }
-
-    li {
-      height: 40px;
-      line-height: 40px;
-      margin: 0 20px;
+      position: relative;
+      list-style-type: none;
+      font-size: 1.5rem;
     }
 
-    li:first-child {
-      margin-left: 0;
-    }
-
-    main {
-      margin-top: 40px;
+    ul::before {
+      content: 'меню';
+      position: absolute;
+      right: calc(100% + 25px);
+      top: 7px;
+      padding: 2px 7px;
+      background-color: #10F3AF;
+      color: #000000;
+      font-size: 0.875rem;
     }
 
     a {
@@ -63,6 +72,7 @@
       -webkit-text-decoration-color: #10F3AF;
       text-decoration-color: #10F3AF;
       text-decoration-thickness: 2px;
+      text-transform: lowercase;
       transition: background-color 0.2s linear;
     }
 
@@ -80,7 +90,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;
@@ -119,7 +129,7 @@
       padding: 10px 15px;
       background-color: transparent;
       color: #FFFFFF;
-      font-size: 18px;
+      font-size: 1rem;
       font-weight: 300;
       font-family: inherit;
       -webkit-appearance: none;
@@ -151,15 +161,16 @@
       display: block;
       position: absolute;
       top: 0;
-      left: 0;
+      left: 40%;
       padding: 10px 15px;
+      color: #18191c;
       background: #10F3AF;
+      text-transform: none;
       transform: translateY(-100%);
     }
 
     .skip-link:focus {
-      transform: translateY(0);
-      color: #18191c;
+      transform: translateY(20%);
     }
 
     @media (max-width: 768px) {
@@ -171,8 +182,9 @@
         flex-direction: column;
       }
 
-      li:first-child {
-        margin-left: 20px;
+      ul::before {
+        right: calc(100% - 50px);
+        top: -40px;
       }
 
       label {
@@ -184,13 +196,18 @@
         display: block;
       }
 
-      form, .container {
+      form, .container, .main-container {
         width: 100%;
       }
+
+      .main-container {
+        padding-top: 45px;
+      }
+    }
   </style>
 </head>
 <body>
-  <div>
+  <div class="main-container">
     <a class="skip-link" href="#main">
       Перейти к контенту
     </a>
@@ -216,11 +233,13 @@
     <main id="main">
       <h1>Лемминги</h1>
       <p>
-        Лемминги — группа из нескольких близкородственных родов подсемейства полёвковых (Arvicolinae) семейства хомяков (Cricetidae) отряда грызунов.
-        К леммингам близки пеструшки.
-        Лемминг питается семенами, листьями и корнями.
-        В спячку он не впадает и поэтому летом припрятывает еду в расщелинах земли, а зимой роет в снегу ходы и отыскивает свои запасы.
-        Лемминги весьма плодовиты, у самки бывает от 3 до 4 помётов в год, в каждом по 5-6 детёнышей.
+        Лемминги — группа из нескольких близкородственных родов подсемейства полёвковых (Arvicolinae) семейства хомяков (Cricetidae) отряда грызунов. К леммингам близки пеструшки.
+      </p>
+      <p>
+        Лемминг питается семенами, листьями и корнями. В спячку он не впадает и поэтому летом припрятывает еду в расщелинах земли, а зимой роет в снегу ходы и отыскивает свои запасы.
+      </p>
+      <p>
+        Лемминги весьма плодовиты, у самки бывает от 3 до 4 помётов в год, в каждом по 5–6 детёнышей.
       </p>
       <p>
         Интересуетесь леммингами? Оставьте свою почту, и мы будем каждый день присылать вам интересные факты про леммингов.
@@ -228,7 +247,7 @@ <h1>Лемминги</h1>
       <form>
         <div class="form-row">
           <label for="input">
-            Email:
+            Почта:
           </label>
           <div class="container">
             <input type="email" id="input"></input>
diff --git a/a11y/skip-link/index.md b/a11y/skip-link/index.md
index f674eaa835..6e7d32a155 100644
--- a/a11y/skip-link/index.md
+++ b/a11y/skip-link/index.md
@@ -5,10 +5,10 @@ authors:
   - xpleesid
 contributors:
   - tatianafokina
+  - skorobaeus
 keywords:
-  - ссылка
-  - доступность
-  - навигация
+  - a11y
+  - клавиатурная навигация
 related:
   - html/a
   - a11y/chto-takoe-a11y
@@ -37,11 +37,11 @@ Skip link (далее скип-линк) — специальный элемен
 
 Допустим, у нас есть сайт с простой навигацией:
 
-<iframe title="Пример с простой навигацией без скип-линка" src="demos/basic/" height="610"></iframe>
+<iframe title="Пример с простой навигацией без скип-линка" src="demos/basic/" height="820"></iframe>
 
 Если будем использовать клавиатуру для навигации, то придётся 5 раз нажать <kbd>Tab</kbd>, чтобы добраться до основного контента. И так придётся делать на каждой новой странице.
 
-Давайте добавим скип-линк, чтобы упросить навигацию. Для этого в самое начало [`<body>`](/html/body/) перед блоком навигации добавим ссылку, которая видна только при фокусе.
+Давайте добавим скип-линк, чтобы упростить навигацию. Для этого в самое начало [`<body>`](/html/body/) перед блоком навигации добавим ссылку, которая видна только при фокусе.
 
 ```html
 <body>
@@ -62,9 +62,10 @@ Skip link (далее скип-линк) — специальный элемен
   display: block;
   position: absolute;
   top: 0;
-  left: 0;
+  left: 50%;
   padding: 10px 15px;
-  background: #F498AD;
+  color: #18191c;
+  background: #10F3AF;
   transform: translateY(-100%);
 }
 ```
@@ -73,10 +74,10 @@ Skip link (далее скип-линк) — специальный элемен
 
 ```css
 .skip-link:focus {
-  transform: translateY(0);
+  transform: translateY(20%);
 }
 ```
 
-<iframe title="Пример со скип-линком" src="demos/with-skip-link/" height="610"></iframe>
+<iframe title="Пример со скип-линком" src="demos/with-skip-link/" height="820"></iframe>
 
 Теперь на странице сразу же появится скип-линк, когда нажмём <kbd>Tab</kbd>. С её помощью можем сразу перейти к контенту, не тратя время на навигацию. Если всё-таки интересует какой-то пункт в меню, можем нажать <kbd>Tab</kbd> ещё раз. Тогда скип-линк скроется, а фокус окажется на первом интерактивном элементе на странице.