Using aria-labelledby and aria-describedby on parent and child elements

Question

When using aria-labelledby, aria-describedby attributes for accessibility in a given application, how far into child elements should I go with aria attributes?

In the following code I have the aria-* attributes on my wrapping div to announce the application to screen readers. My question is: do I need to keep putting aria-labelledby and aria-describedby attributes as well as 'role' attributes to the children elements as well?

 <!--  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 recommends against it:

Note
Recursive use of ariaLabelledby is not supported. An element that is using ariaLabelledby should not reference another element that is also using ariaLabelledby.

References

• MSDN: ariaLabelledby