Semantic to accessibility

보이는 화면과 읽히는 구조를 같은 순서로 맞추기

시맨틱 HTML은 보조 기술이 영역, 이름, 조작 흐름을 이해하도록 만드는 설계입니다.

영역을 알리는 태그

header, nav, main페이지의 큰 구역을 landmark로 드러냅니다.
article, section, aside독립 콘텐츠, 주제 묶음, 보조 정보를 구분합니다.

이름을 주는 속성

alt와 링크 텍스트이미지 의미와 이동 목적을 텍스트로 남깁니다.
label forid입력 필드가 무엇을 받는지 명확히 연결합니다.

조작을 유지하는 흐름

네이티브 요소버튼, 링크, 입력 필드는 기본 키보드 조작을 가집니다.
자연스러운 순서문서 순서와 탭 이동 순서가 같은 흐름을 따라야 합니다.