ARIA and the Accessibility Tree Check

스크린리더가 실제로 읽는 것은 무엇입니까?

• 화면에 그려진 픽셀을 문자 인식으로 읽은 결과
• CSS 가 적용되기 전의 원본 HTML 문자열
• 브라우저가 DOM 에서 따로 만든 접근성 트리
• 자바스크립트가 마지막으로 갱신한 DOM 노드 목록

<ul role="presentation"> 을 쓰면 무엇이 달라집니까?

• 점만 사라지고 목록이라는 안내는 그대로 남는다
• 목록이라는 의미가 사라져 '항목 다섯 개' 안내가 없어진다
• 안의 li 가 전부 초점을 받을 수 있게 된다
• 브라우저가 자동으로 role="list" 로 되돌린다

패널을 열었는데 aria-expanded 가 계속 false 입니다. 결과는?

• 브라우저가 실제 상태를 보고 자동으로 고쳐 준다
• 패널이 열리지 않고 닫힌 채로 유지된다
• 콘솔에 접근성 경고가 찍혀 배포 전에 잡힌다
• 눈으로는 열린 화면이고 보조기기에는 닫힌 화면이 된다

aria-labelledby="title-7" 인데 문서에 그 id 가 없습니다. 어떻게 됩니까?

• 조용히 무시되고, 다른 후보가 없으면 이름이 없는 요소가 된다
• 브라우저가 콘솔에 참조 오류를 찍어 알려 준다
• 가장 가까운 제목 요소를 대신 이름으로 쓴다
• 요소가 접근성 트리에서 통째로 제외된다

검색 결과 개수를 갱신할 때 읽히게 하려면?

• 결과가 나올 때 role="alert" 인 요소를 새로 만들어 넣는다
• 결과 숫자에 aria-label 을 붙여 매번 값을 바꾼다
• 빈 aria-live="polite" 컨테이너를 미리 두고 그 안의 글자를 바꾼다
• 결과 영역에 tabindex="-1" 을 주고 초점을 옮긴다

ARIA 사용 규칙의 첫 번째는 무엇입니까?

• 모든 대화형 요소에 role 을 명시적으로 붙인다
• 쓸 수 있는 HTML 요소가 있으면 ARIA 대신 그것을 쓴다
• role 을 붙였으면 aria-label 도 반드시 함께 붙인다
• 장식 요소에는 언제나 role="presentation" 을 붙인다