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

            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.