When a page loads
When you moved to this page you will have heard that Voiceover reads out the title of the page first and then you will have seen a black border laid around the header- this lets you know where the Voiceover‘s focus is and it will follow you as you move around the page. The page will scroll to show where this focus is.
Making sure we are at the top of the page
A screen‐reader will not always start reading at the top of the page so let's make sure we are at the top of the page before we start exploring.
Activity - starting at the top
Before we start moving about the page, let's make sure we are at the top. Use VO + Home to move to the top of the page.
This ensures all the content will follow the intended sequence and solves the occasional issue of the screen‐reader starting part-way down the page. When you use this key command you should hear Voiceover read out the page title again.
As Mac laptops don't have the home key you can use VO + 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 different elements such as headings. 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 those shortcuts later to test other things.
Activity - basic navigation commands
To actually start moving through the page you use either VO + right arrow to move forward or VO + left 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 Voiceover may stop mid‐sentence (including where keys are being explained) and require another key press to finish. This is because VO + right arrow is actuallly the command for next item and content using tags such as links are classed as separate items. If you use VO + Shift + Page down /up instead this will read out full sentences.
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.
Focus
As you move through a page and encounter focussable elements, you will see that the focussed state gets applied to the element as you might expect with a keyboard.
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 VO + space to activate it.