Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-58248

“☰” Needs Descriptive Label

    Details

    • Testing Instructions:
      Hide
      Notes:
      1. Test on Boost theme
      2. Test on the following screenreader/browser combinations:
        • JAWS 15+ and IE 11
        • NVDA and Firefox
      Testing
      1. Login as a user
      2. Using your keyboard, navigate to the side panel button with the trigram icon (☰).
        • Confirm that the side panel button is announced as "Side panel".
      Show
      Notes: Test on Boost theme Test on the following screenreader/browser combinations: JAWS 15+ and IE 11 NVDA and Firefox Testing Login as a user Using your keyboard, navigate to the side panel button with the trigram icon (☰). Confirm that the side panel button is announced as " Side panel ".
    • Affected Branches:
      MOODLE_32_STABLE
    • Fixed Branches:
      MOODLE_32_STABLE, MOODLE_33_STABLE
    • Pull Master Branch:
      MDL-58248-theme_boost-label-for-expand-button

      Description

      The “☰” button that is present when using the new Boost theme needs a more descriptive label for screen reader users. When using JAWS with Internet Explorer or Google Chrome, this button is announced as “Expand button”, and since it can be expanded or collapsed it is read out as “Expand button collapsed” or “Expand button expanded”.

       

      When using JAWS and Mozilla Firefox, the screen reader attempts to read the “☰” icon as well, which is read out as “triglamforheaven” (unsure how to spell it), which is extremely confusing.

       

      When using NVDA with Internet Explorer, Firefox, or Chrome, this control is read out as “Expand button”.

       

      Regardless of which screen reader/browser is being used, these labels are insufficient for a user to determine what the control is going to expand. Since expanded/collapsed is announced as the state of the control the word “Expand” in the title of the control is very confusing.

       

      Replication Instructions:

      1. Open Moodle
      2. Start JAWS or NVDA
      3.  Press the B key to cycle through buttons
      4. Note how the “Expand button” is announced.

          

      Tested using Windows 10 Professional Build 1607, Internet Explorer 11, Firefox 52.0, Chrome 56, JAWS 18.0.2324, NVDA 2017.1

        Gliffy Diagrams

          Attachments

            Activity

              People

              • Votes:
                3 Vote for this issue
                Watchers:
                13 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  10/Jul/17