Basic navigation

Introduction to screen‐readers: JAWS Edition

When a page loads

JAWS reads out the title of the page first and will then announce how many regions, headings and links it has found on the new page to give the user an idea of the page size and structure. We'll cover these shortly.

Making sure we are at the top of the page

Sometimes when a page loads you might find the screen‐reader starts reading part-way down the page. This can be down to the screen‐reader remembering the last position on a previously visited page (trying to be helpful). However it is worth checking that it is not caused by any local code, such as javascript grabbing the browser focus or aria live regions.

Activity - starting at the top

To start interacting with the page use Ctrl + Home to move to the top of the page.

This is to ensure you start at the top of the page and all the content will follow the intended sequence. This also solves the occasional issue of the screen‐reader starting part-way down the page. When you use this key command you should hear JAWS read out the page title again.

(If you are using Windows as a VM on a Mac you will need to check what Home is mapped to as Macs don't have this key - on Parallels it is mapped to Fn + Left Arrow.)

Moving through a page

There are a few ways you can navigate with a screen‐reader - just as a sighted user might scan the page before reading from the top.

Screen‐readers also allow us to jump around the page using specific shortcuts to navigate. We'll cover these methods too, but for now we are going to read the page sequentially - from the top down. This is the most comprehensive way to test the page and we'll add in shortcuts later to test other things.

Activity - basic navigation commands

To actually start moving through the page you use either down arrow to move forward or up arrow to move backwards. Use those keys now to move through the page.

As you move through the content you want to be aware of the order of the content - does it match the visual order? If not it can be confusing for partially sighted users.

The first thing you will hear is the skip link at the very top of the page.

You will notice a few things get read out which you might not have come across before. We'll talk about all of these in more detail later.

  • the page content gets announced as a “main”. This is a landmark
  • headings announce what level they are
  • this list was announced as a list and it said how many items were in it
  • visually different content such as the call-outs above didn't get announced any differently to normal copy

You may also notice that JAWS may stop mid‐sentence and require another down arrow press to finish. This is because down arrow is actuallly the command for next line. To read out complete sentences you can use alt + down arrow.

Insight - why we don't use tab

It is tempting as you are just using a keyboard to navigate using the Tab key (like you would if using a keyboard without a screen‐reader). But tabbing will only take you to the interactive elements on the page like links and buttons. Doing that would mean as a screen‐reader user you would miss out on all of the actual content.

Stopping JAWS talking

If you want to temporarily stop JAWS talking, you can use the Ctrl key. This will just work for the current announcement - if you trigger another (for example by moving position), it will start talking again.

Focus

As you move through a page and encounter focussable elements, you will see that the focus state does not get applied to the element as you might expect with a keyboard, but you will be able to trigger the item. This behaviour can be different depending on which screen‐reader you are testing with (with JAWS if you use Tab this will trigger the focus style).

With JAWS you can see where the screen‐reader is currently sitting by the red visual tracking outline box.

Key takeaway

Screen‐readers provide more information to the user than just what you can see. Also remember that the screen‐reader 'focus' is different to the normal browser focus.

Now move to the link below and use enter to activate it.

Next, the listing dialogs