The best blog

Accessibility - Screen Reader Navigation Verbs & Code

Wed Sep 18 2024

Here is the comprehensive list of screen reader navigation verbs, including the standard recommendations, platform reactions, and markup examples for each action.

Comprehensive List of Screen Reader Navigation Verbs with Examples

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. Additionally, practical examples of how to markup elements according to the standards will help ensure that your content is accessible.

Below is a detailed list of navigation actions (verbs), including:

  1. Standard Recommendation: Guidelines from WCAG, WAI-ARIA, and HTML specifications.
  2. Platform Reactions: How each major screen reader interacts with the standard implementation.
  3. Markup Examples: Examples of how to correctly markup elements for each action.

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.

Markup Examples:

  • Main Heading:

    <h1>Welcome to Our Website</h1>

  • Subheading Level 2:

    <h2>About Us</h2>

  • Subheading Level 3:

    <h3>Our Mission</h3>

Platform Reactions:

  • All Platforms: Recognize and navigate headings when properly tagged.

2. Move to Previous Heading

Standard Recommendation:

  • Same as above.

Markup Examples:

  • Use the same heading tags as in the previous example.

Platform Reactions:

  • All Platforms: Navigate to previous headings when properly tagged.

Standard Recommendation:

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

Markup Examples:

  • Standard Link:

    <a href="https://www.example.com">Visit Example Website</a>

  • Link with Title Attribute (optional for additional info):

    <a href="https://www.example.com" title="Go to Example Website">Visit Example Website</a>

  • Link Opening in New Tab (provide warning):

    <a href="https://www.example.com" target="_blank" rel="noopener">Visit Example Website (opens in new tab)</a>

Platform Reactions:

  • All Platforms: Navigate to links when properly marked up.

Standard Recommendation:

  • Same as above.

Markup Examples:

  • Use the same link markup as in the previous example.

Platform Reactions:

  • All Platforms: Navigate to previous links when properly marked up.

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, add role="button" and ensure keyboard accessibility with tabindex="0".

Markup Examples:

  • Standard Button:

    <button type="button">Click Me</button>

  • Submit Button in a Form:

    <form action="/submit" method="post">
  <!-- Form fields -->
  <input type="submit" value="Submit Form">
</form>

  • Custom Button with Div (Not Recommended, but if necessary):

    <div role="button" tabindex="0" onclick="doSomething()">Custom Button</div>

  • Ensure Keyboard Activation:

    <div role="button" tabindex="0"
     onclick="doSomething()"
     onkeydown="if(event.key === 'Enter' || event.key === ' ') doSomething();">
  Custom Button
</div>

Platform Reactions:

  • All Platforms: Recognize standard buttons. Custom buttons may require additional ARIA roles and keyboard event handling.

6. Move to Previous Button

Standard Recommendation:

  • Same as above.

Markup Examples:

  • Use the same button markup as in the previous example.

Platform Reactions:

  • All Platforms: Navigate to previous buttons when properly marked up.

7. Activate the Current Element

Standard Recommendation:

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

Markup Examples:

  • Interactive Element (e.g., Link Acting as Button):

    <a href="#" role="button" onclick="doSomething()" 
   onkeydown="if(event.key === 'Enter' || event.key === ' ') doSomething();">
  Interactive Element
</a>

  • Custom Button with div (as shown before):

    <div role="button" tabindex="0"
     onclick="doSomething()"
     onkeydown="if(event.key === 'Enter' || event.key === ' ') doSomething();">
  Custom Button
</div>

Platform Reactions:

  • All Platforms: Elements are activatable via keyboard when properly coded.

8. Read Current Line

Standard Recommendation:

  • Proper Text Structure: Ensure text content is structured in logical blocks, such as paragraphs.

Markup Examples:

  • Paragraph Text:

    <p>This is a paragraph of text that provides information to the user.</p>

  • Avoid Splitting Sentences Across Elements:

    <!-- Correct -->
<p>The quick brown fox jumps over the lazy dog.</p>

<!-- Incorrect -->
<p>The quick brown <span>fox jumps</span> over the lazy dog.</p>

Platform Reactions:

  • All Platforms: Read current line correctly when text is properly structured.

9. Read Current Word

Standard Recommendation:

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

Markup Examples:

  • Correct Usage:

    <p>The quick brown fox jumps over the lazy dog.</p>

  • Incorrect Usage:

    <p>The quick brown <span>fo</span><span>x</span> jumps over the lazy dog.</p>

Platform Reactions:

  • All Platforms: Read current word correctly when not fragmented.

10. Read Current Character

Standard Recommendation:

  • Proper Encoding: Ensure characters are properly encoded and not represented by images or CSS content.

Markup Examples:

  • Correct Character Usage:

    <p>Press the "Enter" key to continue.</p>

  • Using Unicode Characters:

    <p>Use the © symbol to denote copyright.</p>

Platform Reactions:

  • All Platforms: Read characters correctly when properly encoded.

11. Toggle Forms/Focus Mode

Standard Recommendation:

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

