Tip:
Highlight text to annotate it
X
[SIDE CONVERSATION]
MALE SPEAKER 1: All right, again, thank you for coming.
We have a guest speaker today, Victor,
to talk about going screenless with YouTube.
I met Victor a few years ago.
We were co-workers, and it was the first time
I had the opportunity to learn how
to use the web through screen readers.
Back then, I had no idea that was possible,
and not only that, but I learned from the engineering side
that you can do simple stuff to make the whole web more
accessible to everyone.
Please help me welcome Victor Tsaran from eBay, Paypal.
[APPLAUSE]
VICTOR TSARAN: OK.
Hey, guys.
Can you hear me well?
Cool.
OK, start over.
[INAUDIBLE]
OK, sorry.
OK, good.
I always need to hold something in my hand
because otherwise-- It better be hot and with caffeine.
Anyway, so thank you for coming.
This is great.
I hope we're going to learn today something about YouTube
and a new user experience probably for most of you,
and that is how you use YouTube if you can't see.
So what I want to start is by telling you
just a little bit about myself because I'm
hoping that through my personal story,
you will see why we really need to worry about these things,
making things accessible, and why
we need to worry, especially about YouTube, making
available to everybody.
So I was born in Ukraine and went through all the same stuff
like most of you, high schools and things like that,
and then, when I entered university, my real, sort of,
touch with the world began, where
at the university, as you know, you
need to deal with homeworks.
You need to deal with a lot of teachers,
and you need to deal with all kinds of situations
where you couldn't rely anymore on your parents
to come and help you out whenever you need it,
so the real life challenges began.
How do you read something?
How do you take notes?
How do you take books from the library?
How do you turn in your homeworks and things like that?
And at that time, there was really no technology
to speak of, at least in Ukraine,
and so the only thing I could do is rely on, so to speak,
human readers.
Right?
So every time you needed some help you'd say,
can you help me out, and of course, you
had to learn your basics in diplomacy.
I call it Diplomacy 101 because you
got to be careful not to step on people's toes,
and everybody's got their own timeline.
And they have to read their own books,
and they have to meet with their dates and things like that.
And, you know, the girlfriend is waiting and there's like,
hey, can you read for me some philosophy book.
It's like, come on, get away.
So you do have to learn how to really
be considerate of other people's time, but at the same time,
while being able to achieve your own goals, which
is for me, obviously, was to complete my studies
and go in and get a job and be as productive in life as I can.
So two years into my studies, I got a scholarship
to come and study in the United States.
It was a student exchange program
for a year where one of the things I had to learn
was computers.
It was like, wow, this is so interesting
because up until that time, I heard people
playing some games on Atari.
And my computer science professor
told me, well, there's not very much I can do for you.
You know, we could probably learn
how to compose music on the computer which
at that time as you some of you may know,
you had to type in the notes and it
was using the PCs speaker buzzer.
So if you could call it music, that's
what it was in those days.
And so at the end, we just basically decided
there was really no sense for me to attend in those computer
classes because I couldn't really
benefit from them in any way.
So when I heard that I was selected to go and study
in the United States, I was like, wow, this is so cool.
Let's see what happens.
And the very first thing, because I was a philosophy
major, of course, I was all crazy about learning history,
and information was the king for me.
Right?
It's like how much can you remember, analytics,
and all that kind of critical thinking that sort of stuff.
And so the very first application
that I found when using computers,
besides typing and doing all the basic things,
is going to encyclopedia and learning anything
I possibly could about the world around me.
And it was just like, wow, this is so cool,
not only that I could just tap into this amazing wealth
of knowledge around me just by using the keyboard,
but imagine, I didn't have to ask anybody.
I just could log in into my Unix box-- well, at that time,
it was DOS based, but I was already
playing a little bit with Unix and Pine and all the emails,
you know.
So I don't know how many of you use Unix,
but I would imagine that many of you, since you're engineers,
so we can speak common language.
You know, going in terminal and using
IRC all this stuff was exciting days.
But the most important thing was this feel of independence.
You know, suddenly you could just do things on your own,
and if things we're available to you in the format, then
things just became so much more pleasant to use.
And you could do it at 5 o'clock in the morning
if that's what you wanted to do, and you
could do it totally independent of everybody else.
And so that got me interested in computer science.
So I went back to Ukraine, and I established the first computer
center for the blind where we taught students
how to use computers.
We created the first screen reader program for blind users
in Ukraine.
And here you hear me mention the word screen here,
so we're gonna hear and see more of that as we move on.
And eventually-- so I got back to the States.
I completed my computer science degree.
After that, my wife and I-- actually, I met my wife there
at the exchange program, so it there
was another big event for me.
And together, we traveled in Southeast Asia teaching
computers to kids in poor provinces,
so that was another interesting experience,
not only because I could actually apply my teaching
skills in computers, but also, it
made me think about things like jargon,
how much we take for granted here when everybody speaks
English language, when programmers understand
English language pretty much since day one.
And now, you go into another country
and you say something like "sign in,"
and people like, what do you mean?
What should I be doing?
So this made me think about a lot of things
like, well, how do we use language in computers.
What's understandable for me may not
be understandable for somebody whose English is not
at the same level or worse, for whom computers is just a tool.
They're not programmers.
They're not even curious by nature, for example.
They just need to be able to type in their homework
and go get a job, perhaps, even in the call center,
and computer for them is just a tool just
like a hammer for a DIY person.
So it made me think about that kind of stuff,
how do we go about translating.
There's also something about cultural perception
of computers.
For Western cultures, where technology is a bit more
of a normal thing, many of us were
born with some kind of technology, telephones,
television, computers, modems, and all that kind of stuff.
So we're less scared of that stuff,
but you go to countries where people don't even have access
to white canes that blind people use to walk around,
and suddenly, the word "computers,"
not only that it's, for many, unaffordable,
let's say it's-- We're in a different time right now
because many more things are affordable,
even in developing countries, but just even getting used
to this idea of interacting with a soulless piece of hardware,
for many cultures, is a difficult thing.
So those are the things that I learned, and with that, I
moved on and got a job in DC doing some contracts
for the government, so that was another interesting exercise
in learning how to procrastinate and not do things.
You could get really good at that,
especially seeing government employees around you saying
like, well, you know, I don't actually
have to do accessibility because nobody's
going to fire me anyways, so why would I bother?
So I had to practice my Diplomacy 201, at that point,
on how to get people interested in accessibility, which
actually worked out really well because those
are the same skills-- when I came to Silicon Valley
to work at Yahoo and now, at Paypal, I'm
using those same skills because guess what.
People here don't really care about laws
or legal applications or whatever it may be,
but people understand human language and meaning.
When I talk to you guys or to anybody else as humans
to humans, we can understand that everybody
wants to make the world a better place,
and oftentimes, all our fighting and our battles
are about how we go about doing it.
But as I mentioned before, one of the big things I
did understand from my travel and in teaching other people
is that in order to make people feel a little closer to what
you're talking about, you need to make them feel
the same feelings you are feeling,
and especially when it comes with the computers,
we're basically talking about user experience.
Right?
User Experience 101.
And so what I wanted to do today--
we will touch on the engineering stuff
as much as you're willing to go there,
and probably, this is an inevitable.
We're gonna talk about some technical applications
of accessibility, but first and foremost, I
wanted you to go together with me through the YouTube
interface and see, or rather, hear,
what it feels like to use YouTube
when you can't see the screen.
Now, before we even go to YouTube--
I need to go in here-- I wanted to tell you
a little bit about the software that actually makes it possible
because remember the hammer for the DIY person.
Right?
You gotta know how to use the hammer because otherwise,
you'll be left without fingers, and so on and so forth.
Or worse yet, you might be left without a house
if you don't know what you are doing.
So same thing with the computers-- right?
So I need to have a tool that enables
me to be able to interact with this piece of hardware,
and this tool is called a screen reader, a little bit
an outdated term because back in the dust days,
this is what this piece of software used to do.
It literally would read this screen,
try to interpret what was going on the screen,
and then, speak it back to you in a synthetic speech.
Synthetic speech, back in those days,
was nothing close to what you guys will
be hearing in a minute.
Back in those days it was like aliens,
kind of like cyberspace, stuff like, buh-buh-buh-buh-buh,
you know.
It was really, really hard.
I remember I had such-- it took me just
two weeks to get used to the toneless synthesizer,
and it not only was like one dimensional stream,
but it also was totally soulless.
I mean there was no intonation.
There was no articulation.
They've gotten better at that because once they figured out,
you know, form an algorithm and how you can raise speech
and so on and so forth, they're like,
oh, you know, when there's a question mark, even
that soulless voice, we can actually
make it raise the pitch a little bit.
But anyway, I digress.
So back in those days, screen readers
used to read the screen.
Now, as we entered into the world of Windows and Windows 95
and then, essentially, APIs, screen readers no longer really
have to read the screen because the way our screens look now,
people can't make sense of it.
You know?
Forget about computers trying to make sense of it.
So really the most reliable way to put screen readers right now
to interact with the computer is through the API.
That starts from the desktop APIs,
then goes into browser APIs, and eventually, goes into-- well,
I wouldn't want to call DOM API, but for the purpose
of this conversation, we could call it an API
because it's an application interface, as far as the web
page and the screen reader is concerned.
Then, they go into the DOM.
So the reason I'm telling you all of this is-- so now,
the screen reader, from being this active tool that sort
of scans the screen and--
COMPUTER: Bye.
VICTOR TSARAN: --tries to figure out what's on the screen,
it really becomes more of a passive tool that sits there
and listens to what the computer is telling it.
So for example, if I'm-- I assume many of you here use
Macs right?
Anybody here use Windows?
Not a hand.
OK.
So I'll try to keep it sort of cross platform.
I think a lot of the concepts are similar,
but because I'm using the Mac you're
gonna hear Mac pretty much throughout this conversation.
So if I'm gonna go to the dock, I'm gonna hit the shortcut key.
COMPUTER: Dock.
Google Chrome open, 22 of 28.
VICTOR TSARAN: OK, let me slow it down.
COMPUTER: Default volume one-- Default pitch, 51%.
Default intonation, 50%.
Default voice, Alex.
Default rate, 51-- 31-- 36%.
VICTOR TSARAN: OK, I hope this is a bit easier to understand.
COMPUTER: Google Chrome o--
VICTOR TSARAN: So what you will notice here-- and in fact,
to give a little bit better experience for you--
COMPUTER: Screen curtain on.
VICTOR TSARAN: So I'm gonna turn off the screen.
I hope it did turn off.
What we're going to do next is-- this
is a really important-- sorry.
I forget I need to be close to the microphone.
--really important piece of information
is that when you use a screen reader,
it's like looking through a straw.
When you get into the dark room, and somebody told you,
at the end of the room, there is something you need to find.
I'm talking the video game kind of language.
What you're gonna do is that you're
gonna start learning the things about your room,
but you're gonna learn them one by one because you can't see.
So you have no concept of left corner, right corner,
and so this is how it feels a little bit using the screen
reader.
So at this point, you guys have seen the dock,
so it's a little unfair.
But if I ask you what's at the end of the dock, what's
the last item on the dock, I wonder
how many of you could say that.
And so when you use the screen reader,
you have to explore this one by one.
And the screen reader will only speak the things
that are currently under focus, a very important point
because I don't want the screen reader to be jabbering
about anything and everything on the screen.
I just want to be in control.
So let's explore this together.
So I'm gonna be using left and right arrow
to go through the dock.
COMPUTER: Skype, 23 of 28.
Feedback assistant, 24 of 28.
Feedback assistant, 25 of 28.
Downloads folder, 27 of 28.
Trash, 28 of 28.
VICTOR TSARAN: Let's go--
COMPUTER: VMware Fusion, 21 of 28.
Microsoft Lync, 20 of 20-- [INAUDIBLE], 19 of 20.
System preferences, 18 of-- App store, 17 of 28.
VICTOR TSARAN: OK, so you got the idea.
Right?
A couple of things that happened there is that the API started
giving the screen reader a couple of pieces
of information.
Number one, they give it a name-- right? --of what exactly
you're pointing at, obviously very important-- right?
--because you need to know what application.
They tell you something about, probably
you noticed, 23 of 28, and so on and so forth.
Right?
So it's giving you the size of this particular element
in this particular widget that's going to be dock.
So I kind of know how big-- Am I supposed to go through 55 icons
or is it going to be just 28.
Right?
Little bit of information, but quite important.
How many of you were able to hear
if there were any folders there, and if yes, then how many?
Cool.
Yeah, you got it.
So there was a downloads folder, quite important.
Right?
There's a downloads folder so the user knows,
I know, in this instance, that there
is a folder as opposed to--
COMPUTER: iBooks, 16 of 28.
VICTOR TSARAN: All right?
As opposed to just an icon because I'm
going to behave differently based on that information
that I just received.
And most of you know, of course, folder
means that it's not an app, so I'm
gonna be probably looking for it to have some files in there
or whatever it is.
OK.
Before I'm going to turn on this screen,
let's do one more little exercise.
The next one I'm gonna do, I'm gonna open the menu bar--
and one thing you will already notice right here,
which I'm sure is obvious, but I want to point it out.
I'm not using mouse here at all, so everything I do
is through keyboard exclusively.
So that means if there's any piece of this interface that
does not have a shortcut key or I cannot tap to, it means
it's inaccessible to me completely.
Well, not exactly, but for the purpose of this conversation,
it's inaccessible to me.
So what I'm gonna to do is I'm gonna go to the menu bar.
So I'm gonna hit the shortcut key which
is provided by my screen reader.
COMPUTER: Menu bar, Apple.
VICTOR TSARAN: OK, so I heard the word "menu bar."
Again, I know which context I am currently in, super important.
And anything else you guys heard there?
Right.
So what is that?
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: Yeah, you got it.
So it's basically the title of the particular menu.
Let's see if I can ask my screen reader how to navigate that.
COMPUTER: This item has no help tag.
VICTOR TSARAN: OK, that's not good.
So I ask it can you tell me how to navigate.
I guess they assume that everybody
knows how to navigate the menu bar.
Well, I'll be using the left and right arrow keys, and so--
COMPUTER: Chrome.
VICTOR TSARAN: This is not the menu.
COMPUTER: File.
Edit.
View.
History.
Bookmarks.
VICTOR TSARAN: OK.
So let me go down in one of these menus,
so I'm going to go to, let's say, Chrome menu.
COMPUTER: Hit Edit.
Fi-- Chrome.
Chrome menu, 12 items.
VICTOR TSARAN: All right.
So there's 12 items in the menu.
And then, I can just go down arrow.
COMPUTER: About Google Chrome.
Preferences, Ellipsis, Command, Comma.
VICTOR TSARAN: OK.
How much did we learn from this one?
Anybody?
You?
Yeah, there's a shortcut.
You are right.
Anything else?
Let me play to you this again.
OK?
COMPUTER: Preferences, Ellipsis, Command, Comma.
VICTOR TSARAN: Yeah, this is cool.
So what do you see visually normally?
I think normally you see-- I think it is ellipses.
Right?
What does it mean to you, visually?
AUDIENCE: There's a dialogue.
VICTOR TSARAN: Yeah, there's a dialogue.
Actually, some screen readers go as far as they will actually,
instead of ellipsis, they just simply say, dialogue.
So they would say--
COMPUTER: Preferences, Ellipsis, Command, Comma.
VICTOR TSARAN: So they would say, preference, a dialogue.
A very important context, again, right here, you see.
So now that I know that it's ellipsis,
then I know this is gonna be a dialogue if I open
this particular menu, and there's
a shortcut cue, which you correctly pointed out.
COMPUTER: Signed in as vtsaran@gmail.com, Ellipsis.
VICTOR TSARAN: OK.
COMPUTER: Clear Browsing Data, Ellipsis, Command, Shift,
Delete.
Import Bookmarks and Settings, Ellipsis.
Services, Submenu.
VICTOR TSARAN: OK, what about this one?
You know it.
Go ahead.
COMPUTER: Hide Google Chrome, Command, H. Services, Submenu.
VICTOR TSARAN: Yes, correct.
So it says that there is a submenu.
Right?
Obviously, there is a difference between Ellipsis and Submenu.
Ellipsis means that the dialogue is gonna open,
and Submenu is gonna mean that there is just menu items.
COMPUTER: This item-- Services, Subme--
VICTOR TSARAN: Cool.
And then, I just use right arrow keys, and I open the menu.
COMPUTER: Screen curtain off.
VICTOR TSARAN: OK.
I'm gonna put the screen back on.
COMPUTER: Closing menu.
VICTOR TSARAN: OK, cool.
So this is basically how the navigation
happens on a desktop.
So I'm not using any slides today, so if you warn me,
I can take notes, but I'm sure you guys can take notes.
There are a couple of things here
I just want to summarize for you.
What the screen reader needs to be
successful in letting the user navigate,
well, number one, the user needs to be able to get to the item.
Right?
So there's some kind of keyboard access involved, whether it's
tab, whether it's arrow keys, depending on the context.
Number two, we need a title, so everything-- well,
let me actually say, name, not the title,
because that's gonna be a little misleading when
we talk about the web.
So everything needs a name of sorts,
we call it accessible name, but that's more of an API talk.
Then, we need to know the context.
Right?
We need to know a-- yeah, I guess, a context.
Menu bar.
Is this a menu?
It would also mean, for example, are we in a check box?
Is this a button?
And so on and so forth.
Because knowing that, the screen reader usually
will be able to figure out or know, at least, what they're
supposed to do with this piece of information.
And then, we need some kind of state.
Right?
So in the case of list, it may be size of the list.
In the case of check box, it may be
whether the item is checked or unchecked,
and in the case of menu, it's whether the menu contains
a submenu, whatever it may be.
And so with these three pieces of information,
the user, for the most part, should
be able to figure out the basic interface.
So--
COMPUTER: Safari.
VICTOR TSARAN: So let me go now to the browser
because I think that's what we want to look at.
COMPUTER: Safari.
VICTOR TSARAN: So one of the things we find on the web
is that it's a bit less predictable.
When you work with desktop APIs, they're pretty good.
And also, tomorrow or after tomorrow,
if you come up to a computer, you power it up, most likely,
your desktop is gonna look the way you left it yesterday.
Right?
Unless you let your kids or partners or whoever mess
around while you sleep.
But for the most part, if you're in control of your machine,
you know that you're gonna turn it on.
Icons are gonna be in the same places.
The dock is going to be in the same place.
Well, it's not the same case with the web.
Right?
Web is far less predictable as far as this stuff is concerned,
so when we talk about the web, the principals I just described
a couple minutes ago are, I would say,
they're so much more applicable.
You have to be like super disciplined to make sure
that all of your stuff has items, has names, and has
states and all that [INAUDIBLE] stuff.
Because on the desktop, let's say,
once I know my desktop-- maybe, let's say,
if certain buttons don't have names,
I mean, you know, life sucks, but maybe I
could remember them.
It's number five, so I just like arrow key five times,
and I get there.
On the web, I can't even predict that I'm gonna go to YouTube
and it's gonna look the same tomorrow because you guys just
pushed an new update or is it the beta
or maybe I got into one of the buckets.
Who knows?
Right?
And so this stuff comes so super important
that you can't let it slip.
There's almost no excuse because you can totally lose the user,
and the experience could be disastrous.
So why don't we have a quick look at the YouTube page.
And by the way, if you guys have any questions,
feel free to interrupt me because if you don't interrupt
me, I may be talking here for another three hours.
And I don't know.
How much time do we actually have?
Is it an hour?
MALE SPEAKER 2: We've got an hour--
VICTOR TSARAN: OK, cool.
OK, so I'll try to stay close to the clock as I can.
OK, so here's the very first thing
I'm gonna let you know is that the-- well, you may have
guessed-- the screen reader is a pretty
configurable piece of software.
All right?
It's not one size fits for all because just
like there are many preferences people have,
starting from clothes to colors, going
to browsers and toolbars and whatnot.
The screen reader obviously isn't
going to be the same for everybody.
Some users may want to speed it up.
Others may want to slow it down.
Some users--
COMPUTER: Default pitch-- Default rate, 36%.
Default voice, Alex.
VICTOR TSARAN: Some users--
COMPUTER: [INAUDIBLE]
VICTOR TSARAN: Some users may want to use different voice.
COMPUTER: Def-- Alex.
VICTOR TSARAN: Some users use different languages.
I speak several languages, so I have several speech
synthesizers that I-- even on YouTube, when I go in,
if I want to read descriptions in that language,
I'll just switch to a different synthesizer.
Some platforms have gotten so smart
like iPhone, for example, that if it detects a link attribute,
it's gonna switch the speech synthesizer on the fly.
So on the iPhone, because it has 25 built-in speech synthesizers
for different languages, if I go to a page that
contains multiple languages, it's
gonna automatically switch between the languages.
A good example would be wikipedia.org.
When you go and there are links in multiple languages,
they use their language attribute really well,
and so when I go through Wikipedia
and it says which language is the Wikipedia is available in,
VoiceOver, the screen reader on the iPhone,
is pretty smart to switch those languages
on the fly, which is really, really cool.
We don't have that, unfortunately, on VoiceOver
on the desktop.
Although, the feature has been discussed many times,
and hopefully, we'll make it, one day, there.
OK.
The other thing that screen readers do really
well is that they know that one of the reasons
we're using the computers-- we, I
mean blind people-- is that we want
to be as efficient as you guys.
I don't want to be going to the website
and-- while you can scroll over the mouse
and click, click, click, click, in three seconds,
you're doing your things.
Right?
I don't want to be tabbing through the whole website
every time I go to YouTube or any other website.
Although, I could.
It's certainly not the most efficient way.
Right?
If I looked at this page-- let's just have a look here.
COMPUTER: Form controls.
Two-- Headings.
Links, 571 items.
VICTOR TSARAN: OK?
So this thing has 571 links.
[CLICK]
COMPUTER: My sub--
VICTOR TSARAN: And that's only provided you
guys have done your job right and you have all your hrefs
and you don't do onclick stuff and things like that.
Even with that, there's still 571 tab stops.
That's not something I want to do.
I don't think you want to do that.
Often times, though, to be honest with you,
especially beginner users, that's
what they do because sometimes, they don't know what to expect,
and also, there is a population of users who
lost their sight late in life, which
means they're not as adaptable.
I lost my sight when I was five, so I'm pretty adapted by now,
but there are a lot of people who lose their sight at 40, 45,
and in addition to psychological barrier, I mean,
they've got technical barriers to deal with.
Now, suddenly, they don't have that "look at the screen
and get going" kind of attitude.
Now, they have to look through this straw
the way everybody else does.
And so they do start tabbing, and it
gets really, really frustrating.
But once you get more proficient with screen readers,
you start looking for other ways to improve the way to navigate,
and one of those things is, you probably heard about,
is called HTML headings.
And they're there for a reason because with HTML headings,
if they're present on the page, the screen reader
can take advantage of them.
Because remember, it's looking through the DOM,
and it says, how many h1's, h2's, h3's can I find there.
And if it finds them, here's how it looks.
COMPUTER: Links.
VICTOR TSARAN: I'm gonna pull this up
with a screen reader and--
COMPUTER: Headings, 199 items.
VICTOR TSARAN: Still a lot, but five times fewer than links.
Right?
And more importantly, not only are there
fewer headings than links, there's
also something I can learn about the page,
and there, I must say, you guys are doing a pretty good job
because your page is pretty well-structured,
at least the home page.
Once you get off the home page, things
get a little less predictable, but we're looking at home page
right now.
Do you see there's a number right next to each
heading, to the left of it?
And that's telling you what level,
whether it's two or three.
So we can see here--
[CLICK]
COMPUTER: Two-- What to Watch.
Three-- Playlists.
Three-- Subscription.
Two-- Recommended.
Three-- three-- three-- three--
VICTOR TSARAN: I'm just gonna go through
that because otherwise, you know--
COMPUTER: Three-- 20.
VICTOR TSARAN: So you've got the idea.
But you already see some of the things
that I would be talking about, just
by looking at the heading list.
Right?
Even though they're headings--
COMPUTER: Three-- 18, 2,000, 14-- Three-- 20.
VICTOR TSARAN: Uh, what?
Oh, that's in Ukraine.
That's right.
OK, sorry, sorry, sorry. [INAUDIBLE]
COMPUTER: Three--
VICTOR TSARAN: Anyway, so you can see now
how I can take advantage of that information.
Well--
COMPUTER: My subscript--
VICTOR TSARAN: Once I learn my screen reader,
I can actually tell the screen reader
to go just between headings, too.
So this way, since you guys done pretty good job,
and I just want to look at what major sections are
available in this page, there are several ways I can do that.
[CLICK]
COMPUTER: Vis--
VICTOR TSARAN: So I can find the heading level two.
COMPUTER: Heading level two-- What to Watch, clickable.
VICTOR TSARAN: And then I can tell my screen reader,
OK, go to the next heading level two.
COMPUTER: Heading level two-- Recommended.
Heading level two-- two items.
[CLICK]
24, recommended channel for you, clickable.
VICTOR TSARAN: Yeah, this is where
it should be switching to a different language, but--
COMPUTER: Heading level two--
[CLICK]
Associated Press.
VICTOR TSARAN: OK, you also hear something interesting.
Did any of you notice little click there?
Like makes this click?
COMPUTER: Heading level two-- 2-- Heading level two--
[CLICK]
Associated Press.
VICTOR TSARAN: Now, why this?
You hear the click.
Normally, you'll hear the word "link,"
but because I'm a bit more proficient
and I don't want to hear link, link, link, link, link,
link, I told my screen reader just to play a sound.
So whenever there's a link, it'll play a sound,
and it'll play different sounds for drop down, check boxes,
and things like that.
It depends on the screen, but some of them go crazy.
Chromebox, which is the Google's own speech solution,
does a really good job with what they call earcons,
and they really do a pretty good-- I
like the way Google Chromebox actually uses sounds.
Sometimes, it's a bit too much, but for the most part,
it's pretty good.
And so most screen readers will have some kind of functionality
to substitute controls by sound, but remember,
they need that semantic piece of information
to be able to know what sound to play because if the screen
reader doesn't know that it's a link,
guess what, it's not going to play the sound.
OK, so we got through headings.
This is pretty good, and you can see I can go back and forth.
I also have an ability to-- so let's
say if I go to heading three.
COMPUTER: Heading level three--
[CLICK]
Raw, colon.
Big rig stuck in Illinois swamp.
VICTOR TSARAN: All right.
So then, I can move my screen reader
to next level heading three.
COMPUTER: Heading level three--
[CLICK]
Obama advisor skips House hearing.
VICTOR TSARAN: OK, and so on and so forth.
Now, when I hear a link, I obviously can activate it.
In this case, since I know it's a link--
COMPUTER: Heading level three--
VICTOR TSARAN: I can open the video.
COMPUTER: Obama advisor skips House hearing, press.
[CLICK]
Obama advisor skips house hearing.
[VIDEO PLAYBACK]
- --to gather facts about the White House Office of Political
and Strategic Outreach.
[END VIDEO PLAYBACK]
VICTOR TSARAN: OK.
So I want to have a look at this page
because this is where many users spend their time.
So the very first thing I hear from users--
and I wanted to let you know.
I know there's obviously business decisions behind this.
I wanted to let you know because I hear this from users
all the time, especially blind users
are not big fans when the video starts playing automatically.
Why?
Oftentimes, you just want to read the description.
You may not even want to watch the video.
And so let's see how fast we can find the play controls in here.
So I'm right here on the page.
I open the page, so at this point, remember, guys,
the straw.
Right?
Can you imagine the straw?
Straw, straw, straw, straw.
Right?
I don't know what's on this page.
I'm just gonna start tapping, see what I can find.
COMPUTER: Try something new.
Search, search text field.
VICTOR TSARAN: OK, so you placed me into the search by default.
COMPUTER: Search button.
Play button.
VICTOR TSARAN: OK, cool.
So at least of the play controls,
and I think you've been using the tab
index to do some of these things.
So this is probably for the right reason.
I could understand why this is done, and this is probably--
COMPUTER: Caps lock.
Caps lock off--
VICTOR TSARAN: Sorry.
Well, the users can quickly jump to the play, play button.
Let's tab through this thing.
COMPUTER: New toggle button.
VICTOR TSARAN: OK, new toggle.
Button.
COMPUTER: 100% volume slider.
VICTOR TSARAN: This is good.
Let's see here.
COMPUTER: This item has no help t--
VICTOR TSARAN: [INAUDIBLE]
COMPUTER: Watch later button.
VICTOR TSARAN: OK, watch later.
COMPUTER: Settings button.
Theater mode button.
Full screen button.
VICTOR TSARAN: OK.
COMPUTER: Visited image.
YouTube home.
VICTOR TSARAN: OK--
COMPUTER: YouTube home.
VICTOR TSARAN: We're back into the navigation bar.
OK.
Here's a question for you.
What's missing here?
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: It's OK.
We didn't get there.
Remember, I always have my headings.
I didn't even start looking at that,
but what would you be doing with a video like that.
I mean, come on.
It's a government video.
Would you want to skip around and--
OK.
So what's missing here?
Yeah, and-- How many of you guys use shortcut keys?
Do you know what the shortcut keys
are for skipping around the video?
Somebody said no.
OK, cool.
Well, guess what.
I would know either if I didn't read it somewhere
or I didn't go, you know-- So, OK,
without being too mysterious, there are two problems.
One you have already identified which is the seat
control itself.
I don't actually even know where it is on the screen.
I think it's somewhere because I believe
if you start using shortcut keys,
it eventually gains the focus, but the bigger problem here
is that you guys have this fabulous facility for shortcut
keys.
If use j and l, it lets you actually rewind and forward
the video, and if you use k, it lets you play and pause.
Pretty cool, but how would you know about it.
All right?
So discoverability of these features
is something I would like to encourage you to think about,
and you have a good examples around Google.
So for example, if you press question mark on many Google
websites, it's gonna pull up the lists of shortcut keys.
So you can rely on some of those known techniques
to let users know, hey, we've got these really
amazing shortcut keys to think about.
Twitter has done something even more interesting.
When you load this Twitter page, twitter.com,
for the first time, they play this hidden message
for screen reader users, and it says,
did you know that Twitter has shortcut keys.
Press question mark to read all of the available shortcut keys.
[CLICK]
COMPUTER: Guide.
VICTOR TSARAN: Actually, do you have question mark?
Let's try.
No, I don't think so.
OK.
So for those of you who didn't know,
there are shortcut keys, j and l, to move forward
and backward and k's pausing.
This is really cool.
Honestly speaking though, to be honest with you,
I'd love to see though j and k to move between videos.
That would be really cool, but anyway, that's
not for me to decide.
So remember about these things.
Right?
Discoverability is a big thing, and the easier
you can make it for screen reader users to discover stuff,
the happier they will be overall.
OK.
So--
[CLICK]
COMPUTER: Vi-- Theater mode.
Set-- Watch later.
100-- Mute to-- Play button.
Mute toggle button.
VICTOR TSARAN: So let's mute this.
COMPUTER: 1-- Unmute toggle button.
VICTOR TSARAN: Good.
So that works really well.
COMPUTER: Press unmute toggle button.
1-- Mute toggle--
VICTOR TSARAN: OK, so let's have a look at the settings
for-- I understand this is the settings for the video.
COMPUTER: 100% volume slider.
Watch later button.
Settings button.
VICTOR TSARAN: OK.
This is settings for the video.
Is that correct?
My assumption's correct?
Or this is for the player.
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: See you guys are, yourself, you're not sure.
OK.
Just kidding.
So maybe a better label would be,
potentially, but that's only level two.
So anyway, let's go to the Settings panel.
So I'm gonna hit enter on this.
COMPUTER: Annotations-- on, off.
Speed-- normal.
Quality-- auto, paren left, 360p, right paren, group.
VICTOR TSARAN: Great.
So probably a div came up on the screen
and it's reading the contents of the whole div.
OK.
I mean, you know, whatever.
I will not worry about that particular part,
but what I'm worried about is the actual controls.
So let's have a quick look.
I'm gonna tab through this thing.
COMPUTER: On button.
VICTOR TSARAN: I'm just pausing so you guys have a chance
to process it.
OK, let's go next.
COMPUTER: Off button.
VICTOR TSARAN: Hm, OK.
Are these two separate things or part of the same thing?
Oh, it's even worse.
Yeah, thanks.
COMPUTER: Normal button.
VICTOR TSARAN: Who are we talking about here.
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: Right.
This is a speed, so it's really a combo box.
Yeah, thanks for letting me know, by the way.
That's good.
OK, cool.
Let's go next.
COMPUTER: Auto, left paren, 360p, right paren, button.
VICTOR TSARAN: Let's see.
This is DPI?
No, [INAUDIBLE].
Quality.
Right, right.
Sorry.
Yeah.
OK.
So but this says-- it's not clear because it says auto
and then, it says 300--
COMPUTER: Auto, left paren, 360p, right--
VICTOR TSARAN: Oh, OK.
This is the auto, which is 360-- OK, cool.
So but I assume this is also drop down, then.
So let's press Enter on this and see what happens.
COMPUTER: 360p, 240p, auto, group.
VICTOR TSARAN: OK.
So the new div came up.
Let me see if I can use arrow keys.
Nope.
OK.
Let's see tab.
COMPUTER: 360p button.
240p button.
Auto button.
VICTOR TSARAN: Well, you see here--
so even though, technically, it's accessible,
from the user point of view, it's
confusing because now, you don't actually
know this is drop down.
Right?
It looks like separate controls, and because they don't really
have labels, you could easily get confused by thinking,
oh, these are totally three different things
I'm looking at.
So you can see the drop down's different,
and I see this all over YouTube, so
I'm just showing you some examples.
I assume you guys are gonna be doing your homework.
But the drop down is definitely something
I would like you guys to see, looking
at because you have a lot of them,
and they're super important.
Right?
Because a lot of that stuff allows
you to configure your YouTube experience,
so I think this is definitely something worth looking at.
OK, so I press Escape.
I don't exactly know-- I presume.
I don't know if it collapsed anything.
COMPUTER: Play button.
Search bu--
VICTOR TSARAN: I think it collapsed the Settings panel.
Now, notice one thing.
What happened here is-- and I see this quite a lot.
I keep fighting about this at Paypal
as well-- is that what we need in terms of keyboard focus
is every time you collapse an expandable region
or div or panels.
I'm even afraid to say the right term because there's so
many terms, sight panel, over panel,
under panel, floating panel, fly out, fly under, fly over,
and so on and so forth.
You hear designers using that term.
Then you're like, OK, whatever.
Just call it panel.
Anytime there's a panel that comes up on the screen
and the user collapses it, you want
to make sure the focus comes back to the place we started.
Why?
In your instance, maybe it's less of an issue
because you placed me back somewhere around the Play
button, but this is not always the case.
So the user may end up, and they're not sure
if they're supposed to tab forward
or backward because they want to be where they were before.
So remember, this rule, very important.
Whenever you collapse something, your focus should go back to
where?
You guys tell me.
Where were before?
Settings.
Right?
COMPUTER: 65-- Play button.
Mute to-- Settings button.
VICTOR TSARAN: So I want to be here.
There's something else about these so these buttons,
in particular, this panel Settings.
How would you know actually that this is a drop down?
You wouldn't know that.
Right?
Because it actually says button.
Moreover, this Settings actually isn't even a drop down.
It's actually an expandable region.
So here I want to mention something.
How many of you guys are familiar with ARIA?
Anybody here knows about ARIA?
OK.
So wherever we can, obviously, we
encourage people to use native controls.
I know that browsers are pretty unforgiving as far as letting
us to style native controls, and especially drop downs
are really a pain in the dot, dot, dot.
So we need to rely on ARIA in many instances
to make these things accessible.
But before we even get to ARIA which is even the sugar,
really, because it provides important semantic information,
or I like to call it super semantics,
provides this information, but really, first and foremost, we
really need to start with the keyboard interaction.
Right?
Once you get that worked out, then we
can start working on ARIA.
COMPUTER: Spotlight search text field.
Safari-- TextMate--
VICTOR TSARAN: So one of the things you could be doing here
is-- for those of you-- I heard only people on the left side
said they know about ARIA, so I'll
not to go too deep into it, but essentially,
think of ARIA as auxiliary markup
that you can pepper your HTML code with,
and it'll sort of provide additional information
for the stuff that's not natively available in HTML.
Some good examples would be tab panels.
COMPUTER: Tab panels.
VICTOR TSARAN: And we got sliders.
There's nothing in HTML like a slider.
Well, we have some stuff in HTML5
like type in close range and stuff,
but it's not even supported well by old browsers
and assistive technology so we're in a bit of a problem
there.
Yeah, so we got tab panels.
We've got sliders.
What else do we got?
I mean, even pop-ups.
Right?
COMPUTER: Pop-ups.
New lot.
VICTOR TSARAN: So ARIA, it stands for Advanced Rich
Internet Applications into W3 spec at this point,
and what it is, as I mentioned, it's an additional markup
that you can specify inside your HTML
to give additional meaning to your controls.
So let's say we're talking about settings.
What could we do with the settings
to improve the functionality there?
Well we could do something like--
COMPUTER: Less div.
VICTOR TSARAN: Let's just say--
COMPUTER: Id equals quote.
VICTOR TSARAN: --ID settings--
COMPUTER: Id equals quote.
Less, button, greater, settings, less, Settings, less, less,
less, slash, div, greater.
VICTOR TSARAN: Well, you know, this is a button, that's OK,
but it's not really a button.
So what can we do to make this work better for screen reader
users?
Well, one way we could do this, you could say--
COMPUTER: O, n, greater, less, button.
VICTOR TSARAN: You could say, ARIA--
COMPUTER: ARIA, dash.
VICTOR TSARAN: Pop-up--
COMPUTER: ARIA, dash, has greater.
VICTOR TSARAN: And when you do that, the screen reader is
going to announce, settings button has pop-up.
And then, of course, you still have to do all your JavaScript
things with keyboard controls, keyboard focus, and stuff
like that, but this is how simple this stuff is.
Right?
Now, there's more about ARIA than this.
I was just doing one little example,
but this could be one way you could replicate this problem.
And unfortunately for expendable, collapsible
regions, we don't really have a native solution in HTML,
so we have to rely on ARIA to provider
that auxiliary information.
COMPUTER: Safar--
VICTOR TSARAN: OK, so we looked at those panels.
Now, let's go to the video.
Let me just check, quickly, the time.
COMPUTER: July 25, 11:53 AM.
VICTOR TSARAN: Wow, I knew that I would talk--
COMPUTER: Heading level one-- Obama advisor skips House--
VICTOR TSARAN: So again, you guys
are doing good job here because your heading level
one is actually the title of the video.
I really, really like that because if I pulled up
the list of headings--
COMPUTER: Headings, 12 item-- two-- one-- Obama advi--
VICTOR TSARAN: This is my heading level one.
All right?
And what I want to see because this is the reason
I came to this page.
COMPUTER: Heading level--
VICTOR TSARAN: There's one.
[ALERT]
COMPUTER: Image-- Associated Press.
VICTOR TSARAN: All right.
Cool.
So the next thing we're going to look at-- so
we're looking at the video which is great.
[CLICK]
COMPUTER: Associated Press.
Headings-- Form-- Landmarks-- Images-- five items.
YouTube home image.
[KNOCK]
Featured under-- Associated-- Featured
underscore channel dot jpeg image.
Associated Press image.
Photo dot jpeg image.
Default dot jpeg image.
Default.
VICTOR TSARAN: So I'm sure all of you know about alt text.
Right?
So I do want to mention a couple of things about alt text
because Marcel told me there are always
lot of questions about this.
It's one of those interesting topics
that while so seemingly tiny compared
to other interesting and complex things
we have to deal with today in Web 2.0,
but it is yet the one that's often
overlooked because it so much has
to do with the way we perceive information that it's
oftentimes not easy to analyze it by a computer.
So a couple of things I want to point out here.
I'm looking at a couple of images on this page.
There is one you wouldn't notice doesn't have an alt text.
Right?
This guy.
COMPUTER: Associated-- Featured underscore
channel dot jpeg image.
VICTOR TSARAN: OK?
And then, there are a couple of others
I wanted to let you know about.
This guy.
COMPUTER: Photo dot jpeg image.
VICTOR TSARAN: And this guy.
COMPUTER: Default dot jpeg image.
VICTOR TSARAN: So what I would suggest because you
guys are using the little thumbnails on YouTube,
and your images are an important part of sort of experience
to enhance how people look at YouTube.
Think carefully.
Not every image needs to have an alt attribute.
Right?
Some images, perhaps, it's better
if they don't even have any alt attribute,
or I should say differently, but like these two images, photo
and default, honestly speaking, it's a waste of my time
because I have to go through this stuff
and I was like, I hear photo.
I don't know what photo it is, so if you
want to really provide a good experience,
you either put in enough metadata
to say what kind of photo it is or just maybe even completely
silence it.
Or things like default.
I don't even know what exactly this is referring to.
COMPUTER: Default dot jpeg.
VICTOR TSARAN: Let's have a look.
[KNOCK]
COMPUTER: Upload.
Guide.
Collapsed--
VICTOR TSARAN: I don't even know where it was.
Anyway, so--
COMPUTER: TextMate.
Left-- New-- [KNOCKING]
VICTOR TSARAN: It's very simple, again,
if you want to have your images and have no alt text, you just
put empty--
COMPUTER: Alt equal.
VICTOR TSARAN: --around this stuff,
and basically, you're telling the screen reader, shut up.
There's no image.
Forget about it.
All right?
If you do have alt text, you just do alt equals
COMPUTER: Alt--
VICTOR TSARAN: --obviously, and then, just
put whatever text maybe.
Let's just say if it's Obama's picture--
I don't know what happened, like Obama--
COMPUTER: Alt, at the White House.
VICTOR TSARAN: Maybe you can put the word "photo."
COMPUTER: Left paren, quote, new lo-- alt equals, quote,
Obama at the White House, left paren, photo, right paren,
quote.
VICTOR TSARAN: So I always prefer
if you do want to say that it's a photo or a thumbnail,
put it at the very end because ultimately, user
is going to know that it's an image because the screen
reader is already going to tell them,
image, blah, blah, blah, blah.
So really, they just need to know that it's an image,
and if you don't have enough information just
get rid of that stuff.
It's really probably wasting your bytes as well.
OK.
[CLICK]
COMPUTER: Upload.
Button.
Button.
VICTOR TSARAN: Yeah, those are the things
you guys have a lot of.
COMPUTER: Button.
Button.
VICTOR TSARAN: Do you know what those things are actually?
I don't even know.
COMPUTER: Button.
VICTOR TSARAN: Oh, let me move the focus.
COMPUTER: Button.
Button.
VICTOR TSARAN: Can you see now?
Oh, Google+.
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: Oh.
COMPUTER: Button.
VICTOR TSARAN: So this is like to sign on to-- no, what is it?
COMPUTER: Button.
VICTOR TSARAN: OK, so then we need to talk.
So this is a widget that you probably inject from Google+.
Right?
COMPUTER: Button.
VICTOR TSARAN: OK, cool.
[CLICK]
COMPUTER: Image.
Associated Press.
[CLICK]
Associated Press.
VICTOR TSARAN: OK.
This is another very interesting pattern
that occurs quite a lot on using content websites.
When you have a thumbnail or a logo of a company,
and you wanted to make it clickable.
Right?
So you can't really wrap it up with an href,
so what we end up doing is that we have two tab stops.
Right?
We end up with two tab stop.
I don't think that's intentional.
One tab stop is a clickable image.
In this case, it's a log of Associated Press,
if I understand this correctly, and the other one
is the actual-- I would imagine it's a website.
Right?
Let's just check this.
COMPUTER: https://www.youtube.com/channel/uc52--
VICTOR TSARAN: This is gonna take me to their channel.
Let's look at the URL on their image.
COMPUTER: Image.
Asso-- https://www.youtube.com/channel/--
VICTOR TSARAN: OK.
So you see we have the same target, but two tap stops.
So if I'm looking at the channel that has a bunch of videos,
it basically means that I have to tab twice per video.
Right?
So there's a bunch of solutions people thought about.
One idea would be to use tab index equals minus 1.
So you can take the stuff out of tab order.
Another thing maybe to think about,
maybe this is where you don't want to make into href.
Make it a clickable element, but at least a screen reader user
isn't going to be able to tap to that.
So I leave it up to you how you guys solve this problem,
but I just wanted to show it to you that this is actually
occurring quite a lot.
[CLICK]
COMPUTER: Button.
I like this.
Like button.
Button.
VICTOR TSARAN: OK.
I see this quite a lot.
Obviously, I want to like or dislike the videos, and--
COMPUTER: Unsubscribe button.
[CLICK]
Associated-- Button.
VICTOR TSARAN: OK.
What's this one?
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: Oh, OK.
OK, cool.
So that's quite important.
Right?
So you see you guys, already labels.
Even if all of you did just go through all of these things
and make sure you have accessible names,
you'd be like 70% good.
Anyway, let's go tab again.
COMPUTER: I like this--
VICTOR TSARAN: Yes, sorry.
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: If you use a disable attribute, it will.
Yeah.
So use either disable attribute--
we can also use an ARIA element.
ARIA, there's disabled equals true.
But if you can, I would use disable
because it's probably gonna also expose it to the browser.
So you do you have that.
Yeah.
And it'll definitely-- it's gonna
tell me dimmed or something like that.
It depends on the screen reader.
VoiceOver on the Mac is gonna tell you dimmed,
and VoiceOver on Windows is gonna say grayed out.
They have different terminology, but it will say something.
COMPUTER: Button.
I like this.
Like button.
VICTOR TSARAN: I like this like like what?
It's like an oxymoron.
Right?
COMPUTER: Button.
I like this.
Like button.
VICTOR TSARAN: So what should I do now if I-- Like do I like it
or dislike it?
Anyway, you get the idea.
Right?
COMPUTER: I dislike this button.
VICTOR TSARAN: It actually sounds kind of cool.
I dislike this button.
See?
It's like--
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: No, the reader just
did [INAUDIBLE] I dislike this.
It's of course for fun.
It's not your fault.
But anyway, I think you have the same problem
with-- I've seen it.
I can't remember right now, but there's
a button when they ask you to unsubscribe--
Let me see if it's here.
COMPUTER: About button.
Share button.
Add to button.
Report button.
http://smarturl.it/associatedpress.
http:/-- It's a smart URL?
Something, I don't know.
Whatever.
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: No, I will.
Yeah, OK.
COMPUTER: Unsubscribe button.
VICTOR TSARAN: Yeah, it seems like it's been fixed.
It used to be the same problem, but it
would say subscribed, unsubscribed, subscribed,
like three times or something, similar to what
we see with "I like this like," but I think
maybe somebody already figured that out.
COMPUTER: I like-- I dislike-- About.
Share.
VICTOR TSARAN: Let's look at the sharing one because that's-- I
think we're gonna--
COMPUTER: Http://youtu.be/lhvlumlig3g
content selected edit text.
VICTOR TSARAN: OK.
So even though this is super obvious that this is a URL,
some kind of label would be really nice that says something
like URL to share or address to share.
Right?
So for me this is obvious.
Right?
I read [INAUDIBLE] HTTP.
I mean, maybe other users don't know.
Is it a Tweet widget?
Is it a share?
So keeping the labels in mine, and let's actually
see if there's a label on the screen.
[ALERT]
COMPUTER: http:--
[ALERT]
Button.
Button.
Button.
http-- Start at, colon-- http:--
VICTOR TSARAN: OK.
I don't think there's a label.
So you rely on the fact that the visual users know what it is.
Right?
So do you do in this situation?
So I'm gonna give you a couple of things.
COMPUTER: TextMate-- Text--
VICTOR TSARAN: Let's say your designers are like, no, we're
not gonna put tape.
It's gonna steal our pixels.
Nah, no way.
COMPUTER: All-- New line.
VICTOR TSARAN: Welcome to ARIA, so we have, again,
a possibility here.
If I have--
COMPUTER: Less input.
Type equal--
VICTOR TSARAN: I'm not gonna use quotes.
I'll save myself a bit of time.
Type equals text, and blah, blah, blah--
COMPUTER: Period.
VICTOR TSARAN: I'm gonna say--
COMPUTER: Greater.
VICTOR TSARAN: --there's some kind of URL.
COMPUTER: Left bracket.
Greater.
Left bracket.
URL.
Address.
Slash Less.
VICTOR TSARAN: OK, cool.
COMPUTER: New line.
VICTOR TSARAN: Let it be.
COMPUTER: Less-- y-- t--
VICTOR TSARAN: So what you can do is--
COMPUTER: Tango.
VICTOR TSARAN: ARIA provides you with a really cool attribute
called ARIA Label.
COMPUTER: ARIA, dash.
ARIA, dash, lab--
VICTOR TSARAN: Here I can say
[INTERPOSING VOICES]
VICTOR TSARAN: So when the screen reader notices this,
it's gonna read it as if it was a valid label.
So this is perfect in situations where
you know visually it's so apparent that you're
sharing the URL.
It's like why do we even bother.
Right?
But again, remember, you can not always rely on that,
so you have ARIA Label attribute that you
can use in this instance.
Yeah.
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: Yeah, this is a great question.
Dragon, naturally speaking, isn't
known to support ARIA unfortunately,
and we've been fighting with them-- well,
we, I can't say that I have been,
but the community has been fighting
with them because unfortunately, they
think of themselves-- well, unfortunately--
they think of themselves as a mainstream tool
and as a result, yes, they are an accessibility tool, assisted
technological tool, but they don't go as far
as supporting some of the accessibility standards.
So you wouldn't be able to say click on URL
to share or something like that.
It wouldn't understand it.
But--
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: Sorry?
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: Well, not me, personally,
but there are people who are hammering [INAUDIBLE].
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: No, it has the same effect
as the Label for tag.
And by the way, the problem with placeholders
that there can be-- well, if you use a placeholder the way
it's supposed to be which is use an HTML placeholder.
Right?
Then, it's OK.
But if you use placeholder as some people do,
which will place a text in the field
and we think it's a label, it's not advisory
because the problem is that when you
move your focus into the field, the label disappears usually.
Right?
Well, then that means the screen reader
isn't gonna know what's the label of this field.
Yeah.
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: OK, cool.
So let me just finish this widget,
and then, we can get to questions.
OK?
Cool.
COMPUTER: Space.
Space.
VICTOR TSARAN: I'm just tabbing, by the way.
Oh, wait.
COMPUTER: Space.
Space.
VICTOR TSARAN: Apologies.
COMPUTER: Safari.
Safari.
VICTOR TSARAN: My mistake.
COMPUTER: Button.
http:-- 0:07 Content selected.
Edit text.
VICTOR TSARAN: See, this is where
it would get really super confusing.
So now, somebody's going what is this.
It's probably something about time.
You guys know what it is visually.
You know it's to start.
This is, by the way, a really cool feature, the coolest ever.
I love this, and the fact you can even look at it through API
is even super cool.
Anyway--
COMPUTER: Share your thoughts group.
VICTOR TSARAN: Share your thoughts,
I guess it's like a div.
Let's look at this.
COMPUTER: Top comments text, one of one.
VICTOR TSARAN: Ooh.
COMPUTER: Leaving list box.
Share your thoughts gr-- New line.
Insertion on word
[BEEP]
Edit text.
VICTOR TSARAN: Same thing.
Right?
So I just hit Enter in "share your thoughts."
COMPUTER: New line.
VICTOR TSARAN: And I'm in some kind of rich text
which I assume I can probably type in.
COMPUTER: New line.
Leaving frame.
0:-- ht-- Share-- Button.
Button.
http-- button.
Share to LiveJournal button.
Button.
VICTOR TSARAN: Who's using LiveJournal still?
Wow.
COMPUTER: Ht-- Share to Digg button list, 13 items.
Share to button.
VICTOR TSARAN: And this guy?
Yeah, I guess--
COMPUTER: Button.
Button.
Button.
VICTOR TSARAN: Anyway, you get the idea.
So those are some of the things, just to quickly
summarize for you guys again.
So the heading structure you're doing really
well from what I've seen so far.
Remember about the labels on form fields,
on buttons, and things like that.
We don't want to hear button, button, button, button.
Alt text-- if you don't have enough information
for the images, just use alt equals empty quotes.
Otherwise, provide something meaningful.
Drop downs and expandable panels.
Use ARIA.
We have ARIA pop-up and so on and so forth.
This is probably a separate conversation,
but ARIA is very powerful that way.
And yeah, I think, then, we can just get to questions.
I did want to mention something that I talked to Marcel about.
I noticed that you guys are refreshing
the content on some pages.
The middle of the page gets refreshed.
That's causing some really weird things
because the keyboard focus gets totally screwed up.
Especially in Chrome, for some reason,
I see this more than in Safari, is
that I will be looking at the list of videos,
and then, suddenly, my focus jumps somewhere else
completely.
So that's something maybe we can talk after if you guys can
get together for lunch or whatever.
We can chat about this.
I see this is as one of the big problems.
Should we go to questions quickly?
MALE SPEAKER 3: Yeah, have some questions here.
One is regarding the [INAUDIBLE] and also
[INAUDIBLE] mobile [INAUDIBLE] information [INAUDIBLE].
VICTOR TSARAN: Yeah.
OK.
Those are great questions.
So the skip ad I didn't get to, but it's
one of things that actually has [INAUDIBLE] annoying.
So I tried to reproduce it because-- yeah.
But it was hard because every time we'd go to a video,
it's either different ad or-- so if you guys have
any reproducible scenarios, I'd love
to be able to show this to you.
So there are two issues we have with skip ad.
Number one, when the ad is playing,
there's actually no keyboard control
that I was able to ever find that lets me to actually skip
the advertising.
That's number one.
So even if I knew that there's actually a skip function
item-- Number two, I don't even know
that functionality is available.
Remember we talked about discoverability,
about keyboard shortcuts and stuff like that?
COMPUTER: TextMa--
VICTOR TSARAN: One little trick I
want to show, but be careful when using this.
COMPUTER: New-- Less-- New--
VICTOR TSARAN: So what we have with ARIA
is something called Live Regions.
So you can have a hidden region on your page
that when it gets updated, could be automatically spoken
to a screen reader.
Sometimes, it can be used on the live data which
means the information that's already on the screen.
Sometimes, you can use it as a way
to feed some information to screen reader users.
I prefer the former because the few hidden things
we have on the page, the better for everybody.
It's probably less work for your QA people,
less work for translators to figure out stuff.
But here we go.
So we have Live ARIA Regions, so--
COMPUTER: Less div.
VICTOR TSARAN: --let's say we have something like--
COMPUTER: Id equals quote.
Id equals quote.
VICTOR TSARAN: I'm just sort of speculating here,
and let's say--
COMPUTER: Less-- Less slash-- Less-- Id equ--
VICTOR TSARAN: We're gonna to have here, when it's
30 seconds into the ad, I'm gonna pop in this screen
it says--
VICTOR TSARAN AND COMPUTER: You can now skip this ad.
VICTOR TSARAN: So the problem, this is a div.
Right?
It's not focused.
A screen reader doesn't know of its existence.
How did you tell the user that this text has actually
been just shown on the screen?
One way we can do this is by--
COMPUTER: Spa--
VICTOR TSARAN: --using something called ARIA Live Region.
COMPUTER: ARIA-- ARIA dash.
ARIA dash live equals space.
VICTOR TSARAN: So there are two types of Live Regions,
polite and assertive.
Polite will politely wait until the user is
done tabbing or typing or whatever,
and then, it's gonna speak.
Assertive is totally rude.
It's like I don't care.
I have to tell this to you right now.
So perhaps, let's say, if you were in a chat,
you may not want to be interrupting the user because,
let's say, they are typing the message,
and they're listening to a screen reader as they type.
Right?
You don't want to be intruding.
Right.
So that could be one of the best examples.
So in this instance, because the user probably
is mostly listening, I think it's OK to be assertive.
And so one way to do this, you could be injecting a stream
here, and every time you inject it,
the screen reader is gonna react.
COMPUTER: Less input.
VICTOR TSARAN: Now, Live Regions are
a little bit interesting beasts in that,
depending on what screen reader you're using,
you may need to do a little bit of hacking around.
COMPUTER: Addr-- Right bracket.
Less-- New-- Less div ARIA-- Greater, quote, great-- Space.
VICTOR TSARAN: Here's a good one.
COMPUTER: Dash.
Dash.
Greater.
VICTOR TSARAN: Oops, I misspelled.
[SPEAKING WHAT IS BEING TYPED]
VICTOR TSARAN: ARIA atomic is attribute
that says no matter what, update the Live Region.
I don't want to lose you at this point.
All I wanted to show you guys is that Live Regions can
be used to communicate some changes on the screen that
happen, but for example, the keyboard focus
is not currently pointing at.
You can also use, instead of using--
COMPUTER: Less input.
VICTOR TSARAN: For example, if you have model--
COMPUTER: New li--
VICTOR TSARAN: --model alert.
You could also be using something
called ARIA role equals alert.
COMPUTER: Role equ--
VICTOR TSARAN: So you basically place it on the div,
and whenever there is alert on the page, it'll say alert.
It's time you go get some coffee.
You've been spending too much time on YouTube or whatever.
So ARIA provides you with all these interesting attributes,
and you can look at this spec.
I'm sure Marcel would be a good person to talk to.
You've spent some time with ARIA before.
There's a great spec.
There's a lot of stuff on the websites
that shows you good examples, but I
think because YouTube is so dynamic,
you may find some good applications.
Be careful though.
I do want to warn you.
You can overdo stuff, and that can
have totally adverse results.
So as every tool, make sure you know exactly what you're
doing so that you don't confuse the user.
Any other questions?
MALE SPEAKER 3: Yeah, we have a question
regarding auto-play [INAUDIBLE]
VICTOR TSARAN: No, no, so they-- yeah.
It was actually easier than that.
Because they did it off screen, so the message
they put up-- let me just show you actually.
COMPUTER: Safari.
Safari.
VICTOR TSARAN: I don't know actually--
COMPUTER: New tab.
Search Google.
M-- Twitter page has 20 links, two headings.
VICTOR TSARAN: Let's see.
If I go to the top of this page--
[ALERT]
COMPUTER: Visited.
[KNOCK]
[CLICK]
Language.
[CLICK]
Vis--
VICTOR TSARAN: No, it didn't work.
I think it remembers me.
What they do, they put a tax, but they make it invisible.
So they use a negative pixel positioning,
or they use a clip property.
You put a text on the page, and then, you just
do clip rectangle one pixel in all four corners.
And so if you're not using a screen reader,
you're not gonna even know it's there.
So if you use Flash-- which I hope you don't-- unfortunately,
we don't have an easy way to detect screen readers
in the browser at this point.
There was a way of doing it through Flash,
but as Flash is going away, we don't have that feature
anymore.
So I don't exactly know.
One way that somebody suggested to me on Twitter today
in the morning is that if there was a setting
that the user could go to and just check a check box,
play video automatically, that would be kind of cool.
So this way, you don't get your business folks
upset, but at the same time, the users who
know that there is a setting, they
could just go in and check the check box.
And from then on, they're not gonna
have their video playing automatically.
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: What?
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: Right.
No, I totally understand, but what if--
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: It could be.
Then, you have to make sure you're
write it for all browsers.
Right?
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: So I was thinking the setting could be--
but they don't even want people to be
able to turn off the feature.
Right?
But what if it could be another analytics?
How many people actually turn on the video?
Right?
So you could think of it that way, but--
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: No, those are great discussions to have.
I'm not trying to-- Look, I work for business-- I totally
understand the priorities and things like that,
but I just bring it to your attention
that this is a concern among users.
Well, the way VoiceOver on Mac OS
solved this problem was actually pretty smart.
They have this feature called Audio Docking, and--
COMPUTER: Language--
VICTOR TSARAN: --what it does if--
COMPUTER: Reload.
User name or email.
VICTOR TSARAN: Oh, wait.
Sorry.
COMPUTER: Obama adv-- Button list 13--
VICTOR TSARAN: So notice what's gonna happen here.
COMPUTER: Right pointing--
[VIDEO PLAYBACK]
-So if you need a vehicle for your small business--
COMPUTER: Guide button.
Button.
- --or even if you think you don't.
I invite you to join me.
The right--
[END VIDEO PLAYBACK]
VICTOR TSARAN: So you notice what happens.
Right?
When the video is playing, the voice
over ducks down the video, so that the user can still
hear the screen reader.
I think it's a pretty clever solution, personally.
I don't actually know why others-- and they
do the same on the iPhone.
If you're using a Mac, it's really not that bad,
but if you're using Windows, then I
could see why people could be upset.
I'll leave it up you to decide what to do with it.
I just thought I'd communicate the problem.
Anyway, anything else?
We're done.
Right?
So I guess if I have to leave you
with one thing it's that I know it's a little scary.
Every time you ask developers to go and try
with a screen reader, people go, oh, what can
I do so I don't have to do it.
Right?
But honestly, it will open your eyes to many things
that you thought you developed really well, and so just
going through the experience, it's
gonna help you just to discover a lot of things,
not just about accessibility, but just overall.
Imagine yourself using the keyboard.
So I would suggest, if you can, spend 10 minutes, 15 minutes,
just going through the interface.
And just make it into a habit, and that's just
gonna make you a better programmer
and bring you a little closer to how users who are blind,
specifically, use your particular product.
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: Oh, yeah.
So-- Yeah, OK.
So this is the one I'm using here.
It's called VoiceOver.
It's built into every Mac.
If you press Command-5--
COMPUTER: VoiceOver off.
VoiceOver on.
Safari.
VICTOR TSARAN: It's built in, so that's really--
you get it for free.
If you're testing on Windows, there's a project called NVDA ,
NVDA, which is an open source screen readers,
so that's gonna take care of Windows.
And of course, you do have Chromebox
in Chrome, which is also a solution.
I know Marcel told me that there is
a little bit of a concern among developers
that you have to learn how screen readers work.
There is a bit of truth in that which is you do kind of need
to know how it operates.
For example, remember I mentioned at the beginning
that tabbing is not the only thing you
need to do with a screen reader.
But honestly speaking, there are only a few shortcut keys
you need to know to be able to be effective.
So remember I showed you this feature?
COMPUTER: Images.
VICTOR TSARAN: It's called web rotor.
I can never pronounce this properly.
Bleh.
This word, R-O-T-O-R. And basically,
when a screen reader is running, if I press Command-Option-u,
this opens up, and look.
This is a quick-- right there you can already
see what's going on here.
Right?
And then use left and right arrow keys
to switch between different categories.
COMPUTER: Buttons, 57 items.
Guide button.
Button.
Button.
Search-- Play-- Mute-- Full-- Theater-- Setting-- Cap--
Watch later--
VICTOR TSARAN: You don't even have to use any tool.
Then, you go right arrow again.
COMPUTER: Links, 90 items.
110892817022189601849 1.
VICTOR TSARAN: That's a good link.
I like that.
COMPUTER: Https:/-- Loyal to liberty.
Three hours ago.
112493291332271681279 1.
VICTOR TSARAN: Do you guys start realizing
why you have 500 links?
It's because actually I think there's
some things on the page that really don't
have to be links like this guy.
COMPUTER: Three hours ago.
VICTOR TSARAN: I'm not sure.
Maybe my thinking is screwed up, but I don't quite
see why this should be a link.
I mean, I know you want to make everything clickable.
That's probably the idea.
Is that correct?
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: Right, yeah, but that's not what the links says.
Right?
AUDIENCE: [INAUDIBLE]
VICTOR TSARAN: I know.
Got it.
So that's what the link is.
OK.
So anyways, so then, you know go right again.
COMPUTER: Headings.
VICTOR TSARAN: Headings.
COMPUTER: Form controls.
VICTOR TSARAN: You've got form controls, and so you can use--
COMPUTER: Button.
Button.
Search button.
VICTOR TSARAN: So just using even this particular feature,
you can quickly see how well your page is
doing with the voice over.
And so this is just one shortcut, Control-option-u.
COMPUTER: Button.
VICTOR TSARAN: But I'd be happy to follow up
with a couple of links.
I'll make sure Marcel to send you
a couple of links, some quick guides on how
to use a screen reader.
I would encourage you, don't stress too much.
Learn one or two things about the screen
reader, and rely on those.
The point is not to make you into experienced users.
The point is for you to be able to feel
comfortable with the tool enough so you can test for yourself.
OK?
Thanks so much, and I hope I'll get a change
to talk to some of you afterwards.
[APPLAUSE]
[SIDE CONVERSATION]
VICTOR TSARAN: Yeah.
In the Google accessibility, there's
a lot of really cool guys, so you're gonna have lots of fun.
Thanks a lot.