Ensure ARIA roles, states, and properties are valid
GENERAL
TESTING
GENERAL
TESTING
Description
The Sakai Project or Component this issue was associated with is: LessonsThe "Reorder" function of the Lessons section of the environment allows users to drag and drop lessons to change their current order. Currently the feature provides keyboard support for keyboard-only users to hold down the "Control" key and use the arrows to change the position of the currently selected lesson. However, each lesson element is comprised of a <div> with a <role> of "article". As such screen reader users are provided misleading information, expecting each lesson to be an article of content, rather than an actionable control.
<div class="flc-reorderer-module layoutReorderer-module ui-draggable layoutReorderer-movable-default" role="article" aria-selected="false" aria-disabled="false" tabindex="-1" aria-grabbed="false" id="fluid-id-9jjn56fk-21" aria-dropeffect="none" aria-label="1 of 13 in column 1 of 2 movable">
Developers must ensure that the ARIA <role> provided for simulated controls is valid to the control's purpose. In this case, the <role> must be changed from "article" to "button", as this more accurately represents the purpose of the control. The following code is provided as an example of this remediation:
<div class="flc-reorderer-module layoutReorderer-module ui-draggable layoutReorderer-movable-default" role="button" aria-selected="false" aria-disabled="false" tabindex="-1" aria-grabbed="false" id="fluid-id-9jjn56fk-21" aria-dropeffect="none" aria-label="1 of 13 in column 1 of 2 movable">
The Sakai Project or Component this issue was associated with is: LessonsThe "Reorder" function of the Lessons section of the environment allows users to drag and drop lessons to change their current order. Currently the feature provides keyboard support for keyboard-only users to hold down the "Control" key and use the arrows to change the position of the currently selected lesson. However, each lesson element is comprised of a <div> with a <role> of "article". As such screen reader users are provided misleading information, expecting each lesson to be an article of content, rather than an actionable control.
<div class="flc-reorderer-module layoutReorderer-module ui-draggable layoutReorderer-movable-default" role="article" aria-selected="false" aria-disabled="false" tabindex="-1" aria-grabbed="false" id="fluid-id-9jjn56fk-21" aria-dropeffect="none" aria-label="1 of 13 in column 1 of 2 movable">Developers must ensure that the ARIA <role> provided for simulated controls is valid to the control's purpose. In this case, the <role> must be changed from "article" to "button", as this more accurately represents the purpose of the control. The following code is provided as an example of this remediation:
<div class="flc-reorderer-module layoutReorderer-module ui-draggable layoutReorderer-movable-default" role="button" aria-selected="false" aria-disabled="false" tabindex="-1" aria-grabbed="false" id="fluid-id-9jjn56fk-21" aria-dropeffect="none" aria-label="1 of 13 in column 1 of 2 movable">http://qa03-sakai.marist.edu:8080/portal/site/e72d72d4-f582-4dce-8261-6b923060787c/tool/002524d7-0482-4895-909e-10bc2aee3ca7/Reorder?returnView=&studentItemId=0&backPath=&errorMessage=&clearAttr=&source=&title=&sendingPage=159&newTopLevel=false&postedComment=false&itemId=-1&addBefore=&path=&addTool=-1&recheck=&id=#A5d54c864d2129d427bd333b2edf6cea-HTML