Accessibility
At Advocate Health, we want everyone to be able to use our digital tools with ease. Our components are built with accessibility in mind — from keyboard navigation to focus management — so teams can rely on them to work for as many people as possible right out of the box. We also continue to monitor, evolve, and improve our approach as accessibility standards and technologies change.
Key areas of accessibility:
Clear labels
Clear labels give people the context they need to understand what an element does. For form fields, always pair inputs with visible labels instead of relying only on placeholder text. For custom controls, provide text that explains their purpose so screen readers and other assistive tools can announce them properly. At Advocate Health, this level of clarity helps ensure our digital experiences are easy to navigate for everyone.
In a nutshell:
- Use visible labels with every input
- Avoid relying only on placeholder text
- Keep labels short and clear
Strong contrast
Strong color contrast makes text and interface elements easier to read for everyone, especially people with low vision. Advocate Health’s color palette has been designed to meet ADA compliance standards for contrast, ensuring readability across our digital products. Check that text on backgrounds has sufficient contrast.
In a nutshell:
- Use a minimum contrast ratio of 4.5:1 for text
- Stick with Advocate Health brand colors for consistency
- Test contrast when placing text on images or patterns
Keyboard-friendly navigation
Many people rely on keyboards or other input methods to move through content, so navigation should follow familiar patterns users expect — like arrow keys for tabs or “Escape” to close a dialog. Our components are built to support these interactions out of the box, helping Advocate Health teams design tools that work smoothly for all users.
In a nutshell:
- Ensure all features work with a keyboard
- Follow standard keys (Tab, Enter, Esc, arrows)
- Let users move both forward and backward
Visible focus
Focus shows users where they are on a page and helps them stay oriented as things change. When a modal opens, for example, focus should shift to the first action button so the path forward is clear. Our components manage focus automatically in many cases, but designers and developers should always check that the order feels natural. This kind of detail helps Advocate Health maintain accessible, user-friendly experiences across our sites and apps.
In a nutshell:
- Make focus easy to see at all times
- Keep focus order logical and predictable
- Move focus when context changes (e.g., modal opens)
Meaningful alt text
Images should never be “invisible” to users who can’t see them. Alternative (alt) text provides a written description that screen readers can announce, giving people the same context as visual users. Decorative images can have empty alt text, but meaningful images should always include clear, concise descriptions. Including alt text helps Advocate Health make content accessible to everyone.
In a nutshell:
- Add alt text to all meaningful images
- Keep descriptions short and specific
- Use empty alt (alt="") for decorative images