revise September 2019 accessibility articles

2026-07-31 10:56:45 +03:00
parent 18adfa80b4
commit bd09f3369c
7 changed files with 624 additions and 1 deletions
@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1200" role="img" aria-labelledby="title desc">
+  <title id="title">Ошибка формы как согласованное состояние</title>
+  <desc id="desc">Вертикальная схема показывает путь submit, валидации, состояния ошибки, выбранной точки фокуса и последующей ручной браузерной проверки.</desc>
+  <rect width="720" height="1200" fill="#0f172a"/>
+  <rect x="42" y="34" width="636" height="112" rx="18" fill="#7c2d12"/>
+  <text x="360" y="80" text-anchor="middle" fill="#ffffff" font-size="28" font-family="Arial, sans-serif" font-weight="700">Ошибка формы — согласованное состояние</text>
+  <text x="360" y="116" text-anchor="middle" fill="#ffedd5" font-size="21" font-family="Arial, sans-serif">Красная рамка не заменяет текст ошибки</text>
+
+  <rect x="85" y="190" width="550" height="94" rx="18" fill="#1e3a5f" stroke="#60a5fa" stroke-width="3"/>
+  <text x="360" y="230" text-anchor="middle" fill="#ffffff" font-size="27" font-family="Arial, sans-serif" font-weight="700">1. Submit</text>
+  <text x="360" y="262" text-anchor="middle" fill="#dbeafe" font-size="21" font-family="Arial, sans-serif">пользователь завершил действие</text>
+  <path d="M360 284v40" stroke="#facc15" stroke-width="5" marker-end="url(#arrow)"/>
+
+  <rect x="85" y="330" width="550" height="94" rx="18" fill="#3f3108" stroke="#facc15" stroke-width="3"/>
+  <text x="360" y="370" text-anchor="middle" fill="#ffffff" font-size="27" font-family="Arial, sans-serif" font-weight="700">2. Валидация</text>
+  <text x="360" y="402" text-anchor="middle" fill="#fef3c7" font-size="21" font-family="Arial, sans-serif">есть ли конкретная ошибка поля?</text>
+  <path d="M360 424v40" stroke="#facc15" stroke-width="5" marker-end="url(#arrow)"/>
+
+  <rect x="85" y="470" width="550" height="148" rx="18" fill="#7f1d1d" stroke="#fca5a5" stroke-width="3"/>
+  <text x="360" y="514" text-anchor="middle" fill="#ffffff" font-size="27" font-family="Arial, sans-serif" font-weight="700">3. Error state</text>
+  <text x="360" y="550" text-anchor="middle" fill="#fee2e2" font-size="22" font-family="Arial, sans-serif">видимый текст ошибки</text>
+  <text x="360" y="582" text-anchor="middle" fill="#fee2e2" font-size="22" font-family="Arial, sans-serif">aria-invalid=true; связь с описанием</text>
+  <path d="M360 618v42" stroke="#67e8f9" stroke-width="5" marker-end="url(#arrow)"/>
+
+  <rect x="85" y="666" width="550" height="120" rx="18" fill="#0f766e" stroke="#5eead4" stroke-width="3"/>
+  <text x="360" y="708" text-anchor="middle" fill="#ffffff" font-size="27" font-family="Arial, sans-serif" font-weight="700">4. Выбранная точка фокуса</text>
+  <text x="360" y="744" text-anchor="middle" fill="#ccfbf1" font-size="22" font-family="Arial, sans-serif">первое неверное поле или summary</text>
+  <text x="360" y="774" text-anchor="middle" fill="#ccfbf1" font-size="20" font-family="Arial, sans-serif">решение фиксируется в сценарии страницы</text>
+  <path d="M360 786v42" stroke="#67e8f9" stroke-width="5" marker-end="url(#arrow)"/>
+
+  <rect x="65" y="834" width="590" height="168" rx="18" fill="#164e63" stroke="#67e8f9" stroke-width="3"/>
+  <text x="360" y="878" text-anchor="middle" fill="#ffffff" font-size="27" font-family="Arial, sans-serif" font-weight="700">5. Проверка в браузере</text>
+  <text x="360" y="916" text-anchor="middle" fill="#cffafe" font-size="23" font-family="Arial, sans-serif">Tab / Shift+Tab · visible focus</text>
+  <text x="360" y="950" text-anchor="middle" fill="#cffafe" font-size="23" font-family="Arial, sans-serif">name, role и error state в tree</text>
+  <text x="360" y="982" text-anchor="middle" fill="#a5f3fc" font-size="20" font-family="Arial, sans-serif">выбранный browser и реальная форма</text>
+
+  <rect x="65" y="1060" width="590" height="84" rx="16" fill="#334155" stroke="#94a3b8" stroke-width="3"/>
+  <text x="360" y="1097" text-anchor="middle" fill="#f8fafc" font-size="25" font-family="Arial, sans-serif" font-weight="700">Screen reader — отдельный прогон</text>
+  <text x="360" y="1127" text-anchor="middle" fill="#cbd5e1" font-size="21" font-family="Arial, sans-serif">схема его не заменяет</text>
+
+  <defs>
+    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+      <path d="M0 0L10 5L0 10z" fill="#67e8f9"/>
+    </marker>
+  </defs>
+</svg>