Improving accessibility by removing repeated hyperlinks

Hi

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.

How it looks
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:

<div class="infobox">
	<div class="articleheader">
		<a class="title" href="SkillsAccelerator.aspx">Grants for skills training</a>
	</div>
	<a class="title" href="SkillsAccelerator.aspx">
		<img src="SkillsAcceleratorThumbnail.jpg" alt="" />
	</a>
	Your workplace could get up to £5,000 to cover skills training costs - find out how to apply
	<p>
		<a class='readmore' href="SkillsAccelerator.aspx">Skills Accelerator</a>
	</p>
<div>

Open in new window


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?
LVL 12
HairbrushAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Pawel WitkowskiSenior Javascript DeveloperCommented:
I'm not sure If i understood you correctly but could it work for you?:

<div class="infobox">
    <a href="SkillsAccelerator.aspx">
	<div class="articleheader">
		<span class="title">Grants for skills training</span>
	</div>
	<span class="title">
		<img src="SkillsAcceleratorThumbnail.jpg" alt="" />
	</span>
	Your workplace could get up to £5,000 to cover skills training costs - find out how to apply
	<p>
		<span class='readmore'>Skills Accelerator </span>
	</p>
   </a>
<div>

Open in new window


Instead of <a class> just have a <span class> to have it look as it was, just add a <a> around whole block ?
0
COBOLdinosaurCommented:
@wilq32,

That code is invalid and would be at least as much of an issue for a reader device.


Hairbrush,

Use a wrapper div to retain the block behavior of the overall component.

Then put every thing in side of an a tag style with display:block so you apply all the box styling.  Then put everthing in side the a usin img and spans that are styled fot the look you need.

<div class="classtoposition">
   <a class="classforthelook" href="SkillsAccelerator.aspx" title="something">
      <img src="SkillsAcceleratorThumbnail.jpg" class="imgfloatposition"  alt="something" />
      <span class="whateveryouneed "> text goes here, might need nested spans to get styling right.</span></a></div>

You will have to play with the styling, because real accessibility takes a little extra work.

Cd&

Open in new window

0
lightspeedvtCommented:
How about do this using javascript. Here is demo:
http://jsfiddle.net/VBaJU/
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

COBOLdinosaurCommented:
@lightspeedvt,

Did you even read the question.  They are trying to get rid of links, If all you are going to is post a link to your fiddle without even bothering to describe what you are doing, you could at least address the stated requirements.

Cd&
0
lightspeedvtCommented:
@COBOLdinosaur,

Right, thanks for pointing me out! I forgot to change <a> to <span> in my example. Here is updated demo:
http://jsfiddle.net/VBaJU/1/

Note for Hairbrush: if using my demo will broke layout - in this case will be good to see the CSS code.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I think I am reading several things into your question.

1) Should be accessible
2) Should be responsive
3) In sample, one link for the entire thing.

Once you start getting into responsive sites, it does take more thought then you are used to.  

I think you understand what you need to do to be accessible starting with valid code.  I know a lot of people ignore some of the validation errors such as missing alt tags because the site visually still looks the way they want.  But part of the reason an image needs the alt tag is for the screen reader.  Also using the <strong> tag instead of of <b> for bolding because the <b> tag is for visual and the <strong> tag shows importance textually.  For some time, it was suggested to use <strong> over <b> for SEO just for that purpose.

As far as responsive, this takes a lot more thought into developing each page as you may be designing 2 to 4 versions per page.  At the core are media quires https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries where you designate different css for different size viewports.   This is how you accommodate desktop full screen, desktop narrow screen, ipad/tablets and phones.  

While you can roll your own, I found it much easier to use bootstrap http://getbootstrap.com/ and foundation http://foundation.zurb.com/ as a base to build on.  Both have media queries, css/grid and js ready to go.  Actually, using the grid is what I use most.

In this sample, with a desktop, your code could look like your sample and the small screen everything will be stacked.
 <div class="row">
  <div class="col-xs-12 col-md-12 heading">This is my heading</div>
  
</div>


<div class="row clickme" data-href="SkillsAcceleratorThumbnail.jpg">
  <div class="col-xs-12 col-sm-3"><a href="SkillsAccelerator.aspx"><img src="SkillsAcceleratorThumbnail.jpg" width="150px" height="150px" alt="Skills Training"></a></div>
  <div class="col-xs-12 col-sm-9"><p>Your workplace could get up to £5,000 to cover skills training costs - find out how to apply</p><p class="redtext">Skills Accelerator</p></div>
 
</div>

Open in new window

This is a working sample including clicking the entire div http://jsbin.com/UCaNeVi/2/edit
html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>padas</title>
</head>
<body>
 <div class="row">
  <div class="col-xs-12 col-md-12 heading">This is my heading</div>
  
</div>


<div class="row clickme" data-href="SkillsAcceleratorThumbnail.jpg">
  <div class="col-xs-12 col-sm-3"><a href="SkillsAccelerator.aspx"><img src="SkillsAcceleratorThumbnail.jpg" width="150px" height="150px" alt="Skills Training"></a></div>
  <div class="col-xs-12 col-sm-9"><p>Your workplace could get up to £5,000 to cover skills training costs - find out how to apply</p><p class="redtext">Skills Accelerator</p></div>
 
</div>

</body>
</html>

Open in new window

css
.container{width:900px;}
.row{background-color:lightblue;}

Open in new window

jquery
$('div.clickme').click(function(){
  var h=$(this).attr('data-href');
  window.location.href = h;
});
$('div.clickme').css( 'cursor', 'pointer' );

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
HairbrushAuthor Commented:
Thanks everyone for your contributions to this question :)

Scott, that looks to me to be a good solution and I am running it by my designer and developers.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.