의미 있는 요소와 키보드 조작으로 더 많은 사용자가 이용할 수 있는 문서를 만듭니다.
접근성의 출발점은 역할에 맞는 기본 HTML 요소입니다. 클릭 동작에는 div보다 button을 쓰면 키보드 포커스와 Enter·Space 동작을 기본으로 얻습니다. 제목 순서, landmark, 대체 텍스트, label을 올바르게 작성한 뒤 HTML만으로 부족할 때 ARIA를 보완합니다.
학습 시작 버튼을 누르면 스크립트가 status 문단의 글자를 학습을 시작했습니다로 바꾸고, 이 문단에 aria-live=polite가 있어 화면 읽기 도구는 초점을 옮기지 않고도 바뀐 문장을 읽어 줍니다. Tab으로 버튼과 링크에 도달하면 :focus-visible 규칙의 3px 노란 외곽선이 요소에서 3px 떨어진 자리에 그려지고, 마우스로 클릭할 때는 대개 이 선이 나타나지 않습니다.
마우스를 쓰지 않거나 화면을 보지 않는 사용자도 같은 정보와 기능에 도달하게 만드는 문서 구조입니다. ARIA를 더하기 전에 알맞은 기본 요소가 있는지부터 살펴보세요.
기본 button을 div role=button으로 다시 만들면 키보드와 비활성 상태까지 직접 구현해야 합니다. 가능한 경우 네이티브 요소를 우선하세요.
직접 바꿔보세요Tab 키만 사용해 버튼과 링크를 이동하고 현재 위치가 보이는지 확인하세요.