telexed ~ c / 255e36b7-984radar:40 · otherLIVE
← 피드로
NO.
#255e36b7
분야
기타
출처
GeekNews
게재
2026-05-17 10:42:09
중요도
★ 4/10 — radar 40
`HTML` 목록은 모양이 아니라 의미로 고른다
FIG-2551:1

`HTML` 목록은 모양이 아니라 의미로 고른다

Choose `HTML` Lists by Semantics, Not Appearance

목록 태그는 스타일링 편의가 아니라 상호작용 계약이다. select, datalist, 순서·설명·메뉴 목록을 제대로 나누면 접근성 부채를 초기에 줄인다.

[ 요점 ]
  1. 고정 선택지는 select/option, 제안형 입력은 datalist가 맞다. 비슷해 보여도 입력 자유도가 다르다.
  2. 순서·비순서·설명·메뉴·컨트롤 목록은 각자 의미가 다름. 시각 표현은 CSS로 바꾸는 쪽이 안전하다.
  3. 키보드 조작, 스크린리더, 폼 UX가 태그 선택에 묶인다. 출시 후 고치기보다 컴포넌트 작성 시 잡는 게 싸다.
원문news.hada.io/topic?id=29588원문 보기 →

// related