about google chrome

[side conversation] male speaker 1: all right,again, thank you for coming. we have a guestspeaker today, victor, to talk about goingscreenless with youtube. i met victor a few years ago. we were co-workers, andit was the first time i had the opportunityto learn how to use the web throughscreen readers. back then, i had noidea that was possible,

and not only that, but i learnedfrom the engineering side that you can do simple stuffto make the whole web more accessible to everyone. please help me welcome victortsaran 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 holdsomething in my hand because otherwise-- it betterbe hot and with caffeine. anyway, so thank you for coming. this is great. i hope we're going to learntoday something about youtube

and a new user experienceprobably for most of you, and that is how you useyoutube if you can't see. so what i want tostart is by telling you just a little bit aboutmyself because i'm hoping that throughmy personal story, you will see why we really needto worry about these things, making thingsaccessible, and why we need to worry, especiallyabout youtube, making available to everybody.

so i was born in ukraine andwent through all the same stuff like most of you, highschools and things like that, and then, when i entereduniversity, my real, sort of, touch with theworld began, where at the university,as you know, you need to deal with homeworks. you need to deal witha lot of teachers, and you need to deal withall kinds of situations where you couldn't relyanymore on your parents

to come and help you outwhenever you need it, so the real lifechallenges began. how do you read something? how do you take notes? how do you take booksfrom the library? how do you turn in yourhomeworks and things like that? and at that time, therewas really no technology to speak of, atleast in ukraine, and so the only thing i coulddo is rely on, so to speak,

human readers. right? so every time you neededsome help you'd say, can you help me out,and of course, you had to learn yourbasics in diplomacy. i call it diplomacy101 because you got to be careful not tostep on people's toes, and everybody's gottheir own timeline. and they have toread their own books,

and they have to meet with theirdates and things like that. and, you know, the girlfriendis waiting and there's like, hey, can you read forme some philosophy book. it's like, come on, get away. so you do have tolearn how to really be considerate of other people'stime, but at the same time, while being able to achieveyour own goals, which is for me, obviously, wasto complete my studies and go in and get a job and beas productive in life as i can.

so two years into mystudies, i got a scholarship to come and study inthe united states. it was a studentexchange program for a year where one ofthe things i had to learn was computers. it was like, wow,this is so interesting because up until thattime, i heard people playing some games on atari. and my computerscience professor

told me, well, there's notvery much i can do for you. you know, we couldprobably learn how to compose musicon the computer which at that time as yousome of you may know, you had to type inthe notes and it was using the pcsspeaker buzzer. so if you could callit music, that's what it was in those days. and so at the end, wejust basically decided

there was really no sense forme to attend in those computer classes becausei couldn't really benefit from them in any way. so when i heard that i wasselected to go and study in the united states, i waslike, 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 allcrazy about learning history, and information wasthe king for me.

it's like how much canyou remember, analytics, and all that kind of criticalthinking that sort of stuff. and so the veryfirst application that i found whenusing computers, besides typing and doingall the basic things, is going to encyclopediaand learning anything i possibly could aboutthe world around me. and it was just like,wow, this is so cool, not only that i could justtap into this amazing wealth

of knowledge around mejust by using the keyboard, but imagine, i didn'thave to ask anybody. i just could log in into myunix box-- well, at that time, it was dos based,but i was already playing a little bit with unixand pine and all the emails, you know. so i don't know howmany of you use unix, but i would imagine that manyof you, since you're engineers, so we can speak common language.

you know, going interminal and using irc all this stuffwas exciting days. but the most important thingwas this feel of independence. you know, suddenly you couldjust do things on your own, and if things we're availableto you in the format, then things just became somuch more pleasant to use. and you could do it at5 o'clock in the morning if that's what youwanted to do, and you could do it totallyindependent of everybody else.

and so that got me interestedin computer science. so i went back to ukraine, andi established the first computer center for the blindwhere we taught students how to use computers. we created the first screenreader program for blind users in ukraine. and here you hear me mentionthe word screen here, so we're gonna hear and seemore of that as we move on. and eventually-- so igot back to the states.

i completed my computerscience degree. after that, my wife and i--actually, i met my wife there at the exchangeprogram, so it there was another big event for me. and together, we traveledin southeast asia teaching computers to kidsin poor provinces, so that was anotherinteresting experience, not only because i couldactually apply my teaching skills in computers,but also, it

made me think aboutthings like jargon, how much we take for grantedhere when everybody speaks english language, whenprogrammers understand english language prettymuch since day one. and now, you gointo another country and you say somethinglike "sign in," and people like,what do you mean? what should i be doing? so this made me thinkabout a lot of things

like, well, how do we uselanguage in computers. what's understandablefor me may not be understandable forsomebody whose english is not at the same level or worse, forwhom computers is just a tool. they're not programmers. they're not even curiousby nature, for example. they just need to be ableto type in their homework and go get a job, perhaps,even in the call center, and computer for themis just a tool just

like a hammer for a diy person. so it made me thinkabout that kind of stuff, how do we go about translating. there's also somethingabout cultural perception of computers. for western cultures, wheretechnology is a bit more of a normal thing,many of us were born with some kind oftechnology, telephones, television, computers, modems,and all that kind of stuff.

so we're less scaredof that stuff, but you go to countries wherepeople don't even have access to white canes that blindpeople use to walk around, and suddenly, theword "computers," not only that it's,for many, unaffordable, let's say it's-- we're ina different time right now because many morethings are affordable, even in developing countries,but just even getting used to this idea of interacting witha soulless piece of hardware,

for many cultures,is a difficult thing. so those are the things thati learned, and with that, i moved on and got a job indc doing some contracts for the government, so that wasanother interesting exercise in learning how toprocrastinate and not do things. you could getreally good at that, especially seeing governmentemployees around you saying like, well, you know,i don't actually have to do accessibilitybecause nobody's

going to fire me anyways,so why would i bother? so i had to practice mydiplomacy 201, at that point, on how to get people interestedin accessibility, which actually worked outreally well because those are the same skills-- wheni came to silicon valley to work at yahoo andnow, at paypal, i'm using those same skillsbecause guess what. people here don'treally care about laws or legal applicationsor whatever it may be,

but people understandhuman language and meaning. when i talk to you guys orto anybody else as humans to humans, we canunderstand that everybody wants to make theworld a better place, and oftentimes, all ourfighting and our battles are about how wego about doing it. but as i mentioned before,one of the big things i did understand from my traveland in teaching other people is that in order to make peoplefeel a little closer to what

you're talking about, youneed to make them feel the same feelingsyou are feeling, and especially when itcomes with the computers, we're basically talkingabout user experience. user experience 101. and so what iwanted to do today-- we will touch on theengineering stuff as much as you'rewilling to go there, and probably, thisis an inevitable.

we're gonna talk aboutsome technical applications of accessibility, butfirst and foremost, i wanted you to go togetherwith me through the youtube interface and see,or rather, hear, what it feels liketo use youtube when you can't see the screen. now, before we evengo to youtube-- i need to go in here--i wanted to tell you a little bit about the softwarethat actually makes it possible

because remember thehammer for the diy person. you gotta know how to usethe hammer because otherwise, you'll be left without fingers,and so on and so forth. or worse yet, you mightbe left without a house if you don't knowwhat you are doing. so same thing withthe computers-- right? so i need to havea tool that enables me to be able to interactwith this piece of hardware, and this tool is called ascreen reader, a little bit

an outdated term becauseback in the dust days, this is what this pieceof software used to do. it literally wouldread this screen, try to interpret whatwas going on the screen, and then, speak it back toyou in a synthetic speech. synthetic speech,back in those days, was nothing close towhat you guys will be hearing in a minute. back in those daysit was like aliens,

kind of like cyberspace, stufflike, buh-buh-buh-buh-buh, it was really, really hard. i remember i hadsuch-- it took me just two weeks to get used tothe toneless synthesizer, and it not only was likeone dimensional stream, but it also wastotally soulless. i mean there was no intonation. there was no articulation. they've gotten better at thatbecause once they figured out,

you know, form an algorithmand how you can raise speech and so on and soforth, they're like, oh, you know, when there'sa question mark, even that soulless voice,we can actually make it raise thepitch a little bit. but anyway, i digress. so back in thosedays, screen readers used to read the screen. now, as we entered into theworld of windows and windows 95

and then, essentially, apis,screen readers no longer really have to read the screen becausethe way our screens look now, people can't make sense of it. you know? forget about computerstrying to make sense of it. so really the most reliable wayto put screen readers right now to interact with thecomputer is through the api. that starts fromthe desktop apis, then goes into browser apis, andeventually, goes into-- well,

i wouldn't want to call domapi, but for the purpose of this conversation,we could call it an api because it's an applicationinterface, as far as the web page and the screenreader is concerned. then, they go into the dom. so the reason i'm tellingyou all of this is-- so now, the screen reader, from beingthis active tool that sort of scans the screen and-- computer: bye.

victor tsaran: --tries tofigure out what's on the screen, it really becomes more of apassive tool that sits there and listens to what thecomputer is telling it. so for example, if i'm-- iassume many of you here use macs right? anybody here use windows? not a hand. ok. so i'll try to keep itsort of cross platform.

i think a lot of theconcepts are similar, but because i'musing the mac you're gonna hear mac pretty muchthroughout 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 volumeone-- default pitch, 51%. default intonation, 50%.

default voice, alex. default rate, 51-- 31-- 36%. victor tsaran: ok, i hope thisis a bit easier to understand. computer: google chrome o-- victor tsaran: so what youwill notice here-- and in fact, to give a little bitbetter experience for you-- computer: screen curtain on. victor tsaran: so i'mgonna turn off the screen. i hope it did turn off.

what we're going todo next is-- this is a really important-- sorry. i forget i need to beclose to the microphone. --really importantpiece of information is that when youuse a screen reader, it's like lookingthrough a straw. when you get into the darkroom, and somebody told you, at the end of the room, thereis something you need to find. i'm talking the videogame kind of language.

what you're gonnado is that you're gonna start learning thethings about your room, but you're gonna learn them oneby one because you can't see. so you have no concept ofleft corner, right corner, and so this is how it feelsa little bit using the screen reader. so at this point, youguys have seen the dock, so it's a little unfair. but if i ask you what's atthe end of the dock, what's

the last item onthe dock, i wonder how many of you could say that. and so when you usethe screen reader, you have to explorethis one by one. and the screen readerwill only speak the things that are currently underfocus, a very important point because i don't want thescreen reader to be jabbering about anything andeverything on the screen. i just want to be in control.

so let's explore this together. so i'm gonna be usingleft 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: vmwarefusion, 21 of 28. microsoft lync, 20 of 20--[inaudible], 19 of 20. system preferences, 18of-- app store, 17 of 28. victor tsaran: ok,so you got the idea. a couple of things that happenedthere is that the api started giving the screen readera couple of pieces of information. number one, they give it aname-- right? --of what exactly you're pointing at, obviouslyvery important-- right?

--because you need toknow what application. they tell you somethingabout, probably you noticed, 23 of 28,and so on and so forth. so it's giving you the sizeof this particular element in this particular widgetthat's going to be dock. so i kind of know how big-- am isupposed to go through 55 icons or is it going to be just 28. little bit of information,but quite important. how many of youwere able to hear

if there were any folders there,and if yes, then how many? yeah, you got it. so there was a downloadsfolder, quite important. there's a downloadsfolder so the user knows, i know, in thisinstance, that there is a folder as opposed to-- computer: ibooks, 16 of 28. victor tsaran: all right? as opposed to justan icon because i'm

going to behave differentlybased on that information that i just received. and most of you know,of course, folder means that it'snot an app, so i'm gonna be probably looking forit to have some files in there or whatever it is. before i'm going toturn on this screen, let's do one morelittle exercise. the next one i'm gonna do,i'm gonna open the menu bar--

and one thing you willalready notice right here, which i'm sure is obvious,but i want to point it out. i'm not using mouse hereat all, so everything i do is through keyboard exclusively. so that means if there's anypiece of this interface that does not have a shortcut keyor i cannot tap to, it means it's inaccessibleto me completely. well, not exactly, but for thepurpose of this conversation, it's inaccessible to me.

so what i'm gonna to do isi'm gonna go to the menu bar. so i'm gonna hit theshortcut key which is provided by my screen reader. computer: menu bar, apple. victor tsaran: ok, so iheard the word "menu bar." again, i know which context i amcurrently in, super important. and anything elseyou guys heard there? right. so what is that?

audience: [inaudible] victor tsaran: yeah, you got it. so it's basically the titleof the particular menu. let's see if i can ask my screenreader how to navigate that. computer: this itemhas no help tag. victor tsaran: ok,that's not good. so i ask it can youtell me how to navigate. i guess they assumethat everybody knows how to navigatethe menu bar.

