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

Colour contrast issues with the accessibility toolkit's heatmap

XMLWordPrintable

    • MOODLE_401_STABLE, MOODLE_403_STABLE, MOODLE_404_STABLE, MOODLE_405_STABLE
    • MDL-79288-403_blockaccessreview_colourcontrastcheck
    • MDL-79288-404_blockaccessreview_colourcontrastcheck
    • MDL-79288-main_blockaccessreview_colourcontrastcheck
    • Hide

      Setup:

      To test this the site needs to be registered with Brickfield. If you don't have a Brickfield account, you can register here .

      1. Activate your site with Brickfield in "Site administration / Plugins / Admin tools / Accessibility / Brickfield registration" by entering the API and Secret keys.
      2. Enable analysis requests in "Site administration / Plugins / Admin tools / Accessibility / Accessibility toolkit settings".

      Test:

      1. Create a new course.
      2. Ensure the course is set to the Topics format (Heatmap is only enabled for the topics and weeks formats).
      3. Add a resource to the course, something that can be edited with the ATTO Editor. (Suggest using a Page resource.)
      4. Edit the resource and use the ATTO Editor to insert this included HTML, to produce a definite error, "<p>This is <strike>some strike text</strike>!<br>This is <u>some underlined text</u>!!</p>" and save.
      5. Add a second resource to the course, something that can be edited with the ATTO Editor. (Suggest using a Page resource.)
      6. Edit the second resource and use the ATTO Editor to insert this included HTML, to produce error-free HTML, "<p>This is some normal text!!</p>" and save.
      7. Add the "Accessibility review" block to the course.
      8. Click on the "Submit to Analysis" button to request that the course is analyzed by the accessibility toolkit.
      9. Run cron. (You should edit the brickfield cron tasks at Site administration > Server > Tasks > Scheduled tasks to run every minute to speed up this analysis process so that the brickfield task is run the very next time you run cron.)
      10. The HTML will be flagged with two errors for the first page resource, and no errors for the second page resource.
      11. When the accessibility check has been completed, turn on the heatmap (eye icon) on the accessibility review block.
      12. Check the page with an accessibility checker (e.g. axe DevTools).
      13. Expected: There should be no colour contrast issues on the page.
      14. Actual: Colour contrast issues are reported by the accessibility checker for both page resources.
      15. Update the tool_brickfield code with this patch.
      16. Purge all caches to ensure that the new CSS is ready.
      17. Reload the course main page and check the page again with an accessibility checker (e.g. axe DevTools).
      18. Expected: There should be no colour contrast issues on the page.
      19. Actual: There are no colour contrast issues on the page for the heatmap surrounding the page resources.
      Show
      Setup: To test this the site needs to be registered with Brickfield. If you don't have a Brickfield account, you can register here . Activate your site with Brickfield in "Site administration / Plugins / Admin tools / Accessibility / Brickfield registration" by entering the API and Secret keys. Enable analysis requests in "Site administration / Plugins / Admin tools / Accessibility / Accessibility toolkit settings". Test: Create a new course. Ensure the course is set to the Topics format (Heatmap is only enabled for the topics and weeks formats). Add a resource to the course, something that can be edited with the ATTO Editor. (Suggest using a Page resource.) Edit the resource and use the ATTO Editor to insert this included HTML, to produce a definite error, "<p>This is <strike>some strike text</strike>!<br>This is <u>some underlined text</u>!!</p>" and save. Add a second resource to the course, something that can be edited with the ATTO Editor. (Suggest using a Page resource.) Edit the second resource and use the ATTO Editor to insert this included HTML, to produce error-free HTML, "<p>This is some normal text!!</p>" and save. Add the "Accessibility review" block to the course. Click on the "Submit to Analysis" button to request that the course is analyzed by the accessibility toolkit. Run cron. (You should edit the brickfield cron tasks at Site administration > Server > Tasks > Scheduled tasks to run every minute to speed up this analysis process so that the brickfield task is run the very next time you run cron.) The HTML will be flagged with two errors for the first page resource, and no errors for the second page resource. When the accessibility check has been completed, turn on the heatmap (eye icon) on the accessibility review block. Check the page with an accessibility checker (e.g. axe DevTools). Expected: There should be no colour contrast issues on the page. Actual: Colour contrast issues are reported by the accessibility checker for both page resources. Update the tool_brickfield code with this patch. Purge all caches to ensure that the new CSS is ready. Reload the course main page and check the page again with an accessibility checker (e.g. axe DevTools). Expected: There should be no colour contrast issues on the page. Actual: There are no colour contrast issues on the page for the heatmap surrounding the page resources.

      To reproduce:

      1. Set up the accessibility toolkit on your Moodle instance as per the documentation. (You may need to expose your instance over the internet. This can be done using ngrok)
      2. Add the Accessibility review block to a course.
      3. Check the accessibility of the course's contents (See the docs. You may also need to run cron).
      4. When the accessibility check has been completed, turn on the heatmap (eye icon) on the accessibility review block.
      5. Check the page with an accessibility checker (e.g. axe DevTools)
      6. Expected: There should be no colour contrast issues on the page.
      7. Actual: Colour contrast issues are reported by the accessibility checker.

        1. block_review_newcss.png
          block_review_newcss.png
          38 kB
        2. contrast issues on course homepage.png
          contrast issues on course homepage.png
          338 kB

            Unassigned Unassigned
            jpataleta Jun Pataleta
            Karen Holland Karen Holland
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:

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