---
name: healthcare-ux-standards
description: General healthcare UX standards for Hospital Information Systems (HIS), EMR/EHR, clinic management, and patient portals. WCAG 2.2 Level AA compliant with US/International regulatory alignment (HHS Section 504, ADA, Section 508, EN 301 549, NHS Digital). Covers accessibility, patient safety language, and healthcare-specific design patterns. Auto-activates for healthcare UI design, form validation, error messaging, clinical workflows, and patient-facing interfaces.
---
# Healthcare UX Standards
Comprehensive user experience standards ensuring accessibility, patient safety, and usability for healthcare management applications including Hospital Information Systems (HIS), Electronic Medical Records (EMR/EHR), clinic management software, patient portals, and telehealth platforms.
## When This Skill Activates
- Designing healthcare application interfaces (HIS, EMR, clinic management)
- Creating patient portal experiences
- Building telehealth platforms
- Implementing healthcare forms and workflows
- Conducting accessibility audits for healthcare apps
- Writing error messages, notifications, or system feedback
- Reviewing mobile health applications
- Implementing healthcare AI/chatbot interfaces
---
## Core Principles
### 1. Accessibility is Patient Safety
**WCAG 2.2 Level AA compliance is MANDATORY** for all healthcare interfaces.
**Why it matters:**
- Healthcare access is a right, not a privilege
- Patients with disabilities must have equal access to health services
- Inaccessible interfaces create barriers to care
- Legal requirements: HHS Section 504, ADA Title III, Section 508
- Compliance deadline: May 11, 2026 (entities with 15+ employees)
### 2. Language Shapes Patient Experience
**Error messages must not alarm or undermine trust.**
**Why it matters:**
- Patients may be anxious about their health
- Healthcare professionals rely on system confidence
- Alarming language increases stress and reduces compliance
- Calm, professional tone maintains therapeutic relationship
### 3. Design for Diverse Users
**Healthcare applications serve users with varying abilities and contexts.**
**Consider:**
- Visual impairments (screen readers, magnification)
- Motor impairments (keyboard navigation, touch targets)
- Cognitive disabilities (clear language, consistent patterns)
- Auditory impairments (captions, visual alerts)
- Low health literacy (plain language, clear instructions)
---
## Quick Reference: Critical Requirements
### MUST DO (P0 Priority)
1. **Color Contrast**: 4.5:1 minimum for normal text, 3:1 for large text
2. **Focus Indicators**: Visible 3px outline on all interactive elements
3. **Touch Targets**: Minimum 24x24px (WCAG 2.2), recommended 44x44px
4. **Keyboard Navigation**: All functionality accessible via keyboard
5. **Alt Text**: All images and icons have descriptive alt attributes
6. **Form Labels**: All inputs have visible, associated labels
7. **Patient Safety Language**: NO "Error", "Failed", "Broken", "Denied"
8. **Semantic HTML**: Proper heading hierarchy, list tags, button elements
9. **Accessible Authentication**: Support password managers, biometrics (WCAG 2.2)
10. **Redundant Entry**: Auto-populate previously entered patient information (WCAG 2.2)
### NEVER DO (Critical Violations)
1. **Remove focus indicators** (`outline: none` without replacement)
2. **Use placeholder as label** (placeholders disappear on focus)
3. **Rely on color alone** for status or information
4. **Use alarming terminology** ("Fatal error", "Critical failure")
5. **Make buttons from divs** without proper ARIA roles
6. **Use images of text** instead of actual text
7. **Block keyboard navigation** (keyboard traps)
8. **Require cognitive tests for authentication** (CAPTCHAs without alternatives)
9. **Force re-entry of patient data** across form steps
---
## US Regulatory Framework
### Important Clarification: HIPAA Does NOT Require Accessibility
**HIPAA** (Health Insurance Portability and Accountability Act) covers **privacy and security** of Protected Health Information (PHI) only. It does NOT address accessibility for people with disabilities.
**Accessibility is governed by separate laws:**
### HHS Section 504 Final Rule (May 2024)
**Most significant healthcare accessibility mandate in 50 years.**
**Standard**: WCAG 2.1 Level A and AA (WCAG 2.2 AA recommended as equivalent or better)
**Compliance Deadlines:**
| Organization Size | Deadline |
|-------------------|----------|
| 15+ employees | **May 11, 2026** |
| <15 employees | **May 10, 2027** |
**Who Must Comply:**
- Healthcare providers participating in Medicare/Medicaid
- Hospitals (Medicare Part A)
- Medical services (Medicare Part B)
- Medicare Advantage Plans
- Prescription Drug Plan sponsors
- Insurers in Healthcare.gov Marketplaces
**Covered Digital Assets:**
- Public-facing websites
- Patient portals
- Telehealth software
- Mobile applications
- Medical kiosks
- Third-party vendor tools
**Exceptions:**
- Archived web content
- Preexisting documents (with caveats)
- Third-party posted content
- Individual password-protected documents
- Preexisting social media posts
### ADA Title III
**Applies to**: Private healthcare providers (places of public accommodation)
**Standard**: WCAG 2.1 Level AA (de facto)
**Coverage:**
- Doctor's offices and clinics
- Hospitals
- Pharmacies
- Medical laboratories
- Healthcare providers with 15+ employees
**Enforcement**: DOJ enforcement + private lawsuits (2,500+ filed in 2024)
### Section 508
**Applies to**: Federal agencies, federal contractors, federally-funded programs
**Standard**: WCAG 2.0 Level AA (expected to update)
**Coverage:**
- Federal healthcare agencies (VA, NIH, CDC)
- Healthcare contractors to federal agencies
- Medicare/Medicaid systems
### 21st Century Cures Act
**Patient Portal Requirements:**
- Patients must access Electronic Health Information (EHI) "without delay" and without charge
- Information blocking is illegal
- Penalties: Up to $1,252,992 per violation (effective July 31, 2024)
**Accessibility Implication**: Patient portals must be accessible to comply with patient access rights.
### Section 1557 of the ACA
**Language Access Requirements:**
- Notices in 15 most common non-English languages in state
- Qualified interpreters required
- Cannot rely solely on machine translation
- 20pt or larger sans serif font for notices
---
## International Standards
### EN 301 549 (European Union)
**Current Version**: v3.2.1 (incorporates WCAG 2.1 AA)
**Upcoming**: v4.1.1 (2026) will include WCAG 2.2 AA
**Applies to:**
- Public sector healthcare (EU Web Accessibility Directive)
- Private healthcare for specific services (European Accessibility Act)
**Coverage Beyond WCAG:**
- Hardware accessibility (kiosks, devices)
- Telecommunications
- Documentation and support services
- Biometric authentication
### NHS Digital Service Standard (United Kingdom)
**Standard**: WCAG 2.2 Level AA mandatory, AAA recommended
**Requirements:**
- Public Sector Bodies Accessibility Regulations 2018
- Accessibility statement must be published
- Works with assistive technologies (JAWS, NVDA, VoiceOver)
**NHS Accessible Information Standard (AIS):**
1. **Identify**: Ask about communication needs
2. **Record**: Document needs in standardized way
3. **Flag**: Highlight needs in patient file
4. **Share**: Share needs with other providers
5. **Meet**: Provide accessible information
### Australian Digital Health Agency
**Standard**: WCAG 2.1 Level AA
**Applies to**: My Health Record, government health services
**Known Limitations**: Clinical PDF documents may not be fully accessible if not properly formatted at upload.
### ISO Standards for Medical Device Software
**ISO 62366 (IEC 62366-1:2015)**: Medical device usability engineering
- Risk-based usability engineering
- Formative and summative evaluations required
- Integration with ISO 14971 risk management
**ISO 9241**: Ergonomics of human-system interaction
- ISO 9241-210: Human-centered design
- ISO 9241-11: Usability definitions
- ISO 9241-171: Accessible software design
**IEC 62304**: Medical device software lifecycle
- Software safety classifications (A, B, C)
- Required for FDA submissions and EU MDR
---
## WCAG 2.2 Level AA Requirements
### Perceivable: Users Must Perceive Content
#### Text Alternatives
```html
```
#### Color Contrast
**Requirements:**
- Normal text (< 18pt): **4.5:1** contrast ratio
- Large text (>= 18pt or 14pt bold): **3:1** contrast ratio
- UI components: **3:1** contrast ratio
```css
/* Good: High contrast */
--text-primary: #212529; /* 16.1:1 on white */
--clinical-blue: #0066CC; /* 7.0:1 on white */
/* Bad: Fails AA */
--text-muted: #ADB5BD; /* 2.85:1 on white - DON'T USE */
```
**Testing Tools:**
- Chrome DevTools contrast indicator
- WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
#### Status Indicators
```html
CriticalCritical: Requires immediate attention
```
### Operable: Users Must Operate Interface
#### Keyboard Navigation
```html
```
### WCAG 2.2 New Success Criteria
#### 3.3.7 Redundant Entry (Level A)
**Requirement**: Information previously entered must auto-populate or be selectable.
**Healthcare Impact**: Critical for patient registration, insurance forms, appointment scheduling.
```html
Address from Step 1. Edit if needed.
```
#### 3.3.8 Accessible Authentication (Level AA)
**Requirement**: Authentication cannot rely solely on cognitive function tests.
**Must Support:**
- Password managers (paste allowed)
- Biometric login (fingerprint, face recognition)
- Object recognition (identify photo from your photos)
- Cannot require memorization only
```html
```
#### 2.4.11 Focus Not Obscured (Minimum) (Level AA)
**Requirement**: Keyboard focus must not be entirely hidden by sticky headers, footers, or modals.
**Healthcare Impact**: EHR systems often have sticky navigation that can obscure focus.
```css
/* Good: Account for sticky header height */
:target {
scroll-margin-top: 80px; /* Height of sticky header */
}
/* Good: Ensure modal doesn't obscure focus */
.modal {
position: fixed;
/* Trap focus within modal */
}
```
#### 3.2.6 Consistent Help (Level A)
**Requirement**: Help mechanisms must appear in consistent locations across pages.
```html
```
---
## Patient Safety Language
### Core Principle: Calm, Professional Communication
**Healthcare software must not alarm patients or undermine trust.**
### Word Substitutions
| Avoid | Use Instead |
|-------|-------------|
| Error, Failed, Broken | Unable to process, Not completed |
| Invalid, Illegal | Please check, Please verify |
| Denied, Rejected | Unable to access, Needs review |
| Crashed, Down | Temporarily unavailable |
| Fatal error, Critical failure | Please contact support, Needs immediate attention |
| Alert!, Warning! | Please note, Important |
### Message Templates
#### Form Validation
```
Bad: Error: Field required
Good: Please enter patient name
Bad: Invalid email address
Good: Please enter a valid email address (e.g., name@example.com)
Bad: Error: Value too high
Good: Quantity cannot exceed 500 (available stock)
```
#### Data Not Found
```
Bad: Fatal error: Patient record not found
Good: This patient record is not currently available.
Please verify the patient ID or contact support if the issue persists.
```
#### Permission Issues
```
Bad: Access denied - forbidden
Good: You don't have permission to access this section.
Please contact your administrator for assistance.
```
#### Network/System Issues
```
Bad: Server down - error 500
Good: We're experiencing technical difficulties.
Your data is safe. Please try again in a few moments.
```
### Critical Patient Safety Alerts
**When there IS an actual safety concern, be direct:**
```
ALLERGY ALERT: Patient is allergic to Penicillin.
This medication (Amoxicillin) contains Penicillin.
Action required: Do not dispense. Select alternative medication.
[View Alternatives] [Cancel Order]
```
**Use "WARNING" or "ALERT" only for:**
- Actual patient safety risks (allergies, drug interactions)
- Regulatory compliance issues (expired medications)
- Critical system failures affecting patient care
- Data integrity issues impacting treatment decisions
---
## Healthcare Application Types
### Hospital Information Systems (HIS)
**Key Considerations:**
- Complex workflows with multiple user roles
- High-frequency data entry
- Critical patient safety information
- Integration with medical devices
**Accessibility Priorities:**
- Keyboard shortcuts for power users
- Clear role-based navigation
- High contrast for clinical environments
- Screen reader compatibility for all patient data
### Electronic Medical Records (EMR/EHR)
**Key Considerations:**
- Dense information displays
- Charting and documentation
- Order entry systems
- Clinical decision support
**Accessibility Priorities:**
- Navigable heading structure
- Skip links for long forms
- Clear data tables with proper headers
- Accessible date pickers
- Support for voice dictation
### Clinic/Practice Management
**Key Considerations:**
- Appointment scheduling
- Billing and insurance
- Patient check-in/out
- Reporting
**Accessibility Priorities:**
- Simple, clear workflows
- Accessible calendar components
- Clear form validation
- Print-friendly accessible formats
### Patient Portals
**Key Considerations:**
- Diverse user population (patients, caregivers)
- Varying technical literacy
- Mobile-first usage
- Self-service features
**Accessibility Priorities:**
- Plain language (reading level optimization)
- Large touch targets for mobile
- Accessible authentication (WCAG 3.3.8)
- Clear navigation and help
- Support for caregivers and proxies
### Telehealth Platforms
**Key Considerations:**
- Real-time video communication
- Screen sharing for education
- Virtual waiting rooms
- Integration with patient records
**Accessibility Priorities:**
- Real-time captioning
- Keyboard controls for video
- Screen reader announcements for status changes
- Accessible chat functionality
- Clear audio controls
### Medical Kiosks
**Key Considerations:**
- Public-facing devices
- Check-in and registration
- Payment processing
- Wayfinding
**Accessibility Priorities:**
- Large touch targets (44x44px minimum)
- High contrast for various lighting
- Audio output option
- Height accessibility
- Clear timeout warnings
---
## Mobile Healthcare Apps
### iOS Accessibility
**VoiceOver Compatibility:**
- Use UIAccessibility API
- Provide accessibilityLabel for all controls
- Support Dynamic Type for text sizing
- Implement VoiceOver rotor actions
**Touch Targets:**
- Minimum 44x44 points
- Adequate spacing between elements
**Testing:**
- Accessibility Inspector in Xcode
- Test with VoiceOver enabled
### Android Accessibility
**TalkBack Compatibility:**
- Use contentDescription for meaningful elements
- Implement proper focus order
- Support system font scaling
**Touch Targets:**
- Minimum 48x48 dp
- Minimum 8dp spacing between targets
**Testing:**
- Accessibility Scanner app
- Test with TalkBack enabled
### Cross-Platform Considerations
```
- Support both portrait and landscape
- Pinch-to-zoom support (don't disable)
- Text resizing up to 200%
- Consistent navigation across platforms
- Alternative to complex gestures (swipe, drag)
```
---
## Healthcare AI/Chatbot Accessibility
### WCAG Compliance for Conversational Interfaces
**Keyboard Navigation:**
- All chat controls keyboard accessible
- Clear focus indicators
- Escape to close chat window
**Screen Reader Support:**
```html
What are my appointments?
You have 2 upcoming appointments...
```
**Clear Message Attribution:**
```html
You said:
What are my appointments?
Assistant replied:
You have 2 upcoming appointments...
```
### Voice Interface Accessibility
**Challenges:**
- 5-10% of Americans have communication disorders
- 50-60% accuracy for users with speech impairments
**Best Practices:**
- Always provide text input alternative
- Clear error recovery
- Confirm actions before executing
- Allow retry or fallback to human support
### Alternative Input Methods
- Text input alongside voice
- Button-based options for common tasks
- Support for switch controls
- Predictive text suggestions
---
## HL7 FHIR Patient Access Guidelines
### International Patient Access (IPA) Specification
**Accessible Data Types:**
- Basic patient details
- Problems and conditions
- Medication orders
- Immunization history
- Allergies
- Vital signs
- Lab results
- Clinical notes
### Accessibility Considerations for FHIR Apps
**SMART on FHIR Authorization:**
- OAuth 2.0 flows must be accessible
- Login screens must meet WCAG 2.2 AA
- Support for password managers
**Patient-Facing Data Display:**
- Clear presentation of clinical data
- Plain language explanations where possible
- Accessible charts and graphs
- Downloadable accessible formats
---
## Testing Checklist
### Automated Testing (Catches ~30% of issues)
- [ ] axe DevTools browser extension
- [ ] Lighthouse accessibility audit
- [ ] WAVE accessibility checker
- [ ] Pa11y CI for automated testing
### Keyboard Navigation (Manual)
- [ ] Tab through all interactive elements
- [ ] Verify focus order matches visual order
- [ ] Check focus indicators are visible
- [ ] Test Escape key closes modals/dropdowns
- [ ] Verify Enter/Space activates buttons
- [ ] No keyboard traps
### Screen Reader Testing (Manual)
- [ ] Navigate by headings (H key in NVDA/JAWS)
- [ ] Navigate by landmarks (D key)
- [ ] Navigate by form fields (F key)
- [ ] Verify all images have alt text
- [ ] Verify all buttons have accessible names
- [ ] Check ARIA states announce correctly
**Test With:**
- NVDA (Windows, free): https://www.nvaccess.org/
- JAWS (Windows, paid)
- VoiceOver (macOS): Cmd+F5
- TalkBack (Android)
- VoiceOver (iOS)
### Visual Testing
- [ ] Zoom to 200% - verify no horizontal scrolling
- [ ] Resize window to 320px - verify content reflows
- [ ] Test in Windows High Contrast Mode
- [ ] Test with increased text spacing
- [ ] Verify color contrast meets requirements
### Patient Safety Language Testing
- [ ] All error messages reviewed
- [ ] No alarming terminology (Error, Failed, Broken, Denied)
- [ ] All messages provide clear next steps
- [ ] Messages appropriate for audience
- [ ] Critical alerts properly identified
- [ ] Tone is calm, professional, helpful
### Mobile Testing
- [ ] Test with VoiceOver (iOS)
- [ ] Test with TalkBack (Android)
- [ ] Verify touch targets >= 44x44 (iOS) / 48x48 (Android)
- [ ] Test with system font scaling at 200%
- [ ] Test both orientations
---
## Common Violations & Fixes
### 1. Missing Focus Indicators
**Problem:**
```css
* { outline: none; }
```
**Fix:**
```css
*:focus-visible {
outline: 3px solid var(--clinical-blue);
outline-offset: 2px;
}
```
### 2. Placeholder as Label
**Problem:**
```html
```
**Fix:**
```html
```
### 3. Insufficient Color Contrast
**Problem:**
```css
.text-muted { color: #CCCCCC; } /* 2.5:1 - FAILS */
```
**Fix:**
```css
.text-muted { color: #6C757D; } /* 4.54:1 - PASSES AA */
```
### 4. Alarming Error Messages
**Problem:**
```
Fatal error: Stock transfer failed
```
**Fix:**
```
Unable to complete stock transfer.
Requested quantity (500) exceeds available stock (300).
Please adjust the quantity and try again.
```
### 5. Inaccessible Authentication
**Problem:**
```html
```
**Fix:**
```html
```
### 6. Redundant Data Entry
**Problem:**
Requiring patients to re-enter address, insurance info, or other data on every form step.
**Fix:**
Auto-populate from previous entries with option to edit.
---
## Resources
### Standards Documentation
- WCAG 2.2: https://www.w3.org/WAI/WCAG22/quickref/
- EN 301 549: https://www.etsi.org/deliver/etsi_en/301500_301599/301549/
- Section 508: https://www.section508.gov/
- NHS Digital Service Manual: https://service-manual.nhs.uk/accessibility
### Reference Documents
- [WCAG_2.2_COMPLIANCE.md](reference/WCAG_2.2_COMPLIANCE.md) - Complete WCAG 2.2 checklist
- [PATIENT_SAFETY_LANGUAGE.md](reference/PATIENT_SAFETY_LANGUAGE.md) - Full messaging guidelines
### Testing Tools
- axe DevTools: https://www.deque.com/axe/devtools/
- WAVE: https://wave.webaim.org/extension/
- WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
- Lighthouse (Chrome DevTools)
### Screen Readers
- NVDA (Windows, free): https://www.nvaccess.org/
- VoiceOver (macOS): Cmd+F5
- TalkBack (Android)
- JAWS (Windows): https://www.freedomscientific.com/products/software/jaws/
### Regulatory Resources
- HHS Section 504 Fact Sheet: https://www.hhs.gov/civil-rights/for-individuals/disability/
- ADA Web Guidance: https://www.ada.gov/resources/web-guidance/
- 21st Century Cures Act: https://www.healthit.gov/curesrule/
---
## Summary Checklist
Before releasing ANY healthcare interface:
**Accessibility (WCAG 2.2 Level AA):**
- [ ] Keyboard navigation works for all functionality
- [ ] Focus indicators visible on all interactive elements
- [ ] Touch targets >= 24x24px (44x44px recommended)
- [ ] Color contrast >= 4.5:1 for normal text
- [ ] All images have alt text
- [ ] All form inputs have visible labels
- [ ] Semantic HTML (proper headings, lists, buttons)
- [ ] Screen reader compatible
- [ ] Works at 200% zoom
- [ ] Accessible authentication (password managers, biometrics)
- [ ] No redundant data entry required
**Patient Safety:**
- [ ] Error messages use patient safety language
- [ ] No alarming terminology
- [ ] Clear next steps provided
- [ ] Critical alerts properly identified
**Regulatory Compliance:**
- [ ] HHS Section 504 requirements met
- [ ] ADA Title III considerations addressed
- [ ] 21st Century Cures Act patient access supported
**Remember:** Accessibility is not optional in healthcare. It's a patient safety requirement, legal obligation, and ethical imperative.