Accessibility Recipes/Styling Links

From DPWiki
Jump to navigation Jump to search

There are two aspects to styling links for accessibility purposes. One is to make the link distiguishable without relying only on colour, usually by underlining. The other is to make the tab cursor visible for those who tab from link to link.

Underlining Links

It's generally not a good idea to remove the underlining of links, because then the fact that they are links is conveyed using colour only, which some people may not be able to see.

What to do and how?

Possibly nothing! All browsers distinguish links clearly, usually by underlining as well as colour, so if you haven't altered this you are fine. All you might do is check to see if your CSS contains a line like

a:link { text-decoration:none; }

which you might consider removing or changing.

Why?

W3C:

  • WCAG 1, Checkpoint 2.1 Ensure that all information conveyed with color is also available without color. (Priority 1)
  • Draft WCAG 2, success criterion 1.4.1 Use of Color: Any information that is conveyed by color differences is also simultaneously visually evident without the color differences. (Level A)

Who benefits?

Colourblind people, people who may have switched to a high-contrast colour scheme, people using a monochrome display.

Drawbacks

You may feel that the underlining looks ugly. (Some other marking, such as bold font, might work: the key is that it should not rely only on colour.)

It is safe to remove it if there are other clues that this is a link. For example, it may be reasonable to assume that the reader will realise that the Table of Contents entries are links. It's really the links occurring in passages of text we should worry about.

Testing

No real need for testing. If your browser allows you to switch to a special stylesheet (e.g. in Opera, switch to white on black) you could try that to check that you can distinguish the links.

Further Reading

Styling Link Focus

Many people move around a document by tabbing from link to link. Many browsers show which link currently has the keyboard focus by using a faint dotted outline. This can often make it hard to see where the tab cursor is.

What to do and how?

Add the following lines to your CSS:

a:focus, a:active { outline:#ffee66 solid 2px; background-color:#ffee66;}
a:focus img, a:active img {outline: #ffee66 solid 2px; }

This will highlight links in pale yellow when they have tab focus. IE doesn't support a:focus but a:active will have the same effect in IE. In other browsers a:active determined how the link will look during clicking.

Outline is used rather than border, because border takes up space and we don't want the document to reflow while tabbing around.

If you use Guiguts, you can add these lines to your header.txt in the guiguts folder to automate the process for the future projects.

Why?

Who benefits?

People with motor difficulties, people with RSI, anyone who can't or doesn't want to use a mouse.

Drawbacks

You may feel that the highlighting looks ugly. It certainly needn't be yellow—you can style it however you want, although the purpose is to make it stand out.

If you remove the a:active part, then only keyboard users will ever see the highlighting (rather than everyone when they click), but unfortunately keyboard users using IE will only see the browser's default faint highlighting.

Testing

Look away from the screen while hitting Tab a random number of times. Now look back at the screen. Can you immediately tell where the cursor is?

Further Reading