The best blog

Accessibility - Screen Reader Navigation Verbs

Wed Sep 18 2024

Comprehensive List of Screen Reader Navigation Verbs with Standards and Platform Behaviors

To optimize your website for blind users, it's essential to understand both the standard recommendations for implementing accessible content and how different screen readers react to these standards. Below is a detailed list of navigation actions (verbs), including:

  1. Standard Recommendation: The recommended way to implement the feature according to accessibility standards (e.g., WCAG, WAI-ARIA).
  2. Platform Reactions: How each major screen reader (JAWS, NVDA, VoiceOver, Narrator, TalkBack) interacts with the standard implementation, including any departures from the expected behavior.

Table of Contents

  1. Move to Next Heading
  2. Move to Previous Heading
  3. Move to Next Link
  4. Move to Previous Link
  5. Move to Next Button
  6. Move to Previous Button
  7. Activate the Current Element
  8. Read Current Line
  9. Read Current Word
  10. Read Current Character
  11. Toggle Forms/Focus Mode
  12. List All Headings
  13. List All Links
  14. List All Buttons
  15. Move to Next Form Field
  16. Move to Previous Form Field
  17. Start Reading from Current Position
  18. Read the Entire Page
  19. Open Context Menu
  20. Search for Text on Page
  21. Move to Next Landmark/Region
  22. Navigate by Lists and List Items
  23. Navigate by Tables and Table Cells
  24. Navigate by Frames and iframes
  25. Navigate by Form Element Types
  26. Navigate by ARIA Roles and Custom Widgets
  27. Announce Notifications and Live Regions
  28. Spell Current Word
  29. Adjust Speech Settings
  30. Switch Review Modes
  31. Select Text
  32. Announce Formatting
  33. Adjust Navigation Granularity
  34. Navigate to Specific Elements
  35. Additional Notes
  36. Best Practices for Developers
  37. Conclusion

Legend

  • Standard Recommendation: Guidelines from WCAG, WAI-ARIA, and HTML specifications.
  • Platforms:
    • JAWS: Job Access With Speech (Windows)
    • NVDA: NonVisual Desktop Access (Windows)
    • VoiceOver: Built-in screen reader on macOS and iOS
    • Narrator: Built-in screen reader on Windows
    • TalkBack: Built-in screen reader on Android devices

1. Move to Next Heading

Standard Recommendation:

  • Use Semantic HTML Headings: Use <h1> to <h6> tags to denote headings.
  • Logical Structure: Headings should reflect the content hierarchy, with <h1> for main titles and subsequent levels for subheadings.

Platform Reactions:

  • JAWS: Press H to navigate to the next heading.
    • Departure: None; correctly navigates when headings are properly tagged.
  • NVDA: Press H.
    • Departure: None; consistent with standards.
  • VoiceOver: Use Control + Option + Command + H.
    • Departure: None; follows standard behavior.
  • Narrator: Press H.
    • Departure: None.
  • TalkBack: Swipe forward after setting granularity to "Headings".
    • Departure: May not recognize headings if not properly tagged with <h1>-<h6>.

2. Move to Previous Heading

Standard Recommendation:

  • Same as above; ensure correct use of heading tags.

Platform Reactions:

  • JAWS/NVDA: Press Shift + H.
    • Departure: None.
  • VoiceOver: Use Shift + Control + Option + Command + H.
    • Departure: None.
  • Narrator: Press Shift + H.
    • Departure: None.
  • TalkBack: Swipe backward after setting granularity to "Headings".
    • Departure: Same as above.

Standard Recommendation:

  • Proper Link Markup: Use <a href="..."> for all links.
  • Descriptive Text: Provide meaningful link text that describes the destination.

Platform Reactions:

  • JAWS: Press Tab or K.
    • Departure: May skip links without href attributes or with href="#" without proper handling.
  • NVDA: Press K.
    • Departure: Similar to JAWS.
  • VoiceOver: Press Tab or use the rotor to navigate links.
    • Departure: None.
  • Narrator: Press K or Tab.
    • Departure: None.
  • TalkBack: Swipe forward; may need to adjust granularity to "Links".
    • Departure: May not recognize links without proper markup.

Standard Recommendation:

  • Same as above.

Platform Reactions:

  • JAWS/NVDA: Press Shift + K.
    • Departure: Same as moving forward; issues arise with improper link markup.
  • VoiceOver: Use Shift + Tab or rotor.
    • Departure: None.
  • Narrator: Press Shift + K or Shift + Tab.
    • Departure: None.
  • TalkBack: Swipe backward; adjust granularity if needed.
    • Departure: Same as above.

5. Move to Next Button

