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

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

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 1.9.17, 2.2.2
    • Fix Version/s: 2.2.6, 2.3.3
    • Component/s: Accessibility
    • Labels:
    • Database:
      Any
    • Testing Instructions:
      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
    • Affected Branches:
      MOODLE_19_STABLE, MOODLE_22_STABLE
    • Fixed Branches:
      MOODLE_22_STABLE, MOODLE_23_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-31976-master

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

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Votes:
                  2 Vote for this issue
                  Watchers:
                  4 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:
                    Fix Release Date:
                    12/Nov/12