This commit is contained in:
@@ -0,0 +1,41 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1180" role="img" aria-labelledby="title desc">
|
||||
<title id="title">От разметки к вычисленной семантике</title>
|
||||
<desc id="desc">Вертикальная схема сравнивает подпись рядом с полем без связи и нативную пару label input; в браузере проверяются role, name и description.</desc>
|
||||
<rect width="720" height="1180" fill="#0f172a"/>
|
||||
<rect x="42" y="34" width="636" height="112" rx="18" fill="#312e81"/>
|
||||
<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="#ddd6fe" font-size="21" font-family="Arial, sans-serif">DOM не равен имени и роли control</text>
|
||||
|
||||
<rect x="75" y="190" width="570" height="144" rx="18" fill="#4c1d2b" stroke="#fb7185" stroke-width="3"/>
|
||||
<text x="360" y="234" text-anchor="middle" fill="#ffffff" font-size="27" font-family="Arial, sans-serif" font-weight="700">Видимая подпись рядом</text>
|
||||
<text x="360" y="270" text-anchor="middle" fill="#fecdd3" font-size="22" font-family="Arial, sans-serif">span «Почта» + input type=email</text>
|
||||
<text x="360" y="304" text-anchor="middle" fill="#fecdd3" font-size="22" font-family="Arial, sans-serif">визуальный текст не создаёт name сам</text>
|
||||
<path d="M360 334v44" stroke="#fda4af" stroke-width="5" marker-end="url(#arrow)"/>
|
||||
|
||||
<rect x="75" y="384" width="570" height="126" rx="18" fill="#7f1d1d" stroke="#fca5a5" stroke-width="3"/>
|
||||
<text x="360" y="428" text-anchor="middle" fill="#ffffff" font-size="27" font-family="Arial, sans-serif" font-weight="700">Проверка в браузере</text>
|
||||
<text x="360" y="464" text-anchor="middle" fill="#fee2e2" font-size="23" font-family="Arial, sans-serif">role: textbox · name: пусто</text>
|
||||
<text x="360" y="494" text-anchor="middle" fill="#fee2e2" font-size="20" font-family="Arial, sans-serif">не угадываем результат по DOM-дереву</text>
|
||||
<path d="M360 510v48" stroke="#a7f3d0" stroke-width="5" marker-end="url(#arrow)"/>
|
||||
|
||||
<rect x="75" y="564" width="570" height="144" rx="18" fill="#14532d" stroke="#86efac" stroke-width="3"/>
|
||||
<text x="360" y="608" text-anchor="middle" fill="#ffffff" font-size="27" font-family="Arial, sans-serif" font-weight="700">Связанная нативная разметка</text>
|
||||
<text x="360" y="644" text-anchor="middle" fill="#dcfce7" font-size="22" font-family="Arial, sans-serif">label for=email · input id=email</text>
|
||||
<text x="360" y="678" text-anchor="middle" fill="#dcfce7" font-size="22" font-family="Arial, sans-serif">hint через description при необходимости</text>
|
||||
<path d="M360 708v44" stroke="#a7f3d0" stroke-width="5" marker-end="url(#arrow)"/>
|
||||
|
||||
<rect x="75" y="758" width="570" height="154" rx="18" fill="#0f766e" stroke="#5eead4" stroke-width="3"/>
|
||||
<text x="360" y="802" text-anchor="middle" fill="#ffffff" font-size="27" font-family="Arial, sans-serif" font-weight="700">Проверка в браузере</text>
|
||||
<text x="360" y="840" text-anchor="middle" fill="#ccfbf1" font-size="23" font-family="Arial, sans-serif">role: textbox · name: Почта</text>
|
||||
<text x="360" y="874" text-anchor="middle" fill="#ccfbf1" font-size="23" font-family="Arial, sans-serif">description: подсказка или ошибка</text>
|
||||
|
||||
<rect x="70" y="970" width="580" height="86" rx="16" fill="#334155" stroke="#94a3b8" stroke-width="3"/>
|
||||
<text x="360" y="1008" text-anchor="middle" fill="#f8fafc" font-size="24" font-family="Arial, sans-serif" font-weight="700">Tree помогает диагностике</text>
|
||||
<text x="360" y="1038" text-anchor="middle" fill="#cbd5e1" font-size="20" font-family="Arial, sans-serif">но не заменяет ручной keyboard-check</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="#a7f3d0"/>
|
||||
</marker>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
@@ -0,0 +1,45 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1160" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Клавиатурный маршрут одной формы</title>
|
||||
<desc id="desc">Вертикальная схема показывает четыре проверяемых шага: видимый фокус, имя и подсказка поля, согласованная ошибка и ручная проверка в выбранном браузере.</desc>
|
||||
<rect width="720" height="1160" fill="#0f172a"/>
|
||||
<rect x="42" y="34" width="636" height="112" rx="18" fill="#164e63"/>
|
||||
<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="#cffafe" font-size="21" font-family="Arial, sans-serif">Проверяем путь, а не только DOM</text>
|
||||
|
||||
<rect x="86" y="190" width="548" height="126" rx="18" fill="#1e3a5f" stroke="#60a5fa" stroke-width="3"/>
|
||||
<circle cx="132" cy="252" r="23" fill="#60a5fa"/>
|
||||
<text x="132" y="260" text-anchor="middle" fill="#0f172a" font-size="22" font-family="Arial, sans-serif" font-weight="700">1</text>
|
||||
<text x="180" y="242" fill="#ffffff" font-size="27" font-family="Arial, sans-serif" font-weight="700">Tab: фокус виден</text>
|
||||
<text x="180" y="278" fill="#cbd5e1" font-size="22" font-family="Arial, sans-serif">не теряется и не уходит под декор</text>
|
||||
<path d="M360 316v44" stroke="#5eead4" stroke-width="5" marker-end="url(#arrow)"/>
|
||||
|
||||
<rect x="86" y="366" width="548" height="126" rx="18" fill="#3f3108" stroke="#facc15" stroke-width="3"/>
|
||||
<circle cx="132" cy="428" r="23" fill="#facc15"/>
|
||||
<text x="132" y="436" text-anchor="middle" fill="#1f2937" font-size="22" font-family="Arial, sans-serif" font-weight="700">2</text>
|
||||
<text x="180" y="418" fill="#ffffff" font-size="27" font-family="Arial, sans-serif" font-weight="700">Поле: есть name и hint</text>
|
||||
<text x="180" y="454" fill="#fef3c7" font-size="22" font-family="Arial, sans-serif">label называет control; hint поясняет</text>
|
||||
<path d="M360 492v44" stroke="#5eead4" stroke-width="5" marker-end="url(#arrow)"/>
|
||||
|
||||
<rect x="86" y="542" width="548" height="126" rx="18" fill="#4c1d2b" stroke="#fb7185" stroke-width="3"/>
|
||||
<circle cx="132" cy="604" r="23" fill="#fb7185"/>
|
||||
<text x="132" y="612" text-anchor="middle" fill="#1f2937" font-size="22" font-family="Arial, sans-serif" font-weight="700">3</text>
|
||||
<text x="180" y="594" fill="#ffffff" font-size="27" font-family="Arial, sans-serif" font-weight="700">Submit: ошибка связана</text>
|
||||
<text x="180" y="630" fill="#fecdd3" font-size="22" font-family="Arial, sans-serif">текст, aria-invalid и фокус меняются вместе</text>
|
||||
<path d="M360 668v44" stroke="#5eead4" stroke-width="5" marker-end="url(#arrow)"/>
|
||||
|
||||
<rect x="70" y="718" width="580" height="174" rx="18" fill="#164e63" stroke="#67e8f9" stroke-width="3"/>
|
||||
<text x="360" y="764" text-anchor="middle" fill="#ffffff" font-size="27" font-family="Arial, sans-serif" font-weight="700">4. Проверка в браузере</text>
|
||||
<text x="360" y="806" text-anchor="middle" fill="#cffafe" font-size="23" font-family="Arial, sans-serif">Tab и Shift+Tab: фокус не теряется</text>
|
||||
<text x="360" y="842" text-anchor="middle" fill="#cffafe" font-size="23" font-family="Arial, sans-serif">Accessibility tree: name, role, state</text>
|
||||
<text x="360" y="874" text-anchor="middle" fill="#a5f3fc" font-size="20" font-family="Arial, sans-serif">в выбранном браузере и на реальной странице</text>
|
||||
|
||||
<rect x="70" y="950" width="580" height="104" rx="16" fill="#334155" stroke="#94a3b8" stroke-width="3"/>
|
||||
<text x="360" y="992" text-anchor="middle" fill="#f8fafc" font-size="24" font-family="Arial, sans-serif" font-weight="700">Screen reader — отдельный эксперимент</text>
|
||||
<text x="360" y="1024" text-anchor="middle" fill="#cbd5e1" font-size="20" 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="#5eead4"/>
|
||||
</marker>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
Reference in New Issue
Block a user