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

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




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


      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



              Issue Links



                  ottenhoff Sam Ottenhoff
                  mclare Matt Clare
                  0 Vote for this issue
                  2 Start watching this issue



                      Git Integration