의미 있는 요소와 키보드 조작으로 더 많은 사용자가 이용할 수 있는 문서를 만듭니다.
접근성의 출발점은 역할에 맞는 기본 HTML 요소입니다. 클릭 동작에는 div보다 button을 쓰면 키보드 포커스와 Enter·Space 동작을 기본으로 얻습니다. 제목 순서, landmark, 대체 텍스트, label을 올바르게 작성한 뒤 HTML만으로 부족할 때 ARIA를 보완합니다.
예제에서는 <button type="button">재생</button> 부분부터 찾으세요. 태그 이름만 외우기보다 부모·자식 관계와 속성이 어느 요소에 붙는지를 한 덩어리로 읽으면 구조를 고치기 쉬워집니다.
마우스를 쓰지 않거나 화면을 보지 않는 사용자도 같은 정보와 기능에 도달하게 만드는 문서 구조입니다. ARIA를 더하기 전에 알맞은 기본 요소가 있는지부터 살펴보세요.
먼저 현재 결과를 확인한 뒤 Tab 키만 사용해 버튼과 링크를 이동하고 현재 위치가 보이는지 확인하세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.
기본 button을 div role=button으로 다시 만들면 키보드와 비활성 상태까지 직접 구현해야 합니다. 가능한 경우 네이티브 요소를 우선하세요.
직접 바꿔보세요Tab 키만 사용해 버튼과 링크를 이동하고 현재 위치가 보이는지 확인하세요.