Keyboard navigation

Overview

Keyboard navigation ensures that every user—regardless of ability—can interact with Penn Medicine web and digital products. At Penn Medicine, we adhere to Web Content Accessibility Guidelines (WCAG), to ensure that websites are usable by a wider audience, including those who rely on screen readers or other assistive technologies.

Importance of keyboard navigation

Keyboard navigation is essential for the following reasons:

• Accessibility compliance
• Required under WCAG 2.0/2.1 Guidelines (e.g., Success Criterion 2.1.1: Keyboard).
• Supports ADA, Section 508, and HIPAA aligned best practices.
  
• Non-compliance can lead to legal risk and complaints from users with disabilities.Equal access to care
• Equal access to care
• Many patients rely on keyboard navigation to:
• Book appointments
• Refill prescriptions
• View lab results or test records
• Complete forms or insurance documents
• If they can’t do this without a mouse, they may be excluded from essential services.
• Inclusive user experience
• Demonstrates your organization’s commitment to health equity and digital inclusion.
• Builds trust and credibility with all patient populations.

Guidelines for keyboard navigation:

To ensure compliance with keyboard navigation—especially to meet WCAG 2.0 AA standards—you need to design, build, and test with keyboard-only users in mind. Here's a practical checklist tailored to healthcare organizations, where accessibility impacts patient care, privacy, and legal compliance.

1. Use a logical tab order

• Ensure that pressing Tab moves through elements in a logical, visual order (e.g., navigation → content → forms).
• Use semantic HTML (<nav>, <main>, <form>, <button>, <a>) to support natural focus flow.
  
• Avoid disrupting the order with complex layout structures (e.g., using position: absolute without tabindex fixes).
  

2. Make all interactive elements focusable

• All key components must be reachable via keyboard:
• Buttons (<button>)
• Links (<a href="...")
• Form fields (<input>, <select>, <textarea>)
• Modals, pop-ups, and accordions
• Use tabindex="0" to make custom elements (like icons or cards) focusable if necessary.

css
CopyEdit
button:focus, a:focus {
  outline: 3px solid #005eb8; /* Example: high contrast blue */
}

Last updated