HomeAccessible Anchors
This section deals with text links. Images used as links will be discussed in the next chapter.
The <a tag has several attributes you can use such as target="_blank" but one that is sadly overlooked tags is the title attribute.
You are probably familiar with the image alt tag, which displays the alt tag value in a tooltip. Using the title attribute on text links give the same effect.
You don't need to apply a title tag to every link as long as the link text makes sense when read in context. I use the title throughout the site - on forms, links to external sites that open in a new window, internal links that open in a custom javascript window etc.
Here's an external link which would open in a new window example.
(place your pointer over the link to see the tooltip - browser dependant)
One of the reasons for the text is, visitors must be aware that clicking on the link will either open a new window or change the current window properties.
It is acceptable(sort of) to open a new window as long as the user knows in advance. Opening new windows does create other problems though, such as, the new window doesn't inherit the history of the current window, rendering the back button useless.
Another problem is large groups of links. If you look at the left navigation on this site you can see they look fine (depending on your browser). However what if the visitor has a browser that doesn't do html formatting and will only display links, image alt text and <p> tags.
Here is how the home navigation block would render in such a scenario
home about andy contact questionnaire privacy site usageTake a close look at the links, it's really difficult to tell what are 2 word links and which are 1 word. Remember we are catering for users who might have styles disabled or using a speech reader or can't use a mouse.
Imagine how that would look with all the links in the left navigation added to the above. In cases like that you have to separate the links with more than a space. The most common approach is to use square brackets [ ].
Even though you can't see the [ ] around the links on the left navigation on this site they are there and would render like this in the same scenario as above. It's still just link after link but more readable and if links contain more than 1 word we can clearly see individual links.
[home] [about andy] [contact] [questionnaire] [privacy] [site usage]In Lynx it renders like this
[home][about andy]
[contact]
[questionnaire]
[privacy]
[site usage]
I have hidden [ ] with style sheets. The html for each link looks similar to this
<span class="hideme">[</span><a href="A FILE">Some Text</a><span class="hideme">]</span>And style is simply
.hideme{visibility:hidden;
}
Where you have large groups of links create a link at the top of the group which takes you to the start of the main content. Make the first link in the group :
<a href="#main_content">skip navigation</a>
and where your content starts put
<a name="main_content"></a>
This allows visitors to skip over repetitive links
Do not use javascript urls in anchors.
For example : if you use something like this...<a href="javascript:do_something();">
change it to
<a href="#" onclick="do_something();return false;" onkeypress="do_something();return false;">
When using onclick you are making the link mouse dependant. What you must do is provide an equivalent event handler that does not require the mouse.
So make sure you supply 2 handlers for the same event, both with the same code.
- If you use onmousedown then also use onkeydown
- If you use onmouseup then also use onkeyup
- If you use onclick then also use onkeypress
- If you use onmouseover then also use onfocus
- If you use onmouseout then also use onblur
Links that activate scripts can only be followed by browsers capable of using javascript. By using href="javascript:...." you are basically creating a dead link to non javascript browsers. By changing it to href="#", you are not breaking the link. Using # will reload the page for non javascript browsers.
For javascript browsers we use return false so the link isn't followed in the browser but the script is still activated.
Don't forget to put a title tag informing the visitor what happens with this link.
You also have to be careful with link phrases as well. Duplicate link text which point to different urls is one of the reasons this site fails validation.
If you look on the left navigation you will see an html link which takes you to the html section of this site. In the right navigation you will also see an html link which takes you to the html books section in the webdevtips store. This could be confusing to visitors and should really be avoided.I could change the links manually but sections of the site are dynamically generated so trying to eliminate every possibility of duplicate link text is ,in my opinion, just not feasible at this stage. Having said that, you have to consider it when starting new projects.
Don't use Click Here text as a link.
A link such as, click here for more information should be avoided. All you have to do is re-phrase the text to something like, see more information about our great products
click here implies that the visitor is able to control a mouse and click on the link. Something as simple as re-phrasing the text not only removes that impression but also makes the link more attractive to follow for everyone.
That should keep you all busy for a while :)
The small [ ] trick above really is worth applying even if you can't get your site to validate - the more work you do equals more people being able to use your site :)
- Accessibility Home
- Accessibility - a new way of thinking - More information that might be useful before you start.
- Accessible anchors - Learn how to make your links more useful.
- Accessible images - beyond the alt tag.
- Accessible forms - web form accessibility also aids overall form usability.
- Useful links and resources
Get your questions answered quickly.
]
[
]