42 lines
4.2 KiB
XML
42 lines
4.2 KiB
XML
<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>
|