Accessibility and Mobile Testing Tools

Video Transcript

hello and welcome to this talk on accessibility and mobile testing tools my name is Helen Burge and I’m the director of digital accessibility at teso so in this session we aim to cover meeting me your speaker what accessibility is the mobile tools for testing accessibility as a starting point and the questions you might have at the

end so my credentials I always believe when talking to any group I should share why I’m qualified so I’m qualified to talk on accessibility and mobile because I’ve started working accessibility since 2000 I was at University it was my Gap year um and I was doing Ada testing on some CRM um content relationship Management Systems um but the main reason why I started testing accessibility was because of a friend that was blind she couldn’t get her keyboard to focus her music player so she had to ask me to be the tool to start her music and it was such a simple thing that stopped her from enjoying her own music and being able to be autonomous on her own um that made me realize that small changes can make a big difference to humans anyway as part of my journey I started doing other testing and doing accessibility at something as well as my main Ro of testing in functional tester performance tester automation so on but in 2010 I realized that my passion of accessibility could be a full-time job and I managed to make it work um I also volunteered with the w3c as part of the accessibility conformance test rules community group and from my work there where we are trying to make the success Criterion that I’ll go through later um into automated rules that can be agreed upon by different um automation tool vendors the work I’ve been doing on the manual test rules side um is seen as important so I’m now an official invited expert to the w3c and I’ve also in my journey as an accessibility auditor also tested most mile whether it was native applications or web applications I always felt that because it’s a digital asset the web content part of wcag is not always truly the only way that you can um use them they do apply to Mobile so I’ve been doing that practically for years so what is accessibility I’ve talked a lot about it but I think we should cover the definition of accessible so so on this slide you might be able to see an image of um what I describe as a narrow street with overhanging buildings and there’s some bikes parked at the back um and you can see someone on their mop head about to drive down there so can you walk down it I believe it’s possible to walk down you might be a bit nervous of the narrowness but it is possible to walk down can you take a bike down there I think the answer is um in the picture of the person about to drive down there so yes you can take a bike down there and also the parked bikes have obviously traveled down there to get there but with a carfit someone did say they thought a smart car might fit down here but um I think the Smart car would become less smart to more of half a car and you might get a bit of a sore head from the um Collision so the car would not fit and this visual representation is how it is for most people interacting with your digital assets being disabl is not the same as having impairment it is about the environment creating a barrier that um you cannot use it so each of the um people are either walking using a bike or using a car they have different tools that they’re using to move themselves however the one choosing to use a car has a barrier that they can’t undo you can’t move the buildings apart so a car driver through no fault of their own is blocked from using the street and this is the same for accessibility where people are they have a physical disability and they use a techn te ology to interact with digital assets but because the digital asset is not accessible the assisted technology will not work so that means they are blocked from having the same

experience and there’s many benefits to accessibility so the biggest one from the World Health Organization have done um some studies and in 2016 15% of the world’s population were class disabled 15% is about 1 billion people um you may not have a digital asset for everybody in the world but when you think about 15% that you are excluding from using your digital asset um you’re excluding part of your audience and another thing is when people require Assist Technology when things work well or don’t work they will tell each other so I have um a slack group that I’m a member of um an accessibility slack group and they have a rant and a wins Channel where they will share their frustrations in rant and their successes in wins and other people will read that and will be swayed away from the rent products from using them and into the winds products because they’re doing something good and um proactive for disabled users so the larger audience is also not just those with a disability but those that know people affected by disability because if say my mother was excluded from using a product because of her um need for glasses I also happen to need I would choose not to use that product also accessibility drives Innovation and increases engage so the Innovation when you think about the car driver on that street on the slide before they um would have to think of an alternative to get to um the other end of the street and that is innovation it’s when you’re challenged to think differently to find solutions for all the users because like I said before you cannot move those buildings apart you have to think about um an alternative route and also increase engagement so if you think about captions when you’re watching a video on Facebook and you’re in a public place are you likely to have the volume up or the captions on I tend to have the captions on so that gives increased engagement because people are less likely to be put off from engaging with your content and it’s well known that um there’s many times on your mobile you do not want people outside of Your Inner Circle to hear what you’re doing like for instance sleeping children you want them to stay sleeping um or if you’re um watching something a bit more adult than your children then you might put the captions on so that they don’t hear anything you don’t want them to and there has been a few statistics banded about but 80% of people are more likely to watch a video all the way through if it has

