I have responsibility for a government web site. We want to improve the accessibility of our pages. We know we have an issue with some of our markup which frustrates people who use a screen reader:
We have a block of content that has a main heading (hyperlinked), an image (hyperlinked) and a further link. The three links go to the same page.
The image has an empty alt tag as if we set a value it would be the same text as the second text link (in this case 'Skills Accelerator')
Here's the existing markup:
<a class="title" href="SkillsAccelerator.aspx">Grants for skills training</a>
<a class="title" href="SkillsAccelerator.aspx">
<img src="SkillsAcceleratorThumbnail.jpg" alt="" />
Your workplace could get up to £5,000 to cover skills training costs - find out how to apply
<a class='readmore' href="SkillsAccelerator.aspx">Skills Accelerator</a>
What I would like to achieve is to avoid having more than one link to the same page. We are moving to a responsive web design, and to make the page more tablet-friendly it would be good if the whole block is clickable.
How do we achieve this in the cleanest way?