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

Activity chooser tabs - Add an additional visual cue other than colour for active tabs

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: Minor Minor
    • None
    • 4.1.9, 4.2.7, 4.3.4
    • Accessibility, Course
    • MOODLE_401_STABLE, MOODLE_402_STABLE, MOODLE_403_STABLE

      How to reproduce

      1. Log into the latest Moodle sandbox as an admin or teacher
      2. Go to a course
      3. Turn on edit mode
      4. Add an activity

      Findings

      When a tab is selected in the activity chooser, the colour of the tab label changes to show that it's active. Whilst (with default Boost primary colour) the luminosity between the active and non active tabs changes and contrast is above 3:1, it may still be failing WCAG 1.4.1 Use of colour.

      The border gives an additional cue that the tab is active, however:

      • The border colour doesn't have much contrast and it may not be visible to someone with low vision;
      • When a tab has focus the border is hidden by the focus ring, therefore it is not clear that the tab is active.

       A user with low vision may miss the difference in colour brightness between the active and the non active tab. 

      As both active and inactive tabs are all elements that can interacted with, users that rely on  a colour contrast enhancer may not be able to perceive the difference at all.

       

      Suggested approach

      Show that a tab is active by also adding a thick border to at the top or bottom of the active tab (similar to the course menu).
      This could be similar to the course navigation menu (bottom border), or similar to the example provided by W3C (top border).

      UX Proposal

      Figma designs link

       

            Unassigned Unassigned
            Zanatta Susanna
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated:

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