well, i'll be using the leftand right arrow keys, and so-- computer: chrome. victor tsaran: thisis not the menu. computer: file. edit. view. history. bookmarks. so let me go down inone 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 canjust go down arrow. computer: about google chrome. preferences, ellipsis,command, comma.

how much did welearn 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 seevisually normally? i think normally you see--i think it is ellipses. what does it meanto you, visually? audience: there's a dialogue. victor tsaran: yeah,there's a dialogue. actually, some screen readersgo as far as they will actually, instead of ellipsis, theyjust simply say, dialogue. so they would say--

victor tsaran: so they wouldsay, preference, a dialogue. a very important context,again, right here, you see. so now that i knowthat it's ellipsis, then i know this is gonnabe a dialogue if i open this particularmenu, and there's a shortcut cue, which youcorrectly pointed out. computer: signed in asvtsaran@gmail.com, ellipsis. computer: clear browsing data,ellipsis, command, shift, delete.

import bookmarks andsettings, 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 thatthere is a submenu. obviously, there is a differencebetween ellipsis and submenu.

ellipsis means that thedialogue is gonna open, and submenu is gonna meanthat there is just menu items. computer: this item--services, subme-- victor tsaran: cool. and then, i just use rightarrow keys, and i open the menu. computer: screen curtain off. i'm gonna put thescreen back on. computer: closing menu. victor tsaran: ok, cool.

so this is basicallyhow the navigation happens on a desktop. so i'm not using any slidestoday, so if you warn me, i can take notes, but i'msure you guys can take notes. there are a coupleof things here i just want tosummarize for you. what the screenreader needs to be successful in lettingthe user navigate, well, number one, the user needsto be able to get to the item.

so there's some kind of keyboardaccess involved, whether it's tab, whether it's arrow keys,depending on the context. number two, we need atitle, so everything-- well, let me actually say,name, not the title, because that's gonna bea little misleading when we talk about the web. so everything needsa name of sorts, we call it accessible name,but that's more of an api talk. then, we need toknow the context.

we need to know a--yeah, i guess, a context. menu bar. is this a menu? it would also mean, forexample, 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 orknow, at least, what they're supposed to do with thispiece of information.

and then, we needsome kind of state. so in the case of list, itmay be size of the list. in the case ofcheck box, it may be whether the item ischecked or unchecked, and in the case of menu, it'swhether the menu contains a submenu, whatever it may be. and so with these threepieces of information, the user, for themost part, should be able to figure outthe basic interface.

so-- computer: safari. victor tsaran: so letme go now to the browser because i think that'swhat we want to look at. victor tsaran: so one of thethings we find on the web is that it's a bitless predictable. when you work with desktopapis, they're pretty good. and also, tomorrowor after tomorrow, if you come up to a computer,you power it up, most likely,

your desktop is gonna lookthe way you left it yesterday. unless you let your kidsor partners or whoever mess around while you sleep. but for the most part, if you'rein control of your machine, you know that you'regonna turn it on. icons are gonna bein the same places. the dock is going tobe in the same place. well, it's not thesame case with the web. web is far less predictable asfar as this stuff is concerned,

so when we talk about the web,the principals i just described a couple minutes agoare, i would say, they're so much more applicable. you have to be like superdisciplined to make sure that all of your stuff hasitems, has names, and has states and all that[inaudible] stuff. because on thedesktop, let's say, once i know my desktop--maybe, let's say, if certain buttonsdon't have names,

i mean, you know, lifesucks, but maybe i could remember them. it's number five, so i justlike arrow key five times, and i get there. on the web, i can't even predictthat i'm gonna go to youtube and it's gonna look the sametomorrow because you guys just pushed an new updateor is it the beta or maybe i got intoone of the buckets. who knows?

and so this stuff comesso super important that you can't let it slip. there's almost no excuse becauseyou can totally lose the user, and the experiencecould be disastrous. so why don't we have a quicklook at the youtube page. and by the way, if youguys have any questions, feel free to interrupt mebecause if you don't interrupt me, i may be talking herefor another three hours. and i don't know.

how much time dowe actually have? is it an hour? male speaker 2:we've got an hour-- ok, so i'll try to stayclose to the clock as i can. ok, so here's thevery first thing i'm gonna let you know isthat the-- well, you may have guessed-- the screenreader is a pretty configurable piece of software. all right?

it's not one size fitsfor all because just like there are manypreferences people have, starting from clothesto colors, going to browsers andtoolbars and whatnot. the screen readerobviously isn't going to be thesame for everybody. some users may wantto speed it up. others may want to slow it down. some users--

computer: default pitch--default rate, 36%. victor tsaran: some users-- computer: [inaudible] victor tsaran: some users maywant to use different voice. computer: def-- alex. victor tsaran: some usersuse different languages. i speak several languages,so i have several speech synthesizers that i-- evenon youtube, when i go in, if i want to readdescriptions in that language,

i'll just switch to adifferent synthesizer. some platforms havegotten so smart like iphone, for example, thatif it detects a link attribute, it's gonna switch the speechsynthesizer on the fly. so on the iphone, because it has25 built-in speech synthesizers for different languages,if i go to a page that contains multiplelanguages, it's gonna automatically switchbetween the languages. a good example wouldbe wikipedia.org.

when you go and there arelinks in multiple languages, they use their languageattribute really well, and so when i gothrough wikipedia and it says which language isthe wikipedia is available in, voiceover, the screenreader on the iphone, is pretty smart toswitch those languages on the fly, which isreally, really cool. we don't have that,unfortunately, on voiceover on the desktop.

although, the feature hasbeen discussed many times, and hopefully, we'llmake it, one day, there. the other thing thatscreen readers do really well is that they knowthat one of the reasons we're using thecomputers-- we, i mean blind people--is that we want to be as efficient as you guys. i don't want to begoing to the website and-- while you canscroll over the mouse

and click, click, click,click, in three seconds, you're doing your things. i don't want to be tabbingthrough the whole website every time i go to youtubeor any other website. although, i could. it's certainly not themost efficient way. 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: andthat's only provided you guys have done your job rightand you have all your hrefs and you don't do onclickstuff and things like that. even with that, there'sstill 571 tab stops.

that's not somethingi want to do. i don't think youwant to do that. often times, though,to be honest with you, especially beginnerusers, that's what they do because sometimes,they don't know what to expect, and also, there is apopulation of users who lost their sightlate 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 peoplewho lose their sight at 40, 45, and in addition topsychological barrier, i mean, they've got technicalbarriers to deal with. now, suddenly, they don'thave that "look at the screen and get going" kind of attitude. now, they have to lookthrough this straw the way everybody else does. and so they do starttabbing, and it gets really, really frustrating.

but once you get moreproficient with screen readers, you start looking for other waysto 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 reasonbecause with html headings, if they're present on thepage, the screen reader can take advantage of them. because remember, it'slooking 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'mgonna pull this up with a screen reader and-- computer: headings, 199 items. victor tsaran: still a lot, butfive times fewer than links. and more importantly,not only are there fewer headingsthan links, there's also something i canlearn about the page,

and there, i must say, you guysare doing a pretty good job because your page ispretty well-structured, at least the home page. once you get off thehome page, things get a little less predictable,but we're looking at home page right now. do you see there's anumber right next to each heading, to the left of it? and that's tellingyou what level,

whether it's two or three. so we can see here-- computer: two-- what to watch. three-- playlists. three-- subscription. two-- recommended. three-- three-- three-- three-- victor tsaran: i'mjust gonna go through that becauseotherwise, you know--

computer: three-- 20. victor tsaran: soyou've got the idea. but you already seesome of the things that i would betalking about, just by looking at the heading list. 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 advantageof that information. well-- computer: my subscript-- victor tsaran: once ilearn my screen reader, i can actually tellthe screen reader

to go just betweenheadings, too. so this way, since youguys done pretty good job, and i just want to lookat what major sections are available in this page, thereare several ways i can do that. computer: vis-- victor tsaran: so i canfind the heading level two. computer: heading level two--what to watch, clickable. victor tsaran: and then ican tell my screen reader, ok, go to the nextheading level two.

computer: heading leveltwo-- recommended. heading level two-- two items. 24, recommended channelfor you, clickable. victor tsaran:yeah, this is where it should be switching toa different language, but-- computer: heading level two-- associated press. victor tsaran: ok, you alsohear something interesting. did any of you noticelittle click there?

like makes this click? computer: heading leveltwo-- 2-- heading level two-- victor tsaran: now, why this? you hear the click. normally, you'llhear the word "link," but because i'm abit more proficient and i don't want to hearlink, link, link, link, link, link, i told my screenreader just to play a sound. so whenever there's alink, it'll play a sound,

and it'll play different soundsfor drop down, check boxes, and things like that. it depends on the screen,but some of them go crazy. chromebox, which is thegoogle's own speech solution, does a really good job withwhat they call earcons, and they really doa pretty good-- i like the way google chromeboxactually uses sounds. sometimes, it's a bit toomuch, but for the most part, it's pretty good.

and so most screen readers willhave some kind of functionality to substitute controlsby sound, but remember, they need that semanticpiece of information to be able to know what soundto play because if the screen reader doesn't knowthat it's a link, guess what, it's notgoing to play the sound. ok, so we got through headings. this is pretty good, and youcan see i can go back and forth. i also have anability to-- so let's

say if i go to heading three. computer: heading level three-- raw, colon. big rig stuck in illinois swamp. so then, i can movemy screen reader to next level heading three. obama advisor skipshouse hearing. victor tsaran: ok, andso on and so forth. now, when i hear a link, iobviously can activate it.

in this case, sincei know it's a link-- victor tsaran: ican open the video. computer: obama advisorskips house hearing, press. obama advisor skipshouse hearing. [video playback] - --to gather facts about thewhite house office of political and strategic outreach. [end video playback] so i want to havea look at this page

because this is where manyusers spend their time. so the very first thingi hear from users-- and i wanted to let you know. i know there's obviouslybusiness decisions behind this. i wanted to let you knowbecause i hear this from users all the time,especially blind users are not big fans when the videostarts playing automatically. why? oftentimes, you just wantto read the description.

you may not even wantto watch the video. and so let's see how fast we canfind the play controls in here. so i'm right here on the page. i open the page, so atthis point, remember, guys, the straw. can you imagine the straw? straw, straw, straw, straw. i don't know what'son this page. i'm just gonna starttapping, see what i can find.

computer: try something new. search, search text field. victor tsaran: ok, so you placedme into the search by default. computer: search button. play button. so at least ofthe play controls, and i think you'vebeen using the tab index to do someof these things. so this is probablyfor the right reason.

i could understand why this isdone, and this is probably-- computer: caps lock. caps lock off-- victor tsaran: sorry. well, the users can quicklyjump 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 itemhas no help t-- victor tsaran: [inaudible] computer: watch later button. victor tsaran: ok, watch later. computer: settings button. theater mode button.

full screen button. computer: visited image. youtube home. victor tsaran: ok-- computer: youtube home. victor tsaran: we're backinto the navigation bar. here's a question for you. what's missing here? victor tsaran: it's ok.

we didn't get there. remember, i alwayshave my headings. i didn't even startlooking at that, but what would you be doingwith a video like that. i mean, come on. it's a government video. would you want toskip around and-- so what's missing here? yeah, and-- how many ofyou guys use shortcut keys?

do you know whatthe shortcut keys are for skippingaround the video? somebody said no. ok, cool. well, guess what. i would know either if ididn't read it somewhere or i didn't go,you know-- so, ok, without being too mysterious,there are two problems. one you have alreadyidentified which is the seat

control itself. i don't actually even knowwhere it is on the screen. i think it's somewherebecause i believe if you start usingshortcut keys, it eventually gains the focus,but the bigger problem here is that you guys have thisfabulous facility for shortcut keys. if use j and l, it lets youactually rewind and forward the video, and if you use k,it lets you play and pause.

pretty cool, but howwould you know about it. so discoverabilityof these features is something i would like toencourage you to think about, and you have a goodexamples around google. so for example, if you pressquestion mark on many google websites, it's gonna pull upthe lists of shortcut keys. so you can rely on someof those known techniques to let users know, hey,we've got these really amazing shortcutkeys to think about.

twitter has done somethingeven more interesting. when you load thistwitter page, twitter.com, for the first time, theyplay this hidden message for screen readerusers, and it says, did you know that twitterhas shortcut keys. press question mark to read allof the available shortcut keys. computer: guide. victor tsaran: actually,do you have question mark? let's try.

no, i don't think so. so for those of youwho 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 andk to move between videos. that would be reallycool, but anyway, that's not for me to decide.

