huncode/progcode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

revise April 2022 accessible interface articles
Build and deploy / deploy (push) Successful in 14s
Details

Browse Source
This commit is contained in:
huncode
2026-07-31 13:43:17 +03:00
parent f6afaff958
commit fb4d8598ab
7 changed files with 576 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/public/assets/editorial/2022/accessible-interface-diagnosis-rollback-2022.svg
+20
View File
@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 550" role="img" aria-labelledby="title desc">
<title id="title">Диагностика ошибки и обратимого сохранения</title>
<desc id="desc">Схема разделяет invalid value, который не меняет сохранённый канал и возвращает маршрут к Email, и valid save, который сохраняет prior value, возвращает к trigger и разрешает один undo.</desc>
<rect width="900" height="550" fill="#f8fafc"/>
<text x="52" y="62" font-family="Arial, sans-serif" font-size="29" font-weight="700" fill="#102a43">Диагностика: ошибка не должна выглядеть как сохранение</text>
<rect x="52" y="125" width="185" height="84" rx="12" fill="#d9eafd" stroke="#1f5f99" stroke-width="3"/>
<text x="144" y="160" font-family="Arial, sans-serif" font-size="20" font-weight="700" text-anchor="middle" fill="#102a43">Выбор канала</text><text x="144" y="188" font-family="Arial, sans-serif" font-size="17" text-anchor="middle" fill="#334e68">draft value</text>
<path d="M237 167H338M237 167V330H338" fill="none" stroke="#486581" stroke-width="4" marker-end="url(#a)"/>
<rect x="350" y="115" width="240" height="106" rx="12" fill="#fce8e6" stroke="#b42318" stroke-width="3"/>
<text x="470" y="153" font-family="Arial, sans-serif" font-size="20" font-weight="700" text-anchor="middle" fill="#8a1c16">Invalid branch</text><text x="470" y="183" font-family="Arial, sans-serif" font-size="17" text-anchor="middle" fill="#8a1c16">commit: нет; focus: Email</text>
<rect x="350" y="300" width="240" height="106" rx="12" fill="#e4f7ed" stroke="#197149" stroke-width="3"/>
<text x="470" y="338" font-family="Arial, sans-serif" font-size="20" font-weight="700" text-anchor="middle" fill="#0f5132">Valid save</text><text x="470" y="368" font-family="Arial, sans-serif" font-size="17" text-anchor="middle" fill="#0f5132">prior value + return trigger</text>
<path d="M590 353H670" stroke="#197149" stroke-width="4" marker-end="url(#g)"/>
<rect x="682" y="300" width="165" height="106" rx="12" fill="#fff4d6" stroke="#a05a00" stroke-width="3"/>
<text x="764" y="338" font-family="Arial, sans-serif" font-size="20" font-weight="700" text-anchor="middle" fill="#7a4100">One undo</text><text x="764" y="368" font-family="Arial, sans-serif" font-size="17" text-anchor="middle" fill="#7a4100">restore prior value</text>
<text x="470" y="255" font-family="Arial, sans-serif" font-size="18" text-anchor="middle" fill="#486581">проверка допустимого значения до commit</text>
<rect x="52" y="472" width="795" height="43" rx="8" fill="#e9eef5"/>
<text x="450" y="500" font-family="Arial, sans-serif" font-size="17" text-anchor="middle" fill="#334e68">Модель не запускает DOM, клавиатуру, браузер или ассистивную технологию.</text>
<defs><marker id="a" markerWidth="11" markerHeight="11" refX="9" refY="4" orient="auto"><path d="M0,0 L10,4 L0,8 Z" fill="#486581"/></marker><marker id="g" markerWidth="11" markerHeight="11" refX="9" refY="4" orient="auto"><path d="M0,0 L10,4 L0,8 Z" fill="#197149"/></marker></defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

