doka-guide · TatianaFokina · Nov 15, 2023 · Sep 16, 2023 · Sep 16, 2023 · Sep 18, 2023
@@ -11,15 +11,21 @@
       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-family: "Roboto", sans-serif;
+    }
+
+    area:focus, area:focus-visible {
+      outline-color: #FFFFFF;
     }
 
     @media (max-width: 768px) {
@@ -31,10 +37,10 @@
 </head>
 <body>
   <map name="doka">
-    <area shape="rect" coords="47,4,319,64" href="/html/" target="_blank" alt="HTML">
-    <area shape="rect" coords="46,69,318,129" href="/css/" target="_blank" alt="CSS">
-    <area shape="rect" coords="46,133,318,193" href="/js/" target="_blank" alt="JS">
+    <area shape="rect" coords="120,10,260,60" href="/html/" target="_blank" alt="HTML">
+    <area shape="rect" coords="120,75,260,122" href="/css/" target="_blank" alt="CSS">
+    <area shape="rect" coords="120,140,260,187" href="/js/" target="_blank" alt="JavaScript">
   </map>
-  <img usemap="#doka" src="../../images/doka_demo_basic.png" alt="Картинка с кликабельными прямоугольниками и надписями HTML CSS JS">
+  <img usemap="#doka" src="../../images/doka_demo_basic.svg" alt="Картинка с тремя цветными прямоугольниками с подписями HTML, CSS и JS.">
 </body>
 </html>
@@ -18,8 +18,10 @@
       align-items: center;
       justify-content: center;
       background-color: #18191C;
-      color: #FFFFFF;
-      font-family: "Roboto", sans-serif;
+    }
+
+    area:focus, area:focus-visible {
+      outline-color: #FFFFFF;
     }
 
     @media (max-width: 768px) {
@@ -35,6 +37,6 @@
     <area shape="poly" coords="427,47,427,124,474,208,659,149,659,59,601,0" href="https://ru.wikipedia.org/wiki/Мыло" target="_blank" alt="Мыло">
     <area shape="circle" coords="751,109,58" href="https://ru.wikipedia.org/wiki/Пять_рублей" target="_blank" alt="Монета">
   </map>
-  <img usemap="#catalog" src="../../images/doka_demo_catalog.png" alt="Кликабельная картинка с машиной, мылом и монетой">
+  <img usemap="#catalog" src="../../images/doka_demo_catalog.png" alt="Машина, мыло и монета">
 </body>
 </html>
@@ -3,6 +3,8 @@ title: "`<area>`"
 description: "Размечает картинку невидимыми областями."
 authors:
   - inventoris
+contributors:
+  - skorobaeus
 related:
   - html/map
   - html/img

@@ -8,21 +8,37 @@
   <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;
     }
 
+    html {
+      color-scheme: dark;
+      font-size: 24px;
+    }
+
     body {
-      background: #000000;
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      background-color: #18191C;
+      color: #000000;
       font-family: "Roboto", sans-serif;
     }
 
+    p {
+      margin: 7px 0;
+      font-size: 1rem;
+      line-height: 1.4;
+    }
+
     .dialogue {
       display: grid;
       gap: 1em;
-      max-width: 90%;
+      min-width: 40%;
       margin: 1em auto;
     }
 
@@ -34,15 +50,25 @@
 
     .dialogue__item--left {
       justify-self: start;
-      background-color: #2e9aff;
+      background-color: #FF8630;
       border-bottom-left-radius: 0;
     }
 
     .dialogue__item--right {
       justify-self: end;
-      background-color: #f498ad;
+      background-color: #2E9AFF;
       border-bottom-right-radius: 0;
     }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      .dialogue {
+        min-width: 100%;
+      }
+    }
   </style>
 </head>
 <body>

@@ -3,6 +3,8 @@ title: "`<data>`"
 description: "Тег для перевода данных с человеческого языка на компьютерный."
 authors:
   - furtivite
+contributors:
+  - skorobaeus
 related:
   - js/element-dataset
   - js/dom
@@ -30,7 +32,7 @@ tags:
 другой <data value="white">белый</data>.
 ```
 
-<iframe title="Пример использования в вёрстке чата" src="demos/data/" height="200"></iframe>
+<iframe title="Пример использования в вёрстке чата" src="demos/data/" height="470"></iframe>
 
 Ещё один пример: вы разрабатываете интернет-магазин, который занимается продажей компьютеров. У вас есть множество типов, моделей и конфигураций — и у каждого есть свой ID, который используется в базе данных. Эти ID мало что скажут пользователям, поэтому лучше выводить названия компьютеров в формате, который они могут понять. Но тут же в атрибуте `value` тега `<data>` можно хранить ID, который используется для удобного доступа к нужной модели:
 

@@ -3,12 +3,15 @@ title: "`<datalist>`"
 description: "Автодополнение полей ввода без JavaScript."
 authors:
   - blueingreen68
+contributors:
+  - skorobaeus
+  - tatianafokina
 keywords:
   - список значений
   - комбинированный список
 related:
+  - a11y/role-listbox
   - html/select
-  - css/display
   - js/deal-with-forms
 tags:
   - article
@@ -18,6 +21,8 @@ tags:
 
 Элемент `<datalist>` — это _источник предложений_, то есть такой элемент, который содержит предопределённые варианты выбора для пользователя. В основном за варианты выбора опций выступают элементы [`<option>`](/html/option/).
 
+У тега по умолчанию есть [роль `listbox`](/a11y/role-listbox/).
+
 ## Пример
 
 ```html
@@ -372,3 +377,15 @@ tags:
 Современный браузер не отобразит элементы `<select>` и `<label>`, которые вложены в `<datalist>`. Однако браузер не будет игнорировать элементы с `<option>` в `<select>`, они станут элементами `<datalist>`.
 
 В итоге в современных браузерах отобразиться элемент `<input>` с выпадающим списком и автодополнением. Устаревший браузер будет игнорировать элемент `<datalist>` и предложит ввести своё значение при помощи элемента `<input>` или выбрать значение из выпадающего списка `<select>`.
+
+## Доступность
+
+Хотя у `<datalist>` есть встроенная семантика, тег нельзя назвать полностью доступным. Например, не все скринридеры зачитывают содержимое выпадающего списка с вариантами для автозаполнения.
+
+Следующая проблема связана с CSS — пока у разработчиков нет возможности стилизовать выпадающий список и пункты в нём, а стили по умолчанию далеки от совершенства. Также к списку не применяются системные цвета в режиме высокой контрастности. В нём он выглядит точно так же, как в обычно режиме отображения цветов.
+
+![Выпадающий список в режиме высокой контрастности в Windows 11. Курсор наведён на пункт «Chrome» в выпадающем списке. Фон элемента стал светло-фиолетовым, текст при этом белый и почти сливается с фоновым.](images/datalist-hcm.png)
+
+Наконец, пункты выпадающего списка не увеличиваются при масштабировании.
+
+![Интерфейс увеличен на 210%. Поля и подписи к ним стали больше и перестроились друг под друга. Выпадающий список остался небольшим на фоне других элементов.](images/datalist-zoom.png)