При использовании атрибутов aria-labelledby, aria -hibitedby для обеспечения доступности в данном приложении, как далеко я должен заходить в дочерние элементы с атрибутами aria?
В следующем коде у меня есть атрибуты aria- * в моем оборачивающем div, чтобы объявить приложение программам чтения с экрана. Мой вопрос: нужно ли мне и дальше добавлять атрибуты aria-labelledby и aria-describeby, а также атрибуты 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>
