Page tree
Skip to end of metadata
Go to start of metadata

Description

The page contains link names that are the same, but go to different targets. This could be very confusing to screen reader users.

Example:

<a href="/">Home</a>
<a href="/ati/">Home</a>

 

Checkpoint:
All Anchor elements are required not to use the same link text to refer to different resources. (Accessibility)

Message:  

Two or more links to different resources contain the same text.


Fix

Ensure to avoid to the same link name that goes to different targets. Add CSS off-screen positioned text  to differentiate each link. 

Note: "sr-only" will be the campus wide name used for all off screen positioned. 

 

Off-screen Example:

<a href="/"><span class="sr-only">CSULB</span> Home</a> 
<a href="/ati/"><span class="sr-only">ATI</span> Home</a>

 

CSS Code:

.sr-only {
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
z-index: -1000;
} 

 

  • No labels