이렇게 확인해보세요
- 마우스에서 손을 떼고 Tab 키로만 이동해보세요. 포커스가 어디 있는지 눈으로 찾을 수 있나요?
- 기준마다 위반 무대와 개선 무대가 나란히 있습니다. 같은 조작을 양쪽에서 해보세요.
- 무대 아래 상태 표시줄이 방금 무슨 일이 있었는지 알려줍니다.
2.4.11
가려지는 포커스
고정 헤더가 있는 영역입니다. 맨 아래 칸까지 Tab으로 내려간 다음, Shift+Tab으로 다시 위로 올라와 보세요. 포커스가 뒤로 갈 때 헤더에 가립니다.
위반 scroll-padding 없음
아래까지 갔다가 Shift+Tab으로 올라와 보세요.
개선 scroll-padding-top: 56px
같은 순서로 해보세요. 이쪽은 가리지 않습니다.
2.5.7
드래그 대안
위쪽 목록은 드래그로만 순서를 바꿀 수 있습니다. 키보드로 시도해보세요. 아래쪽은 버튼으로도 됩니다.
위반 드래그 전용
- 보고서 초안
- 예산 검토
- 발표 자료
끌어서 옮기는 건 됩니다. 그런데 그 방법뿐입니다 — 키보드로는 닿을 수가 없고, 터치 기기에서는 HTML 드래그가 아예 동작하지 않습니다.
개선 드래그 + 버튼 대안
- 보고서 초안
- 예산 검토
- 발표 자료
버튼을 눌러 순서를 바꿔보세요.
2.5.8
타겟 크기 24×24
두 줄 모두 글자 크기는 같습니다. 아래쪽은 패딩으로 누를 수 있는 영역만 넓혔어요. 폰에서 눌러보면 차이가 확실합니다.
위반 16×16px, 간격 2px
기준 미달입니다. 크기도 간격도 24px에 못 미칩니다.
개선 패딩으로 24×24 확보
기준 충족. 글자는 그대로 두고 누르는 영역만 24px로 넓혔습니다.
3.3.7
재입력 요구 안 하기
주문서에서 자주 보는 화면입니다. 배송지가 주문자와 같을 때 다시 타이핑하게 만들면 이 기준에 걸립니다.
개선 체크 한 번으로 채우기
체크박스를 눌러보세요.