Uploaded image for project: 'Grouper'
  1. Grouper
  2. GRP-1380

"Add members” displays new content not apparent to a screenreader

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Open
    • Priority: Major
    • Resolution: Unresolved
    • Affects Version/s: 2.3.0
    • Fix Version/s: 2.4.0, 2.3.0.patch
    • Component/s: UI
    • Labels:
    • Environment:
      Technology Used: NVDA (ver. 2016.1), Firefox (ver. 48.0.2) on Windows 10 PC

      Description

      Problem:
      New Content Not “Visible” to ScreenReaders
      Selecting “Add members” reveals new content visually (circled above in red) but not to the screenreader. In other words, there is no announcement to the screenreader that new content has appeared.
      Focus Placed After New Content
      In addition, after selecting "Add Members" focus takes the user past the new content and fields associated with adding a new member. The first field a keyboard user would encounter (using the down arrow) is the “more actions” button or (if using the Tab key) the "Test group for accessibility" (circled above in green)”.
      A keyboard user (including screenreader users) would be required to back tab back through a number of buttons and links such as "more," “Test group for accessibility,” " "import a list of members," etc. before finding the "member name or ID" field. Of course, a blind user would have discover this on their own. They would not know they have been placed past the fields associated with adding a new member. It might take quite a while of exploring the page before (and if) they find the necessary content.

      Solution:
      Use jQuery or JavaScript with ARIA to announce the new content to screenreaders and to move the focus to the "member name or id field".
      Specific Coding
      The "control-group" div (shown below) should include the aria attributes: aria-live="polite" aria-expanded="false".

      Adding the following jQuery (or equivalent JavaScript) should place the attribute role="alert" and change the attribute "aria-expanded” to “true" (from “false) in the "control-group" div statement once the link "show-add-block" is selected (this is the ID of the “Add members” link). This will alert the screenreader that new content has appeared. The last statement below will place focus in the “Member name or ID” field. (Note: the current coding for this input field is quite complex with a number of hidden fields located at the same location. As with the other suggestions in this report, these solution should be tested with a screenreader once these changes are implemented).
      $("a.show-add-block").click(function()

      { $("#control-group).attr("role", "alert"); $("#control-group").attr("aria-expanded","true"); document.getElementById("groupAddMemberComboId").focus(); }

      );

      You can read and see more examples on making collapsible and expandable content accessible at: https://www.w3.org/WAI/GL/wiki/Using_aria-expanded_to_indicate_the_state_of_a_collapsible_element

        Smart Checklist

          Attachments

            Activity

              People

              Assignee:
              chris.hyzer@at.internet2.edu Chris Hyzer (upenn.edu)
              Reporter:
              devasaga Pregash Devasagayam (Inactive)
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Dates

                Created:
                Updated: