Introduction to NVDA Shortcuts and Web Accessibility
Shawn Sandy (Ally.Cafe) ~
NVDA (NonVisual Desktop Access) is a free, open-source screen reader for Windows developed by NV Access. It provides visually impaired users with access to digital content through speech or braille output. Mastering NVDA shortcuts can greatly improve the efficiency and overall experience for users.
Why NVDA Shortcuts Matter
- Efficiency: Shortcuts allow NVDA users to navigate and interact with web content more quickly and efficiently.
- Accessibility: Knowledge of these shortcuts improves the accessibility of digital content for visually impaired users.
- Enhanced User Experience: Providing information about these shortcuts can significantly enhance the user experience for NVDA users.
Common NVDA Shortcuts
General Navigation
- Activate NVDA:
Ctrl + Alt + N - NVDA Menu:
NVDA + N(NVDA = Insert or Caps Lock) - Help:
NVDA + 1 - Toggle Speech Mode:
NVDA + S - Toggle Virtual Buffer Pass-Through:
NVDA + Shift + Space - List Links:
NVDA + F7 - List Headings:
NVDA + F7, then switch to headings tab - List Form Fields:
NVDA + F7, then switch to form fields tab - Next Element:
E - Previous Element:
Shift + E - Next Heading:
H - Previous Heading:
Shift + H - Next Link:
K - Previous Link:
Shift + K - Next Form Field:
F - Previous Form Field:
Shift + F - Read Current Line:
NVDA + L - Read Next Line:
Down Arrow - Read Previous Line:
Up Arrow - Read Current Word:
NVDA + K - Read Next Word:
Ctrl + Right Arrow - Read Previous Word:
Ctrl + Left Arrow - Read Current Character:
NVDA + C - Read Next Character:
Right Arrow - Read Previous Character:
Left Arrow - Read All:
NVDA + Down Arrow - Stop Reading:
Control - Activate Link/Button:
Enter
Forms and Interactive Elements
- Next Button:
B - Previous Button:
Shift + B - Next Check Box:
X - Previous Check Box:
Shift + X - Next Edit Field:
E - Previous Edit Field:
Shift + E - Next Radio Button:
A - Previous Radio Button:
Shift + A - Next Combo Box:
C - Previous Combo Box:
Shift + C
Best Practices for Web Developers
- Use Semantic HTML: Proper use of HTML5 elements ensures that NVDA can correctly interpret and navigate the content.
- Provide ARIA Landmarks: Use ARIA roles (e.g.,
role="banner",role="navigation",role="main",role="contentinfo") to define regions of the page. - Ensure Keyboard Accessibility: All interactive elements should be accessible via keyboard.
- Provide Text Alternatives: Use
altattributes for images, captions for videos, and text alternatives for other non-text content.
Example:
<img src="example.jpg" alt="Description of image">- Use Skip Links: Implement skip links to allow users to bypass repetitive content.
Example:
<a href="#maincontent" class="skip-link">Skip to main content</a>
<main id="maincontent">
<!-- Main content here -->
</main>Resources for Further Learning
Here are some valuable resources to help you understand and implement accessibility for NVDA:
- NV Access (opens in a new window)
- Web Content Accessibility Guidelines (WCAG) 2.2 (opens in a new window)
- Introduction to ARIA (opens in a new window)
- Accessible Rich Internet Applications (WAI-ARIA) 1.2 (opens in a new window)
- WebAIM: Web Accessibility In Mind (opens in a new window)
- The A11Y Project (opens in a new window)
Utilizing these NVDA shortcuts and implementing best practices can significantly enhance the accessibility and usability of your website for visually impaired users.
Found an error, typo, or bug please edit on github or open an issue or ticket