10

現在の Web コンポーネント仕様を使用してリストボックス ウィジェットを実装したいと考えています。さらに、結果のリストボックスは ARIA 標準に準拠する必要があります。リストボックス ウィジェットのインスタンス化は次のように簡単です。

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

クリーンさとカプセル化のために、他のすべてはシャドウ DOM でレンダリングする必要があります。このウィジェットを実装するために、2 つのカスタム要素が登録されています<x-listbox>。<x-option>のシャドウ DOM の最上位要素は、<x-listbox>アクセシビリティのためのおよび属性<div>を運ぶです (実装の詳細であるため、要素にこれらの属性は必要ありません)。role=listboxaria-activedescendent<x-listbox>

が機能するaria-activedescendentには、オプション要素に ID が必要です。要素に ID を直接配置する<x-option>ことは、次の 2 つの理由からうまくいきません。まず、リストボックス ウィジェットを使用するドキュメントの ID 名前空間を汚染します。第 2 に、さらに重要なことは、ID は Shadow 境界を越えて機能しない (これは Shadow DOM の目的の 1 つです)。そのため、オプションの ID は<div>witharia-activedescendent属性と同じ Shadow DOM に存在する必要があります。

これに対する解決策は<x-option>、シャドウ DOM 内のコンテンツとしてレンダリングされるそれぞれ<x-listbox>を別の<div>(そのシャドウ DOM に属する) で囲み、ID を配置できるようにすることです。

私の質問は次のとおりです:これは正しい方法ですか?カスタム要素とシャドウ DOM Web API を使用してこれを実装する方法は?

4

2 に答える 2

1

おそらく、select(JavaScript を使用して) 要素を作成することにより、これをより適切に実装する必要があります。これにより、スクリーン リーダーがこれをリストから値を選択するための入力として正しく認識できるようになります。

select要素の下に次のような要素を追加します<x-listbox>。

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

aria-hidden="true"次に、カスタム<x-listbox>要素に追加します。

最後に CSS を適用して、スクリーンリーダーの select 要素を非表示にします。

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

これが私のアプローチですが、もっと良い方法があるかもしれません。

于 2014-08-17T18:26:56.280 に答える