Accessibility

Transparent healthcare is accessible healthcare. By building accessible products from the start, we are ensuring that our apps can be used universally.

Markup & Limitations

Piv Viper is a CSS framework, and therefore only covers semantic HTML guidelines, sufficient color contrast, and otherwise default interactions provided by browsers.

Any time Javascript or other interactability is introduced, it is important to make sure these interactions are accessible. Meeting WCAG and 508 standards for interactive elements depends on implementation from developers and designers. Both determine the Percievability, Operability, Understandability, and Robustness of the features and apps that get published.

Turquoise Health strives for AA as the minimum standard, but AAA is ideal.

Contrast

If color is applied using the proper guidelines, color combinations should meet WCAG’s AA standards, if not higher.

Visually Hidden

Buttons and content which should be visually hidden, but necessary for assistive technologies like screen readers, should use the .pv-visually-hidden class. Examples include icon-only buttons and inputs.

Common Things to Watch For

• All navigation, inputs, buttons, links (a), menus, videos, audio, and otherwise interactable objects must be accessible via the tab key.
• Alerts using role=“alert” or aria-live=“assertive” role must be used sparingly, and only when information is required, or otherwise destructive.
• All inputs must have a corresponding label.
• Most icons and all emojis are superfluous and must be hidden from screenreaders.
• Use only ONE h1 per page or view.
• Remove any horizontal scrolling.

The A11y Project has a non-exhaustive but extensive checklist with more common “gotchas.”

Additional Resources

• The A11y Project
• MDN Documentation
• Section 508 Specification
• WCAG Specification