Narrator for Windows: Enhancing Web Accessibility

Shawn Sandy (Ally.Cafe) ~ July 10, 2024

What is Narrator for Windows?

Narrator is a screen reader built into the Windows operating system. It reads aloud the text on the screen and provides descriptions of events such as notifications and calendar appointments. Narrator is an essential tool for users who are blind or have low vision.

Understanding WCAG 2.2 Guidelines

WCAG 2.2 introduces specific guidelines to enhance web accessibility. These guidelines are divided into three conformance levels:

Level A: Basic web accessibility features.
Level AA: Deals with the biggest and most common barriers for disabled users.
Level AAA: The highest and most complex level of web accessibility.

Guideline 1.3: Adaptable - Content must be adaptable and capable of being presented in different ways without losing information or structure.
- 1.3.1 Info and Relationships (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Guideline 2.1: Keyboard Accessible - Make all functionality available from a keyboard.
- 2.1.1 Keyboard (Level A): All functionality of the content is operable through a keyboard interface.
Guideline 4.1: Compatible - Maximize compatibility with current and future user agents, including assistive technologies.
- 4.1.2 Name, Role, Value (Level A): For all user interface components, the name and role can be programmatically determined.

Use ARIA (Accessible Rich Internet Applications): ARIA landmarks, roles, properties, and states improve navigation and the understanding of web content.
Semantic HTML: Use HTML5 elements like <header>, <main>, <article>, and <footer> to define the structure.
Form Labels: Ensure all form elements have associated <label> elements.
Alternative Text: Provide alt text for all images using the alt attribute.

Code Examples

Example 1: Semantic HTML

<header>
  <h1>Welcome to Our Website</h1>
</header>
<main>
  <article>
    <h2>Article Title</h2>
    <p>This is an example of an article section.</p>
  </article>
</main>
<footer>
  <p>Contact us: [email protected]</p>
</footer>

Example 2: ARIA Roles and Landmarks

<nav aria-label="Main navigation">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
<main role="main">
  <section aria-labelledby="section1">
    <h2 id="section1">Section 1</h2>
    <p>Content for the first section.</p>
  </section>
</main>

Sufficient Techniques and Failures

Sufficient Techniques:

Using the aria-labelledby property to associate labels with form elements.
Ensuring links and buttons have discernible text for screen readers.

Common Failures:

Failure to include a lang attribute on the <html> element.
Inaccessible custom widgets that do not use ARIA roles and properties.

Narrator for Windows works well with websites that adhere to the above guidelines. When designing for screen reader users:

Test with Narrator: Regularly test your website with Narrator to ensure compatibility.
Provide clear instructions: Users should understand how to navigate and interact with the content.

Narrator Shortcuts for Windows

Narrator, the screen reader built into Windows, provides various keyboard shortcuts to make navigation and interaction with the computer more efficient for users who are blind or have low vision. Here is a list of essential Narrator shortcuts:

Turn Narrator on/off: Ctrl + Windows + Enter
Stop Narrator from reading: Ctrl
Show commands for the current item: Narrator + F2

Reading Text

Read the current item: Narrator + Tab
Read from the current location: Narrator + R
Read the current paragraph: Narrator + Ctrl + R
Read the current page: Narrator + Ctrl + I
Read the current line: Narrator + Up Arrow
Read the current word: Narrator + K
Read the current character: Narrator + Comma

Navigating by Elements

Move to the next heading: Narrator + H
Move to the previous heading: Narrator + Shift + H
Move to the next link: Narrator + K
Move to the previous link: Narrator + Shift + K
Move to the next table: Narrator + T
Move to the previous table: Narrator + Shift + T
Move to the next landmark: Narrator + D
Move to the previous landmark: Narrator + Shift + D

Text Selection and Editing

Select from the current location to the end of the text: Narrator + Shift + Down Arrow
Select from the current location to the beginning of the text: Narrator + Shift + Up Arrow
Copy selected text: Ctrl + C
Cut selected text: Ctrl + X
Paste text: Ctrl + V
Undo the last action: Ctrl + Z
Redo the last action: Ctrl + Y

Additional Commands

Open Narrator settings: Narrator + Ctrl + N
Start Narrator QuickStart: Narrator + F1
Open the Narrator Home: Narrator + Windows + Ctrl + N
Toggle search mode: Narrator + Ctrl + F
List all Narrator commands: Narrator + F2

Tips for Using Narrator

Practice using shortcuts: Regular use will make navigation faster and more intuitive.
Customize Narrator settings: Adjust the voice, speed, verbosity, and other settings to suit your preferences.
Use Narrator in combination with other accessibility features: Windows offers a range of accessibility tools that can complement Narrator.

For more detailed information and a comprehensive list of shortcuts, you can refer to the Microsoft Narrator User Guide.

By mastering these shortcuts, users can significantly enhance their efficiency and productivity when using Narrator on Windows.

Resources

For further reading and resources, consider the following links:

By following these guidelines and best practices, you can create accessible web content that enhances the user experience for individuals relying on screen readers like Narrator for Windows.

Found an error, typo, or bug please edit on github or open an issue or ticket

Edit on Github Open an issue