WEBVTT 00:00:00.000 --> 00:00:02.999 (Auto-generated by Youtube) I want to thank everyone for being here today 00:00:03.300 --> 00:00:04.880 I'm really excited about this 00:00:04.881 --> 00:00:07.200 topic of accessibility I'm sure you guys 00:00:07.201 --> 00:00:09.679 are too since you're here. My name is Chris LaChance. 00:00:09.680 --> 00:00:12.079 I am a Senior UX designer on the Pega Platform team 00:00:12.080 --> 00:00:14.760 I also am deeply passionate about accessibility 00:00:14.761 --> 00:00:17.279 and work on design systems as well. I 00:00:17.280 --> 00:00:19.119 do a lot of different roles on the Pega 00:00:19.120 --> 00:00:20.400 design team. 00:00:20.401 --> 00:00:23.119 I'm going to give you guys a date to 00:00:23.120 --> 00:00:24.560 start out today. 99 days ago. 00:00:24.561 --> 00:00:27.439 This is not the date I started this presentation or the date that 00:00:27.440 --> 00:00:28.760 Pega started thinking about 00:00:28.761 --> 00:00:30.640 accessibility this is not the date that 00:00:30.641 --> 00:00:32.200 this is how long it took to actually 00:00:32.299 --> 00:00:34.100 make this presentation we're going to 00:00:34.101 --> 00:00:36.960 come back to this date in a minute but I 00:00:36.961 --> 00:00:39.600 want you guys remember 99 days ago 00:00:39.601 --> 00:00:42.320 What actually is accessibility and 00:00:42.321 --> 00:00:44.960 why we should care about it? 00:00:44.961 --> 00:00:46.800 Accessibility just to put it shortly is that 00:00:46.801 --> 00:00:48.800 people with disabilities are able to use 00:00:48.801 --> 00:00:51.360 interact and contribute on the web and 00:00:51.361 --> 00:00:53.199 web applications online 00:00:53.200 --> 00:00:54.960 It's not just for blind people a lot of 00:00:54.961 --> 00:00:56.800 times when people think accessibility 00:00:56.801 --> 00:00:58.879 they think blind but it's actually for 00:00:58.880 --> 00:01:01.280 anybody with a disability today in 00:01:01.281 --> 00:01:03.199 the us there are have one in five people 00:01:03.200 --> 00:01:04.879 that have some sort of disability and 00:01:04.880 --> 00:01:07.520 globally it's 15 uh to give you a little bit of context 00:01:07.521 --> 00:01:09.760 actually we have more disabled people in 00:01:09.761 --> 00:01:12.360 the US than use Internet Explorer according to our government 00:01:12.361 --> 00:01:15.129 If you're only doing stuff render in IE and not 00:01:15.130 --> 00:01:17.020 accessibility, you're missing a big market. 00:01:17.140 --> 00:01:18.960 I really love this specific picture 00:01:18.961 --> 00:01:20.600 because it shows someone with a 00:01:20.601 --> 00:01:22.880 disability being able to compete at an 00:01:22.881 --> 00:01:26.080 olympic level that's what we want our 00:01:26.081 --> 00:01:28.000 applications to do 00:01:28.001 --> 00:01:30.479 um disabilities actually range from 00:01:30.480 --> 00:01:33.360 permanent disabilities like paralysis to situational ones like having 00:01:33.361 --> 00:01:34.960 your arm broken for example where you 00:01:35.061 --> 00:01:36.720 have limited mobility a good example of 00:01:36.721 --> 00:01:38.799 this is in our applications we want to 00:01:38.800 --> 00:01:41.040 make sure our applications have good 00:01:41.041 --> 00:01:44.160 color contrast so people with low vision can see and understand our interfaces 00:01:44.261 --> 00:01:46.399 but for example you might have a 00:01:46.400 --> 00:01:48.799 situational disability - you've come from the eye doctor and 00:01:48.800 --> 00:01:51.040 your eyes have been dilated. You have to turn down the 00:01:51.041 --> 00:01:52.962 brightness on your phone so you can see 00:01:52.963 --> 00:01:54.541 a UI that you might be dealing with 00:01:54.640 --> 00:01:56.240 lift or whatever for example that helps 00:01:56.241 --> 00:01:57.920 you see the screen better with the high 00:01:57.921 --> 00:01:59.540 contrast or maybe you're just outside 00:01:59.541 --> 00:02:01.080 you've got a glare on your screen 00:02:01.081 --> 00:02:02.640 high contrast interfaces help with 00:02:04.641 --> 00:02:06.640 so if anyone here also plans on getting 00:02:06.641 --> 00:02:08.640 older which I'm sure most of us do 00:02:08.800 --> 00:02:11.320 we're going to gain more and more 00:02:11.321 --> 00:02:13.360 disabilities as we get older mobility 00:02:13.361 --> 00:02:16.480 challenges cognitive challenges hearing 00:02:16.481 --> 00:02:18.879 loss etc and we're also doing 00:02:18.880 --> 00:02:20.800 accessibility and accessibility testing 00:02:20.801 --> 00:02:22.640 for ourselves as well as this disabled 00:02:22.641 --> 00:02:23.920 audience so 20 00:02:23.921 --> 00:02:25.199 plus ourselves 00:02:25.200 --> 00:02:28.239 um another reason why we want to care 00:02:28.240 --> 00:02:30.200 about accessibility is lawsuits so I 00:02:30.201 --> 00:02:33.760 don't know how many of you guys know about this but there's been a dramatic 00:02:33.761 --> 00:02:36.520 rise in lawsuits over the last couple 00:02:36.521 --> 00:02:39.040 years 2015 we have 57 lawsuits in total 00:02:39.041 --> 00:02:40.920 for our country that have been measured 00:02:40.921 --> 00:02:43.300 for sure 00:02:43.301 --> 00:02:46.560 262 in 2016 but on this specific date 00:02:46.561 --> 00:02:48.520 august 15th the last time this was this 00:02:48.521 --> 00:02:52.080 tallied this is from january 1 to august 00:02:52.081 --> 00:02:54.560 15th so we already have more lawsuits 00:02:54.561 --> 00:02:57.599 this year as of this date than all of 00:02:57.600 --> 00:02:59.760 2015 and 2016 combined so this thing is 00:02:57.599 --> 00:03:00.280 going through the roof by the end of 00:03:00.281 --> 00:03:02.239 the year it actually looks like it's 00:03:02.240 --> 00:03:04.520 almost going to be three times the 00:03:04.521 --> 00:03:06.800 amount of 2016. very close to it yes 00:03:07.840 --> 00:03:10.880 these are lawsuits against specific um 00:03:10.881 --> 00:03:14.080 uh businesses out there so for example 00:03:14.081 --> 00:03:15.460 like Peapod, Target 00:03:15.461 --> 00:03:18.440 Winn Dixie had a big lawsuit, these are just in general but 00:03:18.441 --> 00:03:20.879 this is something that we do want to be 00:03:20.880 --> 00:03:23.040 mindful of I mean the government itself 00:03:23.041 --> 00:03:24.879 i think if I'm not mistaken has actually 00:03:24.880 --> 00:03:26.799 had a lawsuit come against itself for 00:03:26.800 --> 00:03:28.159 accessibility issues so 00:03:26.799 --> 00:03:29.120 this is actually a real problem and 00:03:29.121 --> 00:03:32.000 something that we want to make sure 00:03:32.001 --> 00:03:33.840 we're avoiding 00:03:33.841 --> 00:03:36.879 today I'm sure most of you are aware of section 508 it's the u.s standard for 00:03:36.882 --> 00:03:39.200 Measuring accessibility of an 00:03:39.201 --> 00:03:40.280 application 00:03:40.281 --> 00:03:42.640 um and this is kind of something that's 00:03:42.641 --> 00:03:45.680 been around since 1998. it was an 00:03:45.681 --> 00:03:48.319 amendment to the rehabilitation act of 00:03:48.320 --> 00:03:50.319 1973 kind of defined what a web 00:03:50.320 --> 00:03:53.280 application looks like and how you meet 00:03:53.281 --> 00:03:54.800 accessibility standards 00:03:54.801 --> 00:03:57.680 however just recently january 18th of 00:03:57.681 --> 00:03:58.960 this year 00:03:58.961 --> 00:04:01.599 section 508 has been refreshed and is 00:04:01.600 --> 00:04:04.040 now pointing back to wike 2 and 00:04:04.041 --> 00:04:07.040 specifically wike 2 a and double a 00:04:07.041 --> 00:04:08.319 standards 00:04:08.320 --> 00:04:11.120 and that was the specific date was 00:04:11.121 --> 00:04:12.959 talking about this july 18 date was the 00:04:11.120 --> 00:04:13.760 deadline for any application that a 00:04:13.761 --> 00:04:15.760 government agency wants to purchase and 00:04:15.761 --> 00:04:16.840 use today 00:04:16.841 --> 00:04:19.520 must be this new standard it's wike 2 00:04:19.521 --> 00:04:22.840 double a and single a 00:04:22.841 --> 00:04:25.480 so what exactly is will cag 2 00:04:25.481 --> 00:04:27.680 this is the international standard for 00:04:27.681 --> 00:04:29.200 measuring accessibility lots of 00:04:29.201 --> 00:04:32.960 governments are using it today uk the eu 00:04:32.961 --> 00:04:34.720 canada now america 00:04:32.960 --> 00:04:36.080 it's broken into four different pieces 00:04:36.081 --> 00:04:38.400 it's broken into this concept of 00:04:38.401 --> 00:04:40.960 perceivable operable understandable and 00:04:40.961 --> 00:04:42.800 robust it's kind of this acronym of poor 00:04:40.960 --> 00:04:43.560 perceivable means that you have good 00:04:43.561 --> 00:04:45.720 color contrast in your application for 00:04:45.721 --> 00:04:47.960 example or maybe that you have when you 00:04:47.961 --> 00:04:49.960 have an image online you have actually 00:04:49.961 --> 00:04:51.880 proper descriptions for it or your media 00:04:51.881 --> 00:04:54.240 you have a transcript for some sort of 00:04:54.241 --> 00:04:56.000 video or movie 00:04:56.001 --> 00:04:57.919 operable is dealing with navigation 00:04:57.920 --> 00:04:59.600 navigating through your application can 00:04:57.919 --> 00:05:00.400 you move through things can you interact 00:05:00.401 --> 00:05:02.960 with the objects on screen using your 00:05:02.961 --> 00:05:04.880 keyboard only 00:05:02.960 --> 00:05:05.640 and additionally we have this concept of 00:05:05.641 --> 00:05:07.400 understandable and that means that 00:05:07.401 --> 00:05:09.480 you've labeled your application well 00:05:09.481 --> 00:05:11.400 that when a screen reader is able to get 00:05:11.401 --> 00:05:13.919 to your application that the outline of 00:05:12.240 --> 00:05:14.720 the application is structured well very 00:05:14.721 --> 00:05:17.280 similar to a word type outline you can 00:05:17.281 --> 00:05:18.960 understand based on your headings of 00:05:17.280 --> 00:05:19.520 where your headings are in application 00:05:19.521 --> 00:05:21.680 what's the next most important thing 00:05:21.681 --> 00:05:23.360 your subheadings your content your 00:05:23.361 --> 00:05:25.039 bullet points etc 00:05:25.040 --> 00:05:26.880 and robust finally is making sure that 00:05:26.881 --> 00:05:29.759 your code is future proof you're using 00:05:29.760 --> 00:05:31.919 semantic html semantic css semantic 00:05:31.920 --> 00:05:34.560 - javascript and all those things have no - errors in them 00:05:35.440 --> 00:05:37.800 So now that we kind of have a general 00:05:37.801 --> 00:05:40.240 understanding vocab 2. I'm not going to 00:05:40.241 --> 00:05:42.320 go into all the details of volcanic 2 00:05:40.240 --> 00:05:43.120 today you guys can look it up online but 00:05:43.121 --> 00:05:46.080 we actually now have this specific 00:05:46.081 --> 00:05:48.720 standard to measure against for testing 00:05:48.721 --> 00:05:50.479 your application for accessibility 00:05:50.480 --> 00:05:52.800 - there are actually four different steps - to test your application 00:05:52.801 --> 00:05:54.480 The first thing you're going to want to 00:05:54.481 --> 00:05:56.240 do is find a way to do an automated 00:05:56.241 --> 00:05:58.479 build process there are a lot of tools 00:05:58.480 --> 00:06:00.319 out there today 00:06:00.320 --> 00:06:02.560 there's one by the queue labs called ax 00:06:02.561 --> 00:06:04.880 core there's also one called tenant and 00:06:04.881 --> 00:06:07.199 pally these are pay pro pay applications 00:06:07.200 --> 00:06:09.039 you can put your build service 00:06:07.199 --> 00:06:09.720 axe core is one of my favorites and i'll 00:06:09.721 --> 00:06:11.840 explain that in a moment but that one's 00:06:11.841 --> 00:06:14.160 actually free as well so if you can find 00:06:14.161 --> 00:06:16.000 a way to get that in your build system 00:06:16.001 --> 00:06:17.759 awesome 00:06:17.760 --> 00:06:20.000 uh if you can't do that or you want to 00:06:17.759 --> 00:06:20.720 test an existing application today what 00:06:20.721 --> 00:06:22.880 you're going to want to do is find some 00:06:22.881 --> 00:06:25.280 sort of extension for your web browser 00:06:25.281 --> 00:06:27.360 so acts the same people who make axe 00:06:27.361 --> 00:06:29.199 core with the cue labs what they do is 00:06:29.200 --> 00:06:30.960 they actually build an extension that 00:06:30.961 --> 00:06:33.039 helps you be able to go through your 00:06:33.040 --> 00:06:35.039 applications page by page examine what's 00:06:33.039 --> 00:06:35.839 actually broken on the page and be able 00:06:35.840 --> 00:06:37.840 to suggest alternatives to solving that 00:06:37.841 --> 00:06:39.520 this is also true with the chrome 00:06:39.521 --> 00:06:41.680 accessibility developer tools but it 00:06:39.520 --> 00:06:42.400 only works in chrome so you do have a 00:06:42.401 --> 00:06:44.120 drawback there 00:06:44.121 --> 00:06:46.080 if you're looking for an extension that 00:06:46.081 --> 00:06:48.000 does something that's semi-automated for 00:06:48.001 --> 00:06:50.080 you what I'm looking for typically is an 00:06:50.081 --> 00:06:52.080 application that finds the problems 00:06:52.081 --> 00:06:53.840 list what the problems are and also how 00:06:53.841 --> 00:06:56.080 to solve the issues with those problems 00:06:56.081 --> 00:06:58.400 - ax is probably my favorite one of this - batch 00:06:58.720 --> 00:07:00.079 Unfortunately 00:07:00.080 --> 00:07:03.360 automated and semi-automated processes 00:07:03.361 --> 00:07:05.400 only cover about 25 to 30 percent of the 00:07:05.401 --> 00:07:07.280 wookage ii standards that we need to 00:07:07.281 --> 00:07:09.039 comply with 00:07:07.280 --> 00:07:09.839 so the third step is manual testing 00:07:09.840 --> 00:07:12.199 while you could hire a third party 00:07:12.200 --> 00:07:14.839 application or product or person or 00:07:14.840 --> 00:07:16.559 team to actually check your applications 00:07:16.560 --> 00:07:18.560 i do recommend that you also have 00:07:18.561 --> 00:07:20.560 somebody on your build teams your 00:07:18.560 --> 00:07:21.320 development teams also be able to go 00:07:21.321 --> 00:07:23.280 through and understand how to do this 00:07:22.080 --> 00:07:24.040 too so you can actually make sure that 00:07:24.041 --> 00:07:26.880 accessibility is built right into your 00:07:26.881 --> 00:07:27.960 product 00:07:27.961 --> 00:07:29.800 um if you do decide to do this there's a 00:07:29.801 --> 00:07:32.000 couple things that your team or yourself 00:07:32.001 --> 00:07:33.919 should be familiar with you should be 00:07:33.920 --> 00:07:36.000 understanding what the area spec is 00:07:36.001 --> 00:07:38.560 which is very clear way to understand 00:07:36.000 --> 00:07:39.360 and list out how applications understand 00:07:39.361 --> 00:07:41.840 the proper roles of your components that 00:07:41.841 --> 00:07:43.440 you have today 00:07:41.840 --> 00:07:44.240 this is also something that you want to 00:07:44.241 --> 00:07:45.920 know when to use and not to use 00:07:45.921 --> 00:07:47.720 sometimes there's a html tags that 00:07:47.721 --> 00:07:49.919 already have these roles built into them 00:07:49.920 --> 00:07:52.000 sometimes there's not so you need to 00:07:52.001 --> 00:07:53.680 know when and how to use these things 00:07:53.681 --> 00:07:55.759 something called the accessibility tree 00:07:53.680 --> 00:07:56.560 the browser actually spits out this 00:07:56.561 --> 00:07:58.280 outline like it's talking about in word 00:07:58.281 --> 00:08:00.240 and explains to you how your actual 00:08:00.241 --> 00:08:02.120 application is structured and it tells 00:08:02.121 --> 00:08:03.880 you you know read this explain the 00:08:03.881 --> 00:08:06.639 button this way explain your image this 00:08:06.640 --> 00:08:08.160 way and so on 00:08:08.161 --> 00:08:09.919 uh whoever's doing this should also be 00:08:09.920 --> 00:08:11.919 familiar with how css will affect your 00:08:09.919 --> 00:08:12.640 accessibility for example if you use 00:08:12.641 --> 00:08:14.639 display none on an object it's going to 00:08:14.640 --> 00:08:16.400 pull it out of the accessibility tree it 00:08:16.401 --> 00:08:18.639 won't even be able to be seen or heard 00:08:18.640 --> 00:08:20.240 by the user 00:08:18.639 --> 00:08:21.000 additionally a person should be very 00:08:21.001 --> 00:08:23.199 familiar with html tags in their 00:08:23.200 --> 00:08:25.039 attributes 00:08:25.040 --> 00:08:26.800 making sure using the semantic html 00:08:26.801 --> 00:08:28.800 properly 00:08:26.800 --> 00:08:29.520 handling focus is another big one how 00:08:29.521 --> 00:08:32.000 you actually navigate and move through 00:08:30.240 --> 00:08:33.279 your application move through the form 00:08:33.280 --> 00:08:35.279 fields and tabs 00:08:35.280 --> 00:08:38.000 - and finally obviously will keg2 double a - standards as well 00:08:38.959 --> 00:08:41.720 Um lastly and really most importantly 00:08:41.721 --> 00:08:43.919 here is understanding these popular 00:08:42.560 --> 00:08:45.040 screen reader combos and testing your 00:08:45.041 --> 00:08:47.760 application with these screen reader 00:08:47.761 --> 00:08:49.839 combos most popular ones today are JAWS 00:08:47.760 --> 00:08:50.440 just 2018 for example just is about to 00:08:50.441 --> 00:08:52.160 come out 00:08:52.161 --> 00:08:54.480 or has come out forget which it is today 00:08:54.481 --> 00:08:56.440 um and these most common popular combo 00:08:56.441 --> 00:08:59.040 is JAWS with internet explorer or 00:08:59.041 --> 00:09:00.480 firefox we found 00:09:00.481 --> 00:09:03.519 - another one that's really gaining a lot - of traction is nvda with firefox which 00:09:03.522 --> 00:09:05.440 Is a free one that's why a lot of people 00:09:05.441 --> 00:09:07.280 are starting to use it and schools are 00:09:07.281 --> 00:09:09.200 starting to train on this one voiceover 00:09:09.201 --> 00:09:11.600 and safari specifically if you're doing 00:09:11.601 --> 00:09:13.519 mobile application testing is the most 00:09:13.520 --> 00:09:14.880 popular one by far 00:09:14.881 --> 00:09:17.200 and then for people with low vision 00:09:17.201 --> 00:09:18.720 zoomtext and internet explorer 00:09:17.200 --> 00:09:19.480 i will make a mention of these two notes 00:09:19.481 --> 00:09:21.760 down here is do you see chromevox and 00:09:20.240 --> 00:09:22.400 chrome os these are if you're 00:09:22.401 --> 00:09:24.720 building something for like maybe a 00:09:23.040 --> 00:09:25.440 school or a place where there's a lot of 00:09:25.441 --> 00:09:27.280 chromebooks being used so this one 00:09:27.281 --> 00:09:29.320 specifically for chromebooks and then in 00:09:29.321 --> 00:09:31.680 areas where maybe ios is not as 00:09:31.681 --> 00:09:33.900 popular if a device you're going to want 00:09:33.901 --> 00:09:36.120 to test talkback on android as well 00:09:37.360 --> 00:09:39.920 so while I'm testing an application 00:09:39.921 --> 00:09:41.839 here's some of the things that I'm 00:09:40.480 --> 00:09:42.440 specifically looking for making sure 00:09:42.441 --> 00:09:44.560 that we can find these things in our 00:09:43.040 --> 00:09:45.519 applications and be able to flag these 00:09:45.520 --> 00:09:46.800 items 00:09:46.801 --> 00:09:48.800 uh first thing we're looking for is 00:09:46.800 --> 00:09:49.280 we're able to wayfind through our app in 00:09:49.281 --> 00:09:51.839 other words navigate through the 00:09:49.760 --> 00:09:52.600 application can I tell where I am in the 00:09:52.601 --> 00:09:55.440 application can I figure out where I'm 00:09:55.441 --> 00:09:58.240 going to next does my data have the 00:09:58.241 --> 00:10:01.200 proper headings and can I go back easily 00:10:01.201 --> 00:10:03.440 and do my regions have proper roles 00:10:03.441 --> 00:10:05.120 um I'm looking for properly semantic 00:10:05.121 --> 00:10:06.880 labels so we're making sure there's no 00:10:05.120 --> 00:10:07.600 directional instructions for example I'm 00:10:07.601 --> 00:10:09.200 not 00:10:09.201 --> 00:10:10.880 making say look for the object up in the 00:10:09.200 --> 00:10:11.560 top right hand corner of the application 00:10:11.561 --> 00:10:14.000 because the directions don't necessarily 00:10:14.001 --> 00:10:15.760 make sense both for people with 00:10:14.000 --> 00:10:16.440 disabilities and if you actually switch 00:10:16.441 --> 00:10:18.320 the position of your application from 00:10:18.321 --> 00:10:20.320 right to left or left to right 00:10:20.321 --> 00:10:22.720 we're making sure that input errors are 00:10:21.120 --> 00:10:23.560 really clear and read back and you also 00:10:23.561 --> 00:10:26.079 can solve problems with them if possible 00:10:26.080 --> 00:10:28.480 so if a first name is missing you're 00:10:28.481 --> 00:10:30.560 saying hey your first name is missing 00:10:30.561 --> 00:10:32.320 and if I'm creating uncommon or custom 00:10:32.321 --> 00:10:34.320 control I'm explaining how you use this 00:10:34.321 --> 00:10:37.200 control so for example I might say you 00:10:37.201 --> 00:10:39.279 know use f10 to open the dialog box use 00:10:39.280 --> 00:10:41.360 the enter key to submit your entry 00:10:39.279 --> 00:10:42.160 you can see an example here of we have a 00:10:42.161 --> 00:10:44.480 tooltip that pops up as users tabbing 00:10:44.481 --> 00:10:46.720 through the application this is a 00:10:46.721 --> 00:10:48.480 required field so it's failing so it's 00:10:46.720 --> 00:10:49.160 highlighting on the right-hand side it's 00:10:49.161 --> 00:10:51.519 also reading out the errors as we're 00:10:49.839 --> 00:10:52.320 going and you can also see the errors 00:10:52.321 --> 00:10:54.480 pop back up so this is just a quick 00:10:54.481 --> 00:10:56.120 example of being able to show and 00:10:56.121 --> 00:10:57.760 highlight different form errors 00:10:58.560 --> 00:11:00.720 one of the things I'm also testing is 00:11:00.721 --> 00:11:02.720 I'm using keyboard only so you unplug 00:11:02.721 --> 00:11:04.600 your mouse and you use the application 00:11:04.601 --> 00:11:07.120 um we're making sure we can get to every 00:11:07.121 --> 00:11:09.120 interactive item and we can use each 00:11:09.121 --> 00:11:10.800 interactive item we're making sure that 00:11:09.120 --> 00:11:11.400 every object has a focus dial so we know 00:11:11.401 --> 00:11:14.160 exactly where we are with our keyboard 00:11:14.161 --> 00:11:15.200 in the application 00:11:14.160 --> 00:11:15.840 we want to make sure that the 00:11:15.841 --> 00:11:18.399 application is fully functional without 00:11:16.480 --> 00:11:19.160 a mouse so unplug your mouse test it 00:11:19.161 --> 00:11:20.600 yourself see how it works 00:11:20.601 --> 00:11:22.720 and when we're opening things in modals 00:11:21.279 --> 00:11:23.360 that we're also keeping focus in the 00:11:23.361 --> 00:11:25.000 modals and we're not trapping user 00:11:25.001 --> 00:11:27.200 preventing them from escaping so for 00:11:26.000 --> 00:11:27.960 example here you can actually see that 00:11:27.961 --> 00:11:30.399 we're navigating through a modal we can 00:11:28.720 --> 00:11:31.160 get down to the bottom it's going to 00:11:31.161 --> 00:11:33.240 loop back up and we come right back into 00:11:33.241 --> 00:11:34.560 the form field 00:11:36.560 --> 00:11:39.039 look for navigation specifically 00:11:39.040 --> 00:11:41.160 we're looking for 00:11:41.161 --> 00:11:43.200 you know I focused on the right place 00:11:43.201 --> 00:11:45.200 when an action is taken so if i've 00:11:43.200 --> 00:11:45.800 submitted a form is my keyboard focus 00:11:45.801 --> 00:11:47.839 being put in the right place is it 00:11:46.399 --> 00:11:48.600 letting me know that i've moved to a new 00:11:48.601 --> 00:11:51.200 page when it's loaded is it setting it 00:11:51.201 --> 00:11:53.200 on the header saying hey for example 00:11:51.200 --> 00:11:53.880 i've landed on this page now and it's 00:11:53.881 --> 00:11:56.240 easy to get back am I using native 00:11:54.560 --> 00:11:56.960 browser back button actions or am I 00:11:56.961 --> 00:11:58.680 having some other way to help undo 00:11:58.681 --> 00:12:00.400 objects or actions i've taken for 00:12:00.401 --> 00:12:02.200 example here we can see this person is 00:12:02.201 --> 00:12:04.080 tabbing through individual items 00:12:04.081 --> 00:12:06.240 once they press enter on this navigation 00:12:04.880 --> 00:12:07.000 item it actually focuses on the header 00:12:07.001 --> 00:12:09.120 you can see in the screen reader here 00:12:09.121 --> 00:12:11.839 - and lets them know that the new page has - been loaded 00:12:13.279 --> 00:12:16.480 Lastly the fourth phase of testing is we 00:12:16.481 --> 00:12:18.360 actually do a lot of user testing even 00:12:18.361 --> 00:12:20.240 if we do all this testing ourselves or 00:12:20.241 --> 00:12:22.520 we have a company come in and test our 00:12:22.521 --> 00:12:24.840 applications for us we find that just 00:12:24.841 --> 00:12:27.040 meaning compliance doesn't mean that our 00:12:27.041 --> 00:12:29.320 application is usable in this case we 00:12:29.321 --> 00:12:31.120 have this guy doing all the right things 00:12:31.121 --> 00:12:33.120 but there's obviously something very 00:12:33.121 --> 00:12:35.040 wrong it's very disjointed the 00:12:35.041 --> 00:12:36.400 application process is 00:12:36.401 --> 00:12:38.720 very disjointed not working properly 00:12:38.721 --> 00:12:40.760 so we actually work with the carroll 00:12:40.761 --> 00:12:43.360 center for the blind up in boston 00:12:43.361 --> 00:12:46.079 really great people we love them 00:12:46.080 --> 00:12:48.000 myself katie riker marina mialis and 00:12:48.001 --> 00:12:50.240 - rams who is here talking earlier - actually did one recently for pgp 00:12:50.243 --> 00:12:52.360 Uh we decided on which types of 00:12:52.361 --> 00:12:54.200 scenarios that we wanted to test in the 00:12:54.201 --> 00:12:56.200 application we chose the audience that 00:12:56.201 --> 00:12:58.200 we wanted so we chose the specific skill 00:12:58.201 --> 00:13:00.360 levels the screen readers the types of 00:13:00.361 --> 00:13:02.720 applications they wanted to test we made 00:13:01.360 --> 00:13:03.440 sure our legal docs and payment were in 00:13:03.441 --> 00:13:05.440 place and then we also made sure that 00:13:04.160 --> 00:13:06.080 the application is prepped to run on 00:13:06.081 --> 00:13:07.680 their own device which is really 00:13:07.681 --> 00:13:09.519 important 00:13:09.520 --> 00:13:11.519 and that this test space was ready for 00:13:11.520 --> 00:13:13.279 filming we also had it in a very public 00:13:13.280 --> 00:13:14.760 location raise awareness for 00:13:14.761 --> 00:13:17.000 accessibility testing too 00:13:17.001 --> 00:13:19.200 we actually detested about five users 00:13:17.760 --> 00:13:19.920 I'm going to show you two very quickly 00:13:19.921 --> 00:13:21.920 the first of which is a gentleman by the 00:13:21.921 --> 00:13:23.519 name of mika 00:13:23.520 --> 00:13:25.519 he's really interesting because he has 00:13:25.520 --> 00:13:27.360 been a long time JAWS user he's been 00:13:25.519 --> 00:13:28.040 doing this for a very long time and he's 00:13:28.041 --> 00:13:30.240 actually able to get through a lot of 00:13:28.720 --> 00:13:31.839 the stuff that some other users stumble 00:13:31.840 --> 00:13:33.700 on 00:13:33.701 --> 00:13:35.560 Let me show you that right now 00:13:46.160 --> 00:13:48.680 so what are you doing now 00:13:48.681 --> 00:13:50.560 just reading with the arrow the down 00:13:50.561 --> 00:13:51.720 arrow 00:13:51.721 --> 00:13:52.880 through the 00:14:00.519 --> 00:14:04.398 pages and then you often use the heading 00:14:04.399 --> 00:14:05.599 key to 00:14:05.600 --> 00:14:08.720 jump between you know hopefully it's 00:14:08.721 --> 00:14:09.920 organized 00:14:12.800 --> 00:14:14.640 so miko is really interesting he's 00:14:14.641 --> 00:14:16.720 actually talking and we have them as 00:14:15.279 --> 00:14:17.440 they come in to talk about the process 00:14:17.441 --> 00:14:20.079 how do you actually navigate explore 00:14:18.160 --> 00:14:20.760 your applications so he's explaining 00:14:20.761 --> 00:14:22.560 here that he's actually using his arrow 00:14:22.561 --> 00:14:24.480 keys to navigate through the content he 00:14:24.481 --> 00:14:26.880 has special key commands in his screen 00:14:25.279 --> 00:14:27.640 reader to actually navigate via headings 00:14:27.641 --> 00:14:29.760 throughout the website to be able to 00:14:29.761 --> 00:14:31.600 understand the outline of the page that 00:14:29.760 --> 00:14:32.240 we had talked about earlier by the 00:14:32.241 --> 00:14:34.560 way what you heard was the screen reader 00:14:34.561 --> 00:14:37.279 it sounded very fast perhaps to some of 00:14:37.280 --> 00:14:38.959 you he slowed that down for us 00:14:38.960 --> 00:14:41.120 that's at 2x speed he typically runs at 00:14:41.121 --> 00:14:42.800 about four or five x speed 00:14:42.801 --> 00:14:43.839 so 00:14:42.800 --> 00:14:45.040 That's one of the things that's also 00:14:43.839 --> 00:14:45.800 really important like when you do this 00:14:45.801 --> 00:14:48.639 stuff hey please turn down the speed on 00:14:48.640 --> 00:14:49.840 your screen reader 00:14:49.841 --> 00:14:51.800 um to gain more perspective on just 00:14:51.801 --> 00:14:53.640 dealing with other types of blind users 00:14:53.641 --> 00:14:55.440 or low vision users etc we actually had 00:14:55.441 --> 00:14:57.519 a low vision user come in so we could 00:14:56.160 --> 00:14:58.200 see other perspectives on our 00:14:58.201 --> 00:15:00.800 application what's the problems with 00:14:58.880 --> 00:15:01.560 them so for example we have this user 00:15:01.561 --> 00:15:03.080 coming in named cat 00:15:03.081 --> 00:15:05.680 she is a low vision user using something 00:15:05.681 --> 00:15:06.880 called zoomtext 00:15:06.881 --> 00:15:09.079 she's interacting with one of our forms 00:15:09.080 --> 00:15:11.279 we did find that we have this two column 00:15:11.280 --> 00:15:13.199 - form layout which is actually very - difficult for her to use at the time 00:15:13.202 --> 00:15:15.199 So we're actually going to go through 00:15:14.160 --> 00:15:15.840 and check something out here that I 00:15:15.841 --> 00:15:18.160 think is really important and really 00:15:16.480 --> 00:15:19.279 important why we're testing with users 00:15:19.280 --> 00:15:20.559 as well 00:15:20.560 --> 00:15:22.760 okay so just start filling out 00:15:22.761 --> 00:15:24.880 yes so kind of talk us through as you're 00:15:24.881 --> 00:15:26.959 filling it out and you don't have to do 00:15:26.960 --> 00:15:30.320 your own information you can yeah this 00:15:30.321 --> 00:15:33.360 is makeup okay so I'm under basic 00:15:33.361 --> 00:15:35.279 personal information okay and it says 00:15:35.280 --> 00:15:36.519 select 00:15:36.520 --> 00:15:38.400 mr miss okay so I gotta 00:15:38.401 --> 00:15:40.080 do the 00:15:40.081 --> 00:15:42.280 are you able to read the label above the 00:15:42.281 --> 00:15:43.440 field 00:15:47.680 --> 00:15:50.398 this right here no further down 00:15:50.399 --> 00:15:51.838 yes okay 00:15:51.839 --> 00:15:54.440 personal information and what's below 00:15:54.441 --> 00:15:56.720 that is there anything below that and 00:15:56.721 --> 00:15:57.760 the red yeah 00:15:57.761 --> 00:15:59.840 or is that too difficult to read 00:15:59.841 --> 00:16:03.440 um it'd be better if it was bold and it 00:16:03.441 --> 00:16:05.360 was the red okay 00:16:05.361 --> 00:16:07.360 so you saw there that our labels that we 00:16:07.361 --> 00:16:09.839 actually have above the form fields meet 00:16:09.840 --> 00:16:11.600 the double a wilcag standard 00:16:11.601 --> 00:16:13.360 when she tested it they obviously failed 00:16:11.600 --> 00:16:14.160 so this is really really important we're 00:16:14.161 --> 00:16:16.399 going to miss stuff if we don't test 00:16:16.400 --> 00:16:17.839 with real users 00:16:17.840 --> 00:16:20.360 usability issue net compliance 00:16:20.361 --> 00:16:22.160 not usable so we really do need to test 00:16:22.161 --> 00:16:23.960 with individual users as well to make 00:16:23.961 --> 00:16:25.800 sure we're really nailing this stuff 00:16:25.801 --> 00:16:28.000 and these kind of things actually go 00:16:26.560 --> 00:16:28.720 into a lot of our different types of 00:16:28.721 --> 00:16:30.520 learnings we've actually done multiple 00:16:30.521 --> 00:16:32.600 accessibility tests now in general we 00:16:32.601 --> 00:16:34.840 find that when an application fails or 00:16:34.841 --> 00:16:36.959 falls down it needs a lot better labels 00:16:36.960 --> 00:16:38.920 and headings in the application for 00:16:38.921 --> 00:16:40.760 example we had one test that we did 00:16:40.761 --> 00:16:43.440 where the first page actually had 00:16:43.441 --> 00:16:45.759 personal information it said name 00:16:45.760 --> 00:16:48.000 address details etc and then the next 00:16:48.001 --> 00:16:50.880 - screen was a college application and it - said name address and so when they got 00:16:50.883 --> 00:16:52.760 To that page they thought they were 00:16:52.761 --> 00:16:54.480 actually on the very same page 00:16:54.481 --> 00:16:56.639 because they heard the name field twice 00:16:55.360 --> 00:16:57.839 so we're finding these things are really 00:16:56.639 --> 00:16:58.560 important that we're testing these as 00:16:58.561 --> 00:16:59.680 well 00:16:58.560 --> 00:17:01.199 we found that we need to improve our 00:17:01.200 --> 00:17:03.120 focus management 00:17:03.121 --> 00:17:05.039 for example if we're navigating through 00:17:03.120 --> 00:17:05.720 a form and we press the enter button 00:17:05.721 --> 00:17:07.919 sometimes it's putting it back on the 00:17:07.920 --> 00:17:10.240 sidebar navigation as opposed to the 00:17:10.241 --> 00:17:11.679 heading of the next page 00:17:11.680 --> 00:17:13.760 we need to standardize our act 00:17:11.679 --> 00:17:14.480 interactions so there's actually a 00:17:14.481 --> 00:17:16.199 standardized set of interactions from 00:17:16.200 --> 00:17:17.920 the w3c they explain the different types 00:17:17.921 --> 00:17:19.760 of components out there and the types of 00:17:19.761 --> 00:17:21.600 key commands you need to support for 00:17:21.601 --> 00:17:23.120 each of them 00:17:21.600 --> 00:17:23.840 and lastly and most importantly we need 00:17:23.841 --> 00:17:25.679 to build with accessibility in mind 00:17:25.680 --> 00:17:27.480 first or we get things like this 00:17:27.481 --> 00:17:29.679 uh we actually can see on the right hand 00:17:29.680 --> 00:17:31.360 side this person decide to solve their 00:17:31.361 --> 00:17:33.360 accessibility problem by having a bunch 00:17:33.361 --> 00:17:36.000 of playable plywood here with no hand 00:17:33.360 --> 00:17:36.640 rail which is exceptionally dangerous so 00:17:36.641 --> 00:17:38.800 and I like how they actually took the 00:17:38.801 --> 00:17:41.040 effort to spray paint the 00:17:41.041 --> 00:17:43.120 little wheelchair ramp symbol on there 00:17:43.121 --> 00:17:44.480 as well 00:17:44.481 --> 00:17:46.320 uh so how's this type of stuff being 00:17:46.321 --> 00:17:48.960 used we're actually using this in our 00:17:46.320 --> 00:17:49.600 design systems internally for the UI Kit 00:17:49.601 --> 00:17:51.760 using these things to increase the 00:17:51.761 --> 00:17:53.600 contrast ratios make sure our headings 00:17:53.601 --> 00:17:55.280 are the right spots etc there's also 00:17:55.281 --> 00:17:56.640 some government 00:17:55.280 --> 00:17:58.160 applications being built right now that 00:17:58.161 --> 00:18:00.799 - are actually taking this information as - well as the usds ui standards and 00:18:00.802 --> 00:18:02.880 Implementing it as well for their 00:18:02.881 --> 00:18:05.520 applications and finding that the build 00:18:05.521 --> 00:18:08.720 - processes and approval processes are - going much more smoothly 00:18:08.880 --> 00:18:11.439 One last thing is 86 days left 00:18:11.440 --> 00:18:15.040 this date is also important as well this 00:18:15.041 --> 00:18:17.240 is january 18 2018 and this is the final 00:18:17.241 --> 00:18:20.240 day that government agencies actually 00:18:20.241 --> 00:18:23.600 need to be compliant as well with w 00:18:23.601 --> 00:18:25.360 uh cag 2.0 double a 00:18:25.361 --> 00:18:26.640 and that's it guys 00:18:25.360 --> 00:18:27.760 i also have a white paper for you as 00:18:26.640 --> 00:18:28.799 well i'll be at the booth if you guys 00:18:28.800 --> 00:18:30.720 have any other questions but if there's 00:18:30.721 --> 00:18:32.400 some questions now as well i'd love to 00:18:32.401 --> 00:18:35.280 - hear what you guys have to say I also - have a microphone too 00:18:38.559 --> 00:18:41.119 Any questions 00:18:41.120 --> 00:18:43.840 awesome 00:18:46.960 --> 00:18:49.918 hi chris hey quick question so regarding 00:18:49.919 --> 00:18:53.039 the templates you just mentioned that 00:18:53.040 --> 00:18:55.200 can be deployed 00:18:55.201 --> 00:18:58.480 for a new application how reusable are 00:18:58.481 --> 00:19:00.400 these as an organization grows as new 00:19:00.401 --> 00:19:02.799 - requirements come along can you just - talk through what that journey is is for 00:19:02.802 --> 00:19:04.760 For a customer yeah so we're actually 00:19:04.761 --> 00:19:06.320 paying a lot of attention to the 00:19:06.321 --> 00:19:08.160 standards as they're updating and 00:19:08.161 --> 00:19:10.240 changing so every time we release a new 00:19:08.160 --> 00:19:10.800 version our UI Kit actually is adopting 00:19:10.801 --> 00:19:12.799 all these standards making sure that 00:19:12.800 --> 00:19:14.880 we're meeting compliance for example 00:19:12.799 --> 00:19:15.640 what keg 2.1 is eventually coming out 00:19:15.641 --> 00:19:17.440 there's proposals for making sure that 00:19:17.441 --> 00:19:19.440 every single interactive object is 44 00:19:19.441 --> 00:19:21.600 pixels high for example so that's some 00:19:20.400 --> 00:19:22.400 of the stuff we're starting to consider 00:19:22.401 --> 00:19:24.400 now what does this look like how does 00:19:24.401 --> 00:19:26.160 this impact your applications you 00:19:26.161 --> 00:19:28.160 know where do we have to meet these 00:19:26.720 --> 00:19:29.200 specific things and what levels are 00:19:29.201 --> 00:19:31.679 these going to be at so yeah we're 00:19:31.680 --> 00:19:33.760 keeping paying attention to stuff 00:19:31.679 --> 00:19:34.320 in terms of the usds that's also like a 00:19:34.321 --> 00:19:36.240 separate project where they're actually 00:19:36.241 --> 00:19:38.040 working on that and implementing that 00:19:38.041 --> 00:19:40.520 stuff as that's being updated as well 00:19:40.521 --> 00:19:42.880 and just as a follow-up question I 00:19:42.881 --> 00:19:46.160 probably know the answer to this but for 00:19:46.161 --> 00:19:48.400 the benefit of the audience members here 00:19:48.401 --> 00:19:50.640 once those updates are made from our 00:19:50.641 --> 00:19:52.080 product perspective 00:19:52.081 --> 00:19:54.320 what impact does that have to an 00:19:52.080 --> 00:19:54.920 existing application does that mean they 00:19:54.921 --> 00:19:56.440 the customer has to rebuild the 00:19:56.441 --> 00:19:58.040 application does that mean that 00:19:58.041 --> 00:20:01.120 everything that was done prior is kind 00:20:01.121 --> 00:20:03.440 of scrapped you start over 00:20:01.120 --> 00:20:04.240 what's the benefit of having the journey 00:20:04.241 --> 00:20:06.640 with Pega for these accessibility 00:20:06.641 --> 00:20:09.280 challenges it depends how much they've 00:20:09.281 --> 00:20:11.600 customized it so our goal is to make 00:20:11.601 --> 00:20:14.720 - actually a design system agnostic kind - of UI Kit so that these patterns and 00:20:14.723 --> 00:20:17.080 Applications can be reused without you 00:20:17.081 --> 00:20:19.120 guys having to customize very much if 00:20:19.121 --> 00:20:21.120 you do customize it there's going to 00:20:19.120 --> 00:20:21.960 definitely be some work to update things 00:20:21.961 --> 00:20:24.400 but our goal as we're doing these design 00:20:22.799 --> 00:20:25.040 system updates is to reduce that 00:20:25.041 --> 00:20:27.280 friction and to build tools actually 00:20:27.281 --> 00:20:29.000 help you along with that process and 00:20:29.001 --> 00:20:30.720 provide the documentation to do it 00:20:33.360 --> 00:20:35.840 anybody else 00:20:39.039 --> 00:20:42.880 how does that work with your mobility 00:20:42.881 --> 00:20:45.678 on tablets or 00:20:45.679 --> 00:20:48.479 phones, glad you asked I also do 00:20:48.480 --> 00:20:51.360 mobility as well so I'm actually taking 00:20:51.361 --> 00:20:53.320 these design considerations as well 00:20:53.321 --> 00:20:55.760 into mobility making sure the touch 00:20:54.240 --> 00:20:56.520 areas are accessible making sure they 00:20:56.521 --> 00:20:58.640 have the proper labeling on making sure 00:20:57.280 --> 00:20:59.400 that when you're moving from one place 00:20:59.401 --> 00:21:01.240 to another you know you're getting the 00:21:01.241 --> 00:21:03.360 actual navigation of where you're at too 00:21:02.320 --> 00:21:04.120 so yeah that's definitely something 00:21:04.121 --> 00:21:06.720 that's in mind for all of this you know 00:21:06.721 --> 00:21:08.799 the UI Kit encompasses not only the 00:21:08.800 --> 00:21:11.280 desktop applications but tablet and 00:21:11.281 --> 00:21:12.400 mobile phones as well 00:21:12.401 --> 00:21:14.440 is that you answer your question 00:21:14.441 --> 00:21:16.880 okay yeah let's hear more of what you're 00:21:16.881 --> 00:21:19.520 interested in hearing about you know we 00:21:19.521 --> 00:21:21.360 have a lot of users that have the low 00:21:21.361 --> 00:21:23.760 visibility and I know we're going toward 00:21:23.761 --> 00:21:26.240 tablets so I'm just you know curious how 00:21:26.241 --> 00:21:28.880 the screen size goes and how you find 00:21:28.881 --> 00:21:30.799 the accessibility as far as 00:21:30.800 --> 00:21:32.480 using the JAWS and 00:21:32.481 --> 00:21:34.799 various things for androids how well 00:21:32.480 --> 00:21:35.479 does that work for those individuals 00:21:35.480 --> 00:21:37.280 yeah so we're building our application 00:21:37.281 --> 00:21:39.240 so as you're working with a a tablet 00:21:39.241 --> 00:21:41.160 or a mobile device that you can actually 00:21:41.161 --> 00:21:42.960 scale up the text so I can you know the 00:21:42.961 --> 00:21:44.679 standard is scaling it up at least you 00:21:44.680 --> 00:21:46.400 know 200 if you will so we're making 00:21:46.401 --> 00:21:48.240 sure that our our design system is 00:21:47.120 --> 00:21:49.600 actually fitting into that if you have 00:21:49.601 --> 00:21:52.320 - to scale it up it still fits without - breaking the design 00:21:53.440 --> 00:21:56.960 And you're basically you know when you 00:21:56.961 --> 00:22:00.120 do the pinch and scale stuff are you 00:22:00.121 --> 00:22:02.120 iterating that to the user down the side 00:22:02.121 --> 00:22:05.280 i mean we have some that haven't really 00:22:05.281 --> 00:22:07.200 used tablets so they're not really 00:22:07.201 --> 00:22:09.840 familiar with those aspects so okay 00:22:09.841 --> 00:22:12.960 so are you asking you know if you're 00:22:12.961 --> 00:22:15.360 pinching and zooming what's changing 00:22:15.361 --> 00:22:17.360 exactly 00:22:17.361 --> 00:22:19.840 you're explaining to them hey if you 00:22:19.841 --> 00:22:21.760 need to zoom in zoom out is that being 00:22:21.761 --> 00:22:23.520 fed back through the reader 00:22:21.760 --> 00:22:24.240 uh no I don't believe that is you 00:22:24.241 --> 00:22:26.799 know there's if once you turn on a lot 00:22:24.960 --> 00:22:27.600 of times accessibility modes you know it 00:22:27.601 --> 00:22:29.720 changes kind of some of the interactions 00:22:29.721 --> 00:22:32.880 with your device your touch device so 00:22:32.881 --> 00:22:35.840 - depending what they have on or not they - will change pinch and zoom typically 00:22:35.843 --> 00:22:38.440 Isn't something that we have found to be 00:22:38.441 --> 00:22:41.200 confusing at the moment to people using 00:22:41.201 --> 00:22:42.640 a touch device 00:22:42.641 --> 00:22:44.800 with low vision yeah 00:22:44.801 --> 00:22:46.559 doesn't mean it's not maybe we'll keep 00:22:46.560 --> 00:22:47.640 testing 00:22:47.641 --> 00:22:50.640 some older individuals yeah yeah with 00:22:50.641 --> 00:22:54.559 that mobility issue and the arthritis 00:22:54.560 --> 00:22:56.240 yeah okay makes sense 00:22:56.241 --> 00:22:57.320 no problem 00:22:57.321 --> 00:22:58.399 anybody else 00:22:58.400 --> 00:23:00.558 sure 00:23:00.559 --> 00:23:03.560 um I guess like some of these things are 00:23:03.561 --> 00:23:06.000 more obvious than others but in general 00:23:06.001 --> 00:23:08.440 as you said the automated tools that are 00:23:08.441 --> 00:23:10.960 out there only catch up to 30 percent of 00:23:10.961 --> 00:23:13.360 things to consider 00:23:13.361 --> 00:23:15.760 for someone who wants to become 00:23:15.761 --> 00:23:17.520 trained or you know educated on a 00:23:17.521 --> 00:23:19.840 holistic view of what these types of 00:23:19.841 --> 00:23:22.320 issues could be I mean is there a place 00:23:22.321 --> 00:23:24.880 that has a list of all considerations or 00:23:24.881 --> 00:23:28.000 - some sort of training on compliance yeah - yeah where do you start so there's 00:23:28.003 --> 00:23:29.279 Actually a 00:23:29.280 --> 00:23:32.040 the 18f I think it is I forget exactly 00:23:32.041 --> 00:23:34.240 off the top of my head but there's 00:23:34.241 --> 00:23:36.320 actually quite a few web accessibility 00:23:36.321 --> 00:23:38.559 checklists you can start going through 00:23:36.320 --> 00:23:39.280 there's organizations like webaim that 00:23:39.281 --> 00:23:41.039 kind of also provide these checklists as 00:23:41.040 --> 00:23:42.880 well to help you kind of start 00:23:41.039 --> 00:23:43.720 understanding how to do this testing 00:23:43.721 --> 00:23:45.799 yourself if you're interested 00:23:45.800 --> 00:23:47.919 um you know there's also some simple 00:23:47.920 --> 00:23:49.760 stuff you know turning off css 00:23:49.761 --> 00:23:51.919 unplugging your keyboard and turning on 00:23:51.920 --> 00:23:53.840 your screen or just closing your eyes 00:23:53.841 --> 00:23:56.880 - and just listening it to is very helpful - to get you going at least 00:24:00.640 --> 00:24:04.760 How are you testing your applications on 00:24:04.761 --> 00:24:08.240 cross browser different browser versions 00:24:08.241 --> 00:24:11.000 are there specific tests for browsers or 00:24:11.001 --> 00:24:12.960 are you conducting one 00:24:12.961 --> 00:24:14.680 suite of tests that 00:24:14.681 --> 00:24:16.480 are compatible with other 00:24:16.481 --> 00:24:18.640 all the browsers for automated it 00:24:18.641 --> 00:24:21.679 doesn't matter because it's checking 00:24:21.680 --> 00:24:24.240 - semantics of your html et cetera - um for cross browser stuff it's still 00:24:24.243 --> 00:24:26.479 Kind of I know if you guys remember back 00:24:26.480 --> 00:24:28.960 in the day where you know ie rendered 00:24:28.961 --> 00:24:31.760 - something one way Firefox rendered - another way chrome renders it this way 00:24:31.763 --> 00:24:34.280 Screen readers are very much like that 00:24:34.281 --> 00:24:37.600 so each one decides differently how to 00:24:37.601 --> 00:24:40.400 - render even from version version so JAWS - to the JAWS 17 one that was out recently 00:24:40.403 --> 00:24:43.360 Renders things even differently than 00:24:43.361 --> 00:24:44.480 JAWS 2018. 00:24:44.481 --> 00:24:46.360 You know for example we had like 00:24:46.361 --> 00:24:48.720 this floating label thing that was just 00:24:48.721 --> 00:24:50.960 a relic in the system that we're looking 00:24:48.720 --> 00:24:51.600 into and JAWS 2018 now picks it up 00:24:51.601 --> 00:24:53.520 whereas before it didn't pick it up so 00:24:53.521 --> 00:24:56.080 it's creating all these strange errors 00:24:56.081 --> 00:24:57.840 so we're not only testing the individual 00:24:57.841 --> 00:24:59.679 screen readers themselves we're also 00:24:59.680 --> 00:25:02.880 testing multiple types of screen readers 00:25:02.881 --> 00:25:06.159 - so we're finding things like for example - nvda and JAWS read a select field label 00:25:06.162 --> 00:25:07.880 Fine 00:25:07.881 --> 00:25:10.640 but when we tested voiceover on a 00:25:10.641 --> 00:25:11.840 macintosh 00:25:11.841 --> 00:25:14.039 inside of chrome the select label does 00:25:14.040 --> 00:25:16.000 not read at all for whatever reason 00:25:16.001 --> 00:25:18.000 and it's sometimes it does but most of 00:25:18.001 --> 00:25:20.000 the time it doesn't so by changing the 00:25:20.001 --> 00:25:22.159 area roll on the select box to area of 00:25:22.160 --> 00:25:24.159 role group 00:25:24.160 --> 00:25:25.600 we're actually just roll group 00:25:25.601 --> 00:25:27.440 then was able to pick up the label again 00:25:27.441 --> 00:25:29.360 so you know we're testing across 00:25:29.361 --> 00:25:32.159 - multiple types of screen readers as well - as browsers too 00:25:32.320 --> 00:25:35.260 Time for one more question if anyone has 00:25:35.261 --> 00:25:36.760 anything 00:25:45.840 --> 00:25:47.839 what is the best way 00:25:47.840 --> 00:25:50.879 to apply accessibility inside the 00:25:50.880 --> 00:25:53.359 development life cycle 00:25:53.360 --> 00:25:56.120 the best way the best way is actually 00:25:56.121 --> 00:25:58.720 start at the design phase I mean the 00:25:58.721 --> 00:26:00.720 person who's designing the process the 00:26:00.721 --> 00:26:02.799 flow and understanding users really 00:26:02.800 --> 00:26:04.720 needs to bring that to the table for the 00:26:04.721 --> 00:26:07.120 team from the get-go they need to 00:26:04.720 --> 00:26:07.880 understand the some of the challenges 00:26:07.881 --> 00:26:10.480 you're gonna face be able to provide the 00:26:10.481 --> 00:26:12.240 labels and information then the 00:26:10.480 --> 00:26:13.000 development teams they need to take that 00:26:13.001 --> 00:26:14.720 information understand the standards 00:26:14.721 --> 00:26:16.320 that exist out there and how to 00:26:16.321 --> 00:26:18.080 integrate those standards for example 00:26:16.320 --> 00:26:19.200 understanding the standardized component 00:26:19.201 --> 00:26:20.720 controls 00:26:19.200 --> 00:26:21.919 labels html all the stuff I was talking 00:26:21.920 --> 00:26:23.039 about earlier 00:26:23.040 --> 00:26:24.880 but that should be that should be right 00:26:23.039 --> 00:26:25.400 from the get-go if you can you know 00:26:25.401 --> 00:26:27.760 obviously there's stuff that already 00:26:25.919 --> 00:26:28.480 exists out there so there's definitely 00:26:28.481 --> 00:26:30.720 things you can validate with some of 00:26:29.200 --> 00:26:31.520 those semi-automated tools if it's not 00:26:31.521 --> 00:26:33.679 your build process or automated tools 00:26:33.680 --> 00:26:35.360 and see what some of your biggest wins 00:26:35.361 --> 00:26:36.480 are for example 00:26:36.481 --> 00:26:38.680 quite a few versions back of Pega 00:26:38.681 --> 00:26:40.640 we didn't have headings in our system so 00:26:40.641 --> 00:26:42.480 that was a big win like okay let's put 00:26:42.481 --> 00:26:44.880 headings into the system and so there's 00:26:44.881 --> 00:26:46.640 a lot of that stuff you can also 00:26:46.641 --> 00:26:48.620 retrograde and fix to get some really 00:26:48.621 --> 00:26:50.600 big wins out of this stuff too