Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-37567

Ensure ARIA roles, states, and properties are valid

    XMLWordPrintable

    Details

    • Previous Issue Keys:
      LSNBLDR-705

      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">

      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

        Gliffy Diagrams

          Attachments

            Activity

              People

              • Assignee:
                Unassigned
                Reporter:
                mclare Matt Clare
              • Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Git Source Code