Buttons & Links

Make sure your buttons and links are accessible by following these guidelines:

Both UIS Themed and Non-UIS Themed Sites

The link text should be understandable out of context.

Many screenreaders include the option to read a list of links on the page, making it easier for screenreader users to navigate quickly through the website. The screenreader user hears only the link text (not the URL), so the link text should be descriptive of the link’s purpose. 

Read the link text out of context.

Remove any surrounding text and read the link text on its own. Do you have a pretty good idea of where this link will take you by reading just the link text? Then it’s accessible!

This is the best (and easiest!) test for determining if your link text is accessible.

Don’t use “click here,” “learn more,” “read more,” or similar variations.

Bad:
Click here to watch our commencement video

Good:
Watch our commencement video

If your links or buttons do need to be generic text text like “learn more” you will need to have an aria-label that does describe where the link is going in a distinguishable way.

Don’t force the user to open links in a new window.

Opening links in new window is very confusing for screenreader users. Users are given no audible warning that the link has opened in a new window, so the user assumes they’re in the same window. Then when they try to go back to the page they were previously on, the Back button doesn’t work as expected.

It’s a better user experience for all users to not force links to open in a new window.

If you have two links on the page with the same link text, make sure their URLs are identical.

Link text: Curriculum

Bad:
URL 1: http://mysite.georgetown.edu/math-program/curriculum
URL 2: http://mysite.georgetown.edu/english-program/curriculum

Good:
URL 1: http://mysite.georgetown.edu/math-program/curriculum
URL 2: http://mysite.georgetown.edu/math-program/curriculum

If you have two links on the page with the same URL, make sure their link text is identical.

URL: http://mysite.georgetown.edu/faculty

Bad:
Link 1 text: Faculty
Link 2 text: Meet our Faculty

Good:
Link 1 text: Faculty
Link 2 text: Faculty

If you absolutely must use the same link text for two links with different URLs, add aria-labels to each link.

For example, if there are 2 links on the page for “Curriculum”, but one goes to a curriculum page for Art and the other goes to a page for Music, each aria-label should clearly identify which curriculum you’re linking to:

<a href=”art/curriculum” aria-label=”Art Curriculum”>Curriculum</a>
<a href=”music/curriculum” aria-label=”Music Curriculum”>Curriculum</a>

Non-UIS Themed Sites Only

States

Link & Button states such as ‘:link’, ‘:hover’, ‘:active’, and ‘:focus’ should be clearly defined. This will help provide a clear focus and ensure greater keyboard navigability.

Appearance

Be mindful of text link appearances that may not be underlined by default when surrounding text exists. If text link appearances cannot be underlined when surrounding text exists, WCAG recommends link text be distinguishable enough from the non-link text by having a 3:1 contrast ratio or greater from the surrounding non-link text.