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

Improve UI accessibility on small viewports

    XMLWordPrintable

    Details

    • Testing Instructions:
      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.
    • Affected Branches:
      MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_39_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-68299-master

      Description

      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

        Attachments

        1. colourpicker.png
          124 kB
          Bas Brands
        2. colourpickerCurrentcolour.png
          57 kB
          Víctor Déniz Falcón
        3. Features Demo.mbz
          343 kB
          Bas Brands
        4. header.png
          3.97 MB
          Bas Brands
        5. messaging.png
          107 kB
          Bas Brands
        6. navtabs.png
          96 kB
          Bas Brands
        7. quiz.png
          127 kB
          Bas Brands
        8. quizQuestionList.png
          56 kB
          Víctor Déniz Falcón
        9. quizSettingsNoScroll.png
          68 kB
          Víctor Déniz Falcón
        10. Screenshot_1boost.png
          122 kB
          Janelle Barcega
        11. Screenshot_2boost.png
          58 kB
          Janelle Barcega
        12. Screenshot_3classic.png
          139 kB
          Janelle Barcega
        13. Screenshot_4classic.png
          52 kB
          Janelle Barcega
        14. screenshot-1.png
          22 kB
          Jun Pataleta
        15. Screenshot 2020-05-13 at 15.48.17.png
          100 kB
          Bas Brands

          Issue Links

            Activity

              People

              Assignee:
              basbrands Bas Brands
              Reporter:
              basbrands Bas Brands
              Peer reviewer:
              Jun Pataleta Jun Pataleta
              Integrator:
              Víctor Déniz Falcón Víctor Déniz Falcón
              Tester:
              Janelle Barcega Janelle Barcega
              Participants:
              Component watchers:
              Andrew Lyons, Dongsheng Cai, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Huong Nguyen, Bas Brands, Mathew May
              Votes:
              0 Vote for this issue
              Watchers:
              8 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                15/Jun/20

                  Time Tracking

                  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