` 뭉치보다 더 정확한 선택지가 될 수 있음.
- 왜 굳이 시맨틱이 필요하냐는 질문에, 글은 접근성 관점으로 답함
- 중첩 `
`로도 화면은 비슷하게 만들 수 있지만, 브라우저와 보조기술 입장에선 그냥 텍스트 덩어리로 보일 수 있음
- `
`을 쓰면 스크린리더가 '이건 이름-값 목록'이라는 구조를 이해할 여지가 생김
- 사용자는 목록에 몇 개의 그룹이 있는지, 지금 어디쯤 읽고 있는지, 관심 없으면 통째로 건너뛸 수 있는지 같은 탐색 힌트를 받을 수 있음
- 저자는 시맨틱 요소를 고를 때 이런 질문을 던져보라고 함
- '컴퓨터가 이 패턴을 알아볼 수 있다면 사용자에게 어떤 이득이 생길까?'
- 이득이 하나라도 명확하게 떠오르면, 그 패턴은 별도 시맨틱을 가질 후보라는 얘기임
- ``의 경우 스크린리더 경험 개선이 꽤 직접적인 이득으로 제시됨
- 단, 모든 브라우저와 스크린리더 조합에서 지원이 완벽한 건 아님
- 대부분 조합에서는 ``의 장점을 얻을 수 있지만, 보편 지원이라고 말하긴 어렵다고 선을 그음
- 특정 사용 사례에서 fallback이 아쉽다면 `` 같은 대안을 선택할 수도 있음
- 글에서 제일 재밌는 예시는 Dungeons & Dragons 능력치 블록임
- 능력치, 공격, 특성처럼 겉보기엔 서로 다른 UI가 사실상 전부 이름-값 쌍으로 구성돼 있음
- 저자는 한 statblock 안에서 `` 후보를 5개나 봤다고 함
- 이 예시가 좋은 이유는 ``이 단조로운 용어집뿐 아니라 복잡한 정보 카드에도 적용될 수 있다는 걸 보여주기 때문임
---
## 기술 맥락
- 여기서 중요한 선택은 라벨과 값을 `` 두 개로 배치할지, `
`·`- `·`
- `로 의미를 줄지예요. 화면만 보면 둘 다 비슷하지만, 브라우저와 보조기술이 이해하는 구조는 완전히 달라질 수 있거든요.
- `
`을 고르는 이유는 접근성 정보를 HTML 자체에 담을 수 있기 때문이에요. 스크린리더가 이 구조를 목록으로 인식하면 사용자는 항목 개수, 현재 위치, 목록 건너뛰기 같은 탐색상의 도움을 받을 수 있어요.
- 대안으로는 `