접근성 트리 소개
스크린 리더 사용자 전용의 사용자 인터페이스를 빌드한다고 가정해 보겠습니다. 여기서는 시각적 UI를 전혀 만들 필요는 없지만 스크린 리더에서 사용할 수 있는 정보만 제공하면 됩니다.
DOM API와 유사한 페이지 구조를 설명하는 일종의 API를 만들게 되지만, 시각적 표현에만 유용한 정보는 더 적게, 노드도 더 적게 사용하여 만들 수 있습니다. 이렇게 보일 수 있습니다.
이것이 기본적으로 브라우저가 스크린 리더에 실제로 제공하는 내용입니다. 브라우저는 DOM 트리를 가져와 보조 기술에 유용한 형태로 수정합니다. 이렇게 수정된 트리를 Accessibility Tree라고 합니다.
접근성 트리를 이미지 몇 개, 다수의 링크, 입력란과 버튼으로 구성된 90년대의 오래된 웹페이지와 비슷하게 시각화할 수 있습니다.
이와 같은 페이지를 시각적으로 검색하면 스크린 리더 사용자에게 표시되는 것과 유사한 환경이 제공됩니다. 인터페이스는 있지만 접근성 트리 인터페이스처럼 간단하고 직접적입니다.
대부분의 보조 기술은 접근성 트리와 상호 작용합니다. 다음과 같이 진행됩니다.
- 애플리케이션 (브라우저 또는 기타 앱)은 API를 통해 UI의 시맨틱 버전을 보조 기술에 노출합니다.
- 보조 기술은 API를 통해 읽은 정보를 사용하여 사용자를 위한 대체 사용자 인터페이스 표시를 만들 수 있습니다. 예를 들어 스크린 리더는 사용자가 앱의 표현을 들을 수 있는 인터페이스를 만듭니다.
- 보조 기술을 통해 사용자는 다른 방식으로 앱과 상호작용할 수도 있습니다. 예를 들어 대부분의 스크린 리더는 사용자가 마우스 클릭 또는 손가락 탭을 쉽게 시뮬레이션할 수 있는 후크를 제공합니다.
- 보조 기술은 접근성 API를 통해 사용자 인텐트 (예: '클릭')를 앱으로 다시 전달합니다. 그러면 앱은 원래 UI의 컨텍스트에 맞게 작업을 적절하게 해석해야 합니다.
웹브라우저의 경우 브라우저가 실제로 브라우저 내에서 실행되는 웹 앱의 플랫폼이므로 각 방향으로 추가 단계가 있습니다. 따라서 브라우저는 웹 앱을 접근성 트리로 변환해야 하며 보조 기술에서 발생하는 사용자 작업을 기반으로 자바스크립트에서 적절한 이벤트가 실행되는지 확인해야 합니다.
그러나 그것은 모두 브라우저가 할 일입니다. 웹 개발자로서 해야 할 일은 단지 이 문제가 발생한다는 사실을 인식하고 이 프로세스를 활용하여 사용자에게 액세스 가능한 환경을 제공하는 웹페이지를 개발하는 것입니다.
이를 위해 Google은 페이지의 의미 체계를 올바르게 표현합니다. 즉, 페이지의 중요한 요소에 액세스 가능한 올바른 역할, 상태, 속성이 있고 액세스 가능한 이름과 설명을 지정해야 합니다. 그러면 브라우저에서 보조 기술이 정보에 액세스하여 맞춤설정된 환경을 만들도록 허용할 수 있습니다.
네이티브 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>
체크박스에 라벨이 올바르게 지정되면 스크린 리더는 요소가 체크박스 역할을 하고, 선택된 상태이며, 이름이 '프로모션 코드를 받으시겠습니까?'라고 보고할 수 있습니다.