so remember about these things. discoverability is a bigthing, and the easier you can make it for screenreader users to discover stuff, the happier theywill be overall. computer: vi-- theater mode. set-- watch later. 100-- mute to-- play button. mute toggle button. victor tsaran: solet's mute this.

computer: 1-- unmutetoggle button. victor tsaran: good. so that works really well. computer: pressunmute toggle button. 1-- mute toggle-- victor tsaran: ok, so let'shave a look at the settings for-- i understand this isthe settings for the video. watch later button. settings button.

this is settings for the video. is that correct? my assumption's correct? or this is for the player. victor tsaran: see you guysare, yourself, you're not sure. just kidding. so maybe a betterlabel would be, potentially, butthat's only level two. so anyway, let's goto 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 divcame up on the screen and it's reading thecontents of the whole div. i mean, you know, whatever. i will not worry aboutthat particular part,

but what i'm worried aboutis the actual controls. so let's have a quick look. i'm gonna tabthrough this thing. computer: on button. victor tsaran: i'm just pausingso you guys have a chance to process it. ok, let's go next. computer: off button. victor tsaran: hm, ok.

are these two separate thingsor part of the same thing? oh, it's even worse. yeah, thanks. computer: normal button. victor tsaran: who arewe talking about here. victor tsaran: right. this is a speed, soit's really a combo box. yeah, thanks for lettingme know, by the way. that's good.

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.

so but this says-- it's notclear because it says auto and then, it says 300-- computer: auto, leftparen, 360p, right-- victor tsaran: oh, ok. this is the auto, whichis 360-- ok, cool. so but i assume this isalso drop down, then. so let's press enter onthis and see what happens. computer: 360p,240p, auto, group. so the new div came up.

let me see if ican use arrow keys. nope. 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 userpoint of view, it's

confusing because now,you don't actually know this is drop down. it looks like separate controls,and because they don't really have labels, you could easilyget confused by thinking, oh, these are totallythree different things i'm looking at. so you can see thedrop down's different, and i see this allover youtube, so i'm just showingyou some examples.

i assume you guys are gonnabe doing your homework. but the drop down isdefinitely something i would like youguys to see, looking at because youhave a lot of them, and they're super important. because a lot ofthat stuff allows you to configure youryoutube experience, so i think this is definitelysomething worth looking at. ok, so i press escape.

i don't exactlyknow-- i presume. i don't know if itcollapsed anything. computer: play button. search bu-- victor tsaran: i think itcollapsed the settings panel. now, notice one thing. what happened here is--and i see this quite a lot. i keep fightingabout this at paypal as well-- is that what we needin terms of keyboard focus

is every time you collapsean expandable region or div or panels. i'm even afraid to say theright term because there's so many terms, sightpanel, over panel, under panel, floating panel,fly out, fly under, fly over, and so on and so forth. you hear designersusing that term. then you're like, ok, whatever. just call it panel.

anytime there's a panelthat comes up on the screen and the usercollapses it, you want to make sure the focus comesback to the place we started. in your instance, maybeit's less of an issue because you placed me backsomewhere around the play button, but this isnot always the case. so the user may end up,and they're not sure if they're supposedto tab forward or backward because they wantto be where they were before.

so remember, thisrule, very important. whenever you collapse something,your focus should go back to where? you guys tell me. where were before? settings. computer: 65-- play button. mute to-- settings button. victor tsaran: soi want to be here.

there's something else aboutthese so these buttons, in particular, thispanel settings. how would you know actuallythat this is a drop down? you wouldn't know that. because it actually says button. moreover, this settingsactually isn't even a drop down. it's actually anexpandable region. so here i want tomention something. how many of you guysare familiar with aria?

anybody here knows about aria? so wherever wecan, obviously, we encourage people touse native controls. i know that browsers are prettyunforgiving as far as letting us to style native controls,and especially drop downs are really a pain inthe dot, dot, dot. so we need to rely onaria in many instances to make these things accessible. but before we even get toaria which is even the sugar,

really, because it providesimportant semantic information, or i like to callit super semantics, provides this information, butreally, first and foremost, we really need to start withthe keyboard interaction. once you get thatworked out, then we can start working on aria. computer: spotlightsearch text field. safari-- textmate-- victor tsaran: so one of thethings you could be doing here

is-- for those of you-- i heardonly people on the left side said they knowabout aria, so i'll not to go too deep intoit, but essentially, think of aria asauxiliary markup that you can pepperyour html code with, and it'll sort of provideadditional information for the stuff that's notnatively available in html. some good exampleswould be tab panels. computer: tab panels.

victor tsaran: andwe got sliders. there's nothing inhtml like a slider. well, we have somestuff in html5 like type in closerange and stuff, but it's not even supportedwell by old browsers and assistive technology sowe'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. computer: pop-ups. new lot. victor tsaran: so aria, itstands for advanced rich internet applications intow3 spec at this point, and what it is, as i mentioned,it's an additional markup that you can specifyinside your html to give additionalmeaning to your controls.

so let's say we'retalking about settings. what could we dowith the settings to improve thefunctionality there? well we could dosomething like-- computer: less div. victor tsaran: let's just say-- computer: id equals quote. victor tsaran: --id settings-- 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 thiswork better for screen reader users? well, one way we coulddo this, you could say-- computer: o, n,greater, less, button. victor tsaran: youcould say, aria-- computer: aria, dash.

victor tsaran: pop-up-- computer: aria,dash, has greater. victor tsaran: and when youdo that, the screen reader is going to announce,settings button has pop-up. and then, of course, you stillhave to do all your javascript things with keyboard controls,keyboard focus, and stuff like that, but this ishow simple this stuff is. now, there's moreabout aria than this. i was just doingone little example,

but this could be one way youcould replicate this problem. and unfortunately forexpendable, collapsible regions, we don't really havea native solution in html, so we have to relyon aria to provider that auxiliary information. computer: safar-- victor tsaran: ok, so welooked 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, iknew that i would talk-- computer: heading level one--obama advisor skips house-- victor tsaran: soagain, you guys are doing good job herebecause your heading level one is actually thetitle of the video. i really, really like thatbecause if i pulled up the list of headings-- computer: headings, 12 item--two-- one-- obama advi--

victor tsaran: this ismy heading level one. and what i want to seebecause this is the reason i came to this page. computer: heading level-- victor tsaran: there's one. [alert] computer: image--associated press. so the next thing we'regoing to look at-- so we're looking at thevideo which is great.

