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

File extension in Essay accepted file type list is failing accessibility color contrast limits

XMLWordPrintable

    • MOODLE_310_STABLE, MOODLE_311_STABLE, MOODLE_39_STABLE
    • MOODLE_311_STABLE
    • MDL-73142-master
    • Hide
      1. Log in as a teacher
      2. Create a quiz activity with an essay question that accepts attachments
      3. Select a few file attachment types from the list
      4. Attempt the quiz (doing so, the quiz background should be blue)
      5. Check the contrast of the smaller file extension text
        • On Chrome: Open the browser dev tools, then click on "Select an element on the page to inspect it" (Upper left-hand corner button) or press Ctrl + Shift + C. Then hover on the list of file extensions. There should be a Contrast section there that displays the value of the colour contrast ratio.
        • On Firefox: Right-click on the list of file extensions and click "Inspect Accessibility Properties". A dev tools window will show up that contains a section called "Colour and Contrast".
      6. Confirm that the contrast ratio value is greater than 4.5.
      Show
      Log in as a teacher Create a quiz activity with an essay question that accepts attachments Select a few file attachment types from the list Attempt the quiz (doing so, the quiz background should be blue) Check the contrast of the smaller file extension text On Chrome: Open the browser dev tools, then click on " Select an element on the page to inspect it " (Upper left-hand corner button) or press Ctrl + Shift + C. Then hover on the list of file extensions. There should be a Contrast section there that displays the value of the colour contrast ratio. On Firefox: Right-click on the list of file extensions and click "Inspect Accessibility Properties". A dev tools window will show up that contains a section called "Colour and Contrast". Confirm that the contrast ratio value is greater than 4.5.

      The color contrast for the quizzes has been recently addressed within MDL-69392, however, the list of the permitted file types has the file extension in a light shade of grey that fails color contrast against the blue background.

      Contrast is just 4.12 failing against Level AA requirements:

       

      Besides the Quiz component passing the contrast requirements, is the use of a blue background justified?

      We have had feedback from users affected by visual dyslexia who have issues reading the copy despite the more than adequate color contrast because of the blue background/blue text combination. Some of these users use colored lenses to ease the visual stress and they would need a white background.

      Since the ability of completing a quiz is a vital use case, is there a strong enough reason for using a blue background and blue text? If the reason is just the separation of the quiz element from other parts of the page, could this blue be much lighter and/or make use of other separators?

        1. image-2021-11-22-16-34-28-780.png
          2 kB
          Susanna
        2. image-2021-11-22-16-34-48-999.png
          42 kB
          Susanna
        3. MDL-73142_Test Passed.PNG
          110 kB
          Gladys Basiana

            Zanatta Susanna
            Zanatta Susanna
            Tim Hunt Tim Hunt
            Jun Pataleta Jun Pataleta
            Gladys Basiana Gladys Basiana
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 hour
                1h

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