Interop 2024: 접근성 포커스 영역에 대해 Chrome 100% 사용

Jocelyn Tran
Jocelyn Tran

Chrome은 올해를 Interop 2024의 접근성 중점 영역 테스트 중 88.2% 를 통과하며 시작했습니다. 2024년 6월에는 테스트 통과율 100% 를 달성한 최초의 기관이 되었습니다. 이 게시물에서는 이 목표를 달성하기 위해 진행된 작업을 설명합니다.

Interop 2024의 모든 주요 영역과 마찬가지로 접근성 영역은 선택한 기능에 관한 일련의 웹 플랫폼 테스트로 정의됩니다. Interop 2024의 테스트는 모든 브라우저가 액세스 가능한 이름과 계산된 역할을 동일한 방식으로 만들도록 하는 것을 목표로 합니다.

액세스 가능한 이름은 HTML 요소의 목적이나 의도를 전달합니다. 이를 통해 사용자는 요소의 용도와 상호작용 방법을 이해할 수 있습니다. accname 사양은 브라우저가 요소에 대한 이러한 접근 가능한 이름 문자열을 만드는 방법을 정의합니다. ARIA 사양에는 이 이름이 계산되는 방법에 관한 둘러보기가 포함되어 있습니다.

요소의 계산된 역할은 브라우저 엔진에서 계산한 요소의 역할을 나타내는 문자열입니다. 이는 주로 개발자 도구와, 예를 들어 WebDriver 함수 getComputedRole에서 상호 운용성 테스트를 사용 설정하는 데 사용됩니다.

Chrome팀은 어떻게 해야 했나요?

두 가지 큰 작업 영역을 완료해야 했습니다. 역할의 일반 역할에 대한 매핑을 변경하고 지원 중단된 역할을 삭제하는 작업이었습니다. 그런 다음 구현할 추가 소규모 수정사항과 기능이 있었습니다. Chrome팀에서 완료한 다음 작업 외에도 Microsoft와 협력하여 접근성 중점 영역과 관련하여 Chromium에 커밋한 수정사항을 처리했습니다.

특정 역할의 매핑을 일반 역할로 변경

매핑을 일반 역할로 변경하면 요소에서 접근성 시맨틱이 삭제됩니다. 일반 요소는 접근성 트리에 값을 제공하지 않으므로 트리에 포함되지 않습니다. 이렇게 하면 성능이 향상되고 보조 기술을 위해 트리를 더 작고 쉽게 파싱할 수 있습니다. 다음 역할은 일반 역할로 변경됩니다.

  • <main> 또는 섹션 콘텐츠 요소 (<article>, <aside>, <nav>, <section>)로 범위가 지정된 <header>
  • <main> 또는 섹션 콘텐츠 요소 (<article>, <aside>, <nav> 또는 <section>)로 범위가 지정된 <footer>
  • 섹션 콘텐츠 요소 (<article>, <aside>, <nav> 또는 <section>) 내부에 접근 가능한 이름이 없는 <aside>
  • 액세스 가능한 이름이 없는 <section>
  • 고아 목록 항목 (<li>)

처음 네 가지 글머리기호의 경우 일반적으로 이러한 요소는 랜드마크 역할에 매핑됩니다. 페이지에 랜드마크가 너무 많으면 탐색하기가 어려울 수 있으므로 이번 변경사항은 중복된 랜드마크를 줄여 페이지를 더 쉽게 탐색할 수 있도록 합니다. 마지막 항목은 일반적으로 페이지 개발자의 실수를 나타냅니다. 목록 항목은 항상 목록 내에 있어야 하므로 고아 항목에는 일반 역할이 부여됩니다.

지원 중단된 역할 삭제

directory 역할을 지원 중단하고 목록 역할에 매핑했습니다. ARIA 1.2에서는 directory 역할을 지원 중단합니다. 사양에 따르면 이 역할은 list 역할과 동일하며 개발자는 list를 사용해야 합니다. directory를 사용하는 이전 콘텐츠의 시맨틱을 유지하기 위해 이제 Chrome에서 list에 매핑됩니다.

기타 수정사항

gridcell 역할에 대한 지원이 추가되었습니다. 이 새로운 역할은 gridcellcell의 차이를 더 명확하게 구분합니다. gridcellcell와 달리 포커스를 설정하고, 수정하고, 선택할 수 있습니다.

대체 역할 계산이 추가되었습니다. 이전에는 대체 역할을 확인하지 않았으므로 첫 번째 역할이 유효하지 않은 경우 사양에 설명된 것과 다른 역할을 사용했습니다.

일부 역할은 올바른 컨텍스트에 있는 경우에만 유효합니다. 다음과 같이 역할의 잘못된 사용에 대한 검사를 추가했습니다.

  • row 역할은 table, grid, rowgroup 또는 treegrid 내에 있어야 합니다.
  • rowgroup 역할은 table, grid, tree 또는 treegrid 내에 있어야 합니다.
  • listitem 역할은 list 내에 있어야 합니다.

역할이 잘못된 경우 Chrome은 이제 HTML 요소와 같은 다른 정보를 사용하여 대체 역할을 계산합니다.

theadtfooter를 접근성 트리에 포함되도록 표시했습니다. 이전에는 무시됨으로 표시되었지만 트리에 포함되었습니다. 이제 보조 기술에서 표 머리글과 표 바닥글을 파싱할 수 있습니다.


이러한 변경사항은 대부분의 개발자에게 표시되지 않을 수 있지만, 모든 브라우저가 동일한 방식으로 작동하도록 노력하고 있으므로 다양한 역할이 모든 곳에서 동일한 방식으로 노출됩니다.