Standard Recommendation:

  • Use Native Button Elements: Use <button>, <input type="button">, or <input type="submit">.
  • Accessible Roles for Custom Buttons: If using custom elements (e.g., <div> or <span>), add role="button" and ensure keyboard accessibility with tabindex="0".

Platform Reactions:

  • JAWS/NVDA: Press B to navigate to the next button.
    • Departure: May not recognize buttons without proper roles or tabindex.
  • VoiceOver: Use rotor to select "Buttons".
    • Departure: May require interaction commands to access custom buttons.
  • Narrator: Press B.
    • Departure: Similar to JAWS/NVDA.
  • TalkBack: Swipe forward after setting granularity to "Controls".
    • Departure: Custom buttons without proper roles may be skipped.

6. Move to Previous Button

Standard Recommendation:

  • Same as above; ensure all buttons are accessible.

Platform Reactions:

  • JAWS/NVDA: Press Shift + B.
    • Departure: Same as moving forward.
  • VoiceOver: Use rotor and swipe up.
    • Departure: None if buttons are properly implemented.
  • Narrator: Press Shift + B.
    • Departure: Same as above.
  • TalkBack: Swipe backward; adjust granularity if needed.
    • Departure: Same as above.

7. Activate the Current Element

Standard Recommendation:

  • Ensure Keyboard Operability: Interactive elements must be operable via keyboard (e.g., Enter or Spacebar).
  • Use onclick with Keyboard Events: For custom controls, ensure that onclick handlers are triggered by both mouse and keyboard events.

Platform Reactions:

  • JAWS/NVDA: Activate with Enter or Spacebar.
    • Departure: Custom elements without keyboard event handlers may not activate.
  • VoiceOver: Use Control + Option + Spacebar.
    • Departure: May require interaction mode for custom elements.
  • Narrator: Activate with Enter or Spacebar.
    • Departure: Similar to JAWS/NVDA.
  • TalkBack: Double-tap the screen.
    • Departure: None if elements are properly accessible.

8. Read Current Line

Standard Recommendation:

  • Proper Text Structure: Ensure text content is structured in logical blocks.

Platform Reactions:

  • All Platforms: Read the current line using respective commands.
    • Departure: Lines may be misread if content uses excessive line breaks or non-standard formatting.

9. Read Current Word

Standard Recommendation:

  • Avoid Text Splitting: Do not split words across multiple elements or spans.

Platform Reactions:

  • All Platforms: Read the current word.
    • Departure: Inconsistent reading if words are split or contain hidden characters.

10. Read Current Character

Standard Recommendation:

  • Proper Encoding: Ensure characters are properly encoded (e.g., use Unicode characters where appropriate).

Platform Reactions:

  • All Platforms: Read the current character.
    • Departure: May mispronounce or skip characters with improper encoding.

11. Toggle Forms/Focus Mode

Standard Recommendation:

  • Use Standard Form Elements: <input>, <textarea>, <select>, etc.
  • Proper Labels: Associate labels with form controls using <label>.

Platform Reactions:

  • JAWS/NVDA: Enter Forms Mode automatically on form fields.
    • Departure: May not enter Forms Mode on custom controls without proper ARIA roles.
  • VoiceOver: Interacts with form elements as needed.
    • Departure: None if elements are standard.
  • Narrator: Handles forms automatically.
    • Departure: Similar behavior.
  • TalkBack: Focuses on form fields when selected.
    • Departure: May skip improperly labeled fields.

12. List All Headings

Standard Recommendation:

  • Consistent Heading Structure: Use headings to outline page structure.

Platform Reactions:

  • JAWS: Press Insert + F6.
    • Departure: Will not list headings not marked with <h1>-<h6>.
  • NVDA: Press NVDA + F7 and select "Headings".
    • Departure: Same as JAWS.
  • VoiceOver: Use rotor to list headings.
    • Departure: None if headings are properly tagged.
  • Narrator: Press Caps Lock + F6.
    • Departure: Same as above.
  • TalkBack: Navigate headings using granularity.
    • Departure: May not list headings but can navigate to them.

Standard Recommendation:

  • Meaningful Links: Ensure link text is descriptive.

Platform Reactions:

  • JAWS: Press Insert + F7.
    • Departure: Links without href attributes may not appear.
  • NVDA: Same as JAWS.
    • Departure: Similar limitations.
  • VoiceOver: Use rotor to list links.
    • Departure: None.
  • Narrator: Press Caps Lock + F7.
    • Departure: Same as above.
  • TalkBack: Limited to navigation rather than listing.

14. List All Buttons

Standard Recommendation:

  • Accessible Buttons: Ensure all buttons are properly marked up.

