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

Improve the contrast of browser focus outline

XMLWordPrintable

    • MOODLE_37_STABLE, MOODLE_39_STABLE
    • MOODLE_39_STABLE
    • MDL-67874-master
    • 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

      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.

        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

            basbrands Bas Brands
            jpataleta Jun Pataleta
            Jun Pataleta Jun Pataleta
            Jake Dallimore Jake Dallimore
            Anna Carissa Sadia Anna Carissa Sadia
            Votes:
            0 Vote for this issue
            Watchers:
            10 Start watching this issue

              Created:
              Updated:
              Resolved:

                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

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