universal-design-center

  • Link Display

Web Accessibility Criteria - Link Display

  Description

Links displayed on a page can vary in style, format, and appearance. When links are displayed on a page, it is important to consider how links are perceived by users.  A proper link display will ensure the link appearance and structure does not compromise the accessibility of a link.

Link Appearance

Links should always be visually different from regular text on a website. Visual indicators will allow users to identify links more quickly. Links can be differentiated from other text using various combination of color, bold, underline or italics. However,  color should never be the only means to differentiate a link from regular text. Use of color should be accompanied by either underline, italics or bold text (font styling) in order to differentiate link from regular text.  Refer to the Web Accessibility Criteria: Color page for more information.  

Global Links

Global Navigation links are a set of links that direct users to key sections of a website. No more than seven links in global navigation menu should be present. It is recommended to keep a minimal amount of links in the global navigation to prevent a visual clutter and maintain an easy-to-use site.

Breadcrumbs

Breadcrumb links are a visual trail of links that allow users to identify their location on a website.  They allow users to see what steps they took to reach a page and provide the ability to go back to pages without using a "back button". Breadcrumbs are particularly useful for websites with complex structure or web pages in a sequence. Breadcrumbs may be programmatically coded as an unordered list, ordered list, nested list or text. WebAim has a list of different types of breadcrumb examples. It is the content creator’s discretion to determine which method to use.

back to top

 

  Why is Link Display Important?

Links are a crucial part of a website’s content because they direct users to additional information.  The way links are displayed on a page is important because it will ensure links are easily identifiable and accessible to all users. The link appearance should always allow links to easily stand out from other text and should not use color only as the only means to stand out. When the link does not stand from regular text, users may not be aware that a link is present. Moreover, if only color is used to differentiate a link, users who are colorblind may not recognize a link is present on the page. In addition, when global links are displayed on the page, it is important to minimize the number of global links present. Foo many global links may overwhelm the user and decrease the accessibility of a page. Finally, breadcrumbs are a great method to visually provide direction to a webpage. They will ensure users do not get confused when pages have too many sub-pages within and will present users from having to select the "back button" excessively.

back to top

 

Section 508/ WCAG 2.0 Summary of Requirement

Link Appearance

WCAG 2.0: Guideline G182: Ensuring that additional visual cues are available when text color differences are used to convey information

Global Links

WCAG 2.0: Guideline 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.

Breadcrumbs

WCAG 2.0: 2.4.8 Location  2.4.8 Location: Information about the user's location within a set of Web pages is available. (Level AAA)

WCAG 2.0: G65: Providing a breadcrumb trail

Best Practices

The following best practices for link display must be considered: 

  • Links should always visually stand out and be easy to identify as links 
  • Links should stand out by a combination of color and underline. 
  • Color should not be the only method to distinguish links. 
  • Underlines should be reserved for links only. Using an underline for emphasis may confuse the user when navigating the website.
  • If a :hover or :focus element is implemented, the hover color must be within the color contrast standards
  • Provide no more than 7 main global navigation links so users can easily see where they wish to navigate to without confusion.
  • Breadcrumbs should be used when users must navigate through multiple pages
  • Each breadcrumb trial should be a link so users can quickly navigate to their previous pages without losing their data, or using the back button. 

Examples

Link Appearance 

The statements below demonstrate how link appearance significantly enhances the readability and display of the links.  The first statement conveys links that do not display any visual indication that they are links. As a result, visual users will not know that there are links within the statement. Moreover, when color is only used to differentiate links, users with visual impairments will only see the links without color, thus preventing them from knowing links are on the page. The second statement, however, uses a combination of color, underline and bold to differentiate links from regular text. This will make it easier for all users to know links are present in the statement.

Statement 1

The Universal Design Center website provides the campus community information about Accessibility and Universal Design Perspectives, Universal Design Principles, and the Accessible Technology Initiative (ATI). The Web Accessibility page is dedicated to providing training information about making an accessible web.  The Document Accessibility page provides resources and guides to build accessible documents. Finally, the Procurement page provides information about procuring information technology with accessibility in mind.   

 

Statement 2

The Universal Design Center website provides the campus community information about Accessibility and Universal Design Perspectives, Universal Design Principles, and the Accessible Technology Initiative (ATI). The Web Accessibility page is dedicated to providing training information about making an accessible web.  The Document Accessibility page provides resources and guides to build accessible documents. Finally, the Procurement page provides information about procuring information technology with accessibility in mind.   

back to top

Global Navigation Menu

The screenshot below is an example of global navigation links at the top of the page. The global links should always be located at the forefront of the page and should be limited to 7 global links total. This will ensure users are not overwhelmed with too many links at the beginning of the page.

Global navigation example

Breadcrumbs

The example below a set of breadcrumb links. The breadcrumb is a visual representation how many levels deep a user is within a website. The user will also be able to see a list of the pages they have accessed. The breadcrumbs are also links which will allow the user to return to their previous pages easily.

back to top

How to Test

Manual Test

Link Appearance

Visually inspect links links to ensure that every link has at least two visual indicators (bold, italics, underline, and/or color).

Global Navigation

Visually inspect if the global navigation menu has no more than 7 links.  

Breadcrumbs

WCAG 2.0 provides steps to review a breadcrumb: 

    1. Navigate to a Web page.
    2. Check that a breadcrumb trail is displayed.
    3. Check that the breadcrumb trail displays the correct navigational sequence to reach the current location or the correct hierarchical path to the current location within the site structure.
    4. For a breadcrumb trail that does not include the current location
      1. Check that all elements in the breadcrumb trail are implemented as links.
    5. For a breadcrumb trail that does include the current location:
      1. Check that all elements except for the current location are implemented as links.
      2. Check that the current location is not implemented as a link.
    6. Check that all links navigate to the correct Web page as specified by the breadcrumb trail. 

Automated Testing Tools

Compliance Sheriff

To test link display in Compliance Sheriff the following checkpoints are used: Section C (color requirements) and  ATI Link Requirements.  For more information refer to the  CSU ATI Accessibility Requirements webpage.

back to top

Resources