Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Mobile Accessibility44:50 with Gian Wild
In this session Gian Wild will be speaking about how to make your mobile sites accessible. WCAG2 (Web Content Accessibility Guidelines 2.0) was written before mobile devices were ubiquitous and, while there is an increased awareness of accessibility on desktop sites, mobile accessibility presents a whole new challenge. There are accessibility issues unique to the mobile format, such as lack of keyboard, lack of mouse hover and reduced screen size. Gian will discuss the most common problems and how you can avoid them to create great experiences for everyone.
I hope you're okay with my accent. 0:00 Apparently if I like lived here for 0:02 five or ten years I would be easier to understand but 0:04 I've only been here like a week and a half so you have to bear with me. 0:07 I actually spent six years with the W3C writing the web content accessibility 0:12 guidelines. 0:16 Is anyone he, here who doesn't know what that is? 0:17 [BLANK_AUDIO] 0:19 Okay, cool. 0:22 They're basically the requirements that you follow, 0:24 to make sure that websites are accessible. 0:27 So there are a whole set of guidelines. 0:30 So today I'm gonna talk about mobile and accessibility, because when it comes to 0:32 mobile you need to worry about different things to desktop websites. 0:36 Now, if you want to look at my slides or download them, and I've referred of some 0:41 websites and things like that, certain links as well, go to pzed, 0:46 pz.tt/fowd and you'll be able to access my slides. 0:52 You're welcome to log in and then you can actually put in feedback in there, 0:58 or you can contact me with any questions if you come up with them later. 1:03 And I'll be tweeting that throughout the two days, so 1:07 if you don't get it now, you'll have plenty of time later on. 1:12 So firstly, I'd like to introduce you to my team as, 1:17 as it was about six months ago. 1:21 We changed a little, we've grown since then. 1:24 One of the missions I suppose, of my company and so for 1:27 you Americans, director means CEO. 1:32 So basically, it's my company, I founded it three and a half years ago. 1:34 I own it, I run it. 1:39 We've got eight staff at the moment. 1:40 And basically, one of our mission statements is that we mimic the percentage 1:41 of people with disabilities in the general population in our organization. 1:48 So at any one time at least 20% of our staff need to have some kind of 1:54 disability. 1:58 So we have a very proactive employment policy. 1:59 But if you look at us, 2:04 you wouldn't necessarily think that any of us have any kind of disability. 2:06 There's no guide dogs, there's no canes, there's no wheelchairs and it's important 2:10 to know when it comes to disability that it's hidden in plain sight. 2:16 So one of us uses a speech to text program. 2:21 Because they have trouble they have trouble writing text. 2:24 They have a form of dyslexia. 2:28 Another uses an onscreen magnifier. 2:30 Another person gets epilepsy, so she can't do certain testing [COUGH], 2:32 excuse me she can't do certain testing because videos can 2:38 sometimes contain flashing content and can trigger epileptic fits. 2:42 And there was a case in Japan a year or two ago where they had some kind of 2:47 Pokemon episode and 600,000 children ended up in hospitals with, 2:52 basically epileptic attacks. 2:57 Now that's actually less. 3:00 Then, sorry, that's more than the number of children that actually have epilepsy. 3:02 So that there's something quite specific about that episode that, that, 3:05 triggered these these epileptic attacks. 3:10 I have, I, have written an article on creating accessible video for sight point. 3:13 I'll add it to the list of links which talks more about that particular issue. 3:15 Now I myself get migraines not actually defined as a disability as such. 3:22 But I have had migraines triggered by flick, a flickering content. 3:27 So it's happened to me four or five times. 3:32 And I ran some accessibility training for Microsoft developers back in 2005. 3:34 They were engaged as the the web developers for 3:40 the Melbourne 2006 Commonwealth games, and I had been engaged by Melbourne 3:43 2006 Commonwealth games in 2004 because the very first accessibility 3:48 litigation actually happened in Australia with regards to the Sydney Olympic games. 3:53 So, Melbourne 2006 Commonwealth games engaged my company and we, 3:59 one of the things we did was try in Microsoft developers. 4:04 And it was at that development session that I always, for some reason, 4:07 got a migraine at 3:30 every time I ran a one-day development training session. 4:11 And I just remember that it was the Microsoft developers that pointed out 4:17 to me that at about 11 a.m., I showed an example of liquor in content, and I said, 4:21 so here's an example of liquor in content. 4:25 If you, you know, 4:27 have epilepsy or migraines, now is the time to go get a cup of tea, but everyone 4:28 have a look at this flickering content and then three hours later I get a migraine. 4:32 [LAUGH] So I don't know what it says that its the Microsoft developers, 4:36 and not the many hundreds of developers prior to that, that it figured that out. 4:39 Maybe it says that they hire better, better than than most. 4:44 So it's important to know it's not just about vision impairments. 4:48 People think that when it comes to web accessibility it's only 4:52 about vision impairments. 4:55 It's the web is a very visual medium and therefore of gutter vision impairment you 4:56 must of course have the most serious issues with websites, and then, 5:01 that's not actually the case. 5:05 In America, there are 38 million people with disabilities. 5:07 About 7 million of those are people with visual disabilities. 5:13 However, there are 11 million people with hearing disabilities. 5:17 And there are 14 million people with cognitive disabilities. 5:21 And there are 20 million people with physical disabilities. 5:24 So of the major groups of people with disabilities, 5:28 a vision of Hammond's are actually the smallest group. 5:31 And that, it's even smaller in Australia. 5:34 So, you know, you really need to think about a whole bunch of things and 5:38 when it comes to physical and cognitive impairments, it has a lot to do with 5:40 code and source order and things like that and I'll talk about that later on. 5:44 So mobiles are kinda impressive in terms of the kinda 5:52 assisted technologies that are built into the systems. 5:57 So basically, every major smartphone has an in-built screen radar sort 6:01 of this TalkBack for Android, Narrator for Windows, VoiceOver for iOS. 6:07 There's text-to-speech recognition, volume control, visual, auditory and 6:12 vibrational notifications, haptic keyboard and zoom. 6:17 [BLANK_AUDIO] 6:20 There are a whole bunch of system accessibility settings such as increasing 6:23 font size but I will talk about that a bit later on because it's not 6:28 very well-supported, basically by any kind of app or website. 6:31 Touch and hold delay, screen rotation, 6:35 high contrast, assistive touch, and mono audio. 6:39 So the thing to remember is that there is some correlation between 6:43 mobile site and app issues and desktop accessibility issues. 6:48 But, WCAG2 is very much built for a desktop environment. 6:53 We did write it to try and make it technology neutral so that it could be, 6:57 you know, kind of assigned to things like mobiles or documents and stuff like that. 7:01 But I do feel that we failed in a way. 7:06 So, for example we had to require that all content can be accessed 7:08 by the keyboard only whereas it doesn't require that everything be 7:12 accessible only via the mouse, or only via touch. 7:17 And if you think about it that's kinda one of your requirements on mobile devices. 7:21 And in case you haven't figured out, I say mobile not mobile. 7:27 [LAUGH] I don't even know that's how you say it, but, mo, 7:32 and when I say mobile devices, I mean mobile and tablet devices. 7:35 So let's talk about mobile usage. 7:40 I'm not sure if you can see it, but the, basically in January this year, 7:44 more people were using mobile devices to access the Internet than desktop devices. 7:49 So 55% of all Americans owns a smart phone. 7:56 47% of Americans own tablets. 8:00 So it really is something that you need to consider when you're building a website. 8:03 Obviously you need to consider it if you're building a mobile app because 8:07 people use mobile all the time. 8:11 And people with disabilities use mobile a lot as well. 8:13 This is a annual screen reader survey by an organization called wemai, 8:17 WebAIM in, U, Utah, Web Accessibility In Mind organization. 8:22 And they've been doing this screen reader survey since January 2009. 8:26 And in January 2009 there were 12% of their screen reader users that 8:32 used a screen reader on a mobile device, up until January this year, 8:36 where 82% of screen reader users used a screen reader on their mobile device and, 8:41 we do find that people with disabilities sometimes prefer to use mobile devices, 8:46 instead of desktop devices. 8:52 And that's because, this is, the technologies are built in. 8:54 They're often cheaper. 8:57 Assistive technology, such as screen readers, are very expensive. 8:58 And that there's a bit more support. 9:03 As well as all the other reasons why we use mobiles. 9:07 So, this is a site that we, 9:10 we developed a few months ago called the Energy Rating site. 9:12 So, in 2012, 8% of their users were using a mobile or tablet. 9:17 In 2013, that was 13%. 9:21 In 2014 that was 20%, or 19%. 9:25 Now that was not a responsive site and 9:27 it was not an m.site, so it looked really ugly on a mobile device. 9:31 And so, when we rebuilt the site, 9:37 initially they weren't at all interested in building a responsive site, 9:40 and we said well, one in five of your users are mobile device. 9:45 Energy Rating is something like your Energy Star program. 9:49 So we have stars on appliances to say how, 9:53 how much energy they use and what we found is the month after we. 9:56 Change the site to a responsive site. 10:01 That jumped by 5%, up to 24%. 10:03 So this is Consumer Affairs Victoria, which is another site that we've 10:08 worked on and we quite specifically tested their MDOT site. 10:12 Now in 2010 they had 2% mobile users. 10:17 In 2011 it was 6%, in 2012 it was 12%, and 10:22 2013 it was 20%, and now in 2014 they're at 28%. 10:28 And that's, that is a pure MDOT website, not a responsive site. 10:34 So that's one in three users. 10:38 So, I'm gonna talk now about some mobile specific accessibility issues. 10:42 Now, you'll probably look at them and go, wow, those are issues, [UNKNOWN]. 10:45 Because one of the things that we find is, if you find a mobile site or an app, 10:50 [COUGH] experience difficult, 10:55 then a person with a disability is really going to find that experience difficult. 10:56 To the point that they might not be able to actually use the system at all. 11:01 So, the first thing I'm gonna talk about are PDFs. 11:04 And, I actually posted a link to 11:09 this presentation on LinkedIn about an hour ago. 11:11 And, I got a response by the accessibility specialist of Adobe. 11:16 So, he had some issues with my comments on PDFs, but you know, 11:21 I sort of said, well, you know if you make PDFs more friendly to a mobile device, 11:26 then I'll be happy to publicize that. 11:32 So, basically one of the problems with PDFs is they don't really do anything. 11:35 So you, you click on a PDF and you wait, and you wait, and 11:43 then oh, then it shows up. 11:48 And I can tell you right now, people want things [SOUND] fast. 11:50 They're not gonna wait and five second for it to download something, 11:53 they're just gonna go to the next option. 11:57 So, that was searching for search engine optimization. 11:58 Which one would you prefer, the tiny text you can't read and 12:03 if you have to zoom you have to move across the page horizontally or 12:07 something that actually reflows to this size? 12:11 So this is once again the energy rating site. 12:13 On the left was original content, on the right is the new site. 12:18 So you can see it's clean, big text, easy to use. 12:21 The thing to remember with PDFs is that they're often large file sizes and 12:26 on a mobile device people have slower connections than on their desktop. 12:31 It means that it takes longer to download on a mobile than to a desktop. 12:37 And it also increases your user's, usage data. 12:42 Sorry, data usage, which is, can be a real problem. 12:46 I have a whole different presentation on PDFs and 12:50 accessibility, if you're interested, you can go to the AccessibilityOz blog, 12:52 and there, there's a link to it somewhere. 12:57 And I talk more about the problems with PDFs. 13:00 [BLANK_AUDIO] 13:01 So, you know, you wanna talk about things that are act, 13:06 you want to actually make things friendly to mobile as opposed to difficult. 13:08 So on the left, for example, we have the energy writing 13:11 application where you type in what kind of appliance you have, 13:16 and it tell you how many, how much energy it uses. 13:21 Instead of rebuilding, they just built a mobile app, and 13:26 the mobile app is what you see on the right hand side. 13:29 [BLANK_AUDIO] And you can see, once again, 13:34 even though you go further down the app, it's still much much easier to use. 13:36 So, autoplay and movement now, 13:39 I've only seen this problem, autoplay once. 13:44 Autoplay is one of the four, 13:50 [UNKNOWN] to requirements that are basically deal breakers. 13:51 If you have, if you fail any of those four requirements, then your entire web 13:55 site is deemed inaccessible and there's nothing you can do about it. 14:00 There's no point, you should make things as accessible as possible but, 14:03 you can't say, this section is accessibility because you've actually 14:07 failed one of these master four requirements. 14:10 One of those four requirements is autoplay. 14:14 So this is the Jamie's kitchen app, and when you first go to the app it takes you 14:16 to the video player in your mobile device, and it automatically plays a video. 14:22 Now, I can see by looking at that video, how to get out of it, but someone who's 14:27 using a screen reader isn't going to be able to access that information. 14:30 They're not gonna know that this is opened in the video player. 14:35 They're not gonna have access to the Done button because it's grayed out. 14:38 It's gonna be incredibly difficult for them. 14:42 And, as I said, 14:44 it's one of the most serious accessibility failures of all time. 14:45 Then you have continuous movement, and, you know, look, I find that annoying. 14:49 It's, once again, one of those things you have to be on a stop, movement on a page. 14:54 Now, people have mostly understood this, in a desktop environment, so 14:59 you've got pause buttons, and things like that. 15:04 But, we see a lot in mobile devices that people, 15:07 that there is no way to pause this kind of information. 15:10 [BLANK_AUDIO] 15:13 So keyboard, now keyboard is really important. 15:18 So here you need to always have the ability to, to dismiss a keyboard. 15:22 So if you're in a section and you, you wanna go somewhere else, 15:27 the keyboard takes up such a large amount of space, 15:29 that you need to be able to dismiss it so you can move around. 15:32 This is even more important 15:36 to people with vision impairments that are using a magnifier. 15:40 So here you're on the phone field and 15:43 there's no where to actually dismiss that keyboard. 15:44 So that can very annoying. 15:47 Then there's, using custom widgets or custom inputs. 15:49 So here instead of saying, using HTML5, or even just an HTML4 select element, 15:54 that would be recognized by the iPhone, you've got a custom drop down. 15:59 And the only that you can actually access any numbers is by scrolling up and down. 16:03 Which is kind of very difficult for a general user. 16:10 Imagine what it would be like for someone who is using a magnifier and 16:13 seeing a small area of the screen. 16:16 [BLANK_AUDIO] 16:17 Alternatives. 16:22 So, most people, when it comes to accessibility, 16:22 they understand that all images need alt attributes. 16:25 And I know there are some cases where alt attributes can be empty. 16:29 And if you're interested in that, 16:32 I've written a site point article on alt attributes and images. 16:34 But buttons need alternatives too. 16:38 So, the buttons at the bottom here. 16:40 Oop. 16:44 They don't have alternative text, so basically this screen reader, 16:47 voice over in this case, reads button, button, button, button. 16:51 Okay, so you also need to think about access. 17:00 So this is Facebook, and so what happens is it, it reads, 17:02 it reads across here, across here and then it goes down to your news feed. 17:08 And as you keep reading down the news feed, and it keeps loading the news feed, 17:12 and it keeps loading the news feed, and it keeps loading the news feed. 17:16 At no point do you ever get to these options at the bottom. 17:19 So you need to think about ways to do that. 17:23 [BLANK_AUDIO] 17:25 So text size too small. 17:31 I had to significantly reduce the number of examples I have here, 17:33 because this happens everywhere. 17:38 So this is Etsy. 17:40 This is the largest text size, you can't zoom in on this text, so 17:42 that's the largest it's ever gonna be. 17:45 [BLANK_AUDIO] 17:46 I flew Virgin over here and this was their Virgin app. 17:52 And this was the text here. 17:55 Once again you can't zoom. 17:57 You can't do anything. 18:00 I couldn't read it. 18:02 I do have glasses, but with glasses I've got 20/20 vision. 18:03 So to me, I just wonder at what point did the designer or 18:07 developer think this was a good idea? 18:12 [LAUGH] You know, obviously they've never actually used their app, 18:13 or they always saw it on a massive big screen. 18:16 They never actually checked that it could be read. 18:19 So, there are ways to increase text size in the system itself. 18:25 If you want to know, feel free to send me an email, drop me a note, and 18:29 I'll tell you how. 18:33 So there are some apps that support the increase of text size. 18:34 So, this year, this is the smallest text size. 18:38 And this is the largest text size. 18:44 And as you can see, the actual box itself doesn't increase. 18:46 So even though it's supported, it's not supported properly and 18:50 basically gives a lesser user experience, than not supporting it at all. 18:53 This is another one, smallest, largest. 19:01 And they were the only two that I could find that actually 19:05 supported the increased text size settings. 19:08 And I tested a lot of Apps. 19:10 Now the thing is, the actual, this is the system settings itself. 19:13 This is not supported by Apple. 19:16 So, this is what it looks like with small text. 19:18 This is what it looks like with large text. 19:20 And as you can see the small text you see, 19:23 apps that support dynamic type will adjust to your prefered reading size below, and 19:26 then with the large size you see apps that support Dy. 19:31 Now apparently they fixed this in iOS 8, [LAUGH] but, 19:35 you know, if Apple can't get it right, then what help, hope do we all have? 19:38 So then we see apps that do support large text, but they don't do it very well. 19:46 So, this is Twitter. 19:52 And that's the smallest text, and that's the largest text. 19:55 Now, I don't actually call that large text. 19:58 You know I call that kinda normal text. 20:00 Then there are in app settings. 20:03 So we see this a lot with news sites. 20:05 So this is the BBC. 20:09 The left is the smallest size and the right is the largest size. 20:10 And you know, that heading is a little bit large. 20:14 You know, I'll go smaller side of, size of large. 20:18 If you go down to the bottom, to the actual article, 20:21 you can't see anything at all. 20:23 [BLANK_AUDIO] 20:25 So this is the ABC, which is our Australian news, government news system. 20:27 And so, this is their largest text size which, 20:32 once again, isn't particularly large. 20:34 But the biggest problem is, this is with a small text. 20:38 And that's with the large text. 20:42 So the actual heading and the tag line aren't increased in text size. 20:45 So that, I think that would be maybe the most important information 20:49 that people get to determine whether they want to read that information. 20:53 Color contrast. 20:57 [LAUGH] I've picked on some big names here. 21:00 Amazon, grey text on a white background, I don't know if any of you are designers, 21:05 well you probably are all designers, but quite frankly, 21:09 why grey text on a white background? 21:12 I can tell you that it will fail color contrast. 21:14 And then you get things like Ebay, 21:18 which has grey text on a grey background and, you know, and that's really bad. 21:22 And then you get things like LinkedIn, 21:26 which has dark grey on a medium grey text background. 21:28 Now, this thing here is the, the level of connections. 21:34 So, whether they're a first level connection or a second level connection. 21:37 And I use that information a lot to say, well, you know, 21:41 I'm, I'm friends of those people. 21:44 I need to sort of know these people a bit more. 21:47 So that is very valuable information. 21:50 [BLANK_AUDIO] 21:52 So color alone is another issue. 21:56 You can't use color alone to convey information so most people are aware you 21:59 can't say the fields in red are mandatory, because people who have certain 22:03 colorblindness, they read black text, they see black text on a white background, 22:07 the same as red text on a bl-, a white background. 22:11 So they're not gonna be able to tell which fields are red. 22:14 But it's just a general rule and one of the reasons why it's a general rule, 22:19 is that screenwriters don't actually write out the colors of certain things. 22:25 So if you use color to convey information that information is most 22:29 definitely available to the screen writing easel. 22:34 So this here, is asana. 22:36 I think, so the current day is the 29th. 22:38 You can probably get away with you know using color alone 22:42 because m-most people know what the current date is. 22:47 But you know, what is the next year etcetera, 22:52 etcetera is yeah is less, less easy to figure out. 22:56 This is a better example. 23:02 So here green means that it's available. 23:04 Red means that available but delivery is full and 23:06 black means we don't deliver on those days. 23:09 So that's gonna be useless to someone using a screen reader. 23:12 [BLANK_AUDIO] 23:15 The other thing that I am amazed at I think I spent about 23:19 ten minutes last night complaining about this particular issue. 23:23 We've got K-Mart in Australia. 23:27 So here there is a link to catalogs. 23:31 And all of that area is a link to catalogues and 23:34 the catalogue is a flash feature. 23:40 So on iOS you click on it and you get nothing. 23:42 Now, I first picked this up two months ago and so 23:45 its not like oh we launched, oh wow that was a mistake. 23:48 It's still an issue. 23:52 [BLANK_AUDIO] 23:53 This one, I call this a hover trap. 23:56 And it's one of the issues that I haven't seen anyone else, 23:59 certainly with [UNKNOWN] two, but, 24:02 not even the BBC Mobile Accessibility Guidelines talk about hover traps. 24:04 Basically, when you tap on this, you get a large 24:11 sized hover just as if you hovered over it with a mouse. 24:14 The problem is that when you take your finger off that doesn't disappear. 24:19 It stays there. 24:24 So, you can't get rid of this, there is no way to close that. 24:25 So the only way to get, to actually use the site is to close the whole browser and 24:29 start again. 24:33 [BLANK_AUDIO] 24:34 AirBNB, I was quite disappointed. 24:40 I wanted to use them, actually, I do use them as a good example later on. 24:41 But here, if you zoom, basically you just break the site. 24:47 And you break the site in a variety of different ways. 24:50 So. 24:53 Here, you've got, you know, overlapping content. 24:55 But, you can, kind of figure out what's going on. 24:56 But, then, when you get to here, it's basically useless. 24:59 [BLANK_AUDIO] 25:03 So, then, you get to a site like that and you think, okay. 25:05 Fine, I'll just use the desktop version. 25:08 And then, so you click on the desktop button, and you lose all your information. 25:13 So the fact that you specified you want to move, 25:19 you want to arrive at a certain date and a certain city and a certain location, 25:21 it just takes you back to the homepage and loses all your information. 25:24 [BLANK_AUDIO] 25:27 Other issues we see, functionality is unclear. 25:30 So this one, is it one way or is it return? 25:34 Now you might be able to figure out it's probably 25:38 one way because one way looks a little bit more three date, 3D, than return. 25:43 But that's someone with 20/20 eyesight. 25:47 [BLANK_AUDIO] 25:49 This one I love. 25:53 Select from zero. 25:55 So I'm not going to buy anything from this site. 25:58 Even though I buy from it all the time on the desktop. 25:59 But you know I use my mobile more and 26:02 more and eventually I just won't end up buying from this company. 26:05 Because I don't trust them. 26:08 Because I don't know what I'm selecting. 26:09 So this one, grey, you think, okay, they're inactive. 26:16 Because, you know, that's what grey means, right. 26:21 They're grayed out. 26:23 They're not actually inactive. 26:24 They just made them grey text for some reason. 26:25 [BLANK_AUDIO] 26:30 So, functionality different across devices. 26:35 So, this is ASANA which we use a lot in AccessibilityOz. 26:39 And I can tell you with the desktop, basically I work out of my tasks. 26:42 That's all I work out of. 26:47 And yet, when I look at it on the desktop device, it's not there. 26:51 So. 26:56 Row New York City, 27:00 which is where, future web design has put us up, thank you very much. 27:01 It's a small issue, but here you've got reservations followed by hotel and 27:06 here you've got hotel followed by reservations. 27:11 It's just a small thing but annoying. 27:13 But the bigger issue is you've got all this imagery here, and 27:17 it talks about things you can do in New York, it talks about, you know, 27:21 who you should see, etcetera, etcetera, and they have a link to their blog. 27:27 I spent about 15 minutes, this morning, trying to find 27:30 the blog on the mobile site, and I couldn't find it. 27:34 So, it, it might be there somewhere, but I'm not exactly sure how to get to it. 27:40 And once again, it's different to the desktop site, so 27:42 I'm not gonna trust that, that, mobile site. 27:46 The other thing is, is that if there's, if the functionality is different, 27:48 then you're gonna use the mobile site, realize the functionality is wrong, 27:52 go back to the desktop site, and all of a sudden, you've got people using mobile 27:56 devices on a desktop version of the site that's not optimized for a mobile site. 28:01 [BLANK_AUDIO] 28:05 So inconsistency. 28:12 So here you've got an email that's in green. 28:15 And you got call Michael in green. 28:18 Now if you click on call Michael, it pops up your phone display and 28:20 you can call Michael. 28:25 So you'd think, okay, clicking on the email would create an email. 28:26 But it doesn't. 28:31 [BLANK_AUDIO] 28:31 Pixelation on zoom. 28:39 So. 28:40 This here is a magazine called Voyeur. 28:42 It's a, is a-, available to Virgin passengers in that they, 28:45 you know, they give you a few, a few issues free. 28:49 And then they want you to buy it. 28:53 Now they, they know most, almost all of Virgin passengers will be 28:55 looking at it on a tablet on the little display, or 29:00 on a mobile device, and yet at no point did anyone ever test these things because, 29:03 you know, this is the book that they're reviewing, and I can't read it. 29:07 You know, and this is the five steps to self whatever, and you can't read it. 29:10 And that, they're actually trying to sell a product here. 29:19 [BLANK_AUDIO] 29:21 >> Source order. 29:26 Okay. So it's really important, even more so 29:27 with a mobile device, that important information isn't after the submit button. 29:30 For most users when they are using a say a screen radar or 29:35 Magnum Fire they get to the submit button, they assume it's the end of the page. 29:38 Or they fill out the information, and they click the Submit button, 29:42 they never get to anything after that Submit button. 29:45 With this, you know, select the tickets, et cetera, et cetera, and 29:48 it's only when you scroll down after the Submit button do you get the request 29:53 accessible tickets, and all this information that you actually need. 29:59 Row does something. 30:05 Room number last name, continue, or if you have an access code. 30:06 So you know, you can imagine someone with a magnifier or 30:12 screener to having an access code and going, where do I put that information? 30:14 [BLANK_AUDIO] 30:18 This is LastPass. 30:23 So here again, Remember Password, Login Offline. 30:25 Now, I can tell you I tried LastPass the other day, and for 30:28 some reason I didn't have Internet access, and I didn't even see that. 30:31 You know, and I can actually see the entire screen, but 30:36 I, I took in the part about the submit button and that was it. 30:39 Now when you try to login and you haven't selected login offline, 30:43 you get no network connectivity. 30:47 The problem is this is done through java script. 30:49 You, the, the user focus is on this login button. 30:53 So, to add content up here means that it's not going to be read, 30:58 once again, by the screen reader user. 31:01 Because they're gonna kick, click login. 31:03 Content's gonna be up here, but they're still down here. 31:06 They're not gonna know to go up and find that information. 31:08 [BLANK_AUDIO] 31:11 Touch targets. 31:19 Okay so this is Twitterrific and in a lot of ways it's 31:21 an absolute excellent product app but 31:26 this touch target is minute and the number of times I've tried to touch it. 31:30 You can increase the text size and all that kind of stuff but you still, 31:35 that little touch target doesn't increase. 31:38 [BLANK_AUDIO] 31:41 And this, this is Coles. 31:43 I like picking on Coles, I don't know if you've got a Coles, it's kind of like a, 31:46 it's a supermarket. 31:49 This is a map of a particular location. 31:51 If you click anywhere or you drag from anywhere on the map, it drags and 31:56 zooms the map. 32:01 The only way to move up and down the page is to click, 32:02 to tap somewhere on the white area, so you know, almost impossible to use. 32:07 The other thing that they do is, so if you give up and 32:14 you go, well I'm just not looking at that map. 32:17 You can go, go to this page where you can select you know, which country, 32:20 which state you're in. 32:24 But the touch targets activate on tap, as opposed to on the removal of the finger so 32:25 when you're ever, when you're ever creating a mobile site or a mobile app, 32:30 you need to activate things on removal of touch. 32:35 Not on, not on just pressing the, the screen. 32:38 These activate as soon as you touch the screen, so if you wanna scroll down, you 32:42 can't, because as soon as you hit one of those things, it takes you to the section. 32:47 On top of that, this is further down this page, and 32:51 every single country, every single state is on the one page. 32:55 It took me 15 seconds to scroll up to the top of this page. 33:00 There's no back to top. 33:06 There's no, you can't go back cuz it's an anchor link so really bad implementation. 33:07 So spacing is very closely related to touch targets. 33:16 But this, you've got edit so, edit the option, or mark complete. 33:20 Now, you don't wanna have two complete opposite tasks that close together because 33:25 it's very, it is very common to accidentally click the wrong wrong option. 33:31 And the same with Airbnb, which is even worse. 33:36 So here you gotta hit that little x, 33:41 but if you hit that, it'll start loading the app. 33:42 So a lot of what I talked about previously is lack of testing. 33:52 But this is what I'm talking about now is definitely lack of testing. 33:55 So here this is Target, which is, all you go to Target. 34:01 So this is, you know, you click on this and you get your search for 34:07 566269575662687925662. 34:13 It's annoying. 34:18 And the thing is you didn't actually search for that so you know, you might 34:19 be able to get away with something like this in a desktop environment but 34:23 on a mobile device you've got such a small screen, 34:27 you really can't be making these kind of mistakes. 34:29 This is Coles. 34:32 As I said I love Coles. 34:33 [LAUGH] Love picking on Coles. 34:35 Actually in my accessibility basics section, I have a, 34:36 a thing about you know, how accessible websites allow 34:39 users to do things that they wouldn't otherwise be allowed to do, be able to do. 34:45 For example, you know, go shopping. 34:49 And I said, you know, it'd be great if Coles was accessible. 34:52 Then, you know, all these people with disabilities could go 34:55 do their own grocery shopping. 34:57 And I always say, oh, I hope there's no one in the audience that is from Coles. 34:58 And there was once, and so I spent the rest of the presentation freaking out. 35:02 And then they came up to me afterwards, and they're like yeah, 35:06 we know we're not accessible. 35:09 I was like, well I'm going to keep using you as an example then. 35:10 So here, obviously no testing was ever done, 35:15 because that image is not meant for a mobile device. 35:18 This here, if you go to the locator store, it tells you in latitude and 35:26 longitude where the store is. 35:30 [BLANK_AUDIO] 35:32 This one, or you can select a current location but they don't show you that. 35:37 Those people that don't know about Australia that's only half of it. 35:43 You can scroll across however, in this option, no you can't scroll across. 35:49 So basically we deliver in Sydney and 35:53 you just have to guess where else they deliver. 35:56 This one's Drupal. 36:02 I feel a little bit bad using them as example, Drupal self. 36:03 So, they've got, basically overlapping text there. 36:06 I spoke at Drupal gov a few months ago. 36:10 So I do feel bad using them. 36:12 But you know, you can make mistakes. 36:13 This one, it's a spelling mistake. 36:18 You can tell it's the word customers, 10 cafe customers. 36:21 But you know, a screen reader as soon as they come across a word 36:25 that doesn't make any sense they read it out letter by letter. 36:28 So you can imagine that would be annoying. 36:31 And this is going out to millions of people, so you would think, 36:33 maybe some basic testing. 36:38 This one I saw, obviously Facebook made some kind of change where this 36:40 kind of code came through. 36:45 I saw it for a couple of days. 36:47 And most of the news sites picked it up pretty quickly but Crikey didn't. 36:49 Crikey is very well known in Australia. 36:54 And the thing is, when you're posting your content to other mobile sites, 36:57 other mobile apps, you need to test all the time because they will change things, 37:01 and they're not going to tell you. 37:06 So you need to make sure it's right. 37:08 This one, it's a 404. 37:11 It's a broken link. 37:16 You know, that's, that's just really bad. 37:17 [BLANK_AUDIO] 37:18 So this is me coming into Los Angeles. 37:22 And it, the content here says this page will redirect. 37:26 So content doesn't really make sense to have here. 37:30 Page doesn't redirect. 37:34 So all of the sudden I'm not feeling that confident about giving you my 37:37 credit card details. 37:41 This is Triplify, which is about you go to a place and you say, 37:45 hey, I'm here for the weekend. 37:48 Tell me what's going on. 37:49 You put in San Francisco and 37:51 you get one of the best errors of all time. 37:55 Description, reference error, can't find variable, Triplify mat file, 37:59 HTTP, random content. 38:03 This one here is the Green Apple Books, which is a well-known bookstore in 38:10 San Francisco, that I loved, until I found out about Pal's bookstore, 38:14 which is in Portland, which is the largest book store in the world. 38:16 I'm a bit of a book nut. 38:20 And so Green Apple Books was having a item day when I was in San Francisco last week. 38:22 And I thought, fantastic. 38:27 This is their mobile site and as you can see the content just doesn't even 38:28 work on a mobile site, yet this is a pure m.site. 38:34 And this is the same same site on their events calendar. 38:40 Now you can't scroll across so 38:45 you only see things that go from Monday to Thursday. 38:47 Ironically, if you then move to the desktop site you get exactly the same page 38:52 and you can scroll across. 38:56 So, you know, when you got a website that works better on mobile that's being 38:58 built for desktop then you need to talk to developers. 39:02 And this one, this is Qantas which is an airline. 39:05 And so here, you, flying from Sydney to and 39:10 it lists every single country in the world. 39:15 [LAUGH] Eight seconds it took me to get to Melbourne. 39:18 So those are all the terrible, terrible things that you can do. 39:25 So I'm going to talk about some correct implementations. 39:28 This is Twitterific. 39:33 I know I used them as an example before but 39:34 they have some really good tex, text color support. 39:37 Their large text isn't hugely large but it's pretty good. 39:41 And the interesting thing about color contrast is that people with vision 39:46 impairments want a really high color contrast. 39:50 But people with cognitive impairments want a really low color contrast. 39:53 So allowing your users to choose those color, color contrasts is a good idea. 39:57 So, this is the Apple messages. 40:04 So, once you specify large text in your settings, 40:06 it does come across to the messages quite well. 40:11 However, I don't really think that's, you know, if that's the largest you can go, 40:14 I don't think that's really largest you can go. 40:18 This is our website. 40:21 And that's the largest you can go on my website and I can tell you now, 40:24 there will be some people using a magnifier at that level. 40:30 This is a real estate, app. 40:38 And here the keyboard. 40:40 Gives you the option to close, but 40:44 also gives you the option to jump from field to field. 40:46 [BLANK_AUDIO] 40:49 And, you know, the proper keyboard for the proper item. 40:55 And this is A B and B. 40:58 So, yes they have used color, but they've used color in combination with shape. 41:03 I, because it's an app I can't see the, the code behind it. 41:08 But if they had co, they could code that in a way that was accessible and 41:10 visually as accessible as well. 41:16 [SOUND]. 41:19 So those are just some of the things that I have come across in the last few months. 41:21 Some of those issues are covered by the BBC mobile accessibility guidelines. 41:29 However, one of the problems with the BBC mobile accessibility guidelines is that 41:32 they merge the requirements in mobile apps and 41:37 mobile sites into one group of requirements. 41:40 So if you're just looking at creating mobile sites, 41:44 they're a bit hard to navigate. 41:47 And if you're just creating mobile apps, they're also a bit hard to navigate. 41:48 So we've actually [COUGH] at AccessibilityOz 41:53 we've actually come up with our own set of mobile accessibility guidelines. 41:57 Which will be publishing on Aus Wiki in the coming months. 42:01 Aus Wiki is wiki.accebiityaus.com.au and it's got a series of fact sheet 13 in all. 42:04 There all based on category which talk about how you make things accessible so 42:11 category of things like images, tables, forms, content, coding. 42:15 So each fact sheet has a series of checklists. 42:22 A manager checklist which talks about, you know, 42:26 exactly how whether something is accessible or not, and how you do that. 42:29 And a developer checklist which talks about correct and incorrect code. 42:33 It also has some testing tool checklists, so 42:36 it talks about how you would go about testing these things. 42:39 Using various different testing tools and they're all free to use, 42:42 you don't need to register. 42:45 Just go to wiki.accebiityaus.com.au. 42:47 Does anyone have any questions? 42:49 >> I have a question for you about. 42:51 >> Oh >> Hand you the mic. 42:57 >> I have a question, you had brought up the problem with the PDF's. 43:00 How do you feel about the ePubs for accessibility so 43:03 you can change the text size? 43:07 >> Yeah. >> Cuz some of the PDFs are very 43:08 long documents, and putting them on a mobile device would be really tedious. 43:10 >> Yeah. EPub's fantastic. 43:15 You have them accessible. 43:16 And what we're saying is that there are a lot of ePubs out there that aren't 43:18 accessible, but if they are accessible, then they're a fantastic option. 43:21 We have a, 43:27 an online training course on creating accessible epubs if you're interested. 43:28 Any other questions? [BLANK_AUDIO] 43:33 Oh. 43:37 [BLANK_AUDIO] 43:38 >> Hi. I was just wondering was there any, 43:42 automated accessibility, testing, tools that you could recommend or. 43:45 >> Yes, we have one, we built, we built over the last couple of years called AART. 43:51 Accessibility automatic reporting tool. 43:57 I did an analysis of, the automatic testing tools on the market, 44:00 found that they were really quite terrible, so we built our own. 44:04 If you're interested, just contact me ,um, and I can set up a trial version, 44:09 you know, feel free to come and have a chat to me and I can talk to you about it. 44:13 There was a guy here that had a question. 44:18 >> So, you said that the mobile device is prefered for 44:23 accessibility over desktop devices. 44:26 Do you know what the percentage is, of users. 44:28 They're not. >> The users? 44:30 >> They're not necessarily, they're preferred by some users, so 44:31 its not that more people use mobile than desktop, 44:33 it's that some users prefer to use mobile than desktop. 44:36 And unfortunately, no, there hasn't been any studies on that. 44:40 I think that's it for questions, thank you very much. 44:45 Feel free to contact me, 44:48
You need to sign up for Treehouse in order to download course files.Sign up