Semantic + A11y

의미가 먼저, 속성은 그다음

태그 선택으로 구조를 드러내고, 이름과 초점 이동을 확인하면 보조 기술이 같은 흐름을 읽을 수 있습니다.

  1. 1 랜드마크 구조 header, main, nav, article로 영역을 나눕니다.
  2. 2 이름 label, alt, 링크 텍스트가 목적을 설명합니다.
  3. 3 초점 버튼과 입력 요소는 Tab 순서로 자연스럽게 이동합니다.
  4. 4 보완 복잡한 위젯에서만 ARIA 상태를 덧붙입니다.
마크업 기준 화면을 꾸미기 전에 문서의 제목 계층과 landmark가 설명됩니다.
주의할 지점 div에 role을 붙이기보다 button, input, nav 같은 기본 요소를 우선합니다.