Links and buttons help users navigate digital content. Clear labels tell users what to expect when clicking on the link or button. Users should understand the purpose of the link or button without having to read the text around it.

Jump to:

Expectations

Links and buttons should be clearly distinguishable, descriptive, and operable for all users. They must convey their purpose through meaningful text (not just “click here”), work consistently across devices, and be accessible via keyboard navigation.

Visual cues like focus indicators and sufficient color contrast help users identify them, while proper ARIA roles and labels ensure screen readers can announce them accurately. Together, these practices make links and buttons usable and understandable for everyone.

Importance

When links and buttons aren't accessible:

  • Users may be mislead by inaccurate or non-descriptive labels
  • Screen reader users may hear vague or repeated announcements like “click here” or "read more"
  • Keyboard-only users may not be able to activate key functionality
  • Users with cognitive disabilities may not understand what an action does
  • Users with motor impairments may struggle to activate small or crowded controls

Because links and buttons are so central to interaction, accessibility failures can make content unusable.

How to Implement

Descriptive links tell people where a link will take them or what they'll find when they select it. Instead of using generic language like "click here" or "read more," descriptive links use meaningful words that explain the link's destination. This helps everyone navigate easily, especially people using assistive technologies like screen readers or when we are quickly scanning through content.

Tips: Creating meaningful and descriptive links/buttons: 
  • Do not use a verb alone as the text for the hyperlink (e.g., click here, download, go). 
  • Use a noun or noun phrase (e.g., checklist of chemical reactions) or a call to action (e.g., how to crop an image).
  • Make sure the link can stand on its own out of context (screen reader users often navigate by links).
  • Be clear about the link destination or action (identfy things like file type/size, or if it opens in a new tab)
  • Avoid pasting the URL text (long URLs are hard to read and annoying to hear)
Examples:

Bad examples: lacking meaningful text or simply pasting a link:  

Submit

Good examples: with meaningful text, embedded link, file type identified: 

Submit your feedback

Links should be visually different from other text so users can easily identify what’s clickable. Visually distinct links also make content easier to scan, reduce confusion, and help users understand what actions are available without guessing.

TIPS: Creating visually distinct links
  • Don't rely on color alone. Add visual cues like underlines to ensure links are recognizable
  • Ensure good contrast between the link and regular text (3:1 contrast ratio minimum)
  • Links/buttons that change state (enabled/disabled, hover/selected/visited/focused) must use more than color to convey the change
  • Avoid underlining text that isn’t a link. In digital content, underlines are widely understood to indicate links, and using them on non-linked text can cause confusion.
Examples:

Bad Examples: 

Good Examples: Sufficient color contrast, additional visual cues (ie. underlines)

Links and other interactive elements should be large enough and spaced far enough apart to prevent accidental activation, especially on touch devices.

TIPS: Ensuring adequate size and spacing for links/buttons:
  • Use minimum font size of 16px or 12pt for links in body text
  • Make sure links/buttons are large enough and spaced far enough apart to prevent accidental activation, especially on touch devices (ie. minimum target size for buttons/controls is 24px by 24px)
Examples:
  • Buttons in Cascade by default have padding/margin to create adequate tappable sizing and space on webpages.

Example Button

  • Adequate line height within longer sentences or paragraphs of text help ensure that interactive elements like links are easily tappable.

Keyboard accessibility ensures that links can be reached and activated without a mouse. Many users rely on keyboards due to mobility limitations, temporary injuries, or assistive technologies like screen readers. When links aren’t keyboard accessible, users can become stuck or unable to navigate content at all—making keyboard support essential for equitable access. 

TIPS: Testing for keyboard accessibility:
  • Put the mouse away and use only the keyboard (Tab, Shift+Tab, Enter). If you can’t reach or activate a link, it’s not keyboard accessible.
  • Tab through the content in order. Focus should move logically and match the visual layout.
  • Look for a visible focus indicator. You should always be able to see which link is currently focused.
  • Activate links with Enter. Each link should work without requiring a mouse click.
  • Check for keyboard traps. You should never get stuck on a link or section without a way to move forward or backward.

When linking an image, icon, or other non-text content, provide a description of the link’s function. Descriptive alt text ensures screen reader users understand the link’s purpose or destination. Without it, links may be announced as “image” or read as a file name, creating confusion. Images/icons that serve as links are often referred to as functional images, where the image description should identify/describe the destination of the link.

See the Fundamental Guide for Image Description for more details. 

Example: The image below links to a page about giving to the College of Arts and Letters. The alt-text for the image should convey the link's function. In this case, the alt-text is "Give Now to the College of Arts and Letters".

Give Now to the College of Art and Letters

WCAG Success Critera

Meeting all of the above requirements (must statements) ensures that links are in compliance with WCAG 2.1 (AA) as it relates to the following:

Further, meeting all of the above recommendations (should statements) ensures that links and buttons are aligned with best practices as they relate to the following:

Back to Top
Digital Accessibility at JMU
Harrisonburg, Virginia 22807

Questions? Feedback? Concerns? 
Fill out the questions and feedback form!