Screen Reader Setup

With the development of screen technology, we started to rely more on on-screen reading other than physical reading. For people who are blind or visually impaired to access information displayed on a screen, we started to develop assistive technology such as screen readers or refreshable braille displays. The screen reader is the most widely used technology to help people read digital content, including text, graphics, and tables, by converting visual information into audible output.

When developing a website, there are ways to make the content easier and more accessible for screen readers to read. Although some contents look about the same, they will have a different effect when they are being read by a screen reader. Nowadays, there are 4 best screen readers for the visually impaired: JAWS, NVDA, Apple VoiceOve, and Chrome Vox. For this time, I would like to demonstrate 3 different effects of different HTML writing methods on NVDA screen readers(for Windows).

Semantics for links

When writing a link in HTML, it is always good to write links in ways you like. However, when it comes to screen readers, things start to be different. The visually impaired always want to navigate content by keyboard, and the screen reader will only read content that is focused. This may cause problems if you put links in ambiguous text.

Here is a BAD example.

<ul>
    <li>For more information about the SI579 syllabus<a href="syllabus.html">Click here!</a></li>
    <li>For more information about the SI579 office hours<a href="officeHours.html">Click here!</a></li>
    <li>For more information about the SI579 assignments<a href="assignments.html">Click here!</a></li>
</ul>

The better way is :

<ul>
    <li><a href="syllabus.html">Information about the SI579 syllabus</a></li>
    <li><a href="officeHours.html">Information about the SI579 office hours</a></li>
    <li><a href="assignments.html">Information about the SI579 assignments</a></li>
</ul>

When the screen reader is reading the links, it can tell people where the link is going to lead you. For example, you will know that you are going to a syllabus page when you click the “Information about the SI579 syllabus” link.

Semantics for tables

Tables are tricky content for screen readers. When people are browsing the webpage by keyboard or mouse hovering over the content, the screen reader will directly read out the content in each column and row in <tr> and <td> tags and it will tell you which column and row it belongs to. This is the easiest way to create a table:

    <table>
        <tbody>
        <tr>
          <td>Name</td>
          <td>Type</td>
          <td>HP</td>
        </tr>
        <tr>
          <td>Mew</td>
          <td>Psychic</td>
          <td>100</td>
        </tr>
        <tr>
          <td>Pikachu</td>
          <td>Electric</td>
          <td>35</td>
        </tr>
        <tr>
          <td>Snorlax</td>
          <td>Normal</td>
          <td>160</td>
        </tr>
      </tbody>
    </table>

However, the visually impaired may not remember each table head in the beginning. It will be much easier for them to understand the table if you tell them which table head the content belongs to. So a better way to create a table is:

<caption>My Favourite Pokemons</caption>
        <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Type</th>
            <th scope="col">HP</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Mew</th>
            <td>Psychic</td>
            <td>100</td>
          </tr>
          <tr>
            <th scope="row">Pikachu</th>
            <td>Electric</td>
            <td>35</td>
          </tr>
          <tr>
            <th scope="row">Snorlax</th>
            <td>Normal</td>
            <td>160</td>
          </tr>
        </tbody>

Alternative message for images

Alternative text is an attribute used in HTML code to describe an image displayed on a webpage. Alt text is important because it provides text-based information about the image that can be read by screen readers. By providing a text-based description of the image, users who rely on assistive technology can understand what the image is conveying. Although some of the screen readers are able to detect the image and describe it if alt text is not included, it is better to describe the image in alt text to insure it is available to every screen text. The example is showed below:

<img src = "image/pikachu.png" alt="Pikachu"/>
<img src = "image/pikachu.png" alt="A yellow Pikachu sitting on the ground" title="The Yellow Pikachu"/>

Source and Extended reading

HTML accessibility: A good basis for accessibility

Accessibility Screen Readers: Introduction of screen readers

Hope you enjoy reading this post. Welcoming any comments!