WCAG Violations in Healthcare Websites

Why Healthcare Websites Must Be Accessible

Healthcare organizations must comply with both ADA Title III and Section 504 of the Rehabilitation Act. Patients with disabilities must be able to access appointment scheduling, patient portals, and medical information online.

The most common WCAG 2.1 AA violations found on healthcare websites are listed below. Each violation includes the WCAG criterion, impact level, and exact fix code.

Color Contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.

Fix: Increase the contrast ratio between text and its background. For normal text (< 18pt), use at least 4.5:1. For large text (≥ 18pt or 14pt bold), use at least 3:1. Use a contrast checker like WebAIM's tool to verify.

Image Alt Text

Ensures elements have alternate text or a role of none or presentation.

Fix: Add descriptive alt="" attributes to all tags. For decorative images, use alt="" (empty string). For complex images like charts, provide a full text alternative in a nearby paragraph.

Form Label

Ensures every form element has a label.

Fix: Add a element for each form input, or use aria-label or aria-labelledby attributes. Placeholder text alone is not sufficient as a label.

ARIA Required Attributes

Ensures elements with ARIA roles have all required attributes.

Fix: Add missing ARIA attributes for the role used. For example, a role="combobox" requires aria-expanded. Check the WAI-ARIA specification for required attributes per role.

Multiple Form Labels

Ensures form field does not have multiple label elements.

Fix: Each form field should have exactly one associated label. Remove duplicate elements or consolidate into a single label with all necessary descriptive text.

Other Industry Accessibility Guides