Markup Examples:

  • Text Input with Label:

    <label for="username">Username:</label>
<input type="text" id="username" name="username">

  • Using aria-label:

    <input type="text" id="email" name="email" aria-label="Email Address">

  • Select Dropdown:

    <label for="country">Country:</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <!-- Other options -->
</select>

Platform Reactions:

  • All Platforms: Enter forms mode automatically when standard form elements are properly labeled.

12. List All Headings

Standard Recommendation:

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

Markup Examples:

  • Structured Headings:

    <h1>Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

Platform Reactions:

  • All Platforms: List headings when properly marked up.

Standard Recommendation:

  • Meaningful Links: Ensure link text is descriptive.

Markup Examples:

  • Descriptive Link Text:

    <a href="contact.html">Contact Us</a>

  • Avoid "Click Here":

    <!-- Incorrect -->
<a href="contact.html">Click here</a> to contact us.

<!-- Correct -->
<p>For inquiries, please <a href="contact.html">contact us</a>.</p>

Platform Reactions:

  • All Platforms: List links when properly marked up.

14. List All Buttons

Standard Recommendation:

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

Markup Examples:

  • Button with Icon and Accessible Name:

    <button type="button" aria-label="Search">
  <svg aria-hidden="true"><!-- Icon SVG code --></svg>
</button>

  • Button with Text and Icon:

    <button type="button">
  <svg aria-hidden="true"><!-- Icon SVG code --></svg>
  Save
</button>

Platform Reactions:

  • All Platforms: List buttons when properly marked up.

15. Move to Next Form Field

Standard Recommendation:

  • Labeling: Ensure all form fields have associated labels.

Markup Examples:

  • Radio Buttons Grouped with Fieldset and Legend:

    <fieldset>
  <legend>Choose your preferred contact method:</legend>
  <div>
    <input type="radio" id="contact_email" name="contact_method" value="email">
    <label for="contact_email">Email</label>
  </div>
  <div>
    <input type="radio" id="contact_phone" name="contact_method" value="phone">
    <label for="contact_phone">Phone</label>
  </div>
</fieldset>

  • Checkbox with Label:

    <div>
  <input type="checkbox" id="subscribe" name="subscribe">
  <label for="subscribe">Subscribe to newsletter</label>
</div>

Platform Reactions:

  • All Platforms: Navigate to form fields when properly labeled.

16. Move to Previous Form Field

Standard Recommendation:

  • Same as above.

Markup Examples:

  • Use the same form field markup as in the previous example.

Platform Reactions:

  • All Platforms: Navigate to previous form fields when properly labeled.

17. Start Reading from Current Position

Standard Recommendation:

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

Markup Examples:

  • Properly Ordered Content:

    <h2>Introduction</h2>
<p>Welcome to our website...</p>
<h2>Services</h2>
<p>We offer a variety of services...</p>

  • Avoid Using CSS to Reorder Content Visually:

    <!-- Incorrect -->
<div style="order: 2;">Second Section</div>
<div style="order: 1;">First Section</div>

Platform Reactions:

  • All Platforms: Read content in the order presented in the HTML.

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.

Markup Examples:

  • Including All Content in the DOM:

    <!-- Ensure all content is present in the DOM and accessible -->
<main>
  <!-- Page content -->
</main>

  • Avoid Hidden Content:

    <!-- Incorrect: Using display:none to hide important content -->
<div style="display: none;">Important information</div>

Platform Reactions:

  • All Platforms: Read entire page when content is accessible.

19. Open Context Menu

Standard Recommendation:

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

Markup Examples:

  • Standard Context Menu: Right-click functionality is handled by the browser.

  • Custom Context Menu with Accessibility:

    <div id="contextMenu" role="menu" aria-hidden="true">
  <ul>
    <li role="menuitem" tabindex="-1">Option 1</li>
    <li role="menuitem" tabindex="-1">Option 2</li>
  </ul>
</div>

  • Triggering Custom Context Menu:

    element.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  // Show custom context menu
});

Platform Reactions:

  • All Platforms: Accessible custom context menus can be navigated if properly implemented.

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.

Markup Examples:

  • Text Content in HTML:

    <p>This is searchable text.</p>

  • Avoid Text in Images:

    <!-- Incorrect -->
<img src="text-image.png" alt="Important information">

Platform Reactions:

  • All Platforms: Can search text that is in the DOM and not hidden.

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.

Markup Examples:

  • Using HTML5 Elements:

    <header>
  <!-- Header content -->
</header>
<nav>
  <!-- Navigation links -->
</nav>
<main>
  <!-- Main content -->
</main>
<footer>
  <!-- Footer content -->
</footer>

  • Using ARIA Roles:

    <div role="banner">
  <!-- Banner content -->
</div>
<div role="navigation">
  <!-- Navigation links -->
</div>
<div role="main">
  <!-- Main content -->
</div>
<div role="contentinfo">
  <!-- Footer content -->
</div>

Platform Reactions:

  • All Platforms: Recognize landmarks when properly marked up.

