CSSConf US 2014

Mejorando la accesibilidad basada en teclado

Marcy Sutton  · 

Transcripción

Extracto de la transcripción automática del vídeo realizada por YouTube.

so this is kind of an impromptu talk that I decided needed to happen because I see really inaccessible stuff on the web all the time and just this last week I saw a website that was very popular and I decided that because it was popular but it was inaccessible

it was worth talking about it a little more so I'm going to talk about keyboard accessibility and I'm Marcy Sutton I'm a developer at substantial in Seattle which is a 60 ish person product development studio and i build websites and mobile apps

there it's not really an accessibility shop but I add accessibility to all of my projects whenever I can so out of any of us have any of us broken an arm before have you ever broken your arm have you ever run out of batteries in your mouse and had to use

your keyboard all right so you have a reason may be that you can't use a mouse what about if your vision impaired or blind I mean you guys are looking around the room doesn't seem likely but maybe you know somebody that is all of a sudden you find

that you can't use the mouse and it really sucks when somebody hasn't taken the time to enable the keyboard it doesn't have to be that way either we can make things accessible with a little bit of effort so because this is an impromptu you talk

I'm just going to do some demos and we can see what happens so the first demo I want to do is of whitehouse gov it's actually it has some alternative text in it it's not the worse for accessibility but for keyboards it's pretty awful when I

first looked at the site I was using a mouse so I could go around the website and see these big hover menus but if I start tabbing through the website I get a dotted outline around the logo and some visual feedback but not much and then I get lost I don't

know where I am I can look down at the status bar and see that the URL is changing but I have no visual feedback if I go back into the menu where am I I don't even know where I am video I happen to know that the video link is in the photos and video tab

of the hover menu all they had to do was enable this menu from the keyboard it might have taken some CSS or it would definitely be some CSS it might have taken a little bit of JavaScript but it's really not rocket science to make this work with the keyboard

that's one pretty simple example that there's no reason for it like you can make that work a lot better so I mentioned a website that people have been talking about a lot that they were all oh wow look at how they stream lines that work the workflow

to buy a plane ticket compared to united com it's you know so many screens less to make it through this workflow but the website is not accessible it's pretty bad so it's virgin america it's their beta website I get that it's a beta site

I don't want to be too harsh on them because I know that things are a work in progress but given all of the Polish and the yay we made it more fun to navigate but then the blatant disregard for a keyword or screen reader is really unfortunate so when I

first looked at the site I started tabbing around the page and again I see the status bar changing at the bottom but I have no visual feedback I have no idea what's going on here if I hover I get some feedback but nothing if you want to use a keyboard

at all and so it's really a bummer when I test a website like this I have a couple different tools see can we hear that i turn on voiceover on my Mac just by hitting command f5 Fiona laying inside of a list to click this link press control option space

so i can test it with a screen reader to see what does what would a blind person yet so I'm gonna reload the page loaded so I can see some visual feedback but if I'm really using voiceover inside an HTML content if I'm using voiceover it doesn't

matter if I can see it um so I'm just gonna start tabbing like Virgin America okay they put some text there even though it's like an image logo that's good like 0 items okay so i've got some text I'm gonna keep tabbing link link link link

link link flight alerts link Oh God elevate link sign in link sign up link San Francisco okay hold on there were there were buttons there there were these radio buttons right inside an HTML content where how am I can't get to those control options space

if I click one of those buttons it actually you can use the mouse but you can't use the keyboard no you can't like nothing on here can receive focus it's a real bummer trip ah so when I use the mouse to get the focus there then all of a sudden

I can get to it but who's gonna do that the only text element inside of a list multi-city San Francisco linked list six items Boston MA boss link so sometimes the way supper read things out a little funny but we we can see what they made inside the list

[ ... ]

Nota: se han omitido las otras 2.433 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.