HTML and Accessibility Check

<div onclick="save()">저장</div> 이 <button> 에 비해 잃는 것이 아닌 것은?

• Tab 키로 포커스가 들어가는 것
• Enter 나 Space 로도 눌리는 것
• 글자 색과 여백 같은 겉모습
• 스크린리더가 '버튼' 이라고 읽어 주는 것

alt 속성을 아예 빼는 것과 alt="" 의 차이는?

• 둘 다 스크린리더가 조용히 건너뛴다
• 빼면 스크린리더가 파일명을 읽고, 비우면 조용히 건너뛴다
• 빼면 HTML 검사에서 오류로 잡혀 렌더가 멈춘다
• 비우면 이미지 자체가 렌더되지 않는다

제목 태그(h1~h6)를 고르는 기준은?

• 문서의 목차에서 차지하는 자리
• 원하는 글자 크기에 맞춰서
• 디자인 시안에서 지정한 색
• 그 문단이 얼마나 중요한지

placeholder 만 두고 label 을 생략하면?

• 입력하면 사라져서 무엇을 쓰는 칸이었는지 알 수 없게 된다
• 라벨과 똑같이 동작해서 문제없다
• label 이 없으면 폼 제출이 막힌다
• 브라우저 자동완성이 대신 켜진다

링크와 버튼을 가르는 기준은?

• 겉모습이 버튼처럼 생겼는가
• 폼 안에 있으면 버튼, 밖이면 링크
• 자바스크립트가 필요하면 버튼
• 주소가 바뀌면 링크, 상태가 바뀌면 버튼

role="button" 을 div 에 붙이면?

• 브라우저가 진짜 버튼으로 취급한다
• Tab 포커스가 자동으로 생긴다
• 겉보기 이름만 바뀌고 키보드 조작은 생기지 않는다
• 폼 안에 두면 제출 버튼이 된다

자동 접근성 검사 도구에 대한 현실적인 이해는?

• 전부 잡는다
• 문제의 30~40% 정도만 잡는다
• 쓸모없다
• 브라우저에서만 된다