46 lines
4.4 KiB
XML
46 lines
4.4 KiB
XML
<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>
|