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

Improve the contrast of browser focus outline

    XMLWordPrintable

    Details

    • Affected Branches:
      MOODLE_37_STABLE, MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_39_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-67874-master
    • Testing Instructions:
      Hide

      Please try these changes on both theme Classic and Boost.

      Navigate to the following pages and use the tab key to navigate. When you tab to the different elements please check if:

      • Buttons have a clear outline border with an inset white border.
      • Links have a thick dark underline and a light blue background colour.

      All tabable page element should have a clear outline. Links should have a dark border-bottom and a light blue background. Buttons should get a clear outline which can differer based on the button type

      1. A course landing page with activities
      2. The courses management page
      3. The course settings page
      4. The calendar
      5. The private files (please upload some)
      6. The user dashboard
      7. The user profile page
      8. A Moodle quiz
      Show
      Please try these changes on both theme Classic and Boost. Navigate to the following pages and use the tab key to navigate. When you tab to the different elements please check if: Buttons have a clear outline border with an inset white border. Links have a thick dark underline and a light blue background colour. All tabable page element should have a clear outline. Links should have a dark border-bottom and a light blue background. Buttons should get a clear outline which can differer based on the button type A course landing page with activities The courses management page The course settings page The calendar The private files (please upload some) The user dashboard The user profile page A Moodle quiz

      Description

      Issue

      Default and low contrast focus

      Browser default focus is used. This makes it difficult for a user to see where they are. In Chrome the default keyboard focus is #A5C7FE. On a white background the colour contrast ratio for this sky-blue colour on white is only 1.7:1. In order to pass for Use of Colour (A) the contrast ratio must be at least 3.1:1.

      These pages also use other forms of visible mouse and keyboard focus but they also fail due to insufficient colour contrast ratio

      Impact on users

      Keyboard only and low vision users may find it difficult to see where they are.

      Guidelines affected
      • 1.4.1 Use of Colour (A)
        • Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
      • 2.4.7 Focus Visible (AA)
        • Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
      Recommendation

      Ensure that there is sufficient colour contrast and consistent behaviour for link focus with different browsers. It is considered 'best practice' to have the same behaviour for mouse and keyboard focus.

        Attachments

        1. A course landing page with activities.avi
          1.59 MB
        2. activity.png
          activity.png
          26 kB
        3. activitychooser.png
          activitychooser.png
          20 kB
        4. addanactivity.png
          addanactivity.png
          26 kB
        5. A Moodle quiz.avi
          1.50 MB
        6. calendar-date-link.png
          calendar-date-link.png
          2 kB
        7. calendar-new-event.png
          calendar-new-event.png
          1 kB
        8. cog.png
          cog.png
          3 kB
        9. custom-nav-and-language-menus.png
          custom-nav-and-language-menus.png
          6 kB
        10. Features Demo.mbz
          343 kB
        11. filepicker_withoutpatch.png
          filepicker_withoutpatch.png
          57 kB
        12. filepicker_withpatch.png
          filepicker_withpatch.png
          49 kB
        13. filepicker.png
          filepicker.png
          47 kB
        14. icon-focus.png
          icon-focus.png
          3 kB
        15. month-course-select.png
          month-course-select.png
          2 kB
        16. privatefiles.png
          privatefiles.png
          11 kB
        17. profile1.png
          profile1.png
          27 kB
        18. profile2.png
          profile2.png
          27 kB
        19. screenshot_1.png
          screenshot_1.png
          17 kB
        20. screenshot.png
          screenshot.png
          30 kB
        21. screenshot-1.png
          screenshot-1.png
          3 kB
        22. Screenshot 2020-02-20 at 16.33.31.png
          Screenshot 2020-02-20 at 16.33.31.png
          1002 kB
        23. Screenshot 2020-05-06 at 16.30.11.png
          Screenshot 2020-05-06 at 16.30.11.png
          104 kB
        24. tabbing.gif
          tabbing.gif
          312 kB
        25. tabs.png
          tabs.png
          19 kB
        26. The calendar.avi
          2.57 MB
        27. The course settings page.avi
          1.84 MB
        28. The courses management page.avi
          2.52 MB
        29. The private files.avi
          2.05 MB
        30. The user dashboard.avi
          3.59 MB
        31. The user profile page.avi
          2.36 MB

          Issue Links

            Activity

              People

              Assignee:
              basbrands Bas Brands
              Reporter:
              jpataleta Jun Pataleta
              Peer reviewer:
              Jun Pataleta Jun Pataleta
              Integrator:
              Jake Dallimore Jake Dallimore
              Tester:
              Anna Carissa Sadia Anna Carissa Sadia
              Participants:
              Component watchers:
              Andrew Lyons, Dongsheng Cai, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              0 Vote for this issue
              Watchers:
              9 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 - 1 day, 6 hours, 23 minutes
                  1d 6h 23m