접근성 트리 소개
스크린 리더 사용자만을 위한 사용자 인터페이스를 빌드한다고 가정해 보겠습니다. 여기에서는 시각적 UI를 만들 필요가 전혀 없으며 스크린 리더가 사용할 수 있는 충분한 정보만 제공하면 됩니다.
DOM API와 유사하게 페이지 구조를 설명하는 일종의 API를 만들게 되지만, 많은 정보가 시각적 표현에만 유용하므로 더 적은 정보와 더 적은 노드로도 충분합니다. 다음과 같이 표시될 수 있습니다.
이는 기본적으로 브라우저가 스크린 리더에 실제로 표시하는 내용입니다. 브라우저는 DOM 트리를 가져와 보조 기술에 유용한 형식으로 수정합니다. 이 수정된 트리를 접근성 트리라고 합니다.
접근성 트리는 90년대의 오래된 웹페이지와 약간 비슷하게 보일 수 있습니다. 몇 개의 이미지, 많은 링크, 필드와 버튼이 있을 수 있습니다.
이 경우와 같이 페이지를 시각적으로 스캔하면 스크린 리더 사용자가 얻는 것과 유사한 경험을 얻을 수 있습니다. 인터페이스가 있지만 접근성 트리 인터페이스와 마찬가지로 간단하고 직접적입니다.
접근성 트리는 대부분의 보조 기술이 상호작용하는 대상입니다. 흐름은 다음과 같습니다.
- 애플리케이션(브라우저 또는 기타 앱)은 API를 통해 UI의 시맨틱 버전을 보조 기술에 노출합니다.
- 보조 기술은 API를 통해 읽은 정보를 사용하여 사용자를 위한 대체 사용자 인터페이스 프레젠테이션을 만들 수 있습니다. 예를 들어 스크린 리더는 사용자가 앱의 음성 표현을 듣는 인터페이스를 만듭니다.
- 보조 기술을 사용하면 사용자가 다른 방식으로 앱과 상호작용할 수도 있습니다. 예를 들어 대부분의 스크린 리더는 사용자가 마우스 클릭이나 손가락 탭을 쉽게 시뮬레이션할 수 있도록 후크를 제공합니다.
- 보조 기술은 Accessibility API를 통해 사용자 의도(예: '클릭')를 앱에 다시 전달합니다. 그러면 앱은 원래 UI의 컨텍스트에서 작업을 적절하게 해석해야 합니다.
웹브라우저의 경우 브라우저가 실제로 내부에서 실행되는 웹 앱의 플랫폼이므로 각 방향에 추가 단계가 있습니다. 따라서 브라우저는 웹 앱을 접근성 트리로 변환해야 하며, 보조 기술에서 들어오는 사용자 작업에 따라 JavaScript에서 적절한 이벤트가 실행되도록 해야 합니다.
하지만 이는 모두 브라우저의 책임입니다. 웹 개발자의 역할은 이러한 과정이 진행되고 있음을 인식하고 이 과정을 활용하여 사용자가 접근 가능한 환경을 만드는 웹페이지를 개발하는 것입니다.
이를 위해 페이지의 의미론을 올바르게 표현합니다. 즉, 페이지의 중요한 요소에 올바른 액세스 가능한 역할, 상태, 속성이 있고 액세스 가능한 이름과 설명을 지정합니다. 그러면 브라우저에서 보조 기술이 해당 정보에 액세스하여 맞춤설정된 환경을 만들 수 있습니다.
네이티브 HTML의 시맨틱
DOM의 대부분은 암시적 시맨틱 의미를 가지므로 브라우저는 DOM 트리를 접근성 트리로 변환할 수 있습니다. 즉, DOM은 브라우저에서 인식되고 다양한 플랫폼에서 예측 가능하게 작동하는 네이티브 HTML 요소를 사용합니다. 따라서 링크나 버튼과 같은 기본 HTML 요소의 접근성은 자동으로 처리됩니다. 페이지 요소의 시맨틱을 표현하는 HTML을 작성하여 기본 제공되는 접근성을 활용할 수 있습니다.
하지만 기본 요소처럼 보이지만 실제로는 그렇지 않은 요소를 사용하는 경우도 있습니다. 예를 들어 이 '버튼'은 버튼이 아닙니다.
HTML로 구성하는 방법은 여러 가지가 있으며, 그중 한 가지 방법은 다음과 같습니다.
<div class="button-ish">Give me tacos</div>
실제 버튼 요소를 사용하지 않으면 스크린 리더는 무엇에 도달했는지 알 수 없습니다. 또한 현재 코딩된 상태로는 마우스로만 사용할 수 있으므로 키보드만 사용하는 사용자가 사용할 수 있도록 tabindex를 추가하는 추가 작업을 해야 합니다.
div 대신 일반 button 요소를 사용하면 이 문제를 쉽게 해결할 수 있습니다.
네이티브 요소를 사용하면 키보드 상호작용을 처리할 수 있다는 이점도 있습니다. 그리고 네이티브 요소를 사용한다고 해서 멋진 시각 효과를 잃을 필요는 없습니다. 네이티브 요소의 스타일을 지정하여 원하는 방식으로 보이게 하면서도 암시적 의미와 동작을 유지할 수 있습니다.
앞서 스크린 리더가 요소의 역할, 이름, 상태, 값을 알린다고 언급했습니다. 올바른 시맨틱 요소를 사용하면 역할, 상태, 값이 처리되지만 요소의 이름을 검색할 수 있도록 해야 합니다.
크게 두 가지 유형의 이름이 있습니다.
- 표시되는 라벨: 모든 사용자가 요소에 의미를 연결하는 데 사용됩니다.
- 텍스트 대체: 시각적 라벨이 필요하지 않은 경우에만 사용됩니다.
텍스트 수준 요소의 경우 정의상 일부 텍스트 콘텐츠가 있으므로 아무것도 할 필요가 없습니다. 하지만 입력 또는 제어 요소와 이미지와 같은 시각적 콘텐츠의 경우 이름을 지정해야 합니다. 실제로 텍스트가 아닌 콘텐츠에 대체 텍스트를 제공하는 것은 WebAIM 체크리스트의 첫 번째 항목입니다.
이를 위한 한 가지 방법은 '양식 입력에 연결된 텍스트 라벨이 있습니다'라는 권장사항을 따르는 것입니다. 체크박스와 같은 양식 요소에 라벨을 연결하는 방법에는 두 가지가 있습니다. 두 방법 모두 라벨 텍스트를 체크박스의 클릭 타겟으로 만들며, 이는 마우스 또는 터치스크린 사용자에게도 유용합니다. 라벨을 요소와 연결하려면 다음 중 하나를 실행합니다.
- 라벨 요소 내에 입력 요소 배치
<label>
<input type="checkbox">Receive promotional offers?
</label>또는
- 라벨의
for속성을 사용하고 요소의id를 참조합니다.
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>
체크박스에 라벨이 올바르게 지정되면 스크린 리더는 요소에 체크박스 역할이 있고, 선택된 상태이며, 이름이 '프로모션 혜택을 받으시겠습니까?'라고 보고할 수 있습니다.
