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

Improve UI accessibility on small viewports

XMLWordPrintable

    • MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE
    • MOODLE_39_STABLE
    • MDL-68299-master
    • Hide

      Setup for testing:

      1. Restore the course backup from the Moodle Features Demo course attached to this issue.
      2. Create a number of test users and enrol them to the course.
      3. Create a group in the course, add your test users and the admin user and enable messaging for the group.
      4. Open the inspector for chrome (or equivalent) and enable responsive mode. Change the screen size to 320px by 256px.
      5. Now navigate to various pages (see the “Test these pages" section below) and interact with them; on each page checks if there is a hidden horizontal scroll, elements are overlapping or if parts of the UI are cut off.
      6. Try testing with both themes Classic and Boost.
      7. Try some of the tests on a screen size of 1280 by 1024 and zoom using the browser zoom to zoom in by 200%. 

      Test these pages

      1. Use the messaging interface to find users, chat and change settings.
      2. Use the dashboard to go to a course, turn editing on and try if you can access the menus and move things around.
      3. Navigate to site administration and try to find various settings pages.
      4. Navigate to the Boost configuration page and try the colour chooser.
      5. Create a new Quiz with some simple questions.
      6. Create a new Forum and create a post.
      Show
      Setup for testing: Restore the course backup from the Moodle Features Demo course attached to this issue. Create a number of test users and enrol them to the course. Create a group in the course, add your test users and the admin user and enable messaging for the group. Open the inspector for chrome (or equivalent) and enable responsive mode. Change the screen size to 320px by 256px. Now navigate to various pages (see the “Test these pages" section below) and interact with them; on each page checks if there is a hidden horizontal scroll, elements are overlapping or if parts of the UI are cut off. Try testing with both themes Classic and Boost. Try some of the tests on a screen size of 1280 by 1024 and zoom using the browser zoom to zoom in by 200%.  Test these pages Use the messaging interface to find users, chat and change settings. Use the dashboard to go to a course, turn editing on and try if you can access the menus and move things around. Navigate to site administration and try to find various settings pages. Navigate to the Boost configuration page and try the colour chooser. Create a new Quiz with some simple questions. Create a new Forum and create a post.

      From the audit results:

      Issue

      Some user interfaces are not usable when text is zoomed to 200% or the UI is zoomed to 400%

      Impact on users

      Screen reader users can call up a list of headings. Empty headings can cause confusion.

      Guidelines affected

      Resize Text:
      1.4.4 Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

      Reflow:
      1.4.10 Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
      Vertical scrolling content at a width equivalent to 320 CSS pixels;
      Horizontal scrolling content at a height equivalent to 256 CSS pixels.
      Except for parts of the content which require two-dimensional layout for usage or meaning.

      Recommendation

      When zooming in to 400% reduce the font sizes by 50%.
      Reduce paddings and borders theme layouts

        1. colourpicker.png
          colourpicker.png
          124 kB
        2. colourpickerCurrentcolour.png
          colourpickerCurrentcolour.png
          57 kB
        3. Features Demo.mbz
          343 kB
        4. header.png
          header.png
          3.97 MB
        5. messaging.png
          messaging.png
          107 kB
        6. navtabs.png
          navtabs.png
          96 kB
        7. quiz.png
          quiz.png
          127 kB
        8. quizQuestionList.png
          quizQuestionList.png
          56 kB
        9. quizSettingsNoScroll.png
          quizSettingsNoScroll.png
          68 kB
        10. Screenshot_1boost.png
          Screenshot_1boost.png
          122 kB
        11. Screenshot_2boost.png
          Screenshot_2boost.png
          58 kB
        12. Screenshot_3classic.png
          Screenshot_3classic.png
          139 kB
        13. Screenshot_4classic.png
          Screenshot_4classic.png
          52 kB
        14. screenshot-1.png
          screenshot-1.png
          22 kB
        15. Screenshot 2020-05-13 at 15.48.17.png
          Screenshot 2020-05-13 at 15.48.17.png
          100 kB

            basbrands Bas Brands
            basbrands Bas Brands
            Jun Pataleta Jun Pataleta
            Victor Déniz Falcón Victor Déniz Falcón
            Janelle Barcega Janelle Barcega
            Votes:
            0 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 3 days, 1 hour, 31 minutes
                3d 1h 31m

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