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

editing links have title attribute, and img has duplicate alt/title text

XMLWordPrintable

    • Any
    • MOODLE_19_STABLE, MOODLE_22_STABLE
    • MOODLE_22_STABLE, MOODLE_23_STABLE
    • MDL-31976-master
    • Hide

      Test pre-requisites

      • Javascript disabled
      • A course with some activities and resources in different sections

      Test steps

      1. As an admin, go to a course and turn editing on
      2. Inspect the icons in the sections and
        • Make sure they don't have a title, if the parent DOM element already has one
        • Make sure the alt is present, but only empty when the image is not important
        • Make sure mousing over those icons the title of the parent DOM (<a>) is displayed as a tooltip
      3. Repeat the test with Javascript enabled
      Show
      Test pre-requisites Javascript disabled A course with some activities and resources in different sections Test steps As an admin, go to a course and turn editing on Inspect the icons in the sections and Make sure they don't have a title, if the parent DOM element already has one Make sure the alt is present, but only empty when the image is not important Make sure mousing over those icons the title of the parent DOM (<a>) is displayed as a tooltip Repeat the test with Javascript enabled

      Editing links, such as 'editing_show' have a title e.g. "Show" which is shown on hover, and read by screen readers.

      The images (class="iconsmall") within these links also have alt text and titles e.g. "Show" - which is also shown on hover (some browsers) and read by screen readers.

      The title attribute should only be applied to the link element. The alt text and title on the icon are unnecessary.

      When users of screen readers encounter this they hear "Show show", "Delete delete", "Move move", etc...

      These links should only have the title attrib in the link, and no title or alt on the icon.
      e.g.
      <a href='foo' class='editing_delete' title='Delete'>
      <img src='path/delete.gif' alt='' />
      Delete
      </a>
      An even cleaner solution would be :
      <a href='foo' class='editing_show' title='Publish <resource title> to course'>Show</a>
      then with css :
      .commands a

      { text-indent:-9999em; }

      .editing_show

      { background: transparent url('path/show.gif') etc...}

            fred Frédéric Massart
            stuartlamour Stuart Lamour
            Adrian Greeve Adrian Greeve
            Sam Hemelryk Sam Hemelryk
            Jason Fowler Jason Fowler
            Votes:
            2 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.