스테인리스 텀블러
19,000원
8장 규칙 파일이 있을 때와 없을 때
규칙 파일 없음
[상품 사진]
스테인리스 텀블러
19,000원
div onclick · img alt 없음 · 제목은 div
Tab 도달 불가 — 스크린리더에 침묵
규칙 파일 있음
article · alt 제공 · h3 안의 링크
클릭 영역은 CSS로 카드 전체 확장
「규칙 파일 없음」이 의도적으로 잘못 만든 교보재입니다.
겉모습은 「규칙 파일 있음」과 똑같지만 <div onclick>이라
Tab으로 도달할 수 없고, 사진에 설명이 없으며, 제목도 제목 요소가 아닙니다.
같은 요청을 두 번 했습니다. 한 번은 규칙 파일이 없는 프로젝트에서, 한 번은 규칙 파일이 있는 프로젝트에서. 요청 문장은 한 글자도 다르지 않았습니다.
이 페이지는 접근성 검사 도구의 실습 대상이기도 합니다. 제목 요소와 랜드마크를 일부러 넣지 않아서, 검사를 돌리면 "h1 없음"과 "랜드마크 없음"이 함께 잡힙니다. 책 22장에서 이 검사 결과를 읽습니다.
상품 상세
카드를 눌러 도착하는 자리입니다. 실제 서비스라면 상품 상세 페이지가 열립니다. 「규칙 파일 있음」의 카드는 Tab으로 링크에 도달한 뒤 Enter로도 여기에 올 수 있지만, 「규칙 파일 없음」의 카드는 마우스로만 올 수 있습니다.