22. Navigate by Lists and List Items

Standard Recommendation:

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

Markup Examples:

  • Unordered List:

    <ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

  • Ordered List:

    <ol>
  <li>Step one</li>
  <li>Step two</li>
  <li>Step three</li>
</ol>

Platform Reactions:

  • All Platforms: Navigate lists when properly marked up.

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.

Markup Examples:

  • Simple Data Table:

    <table>
  <caption>Monthly Sales</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>$10,000</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td>$12,000</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>

  • Complex Table with headers Attribute:

    <table>
  <caption>Student Grades</caption>
  <thead>
    <tr>
      <th id="name">Name</th>
      <th id="math">Math</th>
      <th id="science">Science</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="name">Alice</td>
      <td headers="math">A</td>
      <td headers="science">B+</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>

Platform Reactions:

  • All Platforms: Navigate tables when properly structured.

24. Navigate by Frames and iframes

Standard Recommendation:

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

Markup Examples:

  • Accessible iframe:

    <iframe src="embedded-content.html" title="Embedded Content"></iframe>

Platform Reactions:

  • All Platforms: Recognize iframes when title is provided.

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.

Markup Examples:

  • Checkboxes:

    <div>
  <input type="checkbox" id="option1" name="options" value="1">
  <label for="option1">Option 1</label>
</div>

  • Radio Buttons:

    <div>
  <input type="radio" id="choice1" name="choices" value="A">
  <label for="choice1">Choice A</label>
</div>

Platform Reactions:

  • All Platforms: Navigate form elements when properly implemented.

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.

Markup Examples:

  • Custom Tabs with ARIA:

    <div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel1" id="tab1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel2" id="tab2">Tab 2</button>
</div>
<div role="tabpanel" id="panel1" aria-labelledby="tab1">
  <!-- Content for Tab 1 -->
</div>
<div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>
  <!-- Content for Tab 2 -->
</div>

  • Accessible Accordion:

    <div id="accordion">
  <h3>
    <button aria-expanded="false" aria-controls="panel1" id="accordion1">Section 1</button>
  </h3>
  <div id="panel1" role="region" aria-labelledby="accordion1" hidden>
    <!-- Content for Section 1 -->
  </div>
</div>

Platform Reactions:

  • All Platforms: Interact with custom widgets when ARIA is properly implemented.

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.

Markup Examples:

  • Live Region for Updates:

    <div aria-live="polite" id="statusMessage"></div>

  • JavaScript to Update Live Region:

    document.getElementById('statusMessage').textContent = 'Your changes have been saved.';

  • Alert Role for Immediate Notifications:

    <div role="alert">
  Error: Please enter a valid email address.
</div>

Platform Reactions:

  • All Platforms: Announce updates in live regions.

28. Spell Current Word

Standard Recommendation:

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

Markup Examples:

  • Consistent Text:

    <p>Accessibility is important.</p>

Platform Reactions:

  • All Platforms: Spell words when text is properly structured.

29. Adjust Speech Settings

Standard Recommendation:

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

Markup Examples:

  • Do Not Use aria-label to Force Pronunciation:

    <!-- Incorrect -->
<p aria-label="R-E-A-D">READ</p>

<!-- Correct -->
<p>READ</p>

Platform Reactions:

  • All Platforms: Users adjust speech settings manually.

30. Switch Review Modes

Standard Recommendation:

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

Markup Examples:

  • Ensure Custom Controls Are Focusable:

    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
  <!-- Slider implementation -->
</div>

Platform Reactions:

  • All Platforms: Switch modes as needed when elements are properly implemented.

31. Select Text

Standard Recommendation:

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

Markup Examples:

  • Avoid Disabling Text Selection with CSS:

    /* Incorrect */
body {
  user-select: none;
}

  • Ensure Text Can Be Selected:

    <p>This text can be selected and copied.</p>

Platform Reactions:

  • All Platforms: Allow text selection when not disabled.

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.

Markup Examples:

  • Bold Text:

    <p>This is <strong>important</strong> information.</p>

  • Italicized Text:

    <p>This is <em>emphasized</em> text.</p>

Platform Reactions:

  • All Platforms: Announce formatting when semantic tags are used.

33. Adjust Navigation Granularity

Standard Recommendation:

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

Markup Examples:

  • Proper Content Structure:

    <p>This is a well-structured paragraph that allows for navigation at different granularities.</p>

Platform Reactions:

  • All Platforms: Users adjust granularity as needed.

34. Navigate to Specific Elements

Standard Recommendation:

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

Markup Examples:

  • Paragraphs:

    <p>This is a paragraph.</p>

  • Block Quote:

    <blockquote>
  <p>"To be, or not to be, that is the question."</p>
  <footer>— William Shakespeare</footer>
</blockquote>

Platform Reactions:

  • All Platforms: Navigate to elements when properly tagged.

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

By adding practical examples of how to markup elements for each navigation action, you can better understand how to implement accessible content according to the standards. This ensures 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, markup example, or accessibility implementation.