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

Question

当在给定的应用程序中使用 aria-labelledby、aria- describeby 属性来实现可访问性时，我应该使用 aria 属性到子元素多远？

在下面的代码中，我的包装 div 上有 aria-* 属性，用于向屏幕阅读器宣布应用程序。我的问题是：我是否需要继续将 aria-labelledby 和 aria- describeby 属性以及“角色”属性也添加到子元素中？

 <!--  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