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

Remove alt and title text from decorative icons

XMLWordPrintable

    • MOODLE_403_STABLE
    • Hide

      Steps to Replicate:

      • Fresh Moodle Site
      • Create a new subject
      • Go to Grades tab
      • View the icon next to "Subject total" it has alt and title text

      A screen reader extension can be added to any browser to hear what it does say when using the site. Alternatively the icon can be inspected and made sure that the alt text is missing, and instead it shows aria-hidden="true" e.g.

      <img class="icon icon itemicon" alt="" aria-hidden="true" src="https://moodle.localhost/theme/image.php/boost/core/1692688727/i/agg_sum">

      Show
      Steps to Replicate: Fresh Moodle Site Create a new subject Go to Grades tab View the icon next to "Subject total" it has alt and title text A screen reader extension can be added to any browser to hear what it does say when using the site. Alternatively the icon can be inspected and made sure that the alt text is missing, and instead it shows aria-hidden="true" e.g. <img class = "icon icon itemicon" alt= "" aria-hidden= "true" src= "https://moodle.localhost/theme/image.php/boost/core/1692688727/i/agg_sum" >

      The images in the data table have alternative text; however, the images are decorative because they do not convey any important information and are not linked.

      Screen reader users are presented with unnecessary information and this adds to the 'noise' of the page.
      Removing the alt and title text from decorative icons fixes this screen-reader annoyance, improving accessibility.  Alternatively aria-hidden="true" can be added instead, however aria is not fully supported, so I would recommend just removing the attributes instead as they do not provide value

      This came from an accessibility audit that one of our clients had carried out on their site.

            Unassigned Unassigned
            jay-oswald Jay Oswald
            Votes:
            1 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved:

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