Question

当使用aria-labelledby，aria-describedby给定应用程序中的可访问性属性时，我应该使用aria属性进入子元素的距离？

在下面的代码中，我的包装div上有aria- *属性，以向屏幕阅读器宣布应用程序。我的问题是：我是否需要继续将aria-labelledby和aria-describedby属性以及'role'属性放到子元素中？

 <!--  Select Box default  -->
    <div class="form-element">
        <div class="select-box-element js-select-box-element" aria-labelledby="select-box-label-1" aria-description="select-box-1" role="combobox" aria-activedescendant="selected-option" aria-owns="id-of-list">

        <label for="select-box-1" id="select-box-label-1"></label>
        <select name="select-box-1" id="select-box-1" aria-disabled="false" tabindex="0">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
            <option value="6">Option 6</option>
            <option value="7">Option 7</option>
        </select>

        <div class="select-box default" id="default-select-box">
            <span class="label">Value</span>
            <span class="btn-dropdown-toggle">
            <span class="icon-arrow-expand-open" aria-hidden="true"></span>
            </span>
        </div>

        <!--  Drop Down Menu  -->
        <div role="listbox" class="dropdown-menu default" aria-labelledby="default-select-box" aria-describedby="default-select-box">
            <ul aria-hidden="true" id="id-of-list">
                <li class="result" id="selected-option" role="option">Menu item 1</li>          <li class="result" role="option">Menu item 2</li>
                <li class="result" role="option">Menu item 3</li>
                <li class="sub-heading" role="option">Subsection heading</li>           <li class="result" role="option">Menu item 4</li>               <li class="result" role="option">Menu item 5</li>
                <li class="sub-heading" role="option">Subsection heading</li>
                <li class="result" role="option">Menu item 6</li>
                <li class="result" role="option">Menu item 7</li>
                </ul>
            </div>
        </div>
    </div>

Answer 1

IE建议不要这样做：

请注意
不支持递归使用ariaLabelledby。使用ariaLabelledby的元素不应该引用另一个也使用ariaLabelledby的元素。

<强>参考

MSDN: ariaLabelledby

在父元素和子元素上使用aria-labelledby和aria-describedby

1 个答案: