ARIA 와 접근성 트리 확인

문항 6개. 정답과 해설은 풀어 본 뒤에 보여 드립니다.

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

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

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

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

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

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

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

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

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

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

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

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