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

Boost Theme accessibility: Nav drawer should be marked up as list.

XMLWordPrintable

    • MOODLE_35_STABLE, MOODLE_38_STABLE
    • MOODLE_38_STABLE
    • MDL-65406-master_navmenu_list_accessibility
    • Hide

      Main Tests

      Setup

      1. Ensure that your Moodle instance has the Boost theme selected

      Setting up a screen reader

      1. If you already have a screen reader set up, feel free to use that.
      2. A simple screen reader to setup is ChromeVox that can be added as an extension in Google Chrome. ChromeVox Link

      Test 1: screen reader speaks number of items

      1. Using tab or your screen reader's navigation keys, navigate to the main navigation menu on the left of the screen.
      2. Confirm that the screen reader announces the number of items in the list.

      Test 2: list marked up correctly

      1. Click ctrl-shift-c to open up your browser dev tools.
      2. Click on the Dashboard link in the left navigation menu
      3. Confirm that the Dashboard anchor is within a list item that is within an unordered list within the nav container.

      OPTIONAL Test that the courses under 'My Courses' are also marked up.

      Setup

      1. If you have a user enrolled in 2 or more subjects, login as that user and navigate to {moodle_address}/my/. You may now skip the following steps, otherwise;
      2. Go to Site Administration -> Development -> Make test course.
      3. Choose XS for the size and write testcourse1 for the shortname
      4. Click Create course
      5. Repeat steps 1-3 once more but using testcourse2 for the shortname.
      6. Go to Site home -> testcourse1 -> Participants
      7. Click Enrol users
      8. Search for your users name and select them
      9. Click Enrol users
      10. Repeat steps 5-8 for testcourse2
      11. Go to {moodle_address}/my

      Test 3: Courses are marked up within list.

      1. Repeat Test 2 but click on a course in the menu.
      2. Confirm that the course anchor is within a list item that is within an unordered list within the nav container.
      Show
      Main Tests Setup Ensure that your Moodle instance has the Boost theme selected Setting up a screen reader If you already have a screen reader set up, feel free to use that. A simple screen reader to setup is ChromeVox that can be added as an extension in Google Chrome. ChromeVox Link Test 1: screen reader speaks number of items Using tab or your screen reader's navigation keys, navigate to the main navigation menu on the left of the screen. Confirm that the screen reader announces the number of items in the list. Test 2: list marked up correctly Click ctrl-shift-c to open up your browser dev tools. Click on the Dashboard link in the left navigation menu Confirm that the Dashboard anchor is within a list item that is within an unordered list within the nav container. OPTIONAL Test that the courses under 'My Courses' are also marked up. Setup If you have a user enrolled in 2 or more subjects, login as that user and navigate to {moodle_address}/my/. You may now skip the following steps, otherwise; Go to Site Administration -> Development -> Make test course. Choose XS for the size and write testcourse1 for the shortname Click Create course Repeat steps 1-3 once more but using testcourse2 for the shortname. Go to Site home -> testcourse1 -> Participants Click Enrol users Search for your users name and select them Click Enrol users Repeat steps 5-8 for testcourse2 Go to {moodle_address}/my Test 3: Courses are marked up within list. Repeat Test 2 but click on a course in the menu. Confirm that the course anchor is within a list item that is within an unordered list within the nav container.

      Implications
      Screen reader users are not informed about the number of items in the list and cannot easily skip between list items or to the end of the list.

      Recommendation
      Mark up the items as an unordered list ('ul' element with 'li' items). Include the "My subjects" content as a nested list.

       

      To reproduce:

      1. Log into Moodle Sandbox as a Student https://school.demo.moodle.net/my/.
        • Username: student
        • Password: moodle
      1. Click ctrl-shift-c and click on Dashboard navigation button on left of screen.
      1. Confirm that the nav side bar is marked up using div instead of ul.

       

        1. Screenshot from 2019-09-24 09-25-27.png
          Screenshot from 2019-09-24 09-25-27.png
          24 kB
        2. Screenshot from 2019-09-24 09-26-13.png
          Screenshot from 2019-09-24 09-26-13.png
          24 kB
        3. MDL-65406.png
          MDL-65406.png
          96 kB

            andrewmadden Andrew Madden
            yao9394 John Yao
            Tom Dickman Tom Dickman
            Adrian Greeve Adrian Greeve
            Jennifer Bauzon Jennifer Bauzon
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 hours, 30 minutes
                2h 30m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.