Healthcare websites are under increased scrutiny when it comes to accessibility compliance. According to Section 1557 of the Affordable Care Act (ACA), it is unlawful for healthcare organizations to discriminate against people with disabilities when it comes to information and communication technology (ICT). This includes websites, web applications, software, and hardware. Before designing or re-designing any part of a website or application, make sure the design is compliant with accessibility standards, including, but not limited to, all the ones listed below.

Ensuring Text Has Sufficient Contrast

Content legibility is always a concern given how many different combinations of foreground and background colors can exist on a website. Compliancy for contrast is measured in ratios. Depending on the level of compliancy and the font size of the text, the ratio requirements are different.

AA large text requires a 3:1 ratio.
AA small text requires a 4.5:1 ratio.
AAA large text requires a 7:1 ratio.
AAA small text requires a 4.5:1 ratio.
All compliancy levels require interface components, like text inputs, to be a 3:1 ratio.

Large text is font size 18.66 pixels or larger when bolded, or 24 pixels or larger when not bolded. You can check the ratio of text and backgrounds with the WebAIM Contrast Checker tool.

Remember that this success criteria apply to text placed over solid background colors, over image backgrounds, and over gradient backgrounds.

Aim For Large, Interactive Controls

No one likes accidentally clicking something on a website. Making sure any clickable areas on the website meet the minimum requirements is important when including users that have limited fine motor skills. There are two levels of compliance when sizing interactable objects:

AA requires 24 pixels by 24 pixels.
AAA requires 44 pixels by 44 pixels.

The primary difference between them is how large the minimum requirement is.

For double-A compliance, the object must be at least 24 pixels by 24 pixels. This can include the object itself plus the space around the object if there is no overlap with another interactive object. So, if I have a button that’s a 20-pixel square and there’s 2 pixels on either side of it, then the object is compliant. However, that 2-pixel space cannot count towards another object. Each object below the minimum requirement must have its own, non-overlapping space. For a more detailed explanation, read our blog post covering the issue.

Controls Changing Appearance When Selected

Controls on a website include hyperlinks, buttons, and other interactive elements. Each element should be thought of in three different states:

Normal state when the user takes no action.
Hover state when the user hovers over the element.
Focus state for when the user has the element selected.

Each of these must change in appearance to let the user know they’re interacting with it.

A successful element will appear differently depending on its state. Normal state is your default design of the element. If you have a button with a background color of blue, then the user will know that, until they do something, that button will remain blue. If they hover over it and the background turns purple, the button indicates to the user a state change has happened. If they use their keyboard to use the “Tab” function to move around the page, the button should again change appearance. A common focus state design includes a contrasting outline around the element.

Do Not Require Two-Dimensional Scrolling

Users should not have to scroll in two-dimensions when viewing content on smaller screens. Two-dimensional scrolling refers to users needing to scroll vertically and horizontally to navigate and understand the content of a page. Scrolling either vertically or horizontally is fine, but a page should not do both. WCAG 2.1 added guidelines to ensure accessible content is presented without loss of information or functionality.

If your website scrolls vertically, design the page to account for content at a width equivalent to 320 CSS pixels.
If your website scrolls horizontally, design the page to account for content at a height equivalent to 256 CSS pixels.

Other Design Accessibility Issues to Consider

Here are some less-common issues related to design to keep in mind:

Table Headers

If your content includes tables, those tables need to have headers at the beginning of the table. This will allow the people coding the website to make the tables accessibility compliant.

Consistent Navigation

When designing a website navigation, make sure the pages in the navigation maintain the same order across all pages.

Top-Level Headings

For each page, the content should include a top-level heading (H1 tag). To help web builders, make sure all pages are designed to have a heading at the top that describes the content of the rest of the page.

Full Accessibility Issue Identification

This post highlights only a few accessibility issues that can show up on a website. For more detailed information, a dedicated tool should be used to get a full understanding of all the accessibility issues that are present. We recommend SilkTide for an entire website crawl for not only accessibility issues, but also marketing, content, and user experience issues. There are other accessibility issue identification tools out there, so feel free to explore other options.

Healthcare Website Accessibility Remediation

If you’re unsure on how to make your healthcare website compliant, DiscoverTec specializes in identifying and remediating accessibility issues. Request a free consultation today to start the path to accessibility compliancy.