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.
I think since the functionality doesn't exist we should rip it out. We can add it back in when we do the next story.
Just rip out for now. No adding anything else.
Is going to provide some further recommendations.
Note, I suggest removing the extra sr-only text that is added before the Resume Course text, its unnecessary and adds extra verbiage to an already very long link text. In addition to simplifying the HTML as per below, remove the following node:
<span class="sr-only">This is your last visited course section.</span>