universal-design-center

  • link functionality

Web Accessibility Criteria - Link Functionality

  Description

Link functionality is about ensuring a link functions the way it is expected to. When it comes to accessibility, a link must perform an action that is stated in the website or link text. If a link does not perform an action properly, users may get frustrated with the functionality of the website.  In addition, a link must always function in a way that will enhance the accessibility of a webpage. When links are incorporated to a webpage, the following links must be taken into consideration for a functional website: Skip Navigation Links, Plugin/ Document Reader Links, Word Mark links, and Broken Links

Skip Navigation

Skip Navigation links are anchor links typically at the top of the page that direct users to the main content of the web page. Skip Navigation links should always be incorporated into a webpage as they allow users bypass excessive links, creating easier access to the main information of the page. This is particularly useful for web pages with numerous links; without a skip navigation link, users must navigate through all this links before accessing the main content. Navigating through all the links can become tedious work for users and they may get frustrated having to perform this action numerous times. Skip navigation will ultimately enhance the accessibility of the page by making it easier to access information and therefore enhance the functionality of a web page.  

Plug-ins/ Document Readers 

Plug-ins/ Document Readers are links to software downloads that users need to view web content. Web pages often have additional documentation or videos to provide visitors in distinct formats such as PDF, Word, Excel, Flash, etc.. This can be a problem for not all users share the same programs or software and therefore some users may not have the different document formats installed on their computer. As a result, when web pages have links to documents in different formats, there must be a link to download a plug-in or document reader. Providing a download link to the document viewers will ensure a user has the ability to acquire the correct software to open and access the information in the document.

Wordmark links

Wordmark links  are links placed on a websites logo that direct a user to the websites home page. These links are placed in all the pages of a website, usually at the top of the page and and provide users quicker access to the homepage.  Wordmark links are becoming an increasingly common practice in websites, but when creating these links, it is important to ensure these links direct users to the page they expect it to take them. A wordmark must always direct a user to a websites homepage. If the wordmark directs a user to a different page, a user may get confused and believe the website does not function properly. 

Broken Links

Broken Links are links that are not valid or functioning. For a website to be fully functional, no broken links should be present on a page. When broken links are present in a page, users may experience frustration for not being able to access the information they are seeking. Developers must always check the links in a website to make sure they are up to date. There are different types of broken links that could be present on a page:

    • (404) Page not Found: this means the page the link is directing to no longer exists or may have been moved to a different link path
    • (410) Page Gone: this broken link error appears when a link is directing a user to a page that is no longer available for viewing
    • (B01) Bookmark and/or Anchors not found: Bookmark links or anchors such as a skip navigation link are not functioning correctly. 

NOTE: Developers should always check all their links for "fake broken links". At times, when websites remove a page they will redirect the link to a new page that lets users know that the previous page no longer exists. These links may cause confusion to users who may believe the link is broken when it in fact is a redirect. 

back to top

  Why is Link Functionality Important?

To create an accessible and user-friendly website, all the links in a page should always be functional. Valid links will ensure all website visitors obtain the information they need and do not experience barriers to acquiring this information.

  • Skip navigation links are important for keyboard-only users or assistive technology users with mobility or visual impairments. These users heavily rely on skip navigation links to access information for it provides them   easier navigation to information that often may take a while to navigate to when a webpage has numerous links. While other users can use a computer mouse to scroll down the page and reach the main content in a matter of seconds, users with disabilities are not able to do this unless a skip navigation link is present.
  • Links to download plug-ins and document readers are useful for all website users to acquire the software and tools needed to obtain the information in a page. When users are unable to obtain the information because of missing plug-ins or software, they may get frustrated and abandon the page because they are unable to access additional content provided on the website. It is easy and convenient to provide links to users for document and reader plug-ins so they could access the content. 
  • Wordmark links has become standard practice for modern websites and users expect the wordmark to be a link to a website’s homepage. Without the wordmark as links, users will be forced to use their browser’s back button and go through all of their visited pages to get to the homepage. 
  • When it comes to broken links, website visitors will expect that all the features in the page will function the way they are supposed to. When broken links are present, users may feel a webpage is out of date and are less likely to visit revisit a website. 
back to top


Section 508/ WCAG 2.0 Summary of Requirement

Skip Navigation: A mechanism is available to bypass blocks of content that are repeated on multiple webpages. (WCAG SC 2.4.1)