Platform Reactions:

  • JAWS: Press Insert + F5.
    • Departure: Custom buttons without roles may be missed.
  • NVDA: Use elements list and select "Buttons".
    • Departure: Same as JAWS.
  • VoiceOver: Use rotor to list buttons.
    • Departure: None if buttons are correctly implemented.
  • Narrator: Press Caps Lock + F5.
    • Departure: Similar behavior.
  • TalkBack: Navigation-focused; may not list buttons separately.

15. Move to Next Form Field

Standard Recommendation:

  • Labeling: Ensure all form fields have associated labels.

Platform Reactions:

  • JAWS/NVDA: Press F.
    • Departure: May skip fields without labels.
  • VoiceOver: Press Tab.
    • Departure: None if fields are standard.
  • Narrator: Press F.
    • Departure: Similar to JAWS/NVDA.
  • TalkBack: Swipe forward; adjust granularity if needed.
    • Departure: May not recognize unlabeled fields.

16. Move to Previous Form Field

Standard Recommendation:

  • Same as above.

Platform Reactions:

  • Consistent across platforms when form fields are properly labeled.

17. Start Reading from Current Position

Standard Recommendation:

  • Logical Content Flow: Ensure content flows logically and is not interrupted by hidden elements.

Platform Reactions:

  • All Platforms: Read from the current position.
    • Departure: Dynamically inserted content without proper focus management may be skipped.

18. Read the Entire Page

Standard Recommendation:

  • Avoid Auto-Play Media: Do not disrupt reading with auto-playing content.
  • Content Accessibility: Ensure all content is accessible and not hidden.

Platform Reactions:

  • All Platforms: Read entire page from top.
    • Departure: Hidden content or dynamically loaded sections may not be included.

19. Open Context Menu

Standard Recommendation:

  • Accessible Context Menus: Use standard context menu events or accessible custom implementations.

Platform Reactions:

  • All Platforms: Open context menu with standard commands.
    • Departure: Custom context menus not accessible via keyboard may not be usable.

20. Search for Text on Page

Standard Recommendation:

  • Text Content: Ensure text is real text, not images.
  • Accessibility of Text: Avoid using text embedded in non-text elements.

Platform Reactions:

  • All Platforms: Use Ctrl + F or equivalent.
    • Departure: Cannot find text in images or inaccessible elements.

21. Move to Next Landmark/Region

Standard Recommendation:

  • Use ARIA Landmarks: Implement role attributes like navigation, main, banner, etc.
  • HTML5 Structural Elements: Use <nav>, <main>, <header>, <footer>, etc.

Platform Reactions:

  • JAWS: Press R.
    • Departure: Will not recognize landmarks without proper roles.
  • NVDA: Press D.
    • Departure: Same as JAWS.
  • VoiceOver: Use rotor to navigate landmarks.
    • Departure: None if landmarks are properly implemented.
  • Narrator: Press D.
    • Departure: Similar behavior.
  • TalkBack: Swipe forward after setting granularity to "Landmarks".
    • Departure: May not recognize improperly tagged regions.

22. Navigate by Lists and List Items

Standard Recommendation:

  • Proper List Markup: Use <ul> or <ol> for lists and <li> for list items.

Platform Reactions:

  • JAWS/NVDA: Press L for lists, I for list items.
    • Departure: Non-standard lists may not be recognized.
  • VoiceOver: Use rotor to select "Lists".
    • Departure: None with correct markup.
  • Narrator: Press L.
    • Departure: Similar to JAWS/NVDA.
  • TalkBack: Adjust granularity to "Lists".
    • Departure: May skip lists without proper tags.

23. Navigate by Tables and Table Cells

Standard Recommendation:

  • Data Tables: Use <table> with <thead>, <tbody>, <tr>, <th>, and <td>.
  • Accessibility Attributes: Use scope, headers, and aria-labelledby for complex tables.

Platform Reactions:

  • JAWS/NVDA: Press T for tables; navigate cells with arrow keys.
    • Departure: May misinterpret layout tables without role="presentation".
  • VoiceOver: Interact with tables using Control + Option + Shift + Down Arrow.
    • Departure: None if tables are properly structured.
  • Narrator: Press T.
    • Departure: Similar behavior.
  • TalkBack: Limited support for table navigation.
    • Departure: May not navigate tables effectively.

24. Navigate by Frames and iframes

Standard Recommendation:

  • iframes: Use <iframe> with meaningful title attributes.
  • Avoid Framesets: Framesets are obsolete; use modern web technologies.

Platform Reactions:

  • JAWS/NVDA: Press M to navigate frames.
    • Departure: May not recognize iframes without titles.
  • VoiceOver: Navigation depends on content within iframes.
    • Departure: None if properly implemented.
  • Narrator: Press M.
    • Departure: Similar to JAWS/NVDA.
  • TalkBack: Limited iframe support.
    • Departure: May not recognize or navigate into iframes.

25. Navigate by Form Element Types

