Anatomy of an Alert: Accessibility for COVID-19 Hospital Web Alerts

Catharine McNally
UX Planet
Published in
8 min readApr 6, 2020

--

Graphic showing annotations of effective accessibility elements of an alert
Elements of an Accessible COVID-19 Alert

Older adults (65 years and up) and individuals of any age with serious underlying medical conditions are most at risk for COVID-19. When we consider these groups of people as users, accessibility is critical now more than ever. Alerts, public announcements and symptom trackers that are clear, actionable and accessible can help save lives.

We recognize hospitals are overwhelmed right now — and rightfully so. As the Phase2 Accessibility Lead, I set out to check on whether or not these alerts were helping our users when they need it most.

In my attempt to find a good example of a hospital COVID-19 alert (there were hardly any), I also found repeated content and user experience issues.

There wasn’t a consistent user path for the variety of users:

  • Users who have symptoms of COVID-19;
  • Family members of those infected with COVID-19;
  • Users who have emergency care needs not related to COVID-19;
  • Users who have medical needs not related to COVID-19.

When considering elements like the homepage, the banner alert, the hero card, the chatbot, are we getting these core users to the right place? The content messaging was often confusing (and at times, conflicting).

These are all fundamental considerations that we must consider in designing these entry points into the website, whether it be to

  • a COVID-19 microsite,
  • the updated visitor policy,
  • a COVID-19 symptom checker to inform whether or not they should come in to the emergency room, or
  • a pathway for non-COVID-19 medical needs

I promptly pulled in my colleagues across multiple departments to evaluate these alerts and develop high-level best practices, the anatomy of a Good Alert.

Anatomy of a Good Alert

Graphic of an Alert w/ (1) (2) (3) (4) markups over an icon, “alert”, link with an underline, & black text against yellow bg

When you add alerts or banners on your website for COVID-19 regarding service closures or updates, consider the following four items:

1 & 2: Use text, iconography and color together to convey meaning. A banner with only the background shading and the message is not always enough. Incorporating an icon with “Alert” text reinforces the message.

3. Provide Link styling beyond use of color alone such as underlines, bold, or accent symbols.

4. Ensure appropriate color contrast of the text to the background.

  • Text ratio is 4.5:1. This is any text smaller than 18pt or is not bold.
  • Large Text contrast ratio is 3:1. Large text is defined as text larger than 18pt OR 14 pt and bold. (In CSS, this would be font-weight: 700 or greater, or font-weight:bold)
  • Use a tool like https://contrast-ratio.com/ to check the contrast ratio. You can also use You may use the free colorsafe.co tool which will give you compliant colors based on a reference color. This is helpful if one of the colors is based on the brand.

Exceptions: Incidental text such as text within an inactive element like a disabled button. Text as part of a logo.

Support text resizing includes ensuring that text isn’t clipped, truncated, or obscured on the screen. Refer to WCAG 2.0 1.4.4 Resize Text for understanding on how to meet this requirement.

Ensure buttons (eg, CTAs and close/dismiss) are large enough. The modal or banner on the homepage may include a Call to Action button or a “close / dismiss.” These buttons should be at least 44 pixels by 44 pixels wide. This makes it easier for those with hand tremors to be able to activate the button. If it is too small then they would have to focus and control hand movement for greater precision. This also applies to users who jokingly claim “Fat Fingers” on mobile devices. Reference: WCAG 2.5.5 Target Size (AAA)

Writing an Accessible Alert

Keep the message short. Use plain language with clear, concise and descriptive text. For example:

There may be a shipping delay because of the COVID-19 emergency.
For urgent help, please call 800–123–4567.

Use the Hemingway Readability App to evaluate the readability of your alert and adjust until it has a readability score of no greater than Grade 6.

Make link text descriptive and front load it with relevant terms. Avoid generic calls-to-action like ‘Click Here’ or ‘Read More.’ Be specific, such as “Check Symptoms” or “Learn more about COVID-19 (PDF)

Consider the length of the link users need to select. A one-word link could be hard to select for people with reduced motor skills. Copy like “visitor restrictions” would be preferential over the single word, “restrictions.”

Provide Screen-Reader Support

