diff options
| author | eunhhu <[email protected]> | 2026-09-28 13:10:25 +0100 |
|---|---|---|
| committer | eunhhu <[email protected]> | 2026-09-28 13:10:25 +0100 |
| commit | 0e9a48699dac240665ecea96b9a244dbde5dcac8 (patch) | |
| tree | 954b83f484de982a6570799e7ca63c4df0c60bd7 /docs/design | |
| parent | 202e6bf4677565c0cfbef5340119d0f9674bf17d (diff) | |
| download | vega-0e9a48699dac240665ecea96b9a244dbde5dcac8.tar.gz vega-0e9a48699dac240665ecea96b9a244dbde5dcac8.zip | |
Make the web surface accessible the way the say surface is, checked in Chromium's accessibility tree
Lists are listboxes that keep the keyboard focus, the focused row their
active descendant, each option with its place in the whole list though
only the visible rows are drawn; tables are grids with row indices;
tones other than normal and muted are said, not only coloured; keys are
named buttons. The page now updates in place instead of rebuilding each
list, so the focus a screen reader follows survives every redraw. The
browser test reads Chromium's accessibility tree: roles, names, focus,
selection and the active descendant moving within the same list.
Diffstat (limited to 'docs/design')
| -rw-r--r-- | docs/design/004-text.md | 25 |
1 files changed, 25 insertions, 0 deletions
diff --git a/docs/design/004-text.md b/docs/design/004-text.md index 3e4dc99..e86f590 100644 --- a/docs/design/004-text.md +++ b/docs/design/004-text.md @@ -150,3 +150,28 @@ advance, 오프셋 가운데 하나라도 다른 실행이 있으면 파일을 � `vega-symbols paragraph`는 문단을 짜서 심볼로 그린다. 라틴(ffi·fi·fj 합자, AVAWA 커닝), 아랍(연결, lam-alef, 부호, 오른쪽 맞춤과 줄 사이의 순서), 히브리 부호, 섞인 문장(왼쪽에서 오른쪽 문장 안의 아랍 낱말과 괄호, 숫자)을 눈으로도 확인했다. +## 접근성: 웹 + +웹 표면은 말하기 표면(NUI)이 말하는 것을 화면 낭독기에도 준다. + +- 목록은 listbox다. 키보드 포커스를 가진 채로 남고, 포커스된 행이 그 목록의 활성 자손(`aria-activedescendant`)이다. + 화면 낭독기는 목록 안에서 선택이 옮겨 가는 것을 따라 읽는다. +- 페이지는 들어가는 행만 그린다. 그래서 각 선택지가 목록 전체에서의 자리(`aria-posinset`, `aria-setsize`)를 안다. 천 개 + 가운데 열두 개가 보여도 "12 가운데 3"이 아니라 "1000 가운데 437"로 읽힌다. +- 표는 grid다. 행이 전체에서의 번호(`aria-rowindex`, `aria-rowcount`)를 가진다. +- 보통과 흐림이 아닌 어조(강조, 좋음, 경고, 위험)는 색만이 아니라 말로도 붙는다. 말하기 표면과 같은 규칙이다. +- 키는 이름 있는 단추다(`aria-keyshortcuts`). 글 입력은 그 입력의 이름을 가진다. +- 다시 그릴 때 요소를 새로 만들지 않고 제자리에서 고친다. 전에는 갱신마다 목록을 새로 만들어 화면 낭독기가 쫓던 포커스가 + 사라졌다(초마다 바뀌는 필드 하나가 목록을 초마다 다시 읽게 했다). + +확인은 Chromium의 접근성 트리로 한다(`tests/browser.mjs`, DevTools 프로토콜의 `Accessibility.getFullAXTree`). + +- 제목이 수준 1의 heading이다. +- 목록이 뷰 이름을 가진 listbox이고 포커스를 가진다. +- 선택지가 할 일들이고, 포커스된 것이 선택되어 활성 자손이다. +- 위 화살표 뒤에도 같은 목록 노드가 포커스를 가진 채 활성 자손만 옮긴다. +- 추가한 할 일이 "4 가운데 4"이다. +- 한 일은 이름에 "done"이 들어간다. + +집합 안의 자리는 DevTools 트리에 없어서, Chromium이 플랫폼 접근성 API로 넘기는 속성으로 본다. + |