Document/Reader Plug-ins:  When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that is compliant with the Section 508  §1194.21 Software Applications and Operating Systems

Wordmark as Links: “Home” is an optional link on the Global Navigation Bar because the home webpage for the unit will also be reached through selecting the unit’s word mark in the header. 

Broken Links: A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general. (WCAG SC 2.4.9)

Best Practices

The following best practices must be considered for link functionality: 

  • Skip Navigation 
    • Websites should always have a skip navigation link to direct users to the main content of the page. 
    • It is recommended to have a skip navigation link that is always at the top of the page and easily visible for everyone to see. Skip links will allow equal access to all users to use the link to bypass the navigational menu.
    • Avoid making the skip navigation invisible. When the skip navigation link is hidden, only specific users will have access to the link. 
  • Document Readers /Plug-ins
    • Always provide a link to download document readers and/or plugins  
    • When linking to a document, users should be made aware of the type of format of the document.
    • Include the type of document format within the link text in parenthesis. For example, the link text for a PDF document should be "UDC Best Practices (PDF)".
  • Wordmark Links
    • Wordmarks should always be a link to navigate users the homepage.
    • Wordmark should easily be visible to all users. 
  • Broken Links
    • Website links should always be reviewed to make sure they function correctly.
    • Fix broken links as soon as they are identified.

Examples

Skip Navigation Link

The screen shot below demonstrates a skip to navigation link. Skip navigation links are usually one of the first links a user can navigate to and are typically titled as: “skip navigation,” “skip main navigation,” “skip to content,” etc. 

Skip to Content example

Document/Reader Plug-ins

 The screen shot below is a page that does not have Adobe Acrobat Reader installed.  The user is unable to access or view PDF files until this software is installed. A link to download the free program is provided. 

 Adobe Reader Plug-in Example

Wordmark link

The screenshot below demonstrates wordmarks from various websites. All of these wordmarks function as links to the homepage. 

wordmark links for Yahoo, CSUN and Google Example

Broken Links

The screenshot below is of a 404 broken link.

Google 404 broken link example

back to top


How to Test

All links must be visually and manually checked for functionality. Some test for link functionality can be conducted through automated testing tools as well. 

Manual Review 

Skip Navigation 

    1. verify a skip navigation exists on a webpage
    2. if a skip navigation exists, verify it properly direct users to the main content of the page. 

    Document readers

      1. Review the page for documents in different formats 
      2. Verify that the link informs a user it is in a different format
      3. Verify that a a link to download a document reader is present. 

    TIP: Use automated testing tools to identify links to different file formats 

     Broken Links

    Manually visit all the links on the website to ensure there are no broken links.

    Wordmark Links

      1. Review the page for wordmarks.
      2. Manually check if the website’s logo/main image is a link that directs the user back to the homepage.

    Automatic Testing Tools

    WebAIM WAVE Toolbar

      1. Activate the WAVE toolbar  Accessibility Toolbar
      2. Navigate to the “Details” panel.
      3. Use “Errors, Features, and Alerts” to check all the links 

    The following icons are accessibility errors related to link functionality are found by WAVE: 

        • Skip Navigation link is broken icon: Skip Navigation link is broken
        • Empty link icon:  Empty link 
        • Empty button icon :Empty button
        • Broken bookmark or anchor icon :Broken bookmark or anchor
        • A link to a Microsoft Word document is present icon : A link to a Microsoft Word document is present.
        • A link to a PDF document is present icon : A link to a PDF document is present.
        • A link to a Microsoft PowerPoint presentation is present icon : A link to a Microsoft PowerPoint presentation is present.
        • A link to a Microsoft Excel spreadsheet is present icon : A link to a Microsoft Excel spreadsheet is present.
        • A Java Applet is present icon : A Java Applet is present 
        • An audio or video file or link is present icon : An audio or video file or link is present.
        • A link to a non-HTML document is present icon : A link to a non-HTML document is present.
        • Flash content is present icon : Flash content is present.
        • Unidentified plugin is present icon : Unidentified plugin is present 

     Compliance Sheriff

    The following Compliance Sheriff checkpoints are related to link functionality:

      • Section O: Skip Navigation
      • Section M: Document Reader or Plugins 
      • CSU ATI Site Quality Requirements: Broken Links
      • CSU AtI Link Requirements: Anchor/ Link Elements 

    For more information refer to the  CSU ATI Accessibility Requirements webpage. 

    back to top


    Resources