web/public/assets/editorial/2022/accessible-interface-focus-route-2022.svg
+22
View File
@@ -0,0 +1,22 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 530" role="img" aria-labelledby="title desc">
<title id="title">Учебная последовательность фокуса панели уведомлений</title>
<desc id="desc">Кнопка открытия ведёт к Email. Неверный выбор возвращается к Email. Успешное сохранение возвращается к кнопке открытия. Внизу отмечено, что это модельный маршрут, а не наблюдение браузера.</desc>
<rect width="900" height="530" fill="#f8fafc"/>
<text x="54" y="62" font-family="Arial, sans-serif" font-size="29" font-weight="700" fill="#102a43">Маршрут фокуса: одна панель, две ветки</text>
<text x="54" y="94" font-family="Arial, sans-serif" font-size="18" fill="#486581">Проектные labels учебной модели</text>
<g font-family="Arial, sans-serif" font-size="20" font-weight="700" text-anchor="middle">
<rect x="52" y="170" width="188" height="82" rx="12" fill="#d9eafd" stroke="#1f5f99" stroke-width="3"/>
<text x="146" y="203" fill="#102a43">Trigger</text><text x="146" y="230" fill="#102a43">«Настроить»</text>
<rect x="352" y="170" width="188" height="82" rx="12" fill="#e4f7ed" stroke="#197149" stroke-width="3"/>
<text x="446" y="203" fill="#0f5132">Email</text><text x="446" y="230" fill="#0f5132">точка входа</text>
<rect x="652" y="170" width="188" height="82" rx="12" fill="#fff4d6" stroke="#a05a00" stroke-width="3"/>
<text x="746" y="203" fill="#7a4100">Apply</text><text x="746" y="230" fill="#7a4100">«Сохранить»</text>
</g>
<g fill="none" stroke="#1f5f99" stroke-width="4" marker-end="url(#arrow)"><path d="M240 211H336"/><path d="M540 211H636"/><path d="M746 252V340H146V266"/></g>
<g fill="none" stroke="#b42318" stroke-width="4" stroke-dasharray="10 8" marker-end="url(#redArrow)"><path d="M446 266V340H352V266"/></g>
<text x="446" y="304" font-family="Arial, sans-serif" font-size="18" text-anchor="middle" fill="#a61b16">invalid → Email</text>
<text x="446" y="388" font-family="Arial, sans-serif" font-size="18" text-anchor="middle" fill="#1f5f99">save → return to trigger</text>
<rect x="52" y="436" width="788" height="54" rx="9" fill="#e9eef5"/>
<text x="446" y="469" font-family="Arial, sans-serif" font-size="18" text-anchor="middle" fill="#334e68">Модель: DOM не создан, Tab не отправлен, browser focus не наблюдался.</text>
<defs><marker id="arrow" markerWidth="11" markerHeight="11" refX="9" refY="4" orient="auto"><path d="M0,0 L10,4 L0,8 Z" fill="#1f5f99"/></marker><marker id="redArrow" markerWidth="11" markerHeight="11" refX="9" refY="4" orient="auto"><path d="M0,0 L10,4 L0,8 Z" fill="#b42318"/></marker></defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

web/public/assets/editorial/2022/accessible-interface-semantic-contract-2022.svg
+23
View File
@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 550" role="img" aria-labelledby="title desc">
<title id="title">Контракт семантики и состояния интерактивной панели</title>
<desc id="desc">Пять блоков показывают имя и роль trigger, группу вариантов, единый источник визуального и заявленного состояния, кнопку сохранения и заявленный status. Внизу отмечены не наблюдаемые моделью границы.</desc>
<rect width="900" height="550" fill="#fbfcfe"/>
<text x="54" y="60" font-family="Arial, sans-serif" font-size="29" font-weight="700" fill="#102a43">Semantic contract не состоит из одного aria-атрибута</text>
<g font-family="Arial, sans-serif" font-size="18" fill="#102a43">
<rect x="55" y="125" width="235" height="128" rx="12" fill="#d9eafd" stroke="#1f5f99" stroke-width="3"/>
<text x="78" y="160" font-weight="700">Trigger</text><text x="78" y="190">name: «Настроить…»</text><text x="78" y="218">role: button</text>
<rect x="332" y="125" width="235" height="128" rx="12" fill="#e4f7ed" stroke="#197149" stroke-width="3"/>
<text x="355" y="160" font-weight="700">Выбор канала</text><text x="355" y="190">name: «Канал…»</text><text x="355" y="218">role: radiogroup</text>
<rect x="610" y="125" width="235" height="128" rx="12" fill="#fff4d6" stroke="#a05a00" stroke-width="3"/>
<text x="633" y="160" font-weight="700">Apply</text><text x="633" y="190">name: «Сохранить…»</text><text x="633" y="218">role: button</text>
</g>
<path d="M290 189H319M567 189H597" stroke="#486581" stroke-width="4" marker-end="url(#a)"/>
<rect x="185" y="315" width="250" height="105" rx="12" fill="#e9eef5" stroke="#486581" stroke-width="3"/>
<text x="210" y="353" font-family="Arial, sans-serif" font-size="19" font-weight="700" fill="#102a43">Один source of truth</text><text x="210" y="384" font-family="Arial, sans-serif" font-size="18" fill="#334e68">channel → visual + checked</text>
<rect x="505" y="315" width="250" height="105" rx="12" fill="#fce8e6" stroke="#b42318" stroke-width="3"/>
<text x="530" y="353" font-family="Arial, sans-serif" font-size="19" font-weight="700" fill="#8a1c16">Declared status</text><text x="530" y="384" font-family="Arial, sans-serif" font-size="18" fill="#8a1c16">save / undo result text</text>
<path d="M450 253V300H310" fill="none" stroke="#486581" stroke-width="4" marker-end="url(#a)"/><path d="M727 253V300H630" fill="none" stroke="#486581" stroke-width="4" marker-end="url(#a)"/>
<rect x="55" y="467" width="790" height="46" rx="8" fill="#e9eef5"/>
<text x="450" y="497" font-family="Arial, sans-serif" font-size="17" text-anchor="middle" fill="#334e68">За границей модели: DOM, computed accessibility tree и фактическая речь screen reader.</text>
<defs><marker id="a" markerWidth="11" markerHeight="11" refX="9" refY="4" orient="auto"><path d="M0,0 L10,4 L0,8 Z" fill="#486581"/></marker></defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB