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

Avoid inappropriate use of ARIA roles, states, and properties - Resources

    Details

      Description

      "The Sakai Project or Component this issue was associated with is: Content-X

      Throughout the environment controls that either expand or collapse content do not inform screen reader users of their purpose. The <aria-expanded> attribute is utilized however it is injected into the DOM once the control has been activated, and is not present when the page loads. As screen-reader users rely on the <aria-expanded=""false""> attribute on page load to discern that the control expands a section of content, they will have difficulty discerning which elements in the environment have an expanded state.

      Below is a particular instance of <aria-expanded=""true""> being injected into the DOM via JavaScript that can be found in Module 14 - Resources. This particular example is of the ""Actions"" button that spawns a dropdown menu.

      HTML element when page loads:

      <button title=""Actions"" data-toggle=""dropdown"" class=""btn dropdown-toggle btn-xs"" type=""button"">
      
      JS onclick function:
      
      g.prototype.toggle = function(d) {
        var e = a(this);
        if (!e.is("".disabled, :disabled"")) {
          var f = b(e),
            g = f.hasClass(""open"");
          if (c(), !g) {
            ""ontouchstart"" in document.documentElement && !f.closest("".navbar-nav"").length && a(document.createElement(""div"")).addClass(""dropdown-backdrop"").insertAfter(a(this)).on(""click"", c);
            var h = {
              relatedTarget: this
            };
            if (f.trigger(d = a.Event(""show.bs.dropdown"", h)), d.isDefaultPrevented()) return;
            e.trigger(""focus"").attr(""aria-expanded"", ""true""), f.toggleClass(""open"").trigger(a.Event(""shown.bs.dropdown"", h))
          }
          return !1
        }
      }
      

      Once activated the <button> updates to the following:

      <button title=""Actions"" data-toggle=""dropdown"" class=""btn dropdown-toggle btn-xs"" type=""button"" aria-expanded=""true"">

      Developers must ensure that the <aria-expanded> attribute is present when the page loads, and is set to ""false"" until the control has been activated (at which point it switches to ""true""). This is imperative to inform screen reader users of the purpose of the control. By injecting the attribute into the DOM once the control has been activated, screen-reader users are forced to activate all controls first in order to discern whether or not they have an expanded state.

      http://qa03-sakai.marist.edu:8080/portal/site/~admin/tool/~admin-1125/noti#a0ff54fdfea287b3e030bc48d7626194-HTML

      AND http://qa03-sakai.marist.edu:8080/portal/site/e72d72d4-f582-4dce-8261-6b923060787c/tool/2f629dad-7e64-41c5-bb12-64d95eb17a15#Aa8485a74b574b5572573642dc574e1d-HTML AND http://qa03-sakai.marist.edu:8080/portal/site/e72d72d4-f582-4dce-8261-6b923060787c/tool/2f629dad-7e64-41c5-bb12-64d95eb17a15/sakai.resource.type.helper.helper#cc7dee76ab45bf39c2bfc78c8a799615-HTML AND http://qa03-sakai.marist.edu:8080/portal/site/e72d72d4-f582-4dce-8261-6b923060787c/tool/2f629dad-7e64-41c5-bb12-64d95eb17a15/sakai.resource.type.helper.helper#Ace8b247ef23d42314ed25b5c733dbdc-HTML AND http://qa03-sakai.marist.edu:8080/portal/site/e72d72d4-f582-4dce-8261-6b923060787c/tool/2f629dad-7e64-41c5-bb12-64d95eb17a15?panel=Main#ee925146618837b5db1a30412587516c-HTML"

      Matt Clare adds his interpretation: If the button is a drop-down and does not have that ARIA attribute at page load time then alternative interfaces like screenreader will need to know it’s a drop down before the user tabs their way to that item, otherwise it’s listed as a button and the user will not know if selecting it will expand a menu or proceed to a new URL etc.

        Gliffy Diagrams

          Zeplin

            Attachments

              Issue Links

                Activity

                  People

                  Assignee:
                  ottenhoff Sam Ottenhoff
                  Reporter:
                  mclare Matt Clare
                  Votes:
                  0 Vote for this issue
                  Watchers:
                  2 Start watching this issue

                    Dates

                    Created:
                    Updated:
                    Resolved:

                      Git Integration