Descriptive Links and Buttons: Clear Navigation for All Users

Why Links and Buttons Matter

Links and buttons are essential for guiding recipients to additional resources, actions or information. For emails to be accessible, these interactive elements must be descriptive, functional and easy to navigate, regardless of the recipient’s abilities or the device or software they are using. Accessible links and buttons ensure that all users, including those relying on screen readers or keyboard navigation, can interact with your content effectively.

Using Links and Buttons to Support Accessibility

  • Descriptive Links: Links should clearly describe their purpose or destination, making it obvious to users what will happen when they click.
    • Example: Use “Learn more about Elon’s programs” instead of “Click here.”
  • Accessible Buttons: Buttons can be useful for drawing attention to calls to action, but they must be implemented correctly to ensure accessibility. Avoid using buttons in email clients like Outlook or Apple Mail, as they often fail to meet accessibility standards. Instead, use standard hyperlinks unless you are using a dedicated email platform like Mailchimp or Constant Contact, which have tools to create accessible buttons.

Best Practices for Links and Buttons

Links

  • Be Descriptive: Write link text that explains the purpose or destination of the link. This is essential for users navigating emails with screen readers.
    • Good Example: “Visit the Elon University website.”
    • Bad Example: “Click here.”
  • Don’t Link Full URLs: In email clients such as Outlook or Apple Mail, always hyperlink descriptive text rather than using raw URLs. For example:
    • Good Example: “View the event schedule.”
    • Bad Example: “https://www.elon.edu/events.”
  • Keep Links Concise: While links should be descriptive, avoid overly long link text. A concise phrase or sentence is ideal.
  • Avoid Repeated Links: If linking to the same destination multiple times in an email, use consistent and meaningful link text for each instance. Avoid vague repetition like “Read more” in multiple locations.

Buttons

  • Use Buttons Only in Third-Party Email Tools: Platforms like Mailchimp and Constant Contact are equipped to create accessible buttons with proper HTML and styling. When using these tools:
    • Ensure buttons are labeled clearly (e.g., “Register Now” or “Download the Guide”).
    • Verify the button’s text contrasts well with its background color.
  • Provide a Text Alternative for Buttons: If you include a button in your email, also provide a plain text link to the same destination as a backup for accessibility and usability.
  • Avoid Buttons in Email Clients: Creating buttons in email clients like Outlook or Apple Mail often leads to accessibility issues, including buttons that cannot be navigated with a keyboard or screen reader.

Example of Accessible Links and Buttons

Scenario 1: Descriptive Link in an Email Client (Outlook/Apple Mail)

  • Good Example: “Register for the Digital Accessibility Workshop.”
  • Why: The text clearly states the purpose of the link, and it works seamlessly across devices and screen readers.

Scenario 2: Accessible Button in Third-Party Email Services (Mailchimp)

  • Good Example: A button labeled “Sign Up for the Webinar” with high contrast text and a corresponding plain text link in the email body.
  • Why: The button is clear and actionable, and the text link ensures accessibility for users who cannot interact with buttons.

Common Mistakes to Avoid

  • Vague Link Text: Avoid ambiguous phrases like “Click here,” “Read more” or “Learn more.”
  • Non-Functional Buttons: Buttons created in email clients like Outlook often fail to work correctly, especially on mobile devices or with screen readers.
  • Poor Contrast on Buttons: Ensure button text contrasts sufficiently with the background color to meet WCAG guidelines (e.g., 4.5:1 for normal text).
  • Overuse of Links: Avoid overloading emails with too many links, which can confuse users and diminish the impact of your message.

Final Tips for Links and Buttons

  • Test Across Devices: Always test emails on various devices and platforms to ensure links and buttons display correctly and function as intended.
  • Keep It Simple: Use plain text and standard hyperlinks for most emails.
  • Follow Elon’s Guidelines: Ensure your links and buttons align with Elon University’s accessibility standards and branding.

By using descriptive links and carefully implementing buttons where appropriate, you ensure your emails are both functional and inclusive, reflecting Elon’s commitment to accessibility.