captions so accessibility benefit it’s everyone um it’s not just about people that are permanently disabled so um when you look at this image on this slide you’ve got the um Microsoft um inclusive design tool kit which shows permanent temporary and situational impairments so permanent is something that will not change so for instance hearing when you’re deaf you’ll never hear but you might have an ear infection which means your hearing is not quite as good um but you should hopefully recover from that ear infection or a bartender who in the situation of a noisy bar cannot hear things so in those cases you might have an application where you can order drinks through your mobile app which means the bartender doesn’t have to hear an order and they’ll more likely get your order correct um and there’s other situations too I I often think of myself when I first get up in the morning my understanding of items is a little bit more cloudy because I need a bit of coffee um so before coffee an accessible site which is easy to see easy to read easy to follow is less likely to be a burden to me and I know that everyone has moments when accessibility will benefit you and if you want to go and get the design toolkit um if you go to microsoft.com design inclusive you’ll be able to access those designs anyway web content accessibility guidelines um a brief history so created by the w3c and we can see their logo there w3c the worldwide Web Consortium and the first guidelines were authed in 1995 after a key note speech at a conference in 1994 highlighted the need for accessibility however this meant 38 versions of guidelines were published can you imagine trying to find one that you can follow when there’s so much um different opinions on what is accessible so in 1998 3 years later they unified these versions into the unified website of clity guidelines and may 1999 literally 25 years ago 5th of May 1999 the worldwide Web Consortium released wcag 1 and it was a group consensus consensus of web standards that people from different companies different um groups affected by accessibility so you might have um the Koga group The cognitive um operative um I I forget what it stands for but the Koga group is about the neurodiverse people um then you’ve also got people that are representing blind users and so on they came to a consensus of these checkpoints and in the background over the next nine years um an independent group was updating them because two years after the publication of the first wag release um wag 2 was suggested and it took seven almost eight years before it was published in December 2008 and again it’s getting the consensus that can cause some of the confusion because they need to be repeatable and testable items trying to remove subjectivity which is very difficult in accessibility so International Organization for standardization recognized them four years after they were published and Europe recognized them six years after they were published and then because in 2008 the um their first iPhone hadn’t been released with a screen reader yet um it was 2009 when that happened WK 2 was desktop oriented so 2.1 almost 10 years after the first um WK 2 was published we had 2.1 release it was very exciting because it had mobile and neurodiverse checkpoints added in so for the mobile we had orientation and actu actuation where you’re shaking your phone cuz I keep being told you shouldn’t shake your laptop Helen um so that was quite exciting took 10 years though and that’s how much discussion was going into it and in 2023 last year 2.2 was published so five years after the 2.1 update we had another one it was more about neurodiverse conditions are neod Divergent um like accessible authentication meaning that you can log in in more than one way that includes copy and paste and wc 3 is in development the good news about it is web content is going to be replaced by w3c so it’s going to be wcag still but it’s going to be w3c accessibility guidelines because digital assets will cover things like documentation authoring tools um all the different items that should be accessible because they’re used by the public will come under the AG or the silver group as it’s called so w CAG in a nutshell we’re on 2.2 at the moment it is a w3c recommendation it has three levels it’s got a a a and AAA a is the top of a pyramid with AA followed by AAA we target AA which includes A&A because that is legal standard for most countries when I say we I I’m talking about accessibility as a whole and Tesla as well um we target what is legally required um for the A and double a AAA is a nice to have but is not going to um be enforced fully because it’s quite difficult and more sub objective than the other ones it’s also got four principles we got perceivable operable understandable and robust perceivable is do I rely on one sense to understand the content do I have to see it to know what’s going on do I have to hear it and so on operable if I can use a mouse can I use a keyboard understandable is the language clear are the form controls given meaningful errors and so on and robust that is is it sticking to the guidance given for HTML 5 and ARA the accessible Rich internet applications coding standards that the w3c provide that’s basically are you doing as a best practice the recommended items and when it comes to backward compatibility all wcag 2 is built on with 2.1 then 2.2 which means that 2.2 is Backward Compatible with 2.1 and two and we have a wag quick reference by the w3c and also work KAG the other way that some people pronounce it I I do wag um wag tends to be a simplified version of the checklist for um developers in mind so on to mobile tools for testing accessibility so now you know a bit the surface of what accessibility is and what wcag means now it comes to testing like I say although they original desktop in mind you can apply it to Native applications and to web apps on the mobile because um they are interchangeable so we have the first thing screen readers it’s a program that will read visible content for those that might not read it easily including blind visually impaired or those find reading difficult so we have an image here of um voice over is turned on we can see that voice over on is what’s been announced by the screen reader and it’s focusing on a button accessibility so ideally what it includes is the semantics so if I’m on accessibility button I will hear accessibility comma button I don’t want that button in a label what I want is the button so that when I interact with it it does what a button should do as in with the screen reader on double tap it moves back um it also it just includes information that’s not rendered and can be a developers best friend or worst nightmare because it will quickly show when a developer has followed the best practices for the robust rule or when they have maybe neglected it and then items might might not be focusable they might not work because they’ve not been following the best practices and when it comes to screen readers to use you’ve got iOS voice over and Android TalkBack those are the most commonly used in the

