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

Improve UI accessibility on small viewports

    XMLWordPrintable

Details

    • 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.

    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
          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

        Issue Links

          caused a regression

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-68840 See questions link hidden for random questions in a quiz

          • Minor - Minor loss of function where workaround is possible
          • Closed
          has a non-specific relationship to

          Functional Test - A test of a single Moodle feature MDLQA-14629 CLONE - Smoke test on Mobile

          • Minor - Minor loss of function where workaround is possible
          • Passed

          Functional Test - A test of a single Moodle feature MDLQA-14682 CLONE - A student can display their courses in card, list or summary view in the course overview

          • Minor - Minor loss of function where workaround is possible
          • Passed
          has been marked as being related by

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-69111 Forum grading panel cannot be used when zoomed to 400%

          • Minor - Minor loss of function where workaround is possible
          • Closed

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-76000 Search input not aligned to the left

          • Minor - Minor loss of function where workaround is possible
          • Closed
          will help resolve

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-68249 Breadcrumb breaks out of its containers when zoomed to 400% on IE11

          • Minor - Minor loss of function where workaround is possible
          • Closed

          Improvement - An enhancement to an existing Moodle feature. MDL-60701 Theme Boost: Improve design / dimensions of page header

          • Minor - Minor loss of function where workaround is possible
          • Closed

          Activity

            People

              basbrands Bas Brands
              basbrands Bas Brands
              Jun Pataleta Jun Pataleta
              Victor Déniz Falcón Victor Déniz Falcón
              Janelle Barcega Janelle Barcega
              Jun Pataleta, Huong Nguyen, Bas Brands, Mathew May, Amaia Anabitarte, Carlos Escobedo, Laurent David, Mikel Martín Corrales, Sabina Abellan, Sara Arjona (@sarjona)
              Votes:
              0 Vote for this issue
              Watchers:
              8 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                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