Accessibility: Editing links accessibility improvement

Accessibility: Editing links accessibility improvement

by Stuart Lamour -
Number of replies: 5
Picture of Plugin developers

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

A better pattern would be :
<a href='foo' class='editing_delete' title='Delete'>
<img src='path/delete.gif' alt='' />
<span class='accesshide'>Delete</span>
</a>

I put this into the tracker - http://tracker.moodle.org/browse/MDL-31976

Average of ratings: -
In reply to Stuart Lamour

Re: Accessibility: Editing links accessibility improvement

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

That makes sense, but please educate me: why is it better to remove the alt="Delete" than the <span class='accesshide'>Delete</span>?

Average of ratings: -
In reply to Tim Hunt

Re: Accessibility: Editing links accessibility improvement

by Greg Kraus -

I'm not sure about this. The title attribute is not always a reliable means to convey information to screen reader users. Some screen readers do read the title attribute, but they are not required to, and I don't believe all screen readers do read it. In the case of just an image, you should never use the title attribute in places of the alt. Since this is a linked image, the case might be different. I'll do some testing and see how different screen readers behave.

Average of ratings: -
In reply to Greg Kraus

Re: Accessibility: Editing links accessibility improvement

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

I know the difference betweeen title and alt, and that is not what I was asking about. I was asking, which is better out of:

<a href='foo' class='editing_delete' title='Delete'>
<img src='path/delete.gif' alt='Delete' />
</a>

and

<a href='foo' class='editing_delete' title='Delete'>
<img src='path/delete.gif' alt='' />
<span class='accesshide'>Delete</span>
</a>

Average of ratings: -
In reply to Tim Hunt

Re: Accessibility: Editing links accessibility improvement

by Stuart Lamour -
Picture of Plugin developers

we could clean it up a whole lot more :

<a href='foo' class='editing_show' title='Publish <resource title> to course'>Show</a>

 

.commands a { text-indent:-9999em; }

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

 

Average of ratings: -
In reply to Stuart Lamour

Re: Accessibility: Editing links accessibility improvement

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Thanks for explaining. I think I get it now.

Average of ratings: -