Skip to main content

    Accessibility standards

    1. Links go to to another page OR jump to an anchor ID in the current page
      1. SUCCESS CRITERIA:
      2. Respond to ENTER keypress
      3. The browser URL changes
      4. HTML5 history object changes. (Not applicable if using React Router.)
      5. Avoid hash route URLs if possible. These interfere with in-page anchor links, and were common with early SPA libraries like Backbone. (Not applicable if using React Router.)
      6. Append anchor links to URL when a link points to an in-page anchor ID (skip nav, tabs)
      7. Do not add role=“button” to links. Screen readers announce the link as “button”, and changes user
      8. Recommended to underline links when in paragraphs or blocks of text
    2. Buttons perform a UI action
      1. SUCCESS CRITERIA:
      2. Respond to ENTER, SPACEBAR keypresses
      3. Perform UI actions that do not change the URL or load a new page
    3. Call to action links can look like buttons as long as:
      1. SUCCESS CRITERIA:
      2. Load another page URL (see rule #1 success criteria)
      3. Announce themselves as “links” to screen readers and assistive devices
    • Imagine copy/pasting a URL into a new browser window, sight unseen. Good scenarios for a LINK:
      • You expect the page to load scrolled down somewhere
      • You have a call to action that navigates to another page
      • You are loading a second or third tab, pre-selected
    • Imagine you are presenting users with an action that does not load a new page. Good scenarios for a BUTTON:
      • You have a conditional message that the user should trigger or dismiss
      • You are adding or removing something like a receipt, prescription, appeal
      • Show/hide accordions
      • Submit a form asynchronously
      • Submit an asynchronous request, then redirect users based on the server response. This is a middle ground, but feels like a good case for using a button, considering the original function was asynchronous and might keep users on the same page depending on the response.
      • Open and close a modal dialog
      • Alert boxes or confirmations
      • Do not underline button text. Better to have a halo, background color, or border with plenty of hit space.
      • Underline link text
      • Calls to action links can omit the underline, but would be well served with a design that distinguishes them from buttons. Use these sparingly, maybe one per page.