ChromeVox for Web Accessibility


TV RAMAN: Welcome to our
hangout on Chrome accessibility. We are talking to you today
about the work we’re doing on the Chrome, Chrome OS
platform for blind and low-vision users. With me I have James
DeBoer on my engineering team on my right. And next to him, we
have Charles Chen. And under of the table, watching
the doggy cam, we have Tilden Labrador. So brief over of what we’ll
talk about today– Chrome OS is this really nice
environment that runs on Chromebooks and Chromeboxes. That’s a lightweight, desktop,
laptop environment. You open your laptop, within
five seconds you’re on the network and reading email
and doing what you normally do on the web. What we wanted to do was to
bring that same level of simplicity and efficiency
of access to blind and low-vision users. And the result of that work is
this tool that the ChromeVox, which is a Chrome extension that
runs on pretty much every platform that Chrome runs, all
the way from Linux, Mac, Windows, Chrome OS, and
Android, actually. For today, we will be focusing
on Chrome OS and show you how end user access works. So what we’re talking about
here is primarily spoken output for the bilnd user. The blind user is perfectly
capable of using a keyboard, touch type. Chromebook keyboards are just
regular QWERTY keyboards, so we don’t have to do anything
special there. We actually have ChromeVox
built into every Chrome OS device. It comes with an extra speech
voice that is fairly understandable but not
very high quality. And then users can actually
get a higher-quality voice from the Chrome Web Store. So for most of this demo,
you’ll actually hear the higher quality voice. High level overview
of the sequence of things we’ll show you– Charles will start off by
showing you how you can pick up a generic Chromebook, hit a
single key, and, as a blind user, start using it, including
setting it up, logging in, setting up the
network, all that good stuff. And as he’s doing that,
initially you will hear the built-in lower quality voice. But then once he’s signed in,
you’ll notice that the quality of text to speech drastically
improves. So Charles, once he has that
set up, will do a couple of web searches, show you how you
can listen to web content using ChromeVox, and then hand
it over to James, who will show you know how web apps
work in this way. I mean today, things like Chrome
OS are motivated by the fact that the web is more than
just static documents. It’s a web of applications. Chrome OS, basically, all the applications live in the cloud. And that’s what James will show
you with Google Docs. After that, what we’ll
do is more into some developer-focused bits. So what we really want to show
the web community here is how end users work with this
technology, but then how you, as web developers, can leverage
this technology to make sure that what you’re
building is accessible. Accessibility has always been
a challenge because it has traditionally been fairly
complex to test and verify accessibility. And one of the things that we
believe is that by making that technology available to every
developer, we drastically increase the chances of creating
web content and wep apps that are accessible. So Charles and James will
demo some of that, including best practices. And then finally, James will
come back to something really cool, which is we, as engineers, developed ChromeVox. And ChromeVox itself is a fairly
complex web extension at this point. And so we need to test ChromeVox
to make sure it is doing the right thing. And James will show you a test
harness that we’ve built inside ChromeVox that lets
us do that as engineers. And this is an open
source project. We’ll finally wrap up with a
quick tour of where the code is so that you can learn and
leverage what we’re building. So with that, we’ll go to the
first stage of this talk, which is Charles showing you
out of box access on a Chromebook. And to repeat, there’s nothing
special about that Chromebook he’s holding. You could go to a local Best
Buy, or Amazon, or whatever and buy a Chromebook, and you
will get exactly what he’s about to open and show you. CHARLES CHEN: Thanks Raman. So let’s go over to my
Chromebook here. And I’m going to log in. And first, you’ll notice that
this is just, like Raman said, this is a standard Chromebook,
nothing special about it. It’s not talking yet, so
let’s get it talking. It’s a very simple command
sequence– Control, Alt, and Z. You press
these keys together, and it will start speaking. So let’s do that. CHROMEBOOK: Enabling
spoken feedback. CHARLES CHEN: OK, you just heard
it say, “enabling spoken feedback.” You also see that
there’s now a focus rectangle showing where it thinks
its focus is. And so let’s log in and
get on the web. CHROMEBOOK: Dot, dot, dot,
dot, dot, dot, dot. CHARLES CHEN: OK, and notice
how it just said “dot,” so it’s not going to blare
out my password, which is kind of nice. CHROMEBOOK: Signing in. Connected to Google Guest. CHARLES CHEN: OK, so it
told me I signed in. I’m on Google Guest,
ready to roll. So let’s learn a little
bit more about Chrome. I’m going to do a search for
Wikipedia on Chrome, and let’s see what we get. OK. CHROMEBOOK: (DIFFERENT, HIGHER
QUALITY VOICE) Wikipedia Chrome Google search. TV RAMAN: Now, notice that the
voice quality has gone up drastically. That’s because he’s now signed
in, and it’s using the higher-quality voice that
is there on the box. CHARLES CHEN: OK. And now I can show you I can do
some simple things, such as tabbing around this page. CHROMEBOOK: Main ordered
list with 10 items. List item Google, [? blind ?] [? cutting ?] [? three. ?] CHARLES CHEN: OK, so this
actually got me to the first search result. If I wanted to read around a
bit, I can do that as well. All I have to do is hit the
ChromeVox modifier, shift and search, and then use
the arrow keys. CHROMEBOOK: Chrome, hyphen. CHARLES CHEN: OK, If I want to
hear more than one shot, I can change my granularity levels. CHROMEBOOK: Wikipedia. Group, Google Chrome,
hyphen, Wikipedia. CHARLES CHEN: So this gives
me group reading mode. So this lets me hear things in
one shot, in a very easy to understand way. So let’s go to that link. [CHROMEBOOK CHIMES] [CHROMEBOOK CHIMES] CHROMEBOOK: Google Chrome,
Wikipedia — the free encyclopedia. CHARLES CHEN: You’ll also
notice that, as the page loads, it made a couple
of dings. This is to let the user know
that the page is loaded up and it’s ready to go. And once it’s fully loaded,
you’ll also hear the page title. So let’s go through this page. CHROMEBOOK: Google Chrome,
heading one. CHARLES CHEN: OK, so it told
you this was a heading. CHROMEBOOK: From Wikipedia — the free encyclopedia. Jump C8, navigation, internal
link, this article is about the web browser or the
operating system. See Google Chrome [INAUDIBLE] period. CHARLES CHEN: OK, now let’s
say I want to quickly go through some of the
content, quickly navigate through headings. I can do that by using Go to
Next Heading, which is simply ChromeVox modifier, N, and
then H, for next heading. CHROMEBOOK: Contents,
heading two. CHARLES CHEN: So it just jumped
me to the next heading. I can do that again. CHROMEBOOK: Left bracket,
heading two. Left bracket, heading three. Left bracket, heading three. CHARLES CHEN: OK, so it’s taking
me through a couple of the brackets under different
heading. I can resume reading. CHROMEBOOK: Edit link. CHARLES CHEN: OK, so
it’s the edit link. CHROMEBOOK: Right bracket,
public release. CHARLES CHEN: OK, and I can keep
going from that point. CHROMEBOOK: Link. CHARLES CHEN: So that’s
some of the basic functionality of ChromeVox. I’m going to go ahead and hand
it off to James, who will show web apps. James, take it away. JAMES DEBOER: Thank you. And I’m going to
set my volume. And I have lost my microphone. CHARLES CHEN: Do you
want to use mine? JAMES DEBOER: That would
probably be easiest. CHARLES CHEN: OK. TV RAMAN: Yeah, while we get
set up, notice that you’ve seen a web of documents
so far. Very quickly, we are going to
the interactive, dynamic, application-oriented web. And Google Docs is probably the
web app that pushes the envelope the most with respect
to using the web platform to build a rich specific editor. And that’s what James is
about to show you. JAMES DEBOER: All right,
so I have my Google Drive home page here. And sorry, we’re– CHARLES CHEN: We’re tangled. JAMES DEBOER: We’re
lost in the cords. Let me turn on the volume
of my Chromebook. And so, as you can see, with
the screen, I have spoken feedback already enabled. And I can move around the page
using the ChromeVox keys. CHROMEBOOK: [INAUDIBLE]. JAMES DEBOER: But Google Drive
also has a lot of keyboard shortcuts that make it easy to
perform operations within Google Drive. So I’m going to use this
Shift-T shortcut. CHROMEBOOK: [INAUDIBLE]. D, O, C, S, untitled document,
Google Drive, new line. JAMES DEBOER: And what
that’s done, it’s opened a new document. And the cursor, it’s
ready to type. So I can type– CHROMEBOOK: [INAUDIBLE]. Line, space. [INAUDIBLE] space G, O, O, G, L, E, space. JAMES DEBOER: And so as I’m
typing, Google Docs is reading back through ChromeVox. And I can move around
my document. Now here, Google Docs is using
the ChromeVox API to help speak because it’s a very
complicated web app. And it’s talking directly to
ChromeVox to say, when you press the arrow key, speak
the letter underneath it. But the ChromeVox navigation
is still available. So if I used the ChromeVox keys,
such as the up key– CHROMEBOOK: [INAUDIBLE] selected. Enable screen reader. An ordered with one item’s
list item, [INAUDIBLE] untitled document, menu bar,
file, menu [INAUDIBLE]. JAMES DEBOER: And using the
ChromeVox keys, I can still move around the page. And then a number of widgets in
Google Docs are using their own keyboard navigation. So I can just use the arrow
keys, not the ChromeVox keys, to interact with the menus. CHROMEBOOK: Edit collapse
as pop-up. View collapse as pop-up. Insert collapse as pop-up. Insert expanded as pop-up. Image. Control+KL [INAUDIBLE]. Control, plus Alt, plus
M colon, control plus alt plus F 6 of 15. JAMES DEBOER: And so here I’m
moving through the menus. And I can interact with them. And this is something that
Google Docs has built. But the ChromeVox navigation
and any other screen reader navigation is still available. TV RAMAN: So James staged
something interesting there, which is the topic of a future
hangout that we’re hoping to do, which is he mentioned
the ChromeVox API. And what that is is really of
relevance to web developers, where if you’re building a very
cutting-edge web app and you would like to add, augment,
control how things are spoken, the ChromeVox API
is actually what you use. So normally, you code your web
app using standard HTML and ARIA, which we’ll quickly show
you in terms of how those things work, do all of your
typical web best practices. But then, if you finally want
to add a little bit of additional accessibility source
for making your apps really usable, then the
ChromeVox API, which we will detail in a future hangout, is
basically what you would use. JAMES DEBOER: All right, now I’d
like to show you something interesting. So ChromeVox is just a Chrome
extension written entirely in JavaScript. So we write all our tests and
we develop in JavaScript. So here is some of our tests. And this one that I’m going
to run it is our backward, forward test. And what it does is it
stimulates ChromeVox commands for moving backwards and
forwards and tries to make it all the way through
a web page. And so this makes it really easy
for us to find bugs in ChromeVox and then also to find
interesting web pages that break our navigation
model. And then hopefully
we can fix either ChromeVox or the web page. So let’s see let’s
see how it does. CHROMEBOOK: [INAUDIBLE]. JAMES DEBOER: OK, so I’ve
turned off the sound. But you could hear ChromeVox
talking. And it’s running through the
entire web page– this is the Wikipedia home page– And just going forward, and then
forward again, and back, and making sure it ends
up in the same place. And as you can see, it’s gone
all the way through the Wikipedia homepage and has
made it back to the top. And so that’s a pass. And we run this test and other
tests like it on a number of web pages just looking
for errors. CHARLES CHEN: Well
thanks, James. Now James said something
interesting about finding errors in web pages. We have automated tests like
these, which will help make sure your page navigation
is sensible. But it’s also a good idea to
just run ChromeVox yourself and see if it makes sense the
way that your web page is going through and if you’re
managing focus correctly. I’m about show a demo here which
illustrates some of the common pitfalls that web
developers can very easily fall into as well as
how to fix them. So one moment while we swap. Raman, would you like say a
few words while we swap? TV RAMAN: Right, so while
Charles is swapping out, we are going to show you a very key
piece of functionality in a web app that you need to
get right, which is focus management. Because, at the end of the day,
as you move focus in an app, is what the user
is working on. And that’s what the user’s
getting spoken feedback about. So if you don’t set focus
correctly, when the user, say, performs a task that comes back,
it’s like you’re giving your friend a ride but then,
instead of dropping him at the front door of his house or
the front door of a large building, dropping them off in
the middle of a parking lot and saying go find your way. So Charles will show you
this briefly today. There’s also a much more
detailed version of all of these that we did as a talk at
Google I/O. If you just search for accessibility in Google I/O
2012, you can watch that talk on YouTube. CHARLES CHEN: OK,
thanks Raman. So I have a page here that’s
an example page. [CHROMEBOOK CHIMES] CHARLES CHEN: OK, and I’m going
to navigate through it. And I’m going to try and click
on the link. it will bring up a pop-up, and let’s see what
the behavior is like. So let’s get started. CHROMEBOOK: Snack attack,
heading one. Which snacks are best for
hacking all night long? List with eight items, list
item, pizza delivery, link. Object, list with eight
items, list item, pizza delivery, link. CHARLES CHEN: OK,
so far, so good. I managed to navigate
to the first choice. I really like pizza. Let’s try clicking this. OK, so what just
happened here? If I was relying solely on
speech, I would think nothing happened because even though
there’s a visual pop-up, you don’t hear anything. So you really don’t know
what’s going on here. But let’s say I’m going to
take it on faith that something happened. Let’s try reading. Let’s see what I hear next. CHROMEBOOK: 7,965 ratings. CHARLES CHEN: Wait, where
is that on the screen? CHROMEBOOK: List item,
caffeinated soda, link. CHARLES CHEN: Wait, that’s
not even on the screen anymore, is it? So what happened here is there
was a pop-up that came out, but like Raman said, this is
equivalent to taking your friend somewhere and dropping
them in the middle of a street and saying you’re there instead
of helping them all the way to where they
need to go. A pop-up has happened, but it’s
somewhere at the end of the DOM, and the user hasn’t had
their focus moved there. So the user at this
point is kind of struggling on this page. They don’t know where the pop-up
is, and as far as they can tell, nothing has actually
happened, which leads to a pretty frustrating and broken
user experience. So let’s see how we can
make this much better. CHROMEBOOK: Google X, Chrome,
Googlecode.com slash, E, O, N. [? Cafe ?] Snack Attack. CHARLES CHEN: OK, so this page
visually looks identical. But let’s see what happens when
you navigate through it. CHROMEBOOK: Snack Attack,
heading one. Which Snacks are best for
hacking all night long? Object, which snack, list with
eight items, list item, pizza delivery, button. CHARLES CHEN: OK, so let’s
do this again. CHROMEBOOK: Entering dialog,
rating dialog, no ratings, slider, no rating. CHARLES CHEN: OK, so in this
case, the main difference is that, in this example, we’ve
managed focus properly. So when a pop-up shows up, we
then put focus on the thing that makes the most sense,
which is the ratings bar. And in that case, it triggers
ChromeVox or any other screen reader into reading the fact
that the user has entered a dialog as well as what they’re
currently focused on, which is the ratings bar. And so with that, you can
now drive the ratings. CHROMEBOOK: One star,
ew, gross. Two stars, meh. Three stars, OK, sure. Four stars, awesome. CHARLES CHEN: OK, I think
that’s pretty awesome. So, but let’s see what
five stars does. CHROMEBOOK: Five stars,
NOMNOMNOM. CHARLES CHEN: OK, I kind
of I like that. So let’s go, and let’s
vote on this. CHROMEBOOK: Vote, button. CHARLES CHEN: OK, I’m
going to vote. CHROMEBOOK: Saving. CHARLES CHEN: And it even tells
me that it’s saving. CHROMEBOOK: Exiting dialog. List with eight items, list
item, pizza delivery, button. CHARLES CHEN: So that’s a much
friendlier user experience, and that really helps the user
know what they’re doing. So with that, Raman, do you
want to add anything? TV RAMAN: Sure, yeah. And so basically, for what
Charles showed you, we have markup examples of this from
a Google I/O talk. None of those is new source
that we’re inventing. This is all standard
HTML5 ARIA bits. The focus management things are really, really key, though. Those are things that you need
to do in your JavaScript handlers in terms of how you
handle pop-ups and how you handle dialogs. This is not something
that a standard specification will tell you. These are more implementation
techniques. As we sort of wrap this up, as
I said at the top of this talk, this is an open
source project. Our goal is to open source this
for a couple of reasons. One, Chrome itself is an open
source platform, and having ChromeVox as an open source tool
really has zero impedance mismatch with the project. But more importantly, we’d like
to take the magic and black art out of accessibility
and make it something that is a well-understood,
easy-to-do bit. Because when we do that, more of
you who are web developers will implement accessibility,
and we all win. And towards that end, I’d like
Charles and James to give you a quick overview of where the
core ChromeVox code is. All of our code on an open
source Google code project called Google-axs-chrome. Charles, do you just
want to give a– CHARLES CHEN: Yeah, so I already
have the ChromeVox Google code page up here. So, as Raman mentioned, the URL
is simply Google-axs-chrom e.Googlecode.com. And all of our source code is
here, this includes ChromeVox as well some of our other
projects, such as a low-vision tool, our ChromeVis, and you can
also get our voice here, our Lois TTS. This also includes our Google
I/O talks, which include all the examples that we
just went through. And if you’re interested in
contributing, there’s the source link right up here. And that will tell you how you
can check out the code. And patches are very welcome
and appreciated. TV RAMAN: So for platforms
where ChromeVox isn’t pre-built in, so you’re a Linux
developer and you’re developing your web app on
Linux, or a Macbook, or a Windows box, or whatever,
you will need to install ChromeVox, the extension, from
the Chrome web store. And Lois, which Charles
mentioned, is the low end voice that I talked about
at the beginning. And if you search in the Chrome
Web Store for Google TTS, you also see our higher
quality voice. It’s a bigger download, the
higher quality voice, obviously, because it’s
higher quantity. And then you get a much
better sounding voice. Play with that, send us email. The project page tells us
how you can find us. There’s a Google group
for this work. Above all, test your code
with ChromeVox, test the experience. And it’ll make a difference both
to your site and to the users who come to your site. Thank you. CHARLES CHEN: Thanks.

Danny Hutson

Leave a Reply

Your email address will not be published. Required fields are marked *