접근성 트리

접근성 트리 소개

Alice Boxhall
Alice Boxhall
X
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

스크린 리더 사용자 전용 사용자 인터페이스를 빌드한다고 가정해 보겠습니다. 여기서는 시각적 UI를 전혀 만들지 않아도 되지만, 스크린 리더에서 사용할 정보를 선택합니다.

여러분이 만드는 것은 페이지 구조를 설명하는 일종의 API이며, 더 적은 정보와 더 적은 노드로도 벗어날 수 있습니다. 많은 정보가 시각적 표현에만 유용하기 때문이죠. 그것은 이렇게 보일 수 있습니다.

스크린 리더 DOM API 모형

이는 기본적으로 브라우저가 스크린 리더에 실제로 제공하는 내용입니다. 이 브라우저는 DOM 트리를 가져와 보조 기술입니다. 이렇게 수정된 트리를 접근성 기능이라고 합니다. 트리.

접근성 트리를 이전 웹페이지처럼 보이는 것으로 시각화할 수 있습니다. 이미지 몇 개, 링크, 입력란과 버튼 같은 것들이 있었죠.

1990년대 스타일의 웹페이지

이 경우와 같은 페이지를 시각적으로 살펴보면 다음과 유사한 경험을 제공합니다. 스크린 리더 사용자가 얻을 수 있는 것이죠. 인터페이스가 존재하지만 단순함 접근성 트리 인터페이스처럼 직접적인 영향을 줍니다.

접근성 트리는 대부분의 보조 기술이 상호작용하는 요소입니다. 이 이런 식으로 진행됩니다.

  1. 애플리케이션 (브라우저 또는 기타 앱)은 API를 통해 보조 공학에 사용하는 UI입니다.
  2. 보조 기술은 API를 통해 읽은 정보를 사용하여 사용자를 위한 대체 사용자 인터페이스 프레젠테이션을 만듭니다. 예를 들어 스크린 리더는 사용자가 음성을 들을 수 있는 인터페이스를 생성함 앱 표현을 생성합니다.
  3. 또한 보조 기술을 통해 사용자는 기기 내에서 앱과 상호작용할 수도 다르게 말이죠. 예를 들어 대부분의 스크린 리더는 마우스 클릭이나 손가락 탭을 쉽게 시뮬레이션할 수 있습니다.
  4. 보조 기술은 사용자의 의도 (예: '클릭')를 접근성 API를 통해 앱에 액세스할 수 있습니다. 그런 다음 앱은 작업을 원래 UI의 컨텍스트에서 적절하게 해석해야 합니다.

웹 브라우저의 경우 각 방향에 추가 단계가 있습니다. 왜냐하면 브라우저가 실제로 내부에서 실행되는 웹 앱을 위한 플랫폼입니다. 따라서 브라우저는 웹 앱을 접근성 트리로 변환해야 하며, 발생한 사용자 액션에 기반해 자바스크립트에서 적절한 이벤트가 실행됩니다. 보조 기술의 도입으로 이어질 수 있습니다.

그러나 그것은 모두 브라우저가 해야 할 일입니다. 웹 개발자로서 우리가 하는 일은 이 작업이 진행되고 있음을 인식하고 이를 활용하여 이 프로세스의 일환입니다.

이를 위해 페이지의 의미 체계를 올바르게 표현합니다. 페이지의 중요 요소에 적절한 접근성 기능이 그리고 액세스 가능한 이름과 있습니다. 그러면 브라우저에서 보조 테크가 맞춤 환경을 구축할 수 있습니다.

기본 HTML의 시맨틱

브라우저가 DOM 트리를 접근성 트리로 변환할 수 있는 이유는 대부분 DOM은 암시적 의미 체계를 가집니다. 즉, DOM은 기본 HTML을 사용하여 이러한 요소는 브라우저에서 인식되고 다양한 지원합니다 링크나 버튼과 같은 기본 HTML 요소의 접근성은 자동으로 처리됩니다 기본 제공되는 접근성 기능을 활용하면 페이지 요소의 의미 체계를 표현하는 HTML을 작성해야 합니다.

그러나 네이티브 요소처럼 보이지만 그렇지 않은 요소를 사용하는 경우도 있습니다. 예를 들어 이 '버튼' 버튼이 아닙니다.

타코 줘

여러 가지 방법으로 HTML로 구성할 수 있습니다. 한 가지 방법이 아래에 나와 있습니다.

<div class="button-ish">Give me tacos</div>

실제 버튼 요소를 사용하지 않으면 스크린 리더가 확인할 수 있습니다. 또한 URL에 태그를 추가하는 추가 작업을 해야 할 것입니다. tabindex를 사용하여 현재 코딩된 것처럼 키보드만 사용하는 사용자가 만들 수 있습니다.

div 대신 일반 button 요소를 사용하여 이 문제를 쉽게 해결할 수 있습니다. 네이티브 요소를 사용하면 키보드를 처리하는 이점도 있습니다. 우리에게 큰 영향을 미칩니다. 멋진 시각 자료도 잃지 마세요. 사용할 수 있습니다. 네이티브 요소의 스타일을 지정하여 원하는 방식으로 보이게 만들고 암시적 의미 체계와 있습니다.

앞서 스크린 리더는 요소의 역할, 이름, 확인할 수 있습니다 적절한 시맨틱 요소, 역할, 상태, 값 사용 하지만 요소의 이름이 지정되었는지도 확인해야 합니다. 있습니다.

일반적으로 이름에는 두 가지 유형이 있습니다.

  • 표시되는 라벨은 라벨을 사용하여 콘텐츠의 의미를와 연관짓기 위해 모든 사용자가 요소
  • 대체 텍스트: 시각적 요소가 필요하지 않은 경우에만 라벨을 지정합니다.

텍스트 수준 요소의 경우 아무것도 할 필요가 없습니다. 정의상 텍스트 콘텐츠가 있습니다. 하지만 입력 또는 제어 요소 및 이름을 지정해야 합니다 실제로 텍스트 대체 콘텐츠를 제공하는 것이 WebAIM 체크리스트의 첫 번째 항목을 참고하세요.

이를 위한 한 가지 방법은 '양식 입력은 표시됩니다. 라벨을 양식에 연결하는 방법에는 두 가지가 있습니다. 요소(예: 체크박스)에 있습니다. 두 방법 중 하나를 사용하면 라벨 텍스트도 체크박스의 클릭 타겟이 됩니다. 이는 마우스나 사용할 수 있습니다. 라벨을 요소와 연결하려면 다음 중 하나를 수행하세요.

  • 라벨 요소 내에 입력 요소 배치
<label>
    <input type="checkbox">Receive promotional offers?
</label>
<ph type="x-smartling-placeholder">

또는

  • 라벨의 for 속성을 사용하고 요소의 id 참조
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>

체크박스에 라벨이 제대로 지정되면 스크린 리더가 요소가 체크박스 역할이고 선택된 상태이며 이름이 '수신'인 경우 프로모션 코드 사용 여부입니다.

<ph type="x-smartling-placeholder">
</ph> 체크박스에 대해 음성 라벨을 표시하는 VoiceOver의 화면 텍스트 출력