computer: associated press. headings-- form-- landmarks--images-- five items. youtube home image. [knock] featured under--associated-- featured underscore channeldot jpeg image. associated press image. photo dot jpeg image. default dot jpeg image.

default. victor tsaran: so i'm sure allof you know about alt text. so i do want to mention acouple of things about alt text because marcel toldme there are always lot of questions about this. it's one of thoseinteresting topics that while soseemingly tiny compared to other interestingand complex things we have to deal withtoday in web 2.0,

but it is yet theone that's often overlooked becauseit so much has to do with the way weperceive information that it's oftentimes not easy toanalyze it by a computer. so a couple of things iwant to point out here. i'm looking at a coupleof images on this page. there is one you wouldn'tnotice doesn't have an alt text. this guy. computer: associated--featured underscore

channel dot jpeg image. and then, there area couple of others i wanted to let you know about. computer: photo dot jpeg image. victor tsaran: and this guy. computer: defaultdot jpeg image. victor tsaran: so what iwould suggest because you guys are using the littlethumbnails on youtube, and your images are an importantpart of sort of experience

to enhance how peoplelook at youtube. think carefully. not every image needs tohave an alt attribute. some images,perhaps, it's better if they don't evenhave 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 gothrough this stuff and i was like, i hear photo.

i don't know whatphoto it is, so if you want to really providea good experience, you either put inenough metadata to say what kind of photo it isor just maybe even completely silence it. or things like default. i don't even know whatexactly this is referring to. computer: default dot jpeg. victor tsaran:let's have a look.

computer: upload. guide. collapsed-- victor tsaran: i don'teven know where it was. anyway, so-- computer: textmate. left-- new-- [knocking] victor tsaran: it'svery simple, again, if you want to have your imagesand have no alt text, you just

put empty-- computer: alt equal. victor tsaran:--around this stuff, and basically, you're tellingthe screen reader, shut up. there's no image. forget about it. 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 ifit's obama's picture-- i don't know whathappened, like obama-- computer: alt, atthe white house. victor tsaran: maybe youcan put the word "photo." computer: left paren, quote,new lo-- alt equals, quote, obama at the white house, leftparen, photo, right paren, quote. victor tsaran: soi always prefer

if you do want to say thatit's a photo or a thumbnail, put it at the very endbecause ultimately, user is going to know that it'san image because the screen reader is alreadygoing to tell them, image, blah, blah, blah, blah. so really, they just needto know that it's an image, and if you don't haveenough information just get rid of that stuff. it's really probablywasting your bytes as well.

victor tsaran: yeah,those are the things you guys have a lot of. computer: button. victor tsaran: do you knowwhat those things are actually? i don't even know. victor tsaran: oh,let me move the focus. victor tsaran: can you see now? oh, google+. victor tsaran: oh.

victor tsaran: so this is liketo sign on to-- no, what is it? victor tsaran: ok, sothen we need to talk. so this is a widget that youprobably inject from google+. computer: image. this is another veryinteresting pattern that occurs quite a loton using content websites. when you have a thumbnailor a logo of a company, and you wanted tomake it clickable. so you can't reallywrap it up with an href,

so what we end up doing isthat we have two tab stops. we end up with two tab stop. i don't thinkthat's intentional. one tab stop is aclickable image. in this case, it's alog of associated press, if i understand thiscorrectly, and the other one is the actual-- i wouldimagine it's a website. let's just check this. computer: https://www.youtube.com/channel/uc52--

victor tsaran: this is gonnatake me to their channel. let's look at theurl on their image. asso-- https://www.youtube.com/channel/-- so you see we have the sametarget, but two tap stops. so if i'm looking at the channelthat has a bunch of videos, it basically means that ihave to tab twice per video. so there's a bunch ofsolutions people thought about. one idea would be to usetab index equals minus 1. so you can take thestuff out of tab order.

another thing maybeto think about, maybe this is where youdon't want to make into href. make it a clickable element, butat least a screen reader user isn't going to beable to tap to that. so i leave it up to you howyou guys solve this problem, but i just wanted to show itto you that this is actually occurring quite a lot. i like this. like button.

i see this quite a lot. obviously, i want to likeor dislike the videos, and-- computer: unsubscribe button. associated-- button. what's this one? so that's quite important. so you see you guys,already labels. even if all of you did justgo through all of these things and make sure youhave accessible names,

you'd be like 70% good. anyway, let's go tab again. computer: i like this-- victor tsaran: yes, sorry. victor tsaran: if you use adisable attribute, it will. so use eitherdisable attribute-- we can also use an aria element. aria, there'sdisabled equals true. but if you can, iwould use disable

because it's probably gonnaalso expose it to the browser. so you do you have that. and it'll definitely--it's gonna tell me dimmed orsomething like that. it depends on the screen reader. voiceover on the mac isgonna tell you dimmed, and voiceover on windowsis gonna say grayed out. they have different terminology,but it will say something. victor tsaran: i likethis like like what?

it's like an oxymoron. victor tsaran: so what should ido now if i-- like do i like it or dislike it? anyway, you get the idea. computer: i dislike this button. victor tsaran: it actuallysounds kind of cool. i dislike this button. see? it's like--

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 youhave the same problem with-- i've seen it. i can't rememberright now, but there's a button when they askyou 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. victor tsaran: no, i will.

yeah, ok. victor tsaran: yeah, itseems like it's been fixed. it used to be thesame problem, but it would say subscribed,unsubscribed, subscribed, like three times orsomething, similar to what we see with "i likethis like," but i think maybe somebody alreadyfigured that out. computer: i like--i dislike-- about. share.

victor tsaran: let's look at thesharing one because that's-- i think we're gonna-- computer:http://youtu.be/lhvlumlig3g content selected edit text. so even though this is superobvious that this is a url, some kind of label would bereally nice that says something like url to shareor address to share. so for me this is obvious. i read [inaudible] http.

i mean, maybe otherusers don't know. is it a tweet widget? is it a share? so keeping the labels inmine, and let's actually see if there's alabel on the screen. computer: http:-- http-- start at, colon-- http:-- i don't think there's a label. so you rely on the fact that thevisual users know what it is.

so do you do in this situation? so i'm gonna give youa couple of things. computer: textmate-- text-- victor tsaran: let's say yourdesigners 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 toaria, so we have, again,

a possibility here. if i have-- computer: less input. type equal-- victor tsaran: i'mnot gonna use quotes. i'll save myself a bit of time. type equals text, andblah, blah, blah-- computer: period. victor tsaran: i'm gonna say--

