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

Accessibility Toolkit: ignore fontawesome icon tags as italic accessibility errors

XMLWordPrintable

    • MOODLE_403_STABLE, MOODLE_404_STABLE, MOODLE_405_STABLE
    • MOODLE_404_STABLE, MOODLE_405_STABLE
    • MDL-82812_404_toolbrickfieldfaicons
    • MDL-82812_405_toolbrickfieldfaicons
    • MDL-82812_master_toolbrickfieldfaicons
    • 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)

      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"

      Your site will also need cron to run in some matter, as the accessibility toolkit analysis needs cron to fully function.

      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.

        <i class="fas fa-camera-retro" aria-hidden="true"></i><i class="fas fa-user"></i>
        

      • 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.
      • Manually run the scheduled task on the terminal or wait for cron to run:

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

      • Confirm that the scheduled task completed successfully.
      • View the error list for the course at More > Accessibility toolkit.
      • Confirm that the first FA i tag (camera-retro) is NOT present, in other words, is now seen as ok.
      • Confirm that the second FA i tag (user) IS present, in other words, is still seen as an accessibility error.
      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" Your site will also need cron to run in some matter, as the accessibility toolkit analysis needs cron to fully function. 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. <i class = "fas fa-camera-retro" aria-hidden= "true" ></i><i class = "fas fa-user" ></i> 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. Manually run the scheduled task on the terminal or wait for cron to run: php admin/cli/scheduled_task.php --execute= "\\tool_brickfield\\task\\process_analysis_requests" Confirm that the scheduled task completed successfully. View the error list for the course at More > Accessibility toolkit. Confirm that the first FA i tag (camera-retro) is NOT present, in other words, is now seen as ok. Confirm that the second FA i tag (user) IS present, in other words, is still seen as an accessibility error.

      As discussed thoroughly in MDL-72129 here, there are good arguments to continuing to view a tag such as

      <i class="fas fa-camera-retro" aria-hidden="true"></i>
      

      as an accessibility error.

      However, there are also arguments to NOT seeing this as a severe accessibility error. Semantic usage of the em tag over the i tag also expects there to be text within the tag itself, in order to be emphasised or made special, as seen in the W3org WCAG relevant docs. In the case of Font awesome standard usage, there is no text inside the i tag.

      As using this HTML for FA is still common practise, for old and new content, and also recommended by Font Awesome itself, what we're proposing is this: if the i tag has the class value which contains the string "fa-" AND also contains the aria-hidden="true" attribute, then we can ignore it as an accessibility error for now.

        1. MDL-82812.png
          441 kB
          Ron Carl Alfon Yu

            bigmoodle Max Larkin
            wuzi1999 Karen Holland
            Karen Holland Karen Holland
            Safat Shahin Safat Shahin
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 3 days, 3 hours, 4 minutes
                3d 3h 4m

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