Location: Any Course Home Page e.g. https://courses.edx.org/courses/course-v1:edX+StudioX+3T2017/course/
Description: The entire main content section is implemented with ARIA role="tree". Wen tabbing through the elements, the roles are not properly rendered, multiple tab stops for each section, and the keyboard interaction does not even correspond one for a tree view. In addition, treeitems also have aria-expanded attributes when there is no section expanded for the section. This page will be highly inaccessible and confusing to people using a screen reader.
Auditor Note: Developers must ensure that ARIA roles are not used when it is not necessary and ensure when they are necessary, that the roles, state, and properties chosen are correct for the functionality of the component. In this case, the page is just composed of different sections with headings and links to the specific course. Remove the ARIA role of tree and treeitem.
<li class="outline-item section" id="block-v1">
<ol class="outline-item ">
<a class="outline-item focusable" href="https://level-access.sandbox.edx.org/courses/course-v1" id="block-v1:LevelAccessX+LA101+2017_08">
<span class="subsection-title">About this course</span>
</div> <!-- /subsection-text -->
Internal Note: This is a result of value engineering this feature. It was originally scoped to allow for expanding and collapsing the subsections, but this feature was removed during engineering. The accessibility roles are not longer relevent. If we plan on making these expanding and collapsing, we need to do that. If not, we need to re-engineer the front end of this differently.