market and keyboard keyboard is one that’s often overlooked and that is because when it comes to um interacting on a mobile you often think of your hands your gestures and with a screen reader you have slightly different gestures which means um people assume that keyboard will be covered but that’s not really the case um and it’s not often covered by testing and I used to in my younger days not cover keyboard but Bluetooth keyboard is different from the keyboard on your desktop because that will be a tab interface where you interact by the Tab Key and then enter and space depending however Bluetooth keyboard you can tap through and or use the arrow keys um so you need to make sure that you’re using the content appropriately um and it’s also an easy starting point for switch testing a switch device is used by someone who may not be able to use the hand gestures that well and will um have often looks like two buttons but it’s edges of buttons side of buttons and I recommend with um switch testing to leave it until you know a bit more about the Bluetooth um testing so start off with Bluetooth testing with the keyboard and when you come to switch testing use a bluetti keyboard because using facial gestures without an naturual switch device for switch testing I almost had to do a factory reset on my phone because I had to look one way to select things and another way to activate them um it was painful so I recommend if you’re going to do any switch T testing read St up on how it works and make sure you’ve got a Bluetooth keyboard to map all the gestures to and then we’ve got color contrast I have the tpg tool here of the color contrast analyzer now I recommend either use a screenshot on your phone or automation tools the automation tools can catch most of them but some of them like sometimes there’s a slight discoloration of the valid hex code on the actual screen so what we see is not what’s programmed in so screenshots best way to validate them at the end but use an automation tool for a starting point for mobile there is um three checks that you should be thinking about um normally there is 3 to one for large text or um items on there it’s better to go for the regular text 4.5 to1 for mobile because you have a smaller screen large text and barely visible outlines are going to be very difficult ult um and that’s why it’s also recommended in the mobile groups to use the enhanced AAA requirement of 7 to1 because if I’m out with my mobile and it’s a sunny day a stronger contrast like here we’ve got black and white which is 21 to1 a stronger contrast is easier to read things close to 4.5 or less will be difficult to read in sunny conditions and then we’ve got Zoom so one of the checkpoints for um wag 2.2 is about Zoom being able to zoom the application and it’s often overlooked by mobile developers as something that should be possible because others don’t do it doesn’t make it right because unfortunately it the checkpoint does say you should be able to zoom in without the need for assisted technology and mobile applications do come under the user agent accessibility guidelines where you should allow the person to zoom so there are two different sets of guidelines telling you zoom should be allowed and this could be done by using pinch screen there are ways to force a zoom on some operating systems but those are kind of overriding and are not the best practices um and also you can end up with lots of variations of um items to code for so I tend to stick to pinch screen for the zoom you might have in a browser and changing the font size in the operating system level changing the font sius is probably the better one to do than the pinch Zoom because that’s very much like the magnifier and but then again it’s easier to fit it in because you scroll around anyway try to make sure zoom in works then we have automation um on iOS we’ve got xcode accessibil in Vector which you launch by having your iPhone paired to your Mac and you can run through the um the application as it’s running on your phone and you find the results where it will let you know the code failures same for the Google accessibility scanner for Android um it will download onto your phone so you don’t need to pair it with the device and it will let you know when you’re not meeting the accessibility guidelines so one of the important ones that I always say is best done with automation is touch Target size and cobon adds an option for testing touch Target size this was something proposed as a level a for 2.1 however the 44x 44 CS pixels was very hard to achieve and they couldn’t get to an agreement it was agreed at the end to push it down to a AAA because of the difficulty in trying to have large buttons on say a mobile device or what if you got a paragraph text with three links in it you’ll end up lots of situations where it doesn’t work however in 2.2 they reduced it to 24x 24 CSS pixels and it’s a level able a um and it’s the touch size of the button and the area around it there are exceptions like um if it’s in line or if there’s an equivalent a different button elsewhere that has the right size but overall um try to stick to 44x 44 if you can because and also because it’s not easy to see the touch area you can’t see where the items around it are um it’s hard to test manually and I recommend using a tool to help and cobon also has um an accessibility application programming interface check which is like with the automation tools where it highlights what’s at fault and it helps um you setting up what items you want to set in so it will check that you’re meeting the success Criterion it will optimize and let you change items for text speech and Braille so that it um can be more accessible and also you also have um a way to make your labels more precise so to summarize accessibility is for everyone this talk is just a starting point I didn’t go through as much as I could have and I kept having to bite my tongue to stop going into too much detail there’s so much on this subject the guidelines will apply to mobile even if they’re not explicitly called out because some of it’s just common sense like if I if it’s an image I should have a text alternative to it testing with mobile devices should be manual and automation I don’t think either all will work fully they go really well together and lastly happy global accessibility Awareness Day Gad it is today and thank you for attending this qu this um session any questions all right thank you for that Helen and thank you for joining us for some questions here at the end um you mentioned it at the end of your session that today is actually uh Global accessibility awareness day and I was hoping you could expand a little bit on that what the day is and how people can help spread awareness sure um it was a 13 um or today’s the 13th year of global accessibility awareness day and it was a day brought about to Champion accessibility as a starting point to get people thinking and in incorporating accessibility to their work so attending talks on this day is greatly encouraged and everyone who’s watched this video has helped celebrate in their own way excellent yeah I know it seems like in the last year and rightfully so um accessibility has kind of had its moment especially in the tech World um so for those of us uh on the audience watching this live um what do you what do you have suggestions for them as far as getting started or is there something you would recommend if they’re looking to make their apps more accessible on specifically on mobile devices I think the starting point is making sure that you don’t try to reinvent the wheel um most of the times when things are inaccessible it’s when someone’s trying to build a custom item when the default has accessibility baked in um and also colors colors are the biggest downfall for most people when they have um weak color contrast which means it’s hard for anyone to read um and on a mobile screen when you think about the fact the mobile moves so much and you catch sunlight on it you need stronger texts to be able to read it properly in sunlight or different varying um basically the mobile is never in a fixed position and we’re not often um talking with it to our ears but talking with it in front of us and so on so making sure that you don’t over complicate keep things clean and simple and if in doubt use an automation um tool to help check it and maybe um look into the w3c about any resources that are available to help you yeah absolutely yeah and I know you touched on a few of those during your session as well and I think it’s one of those things like we all use mobile devices they’re so ingrained into daily life now and making sure that any user has the ability to to pick it up and and leverage the applications that folks here are building themselves is is crucial um I know we’re coming on time here but is there any parting words you have for the audience before we head off to the next session no thank you for coming and I hope it was enlightening excellent thank you so much Helen it’s always a pleasure talking with you cheers