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

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

    XMLWordPrintable

    Details

    • Testing Instructions:
      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.
    • Affected Branches:
      MOODLE_35_STABLE, MOODLE_38_STABLE
    • Fixed Branches:
      MOODLE_38_STABLE
    • Pull Master Branch:
      MDL-65406-master_navmenu_list_accessibility

      Description

      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.

       

        Attachments

          Activity

            People

            Assignee:
            andrewmadden Andrew Madden
            Reporter:
            yao9394 John Yao
            Peer reviewer:
            Tom Dickman
            Integrator:
            Adrian Greeve
            Tester:
            Jennifer Bauzon
            Participants:
            Component watchers:
            Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:
              Fix Release Date:
              18/Nov/19

                Time Tracking

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