Let me introduce to you my favorite screen reader, called voice over.
Voice over is a speech software that allows
people who are blind to vision impaired to read information on the screen.
Voiceover is built into Mac OS ten, so it's available on every Mac computer.
We will start by turning voice over on.
The great thing is that because it's a built-in software,
there is a global shortcut key which is available to users to use at any point.
To turn a voice over on, we press Cmd+F5.
And we will use the same shortcut to turn it off.
So let's start by turning voice over on.
>> Voice over on Chrome, Google, window, Google, HTML content has keyboard focus.
>> You can refer to instructor notes for a full list of available shortcut keys.
The next thing I would like to do is to setup voice over for my needs.
I would like to open voice over control panel.
>> Spotlight spotlight system dialogue.
They are voice over utility from Chrome,
Google voice over utility voice over utility window.
>> I want to show you how to adjust speech rate for voice over.
First I'll show the speed that I normally use in my daily computing
tasks and then we'll switch back to the normal speech rate.
>> Verbosity speech leaving table and your speech.
And Alex default for five content selected.
Default rate at a tax default rate 50%, 60%, 65%, 70%, 75%.
>> So this is my speech rate,
however most people when they hear it they say it's too difficult for
them to understand because the voices speaking just too fast.
So to make things a little bit easier on you
I'm going to switch back to the default speech rate.
>> 55, 50%, 45%.
>> The next setting I want to change is the setting that's responsible for
providing the summary of a web page when it loads.
In order to do that, I will switch to the Web category.
Notice one thing,
that as I navigate through the list of categories, I use keyboard exclusively.
So in this instance I'm just going to shift tab.
>> Four, five.
Alex the mute speech unchecked checkbox voices, utility categories, table.
>> Once original list, I'm going to arrow down to the web category.
>> Navigation web.
>> And then tab again to the set in there I want.
>> Leading cell navigation page loading tab selected page loading
speed web page summary when loading a new web page.
>> So this is the setting that I want.
So I'm going to check it.
>> Checked speed web page summary when loading a new web page.
Checkbox.
>> And now I'm ready to go back to Chrome and begin web browsing.
>> Chrome Google window.
Google HTML content.
>> So now we're going to go and actually browse the web.
I would like to go to Wikipedia website.
So in order to do that I'll press command l.
>> Open location https// >> Which takes me to the address bar.
>> Selection n period en, i, k, i, p, a, period, g, google, HTML content,
Wikipedia, the free encyclopedia page has 351 links, 15 headings.
4 form controls, 6 tables, 14 landmarks.
[SOUND] >> You notice how voice over spoke
the page summary?
It told me how many headings, links, and form fields and tables are on that page.
And that's the setting we turned on just a minute ago, if you remember.
Every time I start browsing a new web page or
even the pages that I already know about I start looking for
headings to make it easier for me to navigate through the page.
Voice Over has a tool called web router which allows me to
see how many headings browse through them,
and choose the ones that I actually would like to navigate to.
To start web router, I press control option U
headings menu as you can see there are quite a number of headings on this page.
So when the arrow up and
down I would hear things like having level two from today's featured article
heading level did you know Heading level two in the news.
Heading level two on this day.
>> One thing to notice here is that the order in which I see headings with
voiceover is different from the order you see them on the web page.
In other words, my order is more logical.
And the order you see on the page is more visually arranged.
This is the decision that Wikipedia authors have made.
Another thing to notice here is that voiceover speaks the heading level
number every time I arrow to a particular heading.
>> Heading. Heading.
Hea. Hea. Heading- >> Selecting
heading level 2-- >> Level 2.
Wikipedia languages.
Heading level 2.
Heading. Hea.
Heading level 3 print/export.
>> 3 >> And there could be more.
Level of the heading indicates how prominent it is on the web page.
So for example these sections here.
>> Padding level two today's featured pictured.
>> They have higher importance than the.
>> Heading level three.
>> Think of it as sections and subsections of a web page.
So if we find a heading of level three Underneath the heading of level 2,
it indicates that this is a subsection of a section of a web page.
So I would like to search for a heading that says something about Featured.
So what I'm going to do is I'll just type a few letters and
let voiceover find that heading for me.
>> Four items, three item, three items.
Three item heading level two from today's featured article.
>> Yeah. >From today's feature article.
That's exactly what I wanted.
So I'm going to press Enter key and
jump-move the screen reader focus straight to the Heading.
Heading level 2, >From today's featured article.
>> You hear a voice over repeated the heading again which means my focus is
right there.
>From here on I can begin exploring the page right underneath the heading by
pressing Ctrl+Option+Right Arrow.
>> Row 2 of 4 link image.
Jonathan Agnew in 2006, column 1 of 1.
Link, Jonathan Agnew born 4 April 1960 is an English link, cricket, cricket.
>> By the way, I can move by headings on the page by pressing
shortcut keys Ctrl+Option+Cmd+H to move forward by a heading.
Or control option command shift age to move backward by heading.
>> Heading level two, did you know, heading level two in the news.
Heading level two, did you know, heading level two,
from today, first heading, heading level two, from today's featured article.
>> This is a quick way to navigate through a web page.
If I would like to move with built in shortcut keys
directly through the content as opposed to going through the web router options.
So this is how I navigate the web page using headings.
There are other few tricks I use, however I'll talk about them later.
It's important to remember, that once you made the functionality of your
web page accessible and usable for users of assistive technology.
Headings is probably one of the most important features that you can
build into your web pages, to make them more usable, for
screen beauty user specifically.