맞춤 요소 및 접근성

Question

현재 웹 구성 요소 사양을 사용하여 목록 상자 위젯을 구현하고 싶습니다. 또한 결과 목록 상자는 ARIA 표준을 준수해야합니다. 목록 상자 위젯을 인스턴스화하는 것은 다음과 같이 간단해야합니다.

<x-listbox> 
    <x-option>Option 1</x-option> 
    <x-option>Option 2</x-option> 
</x-listbox> 

청결하고 캡슐화하기 위해 다른 모든 것은 그림자 돔으로 렌더링되어야합니다. 이 위젯을 구현하기 위해 사용자 정의 요소 인 <x-listbox>과 <x-option>이 등록됩니다. <x-listbox>의 그림자 DOM의 최상위 요소는 순서에서 role=listbox과 aria-activedescendent 접근성 특성 (그들이 구현 세부 사항이기 때문에 나는 <x-listbox> 요소에 이러한 특성을하지 않습니다.)

을 운반 <div>입니다 aria-activedescendent이 작동하려면 옵션 요소에 ID가 필요합니다. id를 직접 <x-option> 요소에 두는 것은 두 가지 이유에서 작동하지 않습니다. 첫째, 목록 상자 위젯을 사용하는 문서의 id 네임 스페이스를 오염시킵니다. 두 번째로 더 중요한 것은 id가 그림자 경계 (shadow dom의 목적 중 하나 임)에서 작동하지 않기 때문에 옵션의 ID는 의 aria-activedescendent 속성과 동일한 그림자 돔에 있어야합니다. 이것

용액 아이디를 넣을 수있는 (즉 섀도우 DOM에 속하는) 다른 <div>와 <x-listbox>의 그림자 DOM 내부의 콘텐츠로 렌더링 된 각 <x-option> 둘러싸 일 것이다.

내 질문은 : 이것이 올바른 방법이며 맞춤 요소와 그림자 DOM 웹 API를 사용하여 이것을 구현하는 방법입니까?

Answer 1

JavaScript를 사용하여 select 요소를 생성하면 더 잘 구현할 수 있습니다. 이렇게하면 화면 판독기가이를 목록에서 값/값을 선택하기위한 입력으로 올바르게 인식하도록해야합니다.

은 <x-listbox> 요소 아래에이 같은 select 요소를 추가합니다

이

<select class="only-screenreader"> 
    <option>Option 1</option> 
    <option>Option 2</option> 
</select> 

그런 다음 사용자 정의 <x-listbox> 요소에 aria-hidden="true"를 추가합니다.

마지막으로 CSS를 적용하여 스크린 리더 선택 요소를 숨 깁니다.

.only-screenreader { 
    position:absolute; 
    left:-10000px; 
    top:auto; 
    width:1px; 
    height:1px; 
    overflow:hidden; 
} 

제 접근 방식이지만 더 좋은 방법 일 수 있습니다.