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

Fix colour/contrast issues found in the 3.11 accessibility audit

XMLWordPrintable

    • MOODLE_310_STABLE, MOODLE_311_STABLE
    • MOODLE_310_STABLE, MOODLE_311_STABLE
    • MDL-72667-master
    • Hide

      Setup

      1. A course with a couple students enrolled.
      2. An assignment activity with due date in the past.
      3. A lesson activity with a simple multi choice question
      4. A quiz activity with a simple question.

      Notification

      1. Log in as s1.
      2. Click on the bell icon and then in the cog to go "Notification settings"
      3. Enable both Online and Offline for Assignment notifications.
      4. Go to the assignment and make a submission.
      5. Note there's a new notification, click on the bell icon.
      6. Hover onto the new notification.
      7. Make sure when you hover onto the notification the colour is inverted to blue.
      8. Make sure texts and links has enough colour contrast compared to the background color:

      Messaging

      1. Log in as a admin and send a private message to s1.
      2. As s1 go to Messages and expand Private tab
      3. Make sure when you hover onto the notification the colour is inverted to blue.
      4. Make sure texts and links has enough colour contrast compared to the background color:

      Lesson

      1. As s1, go to the lesson and submit an answer.
      2. As admin go to the lesson, then click Reports tab.
      3. Go to the Detailed statistics tab and note the correct answer.
      4. Make sure the the correct answer now is green and it has a "Correct response" badge:

      Assignment

      1. As admin, go to the assigment acitivity and click View all submissions button.
      2. Make sure the "Assignment is overdue by: 1 day 12 hours" message red colour has enough colour contrast.
      3. Now click on Grade button for any user.
      4. Note the Not graded and Overdue labels
      5. Make sure the red has enough color contrast against the background grey colour:

      Quiz

      1. As s1 go to the quiz and make an attempt.
      2. After the attempt, look your Summary of previous attempts
      3. Inspect the the attempt row and in Styles, Force element state to :hover
      4. Make sure the blue has enough color contrast against the hover background grey colour:
      Show
      Setup A course with a couple students enrolled. An assignment activity with due date in the past. A lesson activity with a simple multi choice question A quiz activity with a simple question. Notification Log in as s1 . Click on the bell icon and then in the cog to go "Notification settings" Enable both Online and Offline for Assignment notifications . Go to the assignment and make a submission . Note there's a new notification, click on the bell icon. Hover onto the new notification. Make sure when you hover onto the notification the colour is inverted to blue . Make sure texts and links has enough colour contrast compared to the background color: Messaging Log in as a admin and send a private message to s1 . As s1 go to Messages and expand Private tab Make sure when you hover onto the notification the colour is inverted to blue . Make sure texts and links has enough colour contrast compared to the background color: Lesson As s1 , go to the lesson and submit an answer. As admin go to the lesson , then click Reports tab. Go to the Detailed statistics tab and note the correct answer. Make sure the the correct answer now is green and it has a "Correct response" badge: Assignment As admin , go to the assigment acitivity and click View all submissions button. Make sure the "Assignment is overdue by: 1 day 12 hours" message red colour has enough colour contrast. Now click on Grade button for any user. Note the Not graded and Overdue labels Make sure the red has enough color contrast against the background grey colour: Quiz As s1 go to the quiz and make an attempt . After the attempt, look your Summary of previous attempts Inspect the the attempt row and in Styles, Force element state to :hover Make sure the blue has enough color contrast against the hover background grey colour:
    • 6
    • HQ Team International Sprin 10, HQ Team International CI H2-21

      1. Notifications popover
        1. Text inside notification drop-down on mouse hover
        2. "View full notification" text on mouse hover without focus
        3. "View full notification" text on mouse hover with focus
      1. Message drawer
        1. No clear focus indicator when selecting a conversation
        2. Default browser focus indicator when selecting a message in a conversation (not mentioned in the audit but is an existing issue)
      1. Link text contrast on mouseover against a dark background like on striped tables.
        • Recommendation: Consider removing the grey hover state or darkening the link text to something like #0D5FA8
      1. Assignment - Grading interface
        1. Insufficient contrast for the red "Not graded" text.
      1. Lesson - Detailed report
        1. Correct item's text doesn't have sufficient colour contrast against the background on mouseover.

        1. correctresponseindicator.png
          3 kB
          Jun Pataleta
        2. image-2021-11-04-10-52-46-172.png
          43 kB
          Huong Nguyen
        3. image-2021-11-04-10-53-06-750.png
          39 kB
          Huong Nguyen
        4. MDL-72667_Assignment_1.png
          157 kB
          Angelia Dela Cruz
        5. MDL-72667_Assignment_2.png
          82 kB
          Angelia Dela Cruz
        6. MDL-72667_Lesson.png
          95 kB
          Angelia Dela Cruz
        7. MDL-72667_Messaging.png
          51 kB
          Angelia Dela Cruz
        8. MDL-72667_Notification_1.png
          112 kB
          Angelia Dela Cruz
        9. MDL-72667_Notification_2.png
          142 kB
          Angelia Dela Cruz
        10. MDL-72667_Quiz.png
          98 kB
          Angelia Dela Cruz
        11. MDL-72667 correct.png
          3 kB
          Simey Lameze
        12. MDL-72667 message drawer.png
          14 kB
          Simey Lameze
        13. MDL-72667 notgradedoverdue.png
          13 kB
          Simey Lameze
        14. MDL-72667 notification.png
          20 kB
          Simey Lameze
        15. MDL-72667 quiz.png
          33 kB
          Simey Lameze
        16. MDL-72667 two shades of red.png
          15 kB
          Simey Lameze

            lameze Simey Lameze
            jpataleta Jun Pataleta
            Dongsheng Cai Dongsheng Cai
            Jun Pataleta Jun Pataleta
            Angelia Dela Cruz Angelia Dela Cruz
            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 - 4 days, 58 minutes
                4d 58m

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