Skip to main content
May 20, 2021

Accessible best practices for healthcare websites: Part 1


Summary: When a user visits a healthcare website, they're likely doing one of two things: gathering information, or making a transaction. Having a clear content structure and accessible media reduces friction and gets patients where they need to go.

About 20% of the global population has challenges with basic tasks and interactions. So every website is guaranteed to have visitors with disabilities, whether temporary or permanent. 

And while it’s important that all sites incorporate inclusive practices, the stakes are higher for healthcare websites. Why? We’re glad you asked. 

2 (more) ethical reasons healthcare websites must be accessible

There are two major reasons that healthcare entities have an even bigger responsibility to be inclusive.

Privacy & security

If someone is unable to pay healthcare bills or access test results and medical records, they will need to ask for help with inputting sensitive and personal information. 

On top of the privacy issues this presents, these inaccessible practices take away a person’s independence.

Life or death stakes

Researching symptoms, finding in-network physicians, and scheduling medical appointments can all be a matter of life or death. The stakes are high in many aspects of the healthcare profession, and website accessibility is no different.

Healthcare accessibility best practices for information gathering

When a user visits a healthcare website, they're likely doing one of two things: gathering information, or making a transaction. This post focuses on information-seeking behavior on healthcare websites, and how accessible best practices can support these tasks.

On a healthcare site, information gathering can include:

  • Researching health conditions
  • Understanding a healthcare system’s specialties/capabilities
  • Researching doctors
  • Finding location information

To make these tasks easier to accomplish and more accessible to everyone, including users using assistive technology (e.g., screen readers), here are some critical things to keep in mind.

Site navigation and interaction design

To help the most people possible, healthcare sites must support different browsing methods. This means providing multiple ways to access the same content, whether it’s through navigation, on-page links, calls to action (CTAs), or site search functions. 

Remember, navigation menus should be clear and consistent with mutually exclusive categories to minimize confusion. And never underestimate the power of a healthcare website’s footer. Footers are a great place to divide important content by audience or any other way that helps visitors get where they need to go faster.

As with any website, your content should be structurally sound on the backend, so it’s important to use semantic HTML and ARIA (Accessible Rich Internet Applications) landmark roles in the code. 

Interactive content 

All websites have some form of interactive content within them. This includes anything from links and navigation, to videos, forms, or accordions.

Accessible interactive content enables users to actually find and navigate to the content they're looking for. 

Default, hover, and focus state examples for a text link and button-style link.

Start by designing with accessibility in mind:

  • Ensure controls are large enough to activate (at least 44 x 44px)
  • Meet color contrast requirements to improve readability and usability
  • Design distinctive keyboard focus states
  • Avoid using color alone to communicate important information

Using color alone, without any text or other cues adds unnecessary barriers for many users. For example, if a green circle indicates that a particular user is online, add “Online” in text next to the circle to remove the guesswork.

Content structure and clarity

According to Jakob Nielsen, users have time to read, at most, 28% of the words during an average page visit — 20% is more likely. 

If a patient is on your website, they could be under stress and uncertain. The last thing they want to see are large walls of text and complex language. Clear, concise content serves people better.

Add structure to your site's content and help users skim with descriptive headings and subheadings. Think of headings like a table of contents (and use this article as an example! How did we do?).

Other methods for breaking up text and keeping content skimmable include:

  • Lists (See what we did there?)
  • Shorter sentences
  • Shorter paragraphs
  • Descriptive link text (Replace “Learn More” with “Find a Neurology Location”)

A grade 6–8 reading level is ideal for all online content, especially for public health communications. You can do this by using simpler terms, avoiding figures of speech, and providing clear definitions of complex terms when necessary. 

The Hemingway Editor tool is a great way to assess your content's readability and grade level.

Accessible multimedia: videos and images

When it comes to videos, it’s important for users to be able to access that information in multiple ways and on their own terms. Always include captions and transcripts, and don’t forget that transcripts are indexable by search engines (win-win!).

Users also need to be able to pause or play the content with a keyboard. Never use auto-play or place text over moving video content. These features can be disorienting and, at worst, triggering. 

For images, keep the following best practices in mind:

  • Include alt text that conveys both the image’s content and mood (e.g., “Doctor hands file to happy patient.”)
  • Avoid low-contrast colors if your site design layers text over an image
  • Don’t use embedded text; it can’t be translated and can become illegible on mobile
  • Avoid large images and auto-scrolling carousels

In the special case of infographics or other instructional images, make sure to write important instructions in body copy, instead of tucking it away in the image alt text.

We're here to help

Want to consult experts who live, breathe, and sleep accessibility? We’re here for you, whether you’re looking for an accessibility overhaul or quick tips on how to improve your current pages. Contact us today!