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

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

    XMLWordPrintable

Details

    • Bug
    • Status: Closed
    • Minor
    • Resolution: Fixed
    • 1.9.17, 2.2.2
    • 2.2.6, 2.3.3
    • Accessibility
    • 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

    Description

      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...}

      Attachments

        Issue Links

          Activity

            People

              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

              Dates

                Created:
                Updated:
                Resolved:
                12/Nov/12