Accessibility

Radix Primitives는 WAI-ARIA 저작 관행 지침을 따르고, 다양한 최신 브라우저와 흔히 쓰이는 보조 기술에서 테스트돼요.

출처: 문서

본문

Radix Primitives는 접근성과 관련된 까다로운 구현 세부사항(aria·role 속성, 포커스 관리, 키보드 내비게이션)을 많이 처리해 줘요. 덕분에 대부분의 맥락에서 컴포넌트를 그대로 사용하고, 예상되는 접근성 디자인 패턴을 따르는 기능에 기댈 수 있어요.

WAI-ARIA

WAI-ARIA는 W3C가 발행·유지 관리하며, Radix Primitives에 나타나는 많은 공통 UI 패턴의 시맨틱을 정의해요. 브라우저가 제공하는 요소로 만들지 않은 컨트롤에 의미를 부여하기 위해 설계됐어요. 예를 들어 button 요소 대신 div로 버튼을 만든다면, 스크린 리더나 음성 인식 도구에 버튼임을 전달하도록 div에 추가해야 하는 속성들이 있어요.

시맨틱 외에도 컴포넌트 유형별로 기대되는 동작들이 있어요. button 요소는 div가 반응하지 않는 특정 상호작용에 반응하므로, 개발자가 그 상호작용을 JavaScript로 다시 구현해야 해요. WAI-ARIA authoring practices는 Radix Primitives에 포함된 다양한 컨트롤의 동작 구현에 대한 추가 지침을 제공해요.

접근 가능한 라벨

많은 내장 폼 컨트롤에서 네이티브 HTML label 요소는 해당 input 요소에 시맨틱 의미와 맥락을 제공하도록 설계됐어요. 비폼 컨트롤 요소나 Radix Primitives가 제공하는 커스텀 컨트롤 같은 경우, WAI-ARIA는 접근 가능한 이름/설명을 제공하는 방법을 명시해요.

가능한 곳에서 Radix Primitives는 컨트롤 라벨링을 쉽게 하는 추상화를 포함해요. Label primitive는 우리의 많은 컨트롤과 함께 동작하도록 설계됐어요. 결국 사용자가 앱을 탐색할 때 적절한 맥락을 갖도록 라벨을 제공하는 것은 여러분의 몫이에요.

키보드 내비게이션

Tabs나 Dialog 같은 많은 복잡한 컴포넌트는 사용자가 키보드나 다른 비마우스 입력 방식으로 콘텐츠와 상호작용하는 방법에 대한 기대가 있어요. Radix Primitives는 WAI-ARIA authoring practices에 따라 기본적인 키보드 지원을 제공해요.

포커스 관리

적절한 키보드 내비게이션과 좋은 라벨링은 종종 포커스 관리와 함께 가요. 사용자가 요소와 상호작용해 그 결과가 바뀌면, 앱의 새 컨텍스트에 따라 다음 탭 위치가 논리적이도록 포커스를 상호작용에 맞춰 이동하는 것이 종종 유용해요. 스크린 리더 사용자의 경우 포커스를 이동하면 종종 이 새 컨텍스트를 알리는 공지가 발생하며, 이는 적절한 라벨링에 의존해요.

많은 Radix Primitive에서 주어진 컴포넌트에서 사용자가 보통 취하는 상호작용을 기준으로 포커스를 이동해요. 예를 들어 AlertDialog에서는 모달이 열리면 프롬프트에 대한 응답을 예상해 포커스를 Cancel 버튼 요소로 프로그래밍 방식으로 이동해요.

더 알아보기 (Learn more)

aria/role 속성, 포커스 관리, 키보드 내비게이션 같은 접근성 구현 세부사항을 Radix가 처리해 줘요.
접근 가능한 라벨 제공은 개발자의 책임이며, Label primitive와 WAI-ARIA naming 지침을 활용할 수 있어요.