Standard Recommendation:

  • Use Correct Form Controls: <input type="checkbox">, <input type="radio">, etc.
  • Labels and Fieldsets: Use <label> and <fieldset> for grouping.

Platform Reactions:

  • JAWS/NVDA: Use specific keys (X for checkboxes, A for radio buttons).
    • Departure: Custom controls without roles may not be recognized.
  • VoiceOver: Navigate forms using standard keys.
    • Departure: May require interaction mode for custom elements.
  • Narrator: Similar behavior.
  • TalkBack: Adjust granularity to "Controls".
    • Departure: Same as above.

26. Navigate by ARIA Roles and Custom Widgets

Standard Recommendation:

  • Implement ARIA Correctly: Use appropriate roles, states, and properties.
  • Follow ARIA Authoring Practices: Ensure custom widgets behave like native elements.

Platform Reactions:

  • JAWS/NVDA: Recognize and interact with ARIA roles when properly implemented.
    • Departure: Misused or incorrect ARIA roles can cause confusion.
  • VoiceOver: Generally supports ARIA, but may have issues with complex widgets.
  • Narrator: Support improving but may lag behind.
  • TalkBack: Varies; accurate implementation is crucial.

27. Announce Notifications and Live Regions

Standard Recommendation:

  • Use Live Regions: Implement aria-live attributes for dynamic content updates.
  • Roles for Alerts: Use role="alert" for important messages.

Platform Reactions:

  • All Platforms: Announce updates in live regions.
    • Departure: Overuse or improper use can overwhelm users or cause announcements to be missed.

28. Spell Current Word

Standard Recommendation:

  • Avoid Text Fragmentation: Ensure words are not split across elements.

Platform Reactions:

  • All Platforms: Spell current word with respective commands.
    • Departure: May not spell correctly if words are fragmented.

29. Adjust Speech Settings

Standard Recommendation:

  • Respect User Settings: Do not override user preferences for speech rate, pitch, etc.

Platform Reactions:

  • All Platforms: Users adjust settings manually.
    • Departure: Content that tries to control these settings may cause issues.

30. Switch Review Modes

Standard Recommendation:

  • Provide Proper Roles and States: Ensure interactive elements are accessible in both browse and focus modes.

Platform Reactions:

  • JAWS/NVDA: Users toggle modes as needed.
    • Departure: Custom widgets may require specific modes; improper implementation can hinder access.
  • VoiceOver/Narrator: Handle mode switching automatically.
    • Departure: May require extra interaction steps for custom elements.
  • TalkBack: Manages modes through gestures.

31. Select Text

Standard Recommendation:

  • Allow Text Selection: Do not disable text selection unless necessary.

Platform Reactions:

  • All Platforms: Support text selection with appropriate commands.
    • Departure: Disabled text selection hinders this functionality.

32. Announce Formatting

Standard Recommendation:

  • Use Semantic Markup: <strong>, <em>, <code>, etc., for textual emphasis.
  • Avoid Using Only Visual Cues: Ensure formatting is programmatically determinable.

Platform Reactions:

  • All Platforms: Announce formatting when semantics are used.
    • Departure: Styling with CSS alone may not be announced.

33. Adjust Navigation Granularity

Standard Recommendation:

  • Structure Content Logically: Enable navigation at various levels (character, word, line, etc.).

Platform Reactions:

  • All Platforms: Users adjust granularity as needed.
    • Departure: Poor content structure can limit navigation options.

34. Navigate to Specific Elements

Standard Recommendation:

  • Use Appropriate Elements: For example, use <p> for paragraphs, <blockquote> for block quotes.

Platform Reactions:

  • All Platforms: Navigate to elements when properly tagged.
    • Departure: Non-semantic elements may not be recognized.

35. Additional Notes

  • Consistent Navigation: Users expect consistent behavior across websites.
  • Avoid ARIA Overuse: Use ARIA to enhance, not replace, native semantics.
  • Testing: Regular testing with different screen readers is essential.

36. Best Practices for Developers

  • Semantic HTML: Always prefer semantic elements over div or span with roles.
  • Accessible Labels: Use aria-label or aria-labelledby when necessary.
  • Keyboard Accessibility: Ensure all functionality is available via keyboard.
  • Error Handling: Provide clear, accessible error messages.
  • Focus Management: Manage focus, especially with dynamic content changes.
  • Avoid Hidden Text for Accessibility: Use visually hidden techniques (.sr-only) when necessary.

37. Conclusion

Understanding the standard recommendations and how different platforms react to them is crucial for creating accessible web content for blind users. By adhering to accessibility standards and best practices, you ensure that your website is navigable and usable across various screen readers, providing an inclusive experience for all users.

References

Feel free to contact me if you need further clarification on any specific navigation action, standard recommendation, or platform behavior.