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

Alphabetic font sizes can cause an error in the Brickfield's css_text_has_contrast check

XMLWordPrintable

    • MOODLE_311_STABLE, MOODLE_400_STABLE, MOODLE_401_STABLE, MOODLE_402_STABLE, MOODLE_403_STABLE
    • MOODLE_401_STABLE, MOODLE_402_STABLE, MOODLE_403_STABLE
    • MDL-73974-401
    • MDL-73974-403
    • MDL-73974-main
    • 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. (Make sure your server can be accessed over the internet, e.g. using ngrok)

      • 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:
      1. Create a new course
      2. Turn editing mode on
      3. Create a label resource (Text and media area)
      4. Edit the resource using the editor's "View source" feature to insert the following HTML and save.

        <p dir="ltr" style="color: #6666ff; background-color: white; font-size: x-large;">x-large text good enough contrast of 4.27</p>
        

      5. Create another label resource and paste the following HTML.

        <p dir="ltr" style="color: #6666ff; background-color: white; font-size: normal;">Normal text with insufficient contrast of 4.27</p>
        

      6. Add the "Accessibility review" block to the course.
      7. Click on the "Submit to Analysis" button to request that the course be analyzed by the accessibility toolkit.
      8. 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.)
        • Alternatively, manually run the scheduled task on the terminal:

          php admin/cli/scheduled_task.php --execute="\\tool_brickfield\\task\\process_analysis_requests"

      9. Reload the course homepage. If the processing happened, you should see results on the Accessibility review block. Make sure the Show heatmap icon (eye icon) is activated.
      10. Confirm that the label with the extra large text has no failure from the accessibility check.
      11. Confirm that the label with normal font size fails the accessibility check.
      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 . (Make sure your server can be accessed over the internet, e.g. using ngrok) 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 Turn editing mode on Create a label resource (Text and media area) Edit the resource using the editor's "View source" feature to insert the following HTML and save. < p dir = "ltr" style = "color: #6666ff; background-color: white; font-size: x-large;" >x-large text good enough contrast of 4.27</ p > Create another label resource and paste the following HTML. < p dir = "ltr" style = "color: #6666ff; background-color: white; font-size: normal;" >Normal text with insufficient contrast of 4.27</ p > Add the "Accessibility review" block to the course. Click on the "Submit to Analysis" button to request that the course be 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.) Alternatively, manually run the scheduled task on the terminal: php admin /cli/scheduled_task .php --execute= "\\tool_brickfield\\task\\process_analysis_requests" Reload the course homepage. If the processing happened, you should see results on the Accessibility review block. Make sure the Show heatmap icon (eye icon) is activated. Confirm that the label with the extra large text has no failure from the accessibility check. Confirm that the label with normal font size fails the accessibility check.

      HTML such as:
      <p style="color:#333333; background-color:#000000; font-size: large;">
      can cause the css_text_has_contrast to fail. This is due to the check looking for font-size numeric values and not handling alpha values for large-scale text as described here by W3C.

            wuzi1999 Karen Holland
            mchurch Mike Churchward
            Meirza Meirza
            Jun Pataleta Jun Pataleta
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            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 - 2 hours, 33 minutes
                2h 33m

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