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

Course management: insufficient colour contrast

XMLWordPrintable

    • MOODLE_37_STABLE, MOODLE_38_STABLE
    • MOODLE_37_STABLE, MOODLE_38_STABLE
    • MDL-68266-master
    • Hide

      Functional testing

      1. Log in as admin
      2. Navigate to Site Administration > Courses > Manage courses and categories
      3. Create 3 categories "Cat A", "Cat B", "Cat C" with Parent category "Top"
      4. For "Cat A" set the field "Category ID number" to be "Cat0123"
      5. Create 2 courses in "Cat A" named "Mathematics" and "Science"
        1. Verify you see a blue left border for the active category
        2. Verify you see checkboxes for each category
        3. Verify you see the grey text "Cat0123" in the row of "Cat A"
      6. Select "Cat B" and choose "Move selected categories to:" "Cat A"
        1. Verify "Cat B" is now a subcategory of "Cat A"
      7. Scroll down the page to the "Search courses" input
      8. Search for "Math"
        1. Verify you see course "Mathematics"
        2. Verify you see a checkbox for course "Mathematics"

      Accessibility testing

      1. Install a tool like the chrome plugins Axe or Wave for accessibility testing
        Note: You may see an occurrece of "Elements must have sufficient color contrast" for the "#menuselectsortby" element
        This is not a fail. It is picked up because the Axe tool is unable to distinguish the relative size of the up/down arrows which are shown in the dropdown and therefore is unable to determine whether they are conformant or not.
        The same applies for any other dropdown selects visible on the page
        1. Verify the page passes the colour contrast checks
      Show
      Functional testing Log in as admin Navigate to Site Administration > Courses > Manage courses and categories Create 3 categories "Cat A", "Cat B", "Cat C" with Parent category "Top" For "Cat A" set the field "Category ID number" to be "Cat0123" Create 2 courses in "Cat A" named "Mathematics" and "Science" Verify you see a blue left border for the active category Verify you see checkboxes for each category Verify you see the grey text "Cat0123" in the row of "Cat A" Select "Cat B" and choose "Move selected categories to:" "Cat A" Verify "Cat B" is now a subcategory of "Cat A" Scroll down the page to the "Search courses" input Search for "Math" Verify you see course "Mathematics" Verify you see a checkbox for course "Mathematics" Accessibility testing Install a tool like the chrome plugins Axe or Wave for accessibility testing Note: You may see an occurrece of "Elements must have sufficient color contrast" for the " #menuselectsortby " element This is not a fail. It is picked up because the Axe tool is unable to distinguish the relative size of the up/down arrows which are shown in the dropdown and therefore is unable to determine whether they are conformant or not. The same applies for any other dropdown selects visible on the page Verify the page passes the colour contrast checks

      The course management page has insufficient colour contrast for:

      • graduation cap icons with number of courses
      • category idnumber display (scitech)
      • borders around checkboxes

      Guidelines affected

      1.4.11 Non-text Contrast:
      1.4.11 The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

            basbrands Bas Brands
            basbrands Bas Brands
            Jun Pataleta Jun Pataleta
            Andrew Lyons Andrew Lyons
            Janelle Barcega Janelle Barcega
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 6 hours, 24 minutes
                6h 24m

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