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

Accessibility issues with user tours

XMLWordPrintable

    • MOODLE_400_STABLE, MOODLE_401_STABLE
    • MOODLE_400_STABLE, MOODLE_401_STABLE
    • MDL-74822-401
    • MDL-74822-master
    • Hide

      Initial setup

      1. Create a new tab called "Tab 1" for resetting the tour and navigate to Site Administration -> Appearance -> User tours.
      2. Create a new tab called "Tab 2" for testing.

      CSS disabled

      1. Switch to "Tab 1" and reset the tour display for the My course page if necessary.
      2. Switch to "Tab 2".
      3. Navigate to My course page with CSS disabled.
      4. Verify that you will not see the user tour.
      5. Switch to "Tab 1" and reset the tour display for the My course page if necessary.
      6. Switch to "Tab 2".
      7. Navigate to My course page with CSS enabled.
      8. Verify that you will see the user tour.

      Zoom

      1. Switch to "Tab 1" and reset the tour display for the Course home page if necessary.
      2. Switch to "Tab 2".
      3. Set the browser's zoom to 200%.
      4. Navigate to a course's homepage.
      5. Verify that the tour step modal will not cover the target.
      6. Verify that you can read all the content of the tour step normally.
      7. Repeat the test from steps 1-6 with the browser's zoom set to 400% in step 3.
      Show
      Initial setup Create a new tab called "Tab 1" for resetting the tour and navigate to Site Administration -> Appearance -> User tours. Create a new tab called "Tab 2" for testing. CSS disabled Switch to "Tab 1" and reset the tour display for the My course page if necessary. Switch to "Tab 2". Navigate to My course page with CSS disabled. Verify that you will not see the user tour. Switch to "Tab 1" and reset the tour display for the My course page if necessary. Switch to "Tab 2". Navigate to My course page with CSS enabled. Verify that you will see the user tour. Zoom Switch to "Tab 1" and reset the tour display for the Course home page if necessary. Switch to "Tab 2". Set the browser's zoom to 200%. Navigate to a course's homepage. Verify that the tour step modal will not cover the target. Verify that you can read all the content of the tour step normally. Repeat the test from steps 1-6 with the browser's zoom set to 400% in step 3.
    • 6
    • HQ Team International CIH2-225, Team Hedgehog 4.1 sprint 0.1, Team Hedgehog 4.1 sprint 0.3, Team Hedgehog 4.1 sprint 0 rev, Team Hedgehog 4.1 pre 1.1, Team Hedgehog Sprint 1.1, Team Hedgehog Sprint 1.2, Team Hedgehog Sprint 1.3

      Issues found during the audit:

      Level A
      1. User tour modals are not accessible when CSS is disabled (Fails Success Criterion 1.3.2)
      Level AA
      1. "Activate Edit Mode" step of the tour modal is not visible when text sizing is increased to 200% zoom. (Fails Success Criterion 1.4.4)
        1. Navigate to a course's homepage.
        2. Increase the page zoom to 200%
        3. Reset the tour on the page
        4. The "Edit mode" toggle is being covered by the tour step modal.
      2. User tour modals are cut off at 400% zoom. (Fails Success Criterion 1.4.10)

        1. 200%zoom.png
          94 kB
          Jun Pataleta
        2. 320x256 view.png
          27 kB
          Jun Pataleta
        3. 400_css.gif
          576 kB
          Ron Carl Alfon Yu
        4. 400_zoom.gif
          1.44 MB
          Ron Carl Alfon Yu
        5. 401_css.gif
          831 kB
          Ron Carl Alfon Yu
        6. 401_zoom.gif
          1.29 MB
          Ron Carl Alfon Yu
        7. 74822.mp4
          49.01 MB
          Jun Pataleta
        8. master_css.gif
          634 kB
          Ron Carl Alfon Yu
        9. master_zoom.gif
          1.81 MB
          Ron Carl Alfon Yu
        10. Screen Shot 2022-09-01 at 7.53.36 pm.png
          1.33 MB
          Jun Pataleta
        11. tabindex.png
          119 kB
          Shamim Rezaie

            huongn@moodle.com Huong Nguyen
            jpataleta Jun Pataleta
            Stevani Andolo Stevani Andolo
            Jun Pataleta Jun Pataleta
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            1 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 1 day Original Estimate - 1 day
                1d
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 weeks, 3 hours, 57 minutes
                2w 3h 57m

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