自定義元素和可訪問性

我想使用當前Web組件規範實現列表框小部件。此外，最終的列表框應符合ARIA標準。自定義元素和可訪問性

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

清潔度和封裝的目的，一切要在陰影DOM渲染：作爲實例列表框控件應儘可能簡單。爲了實現這個小部件，註冊了兩個自定義元素<x-listbox>和<x-option>。的<x-listbox>影子DOM的頂級元素是<div>攜帶對無障礙role=listbox和aria-activedescendent屬性（因爲它們是實現細節我不想<x-listbox>元素的這些屬性。）

爲了aria-activedescendent工作，需要選項元素的ID。將ID直接放在<x-option>元素上將不會有兩個原因：首先，它會污染使用列表框小部件的文檔的ID名稱空間。其次，更重要的是，ID不能跨越陰影邊界（這是影子的一個目的），所以選項的ID必須與屬性的<div>相同。

對此的解決方案是圍繞該呈現爲的<x-listbox>陰影DOM與另一<div>（屬於該陰影DOM），在其上一個id可以放在裏面內容的每個<x-option>。

我的問題是：這是正確的方式去和如何實現這個使用自定義元素和陰影dom web apis？

來源

2014-05-13 Marc

您可能應該通過創建select元素（使用JavaScript）來更好地實現此目標。這應該確保屏幕閱讀器正確地將其識別爲用於從列表中選擇值/值的輸入。

添加像這樣的select元素的<x-listbox>元以下：

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

然後加入aria-hidden="true"到您的自定義<x-listbox>元素。

最後應用CSS使screenreader select元素不可見。

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

這是我的方法，但也許有更好的。

來源

2014-08-17 18:26:56 idmean

雖然這將在可訪問性方面起作用，但它違背了我的封裝目標（因爲選擇元素不是提供的HTML的一部分將出現在光DOM中）。其次，如果我對更復雜的小部件（例如，其選項包含的內容超過一些文本的列表框）嘗試相同的操作，我將不得不使用定製的符合詠歎調的小部件來替換選擇元素，這意味着我將擁有把我的x-listbox加倍。 – Marc

自定義元素和可訪問性

回答

相關問題