computer: greater. victor tsaran: --there'ssome kind of url. computer: left bracket. greater. left bracket. url. address. slash less. computer: new line.

victor tsaran: let it be. computer: less-- y-- t-- victor tsaran: sowhat you can do is-- computer: tango. victor tsaran: aria providesyou with a really cool attribute called aria label. aria, dash, lab-- victor tsaran: here i can say [interposing voices]

victor tsaran: so when thescreen reader notices this, it's gonna read it asif it was a valid label. so this is perfectin situations where you know visually it'sso apparent that you're sharing the url. it's like why do we even bother. but again, remember, youcan not always rely on that, so you have aria labelattribute that you can use in this instance.

victor tsaran: yeah,this is a great question. dragon, naturallyspeaking, isn't known to supportaria unfortunately, and we've been fightingwith them-- well, we, i can't saythat i have been, but the communityhas been fighting with them becauseunfortunately, they think of themselves--well, unfortunately-- they think of themselvesas a mainstream tool

and as a result, yes, they arean accessibility tool, assisted technological tool, butthey don't go as far as supporting some of theaccessibility standards. so you wouldn't be ableto say click on url to share or something like that. it wouldn't understand it. but-- victor tsaran: sorry? victor tsaran: well,not me, personally,

but there are people whoare hammering [inaudible]. victor tsaran: no, ithas the same effect as the label for tag. and by the way, theproblem with placeholders that there can be-- well, ifyou use a placeholder the way it's supposed to be whichis use an html placeholder. then, it's ok. but if you use placeholderas some people do, which will place atext in the field

and we think it's alabel, it's not advisory because the problemis that when you move your focus into the field,the label disappears usually. well, then that meansthe screen reader isn't gonna know what'sthe label of this field. so let me justfinish this widget, and then, we canget to questions. computer: space. space.

victor tsaran: i'm justtabbing, by the way. oh, wait. victor tsaran: apologies. safari. victor tsaran: my mistake. http:-- 0:07 content selected. edit text. victor tsaran:see, this is where it would get reallysuper confusing.

so now, somebody'sgoing what is this. it's probablysomething about time. you guys know whatit is visually. you know it's to start. this is, by the way, a reallycool feature, the coolest ever. i love this, and the fact youcan even look at it through api is even super cool. anyway-- computer: shareyour thoughts group.

victor tsaran:share your thoughts, i guess it's like a div. let's look at this. computer: top commentstext, one of one. victor tsaran: ooh. computer: leaving list box. share your thoughtsgr-- new line. insertion on word [beep]

victor tsaran: same thing. so i just hit enter in"share your thoughts." victor tsaran: and i'min some kind of rich text which i assume i canprobably type in. leaving frame. 0:-- ht-- share-- button. http-- button. share to livejournal button. victor tsaran: who'susing livejournal still?

wow. computer: ht-- share todigg button list, 13 items. share to button. victor tsaran: and this guy? yeah, i guess-- victor tsaran: anyway,you get the idea. so those are some of thethings, just to quickly summarize for you guys again. so the heading structureyou're doing really

well from what i've seen so far. remember about thelabels on form fields, on buttons, andthings like that. we don't want to hear button,button, button, button. alt text-- if you don'thave enough information for the images, just usealt equals empty quotes. otherwise, providesomething meaningful. drop downs andexpandable panels. use aria.

we have aria pop-upand so on and so forth. this is probably aseparate conversation, but aria is verypowerful that way. and yeah, i think, then, wecan just get to questions. i did want to mention somethingthat i talked to marcel about. i noticed that youguys are refreshing the content on some pages. the middle of thepage gets refreshed. that's causing somereally weird things

because the keyboard focusgets totally screwed up. especially in chrome,for some reason, i see this morethan in safari, is that i will be lookingat the list of videos, and then, suddenly, myfocus jumps somewhere else completely. so that's something maybe wecan talk after if you guys can get together forlunch or whatever. we can chat about this.

i see this is as oneof the big problems. should we go toquestions quickly? male speaker 3: yeah,have some questions here. one is regarding the[inaudible] and also [inaudible] mobile [inaudible]information [inaudible]. victor tsaran: yeah. those are great questions. so the skip ad ididn't get to, but it's one of things that actuallyhas [inaudible] annoying.

so i tried to reproduceit because-- yeah. but it was hard because everytime we'd go to a video, it's either different ador-- so if you guys have any reproduciblescenarios, i'd love to be able to show this to you. so there are two issueswe have with skip ad. number one, whenthe ad is playing, there's actuallyno keyboard control that i was able to ever findthat lets me to actually skip

the advertising. that's number one. so even if i knew that there'sactually a skip function item-- number two,i don't even know that functionality is available. remember we talkedabout discoverability, about keyboard shortcutsand stuff like that? computer: textma-- victor tsaran:one little trick i

want to show, but becareful when using this. computer: new-- less-- new-- victor tsaran: sowhat we have with aria is something calledlive regions. so you can have a hiddenregion on your page that when it gets updated,could be automatically spoken to a screen reader. sometimes, it can be usedon the live data which means the information that'salready on the screen.

sometimes, you canuse it as a way to feed some informationto screen reader users. i prefer the former becausethe few hidden things we have on the page, thebetter for everybody. it's probably less workfor your qa people, less work for translatorsto figure out stuff. but here we go. so we have livearia regions, so-- victor tsaran: --let's saywe have something like--

id equals quote. victor tsaran: i'm justsort of speculating here, and let's say-- computer: less-- lessslash-- less-- id equ-- victor tsaran: we're gonnato have here, when it's 30 seconds into the ad, i'mgonna pop in this screen it says-- victor tsaran and computer:you can now skip this ad. victor tsaran: so theproblem, this is a div.

it's not focused. a screen reader doesn'tknow of its existence. how did you tell the userthat this text has actually been just shown on the screen? one way we can do this is by-- computer: spa-- victor tsaran: --using somethingcalled aria live region. computer: aria-- aria dash. aria dash live equals space.

victor tsaran: so there aretwo types of live regions, polite and assertive. polite will politelywait until the user is done tabbing ortyping or whatever, and then, it's gonna speak. assertive is totally rude. it's like i don't care. i have to tell thisto you right now. so perhaps, let's say,if you were in a chat,