Users who are blind or have low vision use a screen-reader to read aloud the information on the screen. Since these users cannot see the screen, development efforts must be made so that they are immediately notified when opening the webpage. This can be accomplished using the ARIA alert role (role=”alert”). If the alert has a close button, then use the role=”alert dialog”

Visit developer.mozilla.org for code examples of ARIA: alert role. Google’s Lighthouse plugin also has supporting documentation: Introduction to ARIA, as well as the Chromecast video (~9 minutes) with a runthrough of how it sounds to a screen-reader:

Google Allycasts YouTube Video

If you’re not sure how to use a screen-reader to evaluate this out of the gate, use the Google Chrome Lighthouse plugin to help guide you through this process.

Examples of Alerts that Exist on Hospital Websites Today

Having this informed knowledge in mind, it was hard to find one COVID-19 Alert that met the criteria we identified. Some had one or few of these best practice elements. I elected to make illustrations of examples to focus on the issue as opposed to a screenshot identifying the hospital. Here’s a sampling of what I found:

Lack of Adequate Color Contrast

There were multiple cases of light colors with white text of the alert background. The contrast ratio between the foreground and background was not high enough, making it difficult to read.

Graphic of an alert with white text against a yellow background to demonstrate low color contrast
An example of an alert with poor color contrast with white text over a light yellow background

Here’s how it can be improved with darker font:

Graphic of an alert with dark gray against a yellow background to demonstrate higher contrast
An example of improved color contrast of an alert with black text over a light yellow background.

Small Font Size

Small font sizes or type that cannot be scaled, such as being an image of text;

Graphic of a yellow alert with text that is small and difficult to read
an example of an alert with small font size

Here’s how much easier it is to read with larger font:

Graphic of alert against yellow background with larget text size increasing its readability
an example of increased font size

CTA Ambiguity

I found a lot of call to action links such as “Click here” which is unclear about what the link will “do” for the user. Unclear links leave the user guessing or making assumptions.

“Click Here” link is unclear

Changing the link text to something more descriptive provides a greater context to the expected page target.

“Updated Visitor Policy” and “Symptom Checker” are clear links

Link Styling

In my review, some hospital alert banners had link styling that was hard to distinguish due to lack of color or bold, or underlining. Links were only distinguished when a user focused on it with mouse or keyboard.

The white, bold “CDC Recommendations” is a link but it cannot be distinguished from the rest of the white, bold text

A fix for this would be to make the text plain and links bold and/or underlined.

The white, bold “CDC” recommendations stands out against the plain text

Click Targets

A few of the alerts had a “dismiss” or “close” button. This is challenging for people who have hand tremors.

In this example you’ll note it’s small and in the very upper right corner.

The “x” is in the most upright corner and is small

With it bigger, it’s much more obvious and easier to select.

The “x” is larger and easier to see and “tap” or “click.”

A Band-Aid for Now

Hopefully with this guide you have the information you need to evaluate and make appropriate recommendations to your team. You may use these available tools to evaluate the different alert touch-points:

With knowing the right people to flag down, these updates can be done within a few minutes; it helps to understand “who” to talk to for the improvements:

  • Who has the ability to change the content in the content management system?
  • Who is able to adjust the styling? This person will be able to make the requisite font and color updates in the CSS.
  • Who has the ability to adjust the development feature, such as adding the applicable ARIA roles?

A Fix Today & for Later

Our efforts to “flatten the curve” and stop the rapid spread of coronavirus is a collective effort, and that depends on people getting the most up-to-date information. Keep our hospitals safer and provide people at home with information that they can access, regardless of their ability. COVID-19 safety and preparedness information should be accessible to everyone.

If your design system doesn’t support all the requirements, do at least what you can today to help the experience because everything we do has a direct impact on the health of our communities.

Well-designed, clear messages help people make informed decisions for the health and well-being of not only themselves but everyone else.

I would like to thank my Phase2 collaborators, Rachel Broardt, Rebecca Fanning, Annie Power, Nadia Saleh, Jennifer Segalini, and Emily White for their analysis and contribution to these findings

--

--

Accessibility Lead at Phase2 Technology. Cochlear implant recipient. Focused on mainstream digital experiences for all. www.phase2technology.com @cmcnally