Logo TIB AV-Portal Logo TIB AV-Portal

Accessibility (when you don't have time to read the manual)

Video in TIB AV-Portal: Accessibility (when you don't have time to read the manual)

Formal Metadata

Accessibility (when you don't have time to read the manual)
Title of Series
Part Number
Number of Parts
CC Attribution - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
Release Date

Content Metadata

Subject Area
For some, making web applications accessible is a must; Government websites fall under Section 508 and retail sites need to reduce legal risk. But for others it seems like a luxury; Consultants are expensive, and so are the developer hours spent trying to parse the notoriously hard-to-read WCAG 2.0 docs. There is an easier way to start! In this session, we will demystify the WCAG 2.0 basics. We’ll use Chrome Accessibility Dev Tools to discover and fix common issues. You will leave with a set of free and easy-to-use resources to start improving the accessibility of your application today.
Computer animation Alphabet (computer science) Software developer Right angle Software testing Cartesian coordinate system Routing Local ring Social class Formal language
Point (geometry) Web page Vapor barrier State of matter Multiplication sign Mereology Computer icon Sign (mathematics) Videoconferencing Energy level Task (computing) Form (programming) Inheritance (object-oriented programming) Software developer Moment (mathematics) Electronic mailing list Data storage device Shared memory Plastikkarte Cartesian coordinate system Computer animation Website Video game Right angle Musical ensemble Family
Web page Focus (optics) Touchscreen Multiplication sign Keyboard shortcut Online help Line (geometry) Menu (computing) Computer icon Computer animation Videoconferencing Website Form (programming)
Web page Point (geometry) Googol Touchscreen Computer animation Search engine (computing) String (computer science) Website Text editor Cartesian coordinate system
Building Mobile app Information Software developer Electronic mailing list Control flow Arithmetic mean Computer animation Internetworking Reduction of order Website Right angle Convex set Contrast (vision) Spacetime Physical system
Spreadsheet Computer animation Block (periodic table) Software developer Order (biology) Bit Cartesian coordinate system
Web page Point (geometry) Standard deviation Dependent and independent variables Mobile app Touchscreen Regulator gene Information Keyboard shortcut Content (media) Bit Web browser Mereology Element (mathematics) Web 2.0 Degree (graph theory) Revision control Word Latent heat Computer animation Energy level Website Figurate number Reading (process)
Web page NP-hard Scaling (geometry) Computer animation Software developer Shared memory Frustration Freeware
Web page Dot product Email Inheritance (object-oriented programming) Multiplication sign Code Element (mathematics) Cognition Graphical user interface Data mining Message passing Computer animation Bit rate Extension (kinesiology) Computer-assisted translation Renewal theory Form (programming)
Medical imaging Presentation of a group Exterior algebra Computer animation Patch (Unix) 1 (number) output Bit Right angle Form (programming)
Medical imaging Category of being Exterior algebra Computer animation Source code 1 (number) Contrast (vision) Cartesian coordinate system Graph coloring Machine vision Element (mathematics)
Context awareness Word Touchscreen Link (knot theory) Information Charge carrier Bit
Computer animation Website
Web page Default (computer science) Word Arithmetic mean Touchscreen Computer animation Causality Content (media) Website Set (mathematics) Formal language
Web page Mobile app Building INTEGRAL Multiplication sign Set (mathematics) Checklist Graph coloring Field (computer science) Bookmark (World Wide Web) Theory Element (mathematics) Product (business) Web 2.0 Medical imaging Inclusion map Different (Kate Ryan album) Operator (mathematics) Software design pattern Cuboid Software testing Contrast (vision) Plug-in (computing) Descriptive statistics Form (programming) Email Touchscreen Information Keyboard shortcut Bit Maxima and minima Cartesian coordinate system Graphical user interface Wave Arithmetic mean Process (computing) Computer animation Blog output Website Natural language Quicksort Figurate number Freeware Window
Web page Mobile app Functional (mathematics) State of matter Code Menu (computing) Mereology Disk read-and-write head Semantics (computer science) Information technology consulting Power (physics) Number Element (mathematics) Web 2.0 Medical imaging Mathematics Software testing Arrow of time Error message Descriptive statistics Area Graphics tablet Touchscreen Inheritance (object-oriented programming) Software developer Closed set Shared memory Content (media) Electronic mailing list Counting Sound effect Graphical user interface Googol Computer animation Personal digital assistant Order (biology) Natural language Window
Web page Complex (psychology) Slide rule Mobile app Service (economics) Multiplication sign Ultraviolet photoelectron spectroscopy Drop (liquid) Mereology Disk read-and-write head Graph coloring Formal language Product (business) Web 2.0 Medical imaging Mathematics Different (Kate Ryan album) Internetworking Energy level Software testing Acoustic shadow Contrast (vision) Office suite Form (programming) Area Overlay-Netz Multiplication Standard deviation Touchscreen Information Feedback Bit Demoscene Process (computing) Integrated development environment Blog Free variables and bound variables Ranking Quicksort Asynchronous Transfer Mode
these were around here and now can you hear me perfect LU back forget fantastic I'm Katie Walsh and I'm an application developer at a global payments company we help small business owners succeed online and I have always been obsessed with languages so 1 summer right after college I had the opportunity to study the Persian language and a country called Tajikistan and this is great because I was able to converse with native speakers the catch was that the alphabet at that I studied in the classroom was different from the alphabet that they use in Tajikistan so it's my 1st week there Friday through the PM I've had a long tests I get a class and I'm hungry like this quiet and maybe he angry and I think man all I want is a sneakers now here's the thing it's August and it's Ramadan so the locals have been fasting since some and it would be pretty route from you walk up to be like a working on it some candy so I think unresourceful person person I will find a Snickers bar so I walk out on the main avenue
reality of male and again is is there are a ton of shots and I know that at least 1 of them was only a Snickers bar the problem is I cannot read a single sign and I am a solo unaccompanied Western woman wandering around by myself I decided not a good idea to just start wandering into random doors some walking down the street and my glucose levels are dropping and I see this little kid he like 10 years old he's playing with a soccer ball and I want to I say person hello can you please read the sign across the street from me and looks at me like I might be crazy but here it's the sign and it turned out that was a barber shop go so I think thinking person can you read the next time please at this point she just starts laughing at me because here I am a grown adult who can speak to him who cannot read any of the shop clock but he reads it for me and it's a convenience store so I think the boy I want to the convenience store I buy my sneakers and it is still much lists but here was the crazy thing about that experience for me I had money in my pocket and I was highly highly motivated to spend it the issue was that there was a barrier to entry to that local economy for me and I became dependent on some kid have never met before to know where to go to buy my sneakers and that the was frustrating Have you ever felt that way dependent on someone else to accomplish a simple task like he ever on crutches and you get up to the door in the opera moment where like do I wait for some and open it are do I like to perch on 1 correction and like use the other 1 to push the button it's really awkward for we've all been at that point sometime analyzing were located were dependent on her parents to do everything the part of life there's nothing wrong with that but not being able to accomplish the tasks we want to independently it can be frustrating and sometimes maybe you have other people depend on you so I don't know if you guys had the experience when mom and dad and grandma grandpa this idea smart home and suddenly everyone in the family is dependent on you to operate the cell phone yeah that can be frustrating all around we is developers want to make sure that are users don't feel this way when they're using our application and as businesses we want to make sure where there are users want to spend money with us they can't easily and simply as possible right this goes for all of our users and that's why we're talking about accessibility today so what I wanna do today is go over some of the basic principles and then share with you guys out some of my tools that I used to make our site more accessible that our free in and pretty simple to get started with Morgan actually build a light coating so bear with me should be fun and then I will save time at the end of so if you'll have questions I would love to hear them and I would love to start a dialog with you guys so 1st of popular
than at early but we have to say every year 1 on the left side and a has got some pictures it's that's icons and I think it's got some videos somewhere else on the page say B on the right just a simple form couple nameplates couple buttons I'd say a quick poll who thinks cite a is more accessible very they've got a couple who thinks that B is probably more accessible but I think we have a couple more for state B so let's try this out so society by the BBC
and we're going to test it as if we are at a user who relies on the keyboard so I can start the tab through and I've got this nice little line here that tells me where I am on the page and when I start on the underpaid actually a little but this is accessibility help on some other site and called skip to content so that if I'm a screen reader user I don't have to listen to this entire menu every time I get a new page so the is actually done a really great job at making their content accessible in another that video and pictures icons everything such take a look at St.
B the principle of form from keyboard users time it and I have no idea where I am that the really frustrating experience I don't know where I am I don't know when to hit enter a donor wintertime name so they take away at my focus so I don't know where to go and 1 of the things I wanted to dispel today is the myth that to have an accessible site and it has to the text only or ugly or simple phrase you can have a really nice accessible sites so what is accessibility
I like the definition from the Google SEO started it's the ability for users and search engines to accessing comprehend continent it's that simple 1 of the things are going to see about accessibility it as you make your site more accessible you get great side benefits 1 which is as you know think about it a google search but does not have eyes it does not have years it relies on your dont understand what's on your page at the same way the screen reader works so I made my own super simple definition which is accessibility is making it possible for all users to use your website so now the question is why and I'd like to
point to max out we have a saying really is 1 that's a nice and so we are nice so let's be nice to all of our users make it easy for them to you their applications according to a wedding in approximately 20 per cent of the population had some kind of disability that is 1 5th of your potential users you wanna make sure that a hundred per cent of your users can use your sites OK so we're all nice people really that's cool but I accessibility it sounds bigger it sounds expensive how do we can the people with the purse strings the editor a priority for us
answer quick disclaimer not a lawyer do not take legal advice for me I will not give it but I can tell you that soon insights for being inaccessible is the thing is the thing that is happening more often I you want more information on this Karl growth has a pretty comprehensive list of litigation I am n breaks a lot about this topic but what does this mean for us as developers the folks at what name put it like this when the Americans with Disabilities Act was 1st passed you said to kind of architects the regular architects and then the accessibility architects to build the building and the new hire this extra architect common and build a wheelchair ramp today and 2017 there's only 1 kind of architects and they all know how to build accessible buildings so for us developers going forward there may be kind of a deletion right now between accessibility developers and other developers but in the future as this becomes more and more important in the legal space that means that all of us are going to have to know how to build accessible user interfaces the other thing to keep in
mind is that we can all benefit From accessible sites not all disabilities are permanent but I see a couple pairs of glasses in the room anybody else were contacts or glasses OK nice I am not alone but so that the system technology my contacts allow me to come up the stairs without tripping over myself just great very thankful for and there are all kinds of things that we don't think about that they qualify as disability so for example there are people who are permanently death and cannot hear but what if you have an ear infection you can here for a couple days doesn't mean you should be able to use the internet right or meaning it situational you guys ever been like a really loud bar and you cannot hear anything you're just nodding and smiling at the person across from you have you're going to make it up so they're all over the place so making your app accessible helps everyone so I think we're going your app could you use it if you sprain your wrists and I K is a mouse of my left hand of the hard with your convex fill out what if you're outside on a sunny day is your site have enough contrast the could see it on your phone reduce use your app after 3 shots Keeler it so the
uses a technology a monthly a little bit about how I got into this so I was the new kid on the block the company and I was super ego and the common understanding you I and the other nucleated and get your very own sprint and I was so excited and they said yeah we have to this thing called accessibility and we've got this order from a third-party vendor some send you spreadsheet and you can you know implemented such cool
and the spreadsheet and that there were 330 things wrong with our applications so that was a little intimidating and I started to think about it and I started to panic a little bit but I but hey I'm a developer
and a figure this out and so the 1st thing I'm the you obviously is will it's if and I found the Web Content Accessibility Guidelines 2 . 0 which would like to call the tag and release the and this is the industry standard it's written by the w 3 c and there were 3 levels oscillates at the basic level little double a is the standard and that's where a lot of the but governmental regulations and things stands and multiple a is what I like to call the superstar you may not be able to make everything level triple-A but it's always nice to try the and therefore
main principles and they can really spell out the words on the 1st on is that your website should be perceivable so I tend to receive a websites information with my eyes however there are some users who rely on screen readers and they perceive it as you know it's spoken sound the 2nd is that your website should be operable so if you're a keyboard user the Sheila tell where on the page you and you should always be able to interact with the same elements as the 1 thing we often see in that's he don't use a button and then use it did and you at all the stuff in the response on click you wanna make sure also responds to enter the the 3rd is that your website should be understandable do you have clear concise easy to understand guidelines can people figure out how to use your app and the 4th is robust accessibility should more or less the browser agnostic so if you support a specific browser version that should also be accessible OK so at this point I have found the guidelines I had found the principles Panos killed a little bit better and part of what I do now but I I read the friendly manual because that's what we do and my degree is actually literature so I like to think I'm pretty good at reading
and I picked up this manual which would be over 11 hundred pages if you were to print out and according to my own scale on a scale Doctor Seuss tumor-cell perused the weekend that mutation is just after James Joyce like it's hard stuff to read a hands I can be a little bit frustrating as a developer is like what is going on so that's myself in there
an easier way to get started and mind news to you today is there is there are a ton of free easy-to-use resources out there and accessibility to have to be this giant scary thing you can start with something easier and so what I wanna share with you
today is the accessibility dubbed tools for Chrome the couple reason I like these I what is the in Chrome the extension they're totally free and I already spend a lot of time there anyway so it feels kind of familiar I love the little red yellow green dots reminds me of like TTD in warriors doesn't love that OK so renewal the light coding bear with me OK so this is
my super weird pump postcard page simple and form and I'll make sure that it's accessible so i come over in my consul to the ordered stand I choose accessibility and I'm gonna click run the OK so we've got a couple issues here the risk of half a 1 by 1 so 1st onset they control the new elements should have labels and it's referring to these 2 elements here this they might be thinking like others placeholder tax rate how many of you have ever started to take your e-mail and then you get a slap message and if the captive and it's a really cute cat given now you have to go get another cat gift to send back because you want to reciprocate the can straight see back is formed here are a must and then take the my e-mail cool and then you get here and you're like 0 now I was taking mining it's now I have to go back the and I have to start all over for me that's annoying but for someone I with a cognitive issue like ADHD this is incredibly frustrating so let's get some visible text of the
but so where is add a label colonies any uses the 4 at tributes and I'm going to put in the ID of the inputs and what that is going to do for us is programmatically associate the label With that inputs no impact was go back and try
this again k you were gonna run an audience fantastic that one's gone so 1 of the tricks about using the for actually you is now when I click on name I actually get into that inputs which is really helpful if you've ever been on a form in your phone and you're like you're trying to hit that input in you just can't get it so frustrating right but this gives us a little bit more namespace so if by fattening or something I can still good and bad inputs so take a look at the next 1 it is should have the text alternative or presentational role so the image conveys some kind of meaning if someone cannot perceive that and visually we want to give them some tax so they can know what's going on and I don't know about you but I feel like a missing out on a fine if you can't see this colored pink unicorn costume city pumpkin patch for no apparent reason Simon go
into my image source I'm going to add some alternative texts but see pardon think in that's what
you can around order cool right right to left text elements should have a reasonable contrast ratio so the weekend to point out that that you need to have a certain amount contrasts on your tax so people can read it but this is important for any uses of might have vision issues is also really important if you're outside on a sunny day Chinese your application so this text appear is not agree color and 1 of the things I love about these tools as I'm inspecting element and I can go over here to accessibility properties and it will actually tell me that my contrast ratio is insufficient and I can try out some new ones so this is level double and which is a 3 contrast ratios and then the 4 . 0 is the triple-A but she stars with interpolated today so I'm going to replace that In my
CSS but but
straight and anyway on left off of the purpose of each link should be clear from the link text so over here we have this link that just says click here now if I am a screen reader user and having through I'm not going to hear all that information that comes before don't know what a happened post carriers and so I don't have any context for the words Click here like why when I click here you haven't given me a good reason so we want to make sure that the link is a little bit more information the a check with the other 1
and so the same Click here will say learn more about and was hertz can more than refresh you can run
on it and got got all agree feels good in the in about this 1 other thing I want to show you guys which is super simple to add your website and we often forget about them
is red appear in the top I got HTML language equals English and it's really easy when American everybody speaks English word you know Primarolo bubble wrap think about it I am but this is really important for screenreaders because of I'm a user who is I set up my screen reader to default to a different language and I get to your web page and you don't tell me the language going to try to pronounce all your content in my own language which sounds really really weird the other benefit that you're going to get for making sure that you always include the language is that if you user comes to your site you guys seen the Google Translate of body parts of at the top it relies on that to know what your content is so you also and help users who maybe speak another language for are had the default settings and different 1 I've causal mean everyone AmericaSpeaks english that was ironic joke of OK those go over how
out now these automated tools are fantastic and I love them and the easy to use but they're not enough they cannot catch everything you do you have to have some human testing so go through Europe out with an automated tool you know go through those issues fix them then go through your app with keyboard navigation if you can hit tab if you can interact with all the elements can you submit the farms can you hit the buttons and then tested with a screen reader and this 1 takes a little bit of time to get comfortable with but I see a lot of maximum there's actually built in screen reader on Mac it's called voice over and you can use that to tester chrome also has a free plugin called from box 3 easy install and if you're working on Windows there's MEDA which is also a free swinger so 3 couple quick we
have our poor principles pursuable operable understandable and robust and under perceivable way but that's 2 issues 1 was that images need alternative text if they convey meaning and we fix that by adding the description of our globe plug in text should have good contrast we fix that by changing the color of our our header the next 1 is that should be operable Symantec should be meaningful so we took away that click here and we added more information to our the next 1 understandable form fields should have visible labels and we accomplished that by adding the 4 at tributes 2 are labels and associating it with the idea of the inputs the other thing is you always want to include the human language of the page that allows readers to know what's going on and it allows Google Translate to know what's going on and robust and they said automated tools are not enough test with a screen reader tests with keyword navigation so promise you guys and share some of my favorite easy use free resources I so 1st of theory is the actual we can t 1 and guidelines they are worth I have to take a look at that time and then maybe cross-referencing with something that's a little easier to read add there's a great book i it's not free but it's very helpful called how to read the we can't 2 . 0 guidelines by Buckner and I like to call that the week I 2 . 0 in plain english I find that 1 very helpful out the web aimed guys have a fantastic checklist for we can't be go through it's free it's on the blog had recommended Our Google has 2 courses that I find in very helpful both free and then I also want to include some resources for your product seen your UX designer there are 2 checklists 1 by box medium 1 by wedding for the product stage when you're still figuring out what you're going to build and 1 of the things that we learned in making ah website accessible it is that it is much easier to create and build something that's accessible then to try to go back and retrofit it I'm so it's great to get that into your process early on and then out to books inclusive design patterns by hidden Pickering others also went for everyone which has a set of personas of different users who rely on different assisted technologies they can help how your product in sort of think about how people might be using your application for testing tools there are time out there I encourage you to go figure out what works for you and come talk to me if you find cool stuff I'm still on the search for a good CI and so we use the crown accessibility tools today and there's also a great wonder whether wave tool on it's kind of like a do and it's really easy to see what's going on in your site others 10 I there's axes pally and there's axis let's see I if you're interested in adding this into your continuous and integration and I will post these online all these resources and then as I mentioned there a screen readers for testing so if you've got a mark on iPhone voice-overs built-in and if you have chronic can use come box and the DA is free on windows and jobs is not free but you can do like a 40 minute trials the OK so your
mission should you choose to accept that grab the Chrome dev tools run on a on your app a share screenshot with me intel's effects 1st it's like a super easy 1 which is just under add human language to mational page element be super excited and then combining at happy hour over beer coffee and tell me what I'm super interested to hear what you guys are doing and accessibility and I would love to hear if you have resources to share you know I'm still learning it's a huge huge topic to learn about and the book to learn more so here's the thing we have developers have the power to make sure that our users don't kill frustrating using are out and we also have the power is developers and as a community to decide what is going to be standard practice that in all areas of our code so let's make this standard practice for the rails community let's make it best practice to have text contrasts the have human languages have all text who can do that and that's really exciting so even if you're not a company that has the resources to hire an expensive consultants where do an entire third-party audits you can run a simple dev tools order on your app and you can make a few changes there so I hope that you'll join me in working to make a more accessible web and so c and then a lot of talking so I love to hear your question I think is happening for me yet that states is when you 1st try this the year of the what analysts there's not working right or by the the the the images herself on China as being the 1st part of the yeah absolutely that's a good question and so I can actually show you my voice over right now so 1 of the helpful things to do is that if you're using pro-marxist test on crown if you're using voice over test on safari but I don't know what the preferred 1 is 4 and the DA but if you stick to Mackinac for google that tends to minimize the number of errors changes of the Cowboys over works so do command function F 5 voiceover speaks descriptions of items on the screen the voice over on trying to the pad count window to the pad close can web content landmarks
menu he'll currently voice menu this is a list of voice over many orchards to navigate ependymal list use the arrow keys to choose a menu item press Return to put something you press Escape OK so for 10 users they often have to your screen they're actually they might be looking at that 1st screen reader user is what the majority of them are going to do when they 1st get a web page is they're going to go to this menu windows parchment bluesman menu killings menu and they're look your headings and so in this case we've got a nice heading 1 which tell them where we are are so it's really important to make sure we got semantic headings somebody back to your question voiceover actually has a tutorial where 1st pops up I recommend going through that and from Marx also has a pretty good 1 yeah sometimes it's it's not easy to get started I totally understand it took me a while I'm just playing around with it and trying to it's in the pad close can voiceover off
the Internet office 2nd there's also a really great resource on well-being and on their blog about how to start with screen readers and then got 1 for voice over 1 friend the DA and 1 for jars and I'll post that along with uh my slides that yes In the I've so she asked if there's any places were web accessibility might seem counterintuitive and I think originally for art scene the idea that we have to have this form labels for every form with a little bit I tough to swallow at 1st because we were so used to using placeholder text and it seems to be doing the same thing but at the end of the day when we added that and we have that extra little clicker area we found that it was better that is an excellent question I'm and as you get into so what asking about was if you have a complex that a chart or if you have a I you may be an image with a lot of different things going on with the best way to do that as so I haven't had the opportunity to work with something like that but there is a great resource and also on the web blog on how to deal with complex charts and how to give that information and I compose that is well that's very question so as question was if we can have multiple pages which we can and so you can actually go and so Our with c I know I know that you can put it on until you can actually add the language in multiple parts of the page so if you have like you know a French page and then you have a chunk of German you can add language equals the 2 that chunk where you have a quote so it's possible to use that to make it will thanks that all but the really good question so she was asking if there's any places where you can get feedback from users who are using a screen reader or for the user testing in general by rank I simply have worked with any of those at all but I do know there are some services the even higher out to an end they will have users go through your app and give feedback on I don't know any off the top of my head but I can use in research the back you thanks so he asked if I would ever run into an issue where adding label the change in contrast has resulted in push back from a design thing absolutely which I and that's why I highly recommend gravitinos product environments and having uh 1 nice little sit down with your product semen and talking about how they can integrate accessibility into making new ups but yet it's definitely a process and a negotiation and when you have to change existing designs yeah not alone yeah I mean I think 1 of the yes we compromise with our design team to make sure that we we can meet the standards are 1 of the things we did was we kind of said like level double is were shooting for and syllable triple-A does require a pretty strong contrast I so we didn't go quite that far for a text of the other things we found is you can do things like adding outlines or adding drop shadows and having that little bit of dark around the text itself means that you have contrasts with that instead of contrast with the back color and we also have a couple places were we used overlays so we put a dark overlay and we put the tax on top and that ends up being sort of a more elegant solution and changing all the colors thank you yeah so he was asking of mobile devices have accessibility stuff the iPhone is actually got a fantastic accessibility set up it has voice over and you can put it into accessibility mode so when you tap you after double to actually go into something because it reads the the title so thank you and so that's all time have today but I would love to start years later if you wanna chat accessibility thank you at the that so
Farah based on what