Tip:
Highlight text to annotate it
X
[music]
[music]
[music]
Vimeo release their new html5 player yesterday
it looks really great. It also introduced accessibility features that I would like
to share
with you today, so, in this short video
I will show how a screen reader user operates the player
screen reader users and keyboard users
actually using the keyboard to navigate through the player.
Screen reader users also have a list
of other features that thing can utilize to jump from control to control
on a page. Basically, the keyboard interaction
should give me the same result is using a mouse. I will use it
Internet Explorer 10 but you can use any other browser.
You need to take into account the different browsers will most likely give
you different results are different user experience.
[JAWS] Tab [Narrator] I'm going to use JAWS now, JAWS 15,
while JAWS is working, I will try not to speak because JAWS has a
large... no, higher volumes, so,
you'll be able to to hear me but i will try in... sorta in between
to give a few remarks. [JAWS] Vimeo on Demand Link
[Talyah] Next tab I'm going to hit on keyboard
will get me into the player so notice
how the screen reader reads the titles or the headings
inside player; notice how the screen reader reads
or identifies every control. Each control
I'm this clean your room will let you know how to operate the control
and... and what kind of control is.
So let's start [JAWS] Tab
The New Vimeo player left perim your know comma for videos right perim heading level one link
Tab, Vimeo staff heading level 2 link. Tab. Play button
[Narrator] Notice that the screener said that he had H1 heading
that's the most important heading on the player
and H2 heading, which is second level
any now we're standing on Play button I can use
either the Enter key or the spacebar to operate the
play button [JAWS] Space zero space
Tab, Volume left right slider
sixty four percent to increase or decrease use the arrow keys
period three five pint zero nine six.
[Narrator] The next control is the sound control
and the screen it is said that we can use the arrows
in order to increase or decrease. Let's do that
[JAWS] sixty-nine percent, seventy-four percent,
seventy-nine percent, eighty-four percent eighty-nine percent.
[Narrator] next control
is the captions. [JAWS] Tab, Choose captions button
Enter
[Narrator] Okay, so the captions window
shows me a list languages and i can tab
through languages. [JAWS] Tab, Deutsch, Tab, English cc
Tab, Espanol, Tab, Francais, Tab, Tab, None
[Narrator] It selects language.
Since we're talking about bullet, I can use the spacebar to select.
[JAWS]Space
[Narrator] We hope maybe that in the next versions
of Vimeo, we will get a list of languages and the user will know how
many languages are on the list
in also which language is actually currently
selected. [JAWS] Tab, The New Vimeo player left perim your know comma for videos right perim From Vimeo staff on Vimeo frame
Okay, you can see that the next
tab, instead of going to the HD, it went to the icons.
Sometimes we lose control in the control group to a different area
on the control or on page what we could do
with a screen reader, we can actually fire up a list of all links or
all controls that we have on page so let's do that.
[JAWS] Select a form field dialog list one list view unlabeled one edit search products
and articles one of twenty fine to move to items use the arrow keys period.
[Narrator] Okay, let's say we want to move
to the HD button. [JAWS] Righ Left, Add, Share, Play button. HD button enter
play, volume, chose, HD button Enter
HD Button. Turn HD on, Space
0.82, tab.
Tab, full screen button. Enter full screen.
[Narrator] We're on full screen [JAWS] 13.691
[Narrator] Okay we can operate the full screen now.
[JAWS] Enter, 2.701 like like left perim, opens in new window, right perim button, to activate press space bar, period, Add to watch later Add to watch later
perim opens in a new window right parim button Share Share play one minute one second loaded twenty seven seconds play choose.
captions HD view actual size full screen watch on Vimeo.com vimeo
Notification requests response period press alt plus N period Do you want to view Vimeo.com
Notification requests response period press alt plus N period. Do you want to view Vimeo.com in full screen? Left perim press ESC to exit right.
[Narrator] Okay,
now we can see living on full screen
it looks the same, the controls are the same,
I can jump from one control to another if I do a list of controls.
[JAWS] JAWS Vimeo redesigned HTML 5 player for
act, share button, play button [Narrator] Go to the play button.
[JAWS] Enter... Link
Clip art, Tab
Clip art. To activate comma, space bar, period.
[Vidoe] Vimeo player. [Narrator] Okay we can go back to
to our small screen
5.269 escape. The new Vimeo player, left parody no comma
8203
[Narrator] Let's continue to tab through. [JAWS] tab, tab
tab, Add to watch later, left, Shift tab, Like left perim opens in new window right perim
perim button
tab, tab 54.716, shift
54716 Share button, Tab, The New Vimeo player left perim your know comma for ideos right perim From Vimeo snap on
Vimeo frame
Ship tab, Share button to activate press the space bar period. [Narrator] I'm standing on
the icons
it operates like a mouse. So, I know what kinda icon it is in what is the purpose
of the icon
because the screen reader reads the tool tray and this is really good.
So we tabbed through all our
controls. We really are excited to see
all the accessibility changes
that Vimeo is going to introduce you next
versions. We really hope to see,
for example, transcripts for users who are
hearing-impaired or deaf. But, overall
this is a great product and
a great job. Thank you for that!
[music]