you may not want to beinterrupting the user because, let's say, they aretyping the message, and they're listening to ascreen reader as they type. you don't want to be intruding. so that could be oneof the best examples. so in this instance,because the user probably is mostly listening, i thinkit's ok to be assertive. and so one way to do this, youcould be injecting a stream here, and everytime you inject it,

the screen readeris gonna react. victor tsaran: now,live regions are a little bit interestingbeasts in that, depending on what screenreader you're using, you may need to do a littlebit 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. victor tsaran:oops, i misspelled. [speaking what is being typed] victor tsaran: ariaatomic is attribute that says no matter what,update the live region. i don't want to loseyou at this point. all i wanted to show youguys is that live regions can be used to communicate somechanges on the screen that happen, but for example,the keyboard focus

is not currently pointing at. you can also use,instead of using-- victor tsaran: for example,if you have model-- computer: new li-- victor tsaran: --model alert. you could also beusing something called aria role equals alert. computer: role equ-- victor tsaran: so youbasically place it on the div,

and whenever there is alerton the page, it'll say alert. it's time you goget some coffee. you've been spending too muchtime on youtube or whatever. so aria provides you with allthese interesting attributes, and you can look at this spec. i'm sure marcel would bea good person to talk to. you've spent sometime with aria before. there's a great spec. there's a lot ofstuff on the websites

that shows you goodexamples, but i think because youtubeis so dynamic, you may find somegood applications. be careful though. i do want to warn you. you can overdostuff, and that can have totally adverse results. so as every tool, make sureyou know exactly what you're doing so that youdon'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 actuallyeasier than that. because they did it offscreen, so the message they put up-- let mejust show you actually. victor tsaran: idon't know actually-- computer: new tab.

search google. m-- twitter page has20 links, two headings. if i go to thetop of this page-- computer: visited. language. 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 negativepixel positioning, or they use a clip property. you put a text on thepage, and then, you just do clip rectangle onepixel in all four corners. and so if you're notusing a screen reader, you're not gonnaeven know it's there. so if you use flash-- which ihope you don't-- unfortunately, we don't have an easy wayto detect screen readers in the browser at this point.

there was a way ofdoing 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 suggestedto me on twitter today in the morning is thatif there was a setting that the user could go toand just check a check box, play video automatically,that would be kind of cool. so this way, you don'tget your business folks

upset, but at the sametime, the users who know that thereis a setting, they could just go in andcheck the check box. and from then on,they're not gonna have their videoplaying automatically. victor tsaran: what? no, i totallyunderstand, but what if-- victor tsaran: it could be. then, you have tomake sure you're

write it for all browsers. victor tsaran: so i wasthinking the setting could be-- but they don't evenwant people to be able to turn off the feature. but what if it couldbe another analytics? how many people actuallyturn on the video? so you could thinkof it that way, but-- victor tsaran: no, those aregreat discussions to have. i'm not trying to-- look, iwork for business-- i totally

understand the prioritiesand things like that, but i just bring itto your attention that this is aconcern among users. well, the wayvoiceover on mac os solved this problem wasactually pretty smart. they have this featurecalled audio docking, and-- computer: language-- victor tsaran:--what it does if-- computer: reload.

user name or email. victor tsaran: oh, wait. computer: obama adv--button list 13-- victor tsaran: so noticewhat's gonna happen here. computer: right pointing-- -so if you need a vehiclefor your small business-- computer: guide button. - --or even if youthink you don't. i invite you to join me.

the right-- victor tsaran: so younotice what happens. when the video isplaying, the voice over ducks down the video,so that the user can still hear the screen reader. i think it's a prettyclever solution, personally. i don't actually knowwhy 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 usingwindows, then i could see why peoplecould be upset. i'll leave it up you todecide what to do with it. i just thought i'dcommunicate the problem. anyway, anything else? we're done. so i guess if ihave to leave you with one thing it's that iknow it's a little scary. every time you askdevelopers to go and try

with a screen reader,people go, oh, what can i do so i don't have to do it. but honestly, it will openyour eyes to many things that you thought you developedreally well, and so just going through theexperience, it's gonna help you just todiscover a lot of things, not just about accessibility,but just overall. imagine yourselfusing the keyboard. so i would suggest, if you can,spend 10 minutes, 15 minutes,

just going throughthe interface. and just make it into ahabit, and that's just gonna make you abetter programmer and bring you a little closerto how users who are blind, specifically, use yourparticular product. victor tsaran: oh, yeah. so-- yeah, ok. so this is the onei'm using here. it's called voiceover.

it's built into every mac. if you press command-5-- computer: voiceover off. voiceover on. victor tsaran: it's builtin, 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 opensource screen readers, so that's gonna takecare of windows.

and of course, youdo have chromebox in chrome, whichis also a solution. i know marcel toldme that there is a little bit of aconcern among developers that you have to learnhow screen readers work. there is a bit of truth in thatwhich is you do kind of need to know how it operates. for example, remember imentioned at the beginning that tabbing is notthe only thing you

need to do with a screen reader. but honestly speaking, thereare only a few shortcut keys you need to know to beable to be effective. so remember i showedyou this feature? computer: images. victor tsaran: it'scalled web rotor. i can never pronouncethis 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-- rightthere you can already see what's going on here. and then use leftand right arrow keys to switch betweendifferent categories. computer: buttons, 57 items. guide button. search-- play-- mute-- full--theater-- setting-- cap--

watch later-- victor tsaran: you don'teven 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 youguys start realizing why you have 500 links? it's because actuallyi think there's some things on thepage 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 screwedup, but i don't quite

see why this should be a link. i mean, i know you want tomake everything clickable. that's probably the idea. victor tsaran: right, yeah, butthat's not what the links says. victor tsaran: i know. got it. so that's what the link is. so anyways, so then,you know go right again. computer: headings.

victor tsaran: headings. victor tsaran: you've got formcontrols, and so you can use-- search button. victor tsaran: so just usingeven this particular feature, you can quickly seehow well your page is doing with the voice over. and so this is just oneshortcut, control-option-u. victor tsaran: but i'dbe happy to follow up with a couple of links.

i'll make suremarcel to send you a couple of links, somequick guides on how to use a screen reader. i would encourage you,don't stress too much. learn one or twothings about the screen reader, and rely on those. the point is not to makeyou into experienced users. the point is for youto be able to feel comfortable with the tool enoughso you can test for yourself.

thanks so much, and ihope i'll get a change to talk to someof you afterwards. in the googleaccessibility, there's a lot of really cool guys, soyou're gonna have lots of fun. thanks a lot.