Accessibility On The Web

‘Centre titled Place Holder, Level one Accessibility on the Web’. Please allow me to introduce myself. ‘Subtitle placeholder level one’. Good afternoon, everybody. My name is Brian Dalton. This is not how I really speak, but it's the way my screen reader Jaws does. ‘Align. Centre’. Jaws is more than a shark that swims in the sea. It has been my friend since 1995 and acts as my eyes on the World Wide Web. ‘It enables me to do things like read the newspaper, check the football results, buy concert tickets, book flights to fun destinations, see what's on in the cinema, shop in the supermarket for all those nice goodies. Web pages have to be nice to Jaws, so I can do all these cool things. In this presentation, I will take you through what jaws needs to ensure I'm happy and contented.’

Even if I wanted to speak that high, I don't think I could. Hi everybody, I am Brian. It's great to be here. Thanks so much to all the UXDX crew for having me along today. As the lady said, who is actually a real voice, her name is Karen Jacobson. No mistaking the accent. She's from Australia. She's used in lots of technical gadgets. She's used on my iPhone. I know taxi companies user in their GPS systems as well, and there we've borrowed her as well for Jaws, for screen readings. So she's a well-travelled lady. But what are we going to do is take you through some of the requirements in terms of accessibility. Show you some websites that I would use to show you some of the functionality that's important to me and websites to enable me to navigate. And we'll have plenty of time for some Q&A at the finish. So lots of time for your questions, either at the end or throughout the day or will be around during the day as well. So let's kick on then and we'll rock on to the next slide.

So I spent a lot of time looking at some graphics here to give you the best possible view that I could, but this is what Jaws actually look like. It is a picture of a shark. Before I bought jaws in the nineties, I did think that jaws was something that swam in the sea, and he terrified the life out of me. And so that's how the logo for Jaws looks like. So what is Jaws? It's more than just the shark. It is a screen reader, so it does what it says on the tin. It reads what's on the screen, as you've heard to a blind or visually impaired user. It doesn't come cheap, though it's about fifteen hundred euro to buy the professional version of Jaws in the early nineties, when I began using it, first of all, I took a bank loan out. I asked my mum to be a guarantor. Her heart nearly sank to her boots when she found out the price tag. But I did come through. We got Jaws and I did pay her back. It can be fully customised to the user's preferences, and I'll show you some of that as we go through the presentation. We can speed it up, slow it down. You can speak all punctuations, no punctuations. You can get it to read certain areas of your screen and focus on certain areas of your screen as well.

So how does a blind person navigate a screen? Well, the first thing that I would do if I saw a screen for the very first time is I would build up an image in my mind of what the screen actually looked like. So where are things positioned on the screen? Top left, bottom right hand corner, top right, bottom left? And then I would obviously have a fair idea as to what the page is made up of, how it's constructed, what links are on the page and where will they take me when I click those links? So just the same as you would have if you close your eyes, look around the room, close your eyes, you've got a picture in your head of what this room looks like, where I am in relation to you. If you close your eyes, you've got the same thing as I have. You've got a picture in your head of what the room looks like and where everybody is positioned.

Making web content accessible. This is what Jaws likes best. And so what does he like? What we look for is clear headings. Can we navigate around the page using headings? Are all the links labelled? Do they do what they say they're going to do? Is there good descriptive text on all the links are the buttons labelled. So when I hit the B key, because every action that you do at a mouse must also be must, must also be able to be performed by a keyboard or a screen reader user. So if I want to click a button, I should be able to hit the letter B and it should jump me to the button and it should tell me what the button is. If I want to hit the go to home page, I should be able to pull all the links together and hit the letter G to take me right to where I want to go and all graphics and symbols. They should all be labelled as well to tell the screen reader user what they're going to look at and what the image that's in front of them on the screen is. That's what I mean about making web content accessible, accessible. So what I have up there is good design enabled, bad design disables. So obviously, if you've got good HTML5 content built in from the get go, you're on a winner straight away.

And these are some important considerations as well when looking at when designing web pages to get a good structure to your web page to allow a screen reader user like myself to navigate easily and to make sure that there's a good friendly user experience, because that's what we really like to achieve.

And these are just some more considerations that you can view, and we can make these slides available later on if anybody would like to have a look at them later on.

So we're going to come back to that at the very end because what I'll do is I will show you how screen readers have developed since the early 1990's since I began using this stuff way a long time ago. So let's get into some real meat and let's get into some demonstrations of some of the websites that I would regularly view. So the news is always something that I like to find out what's going on and have I set up Wi-Fi? I haven't

Can I get Wi-Fi? Sorry. But what we're waiting for the good guys, good guys on the job. Let's explain. So obviously, what I want to do is bring up the RTE. Web page. This is a very heavily populated page. It's got lots of content on there. It's got lots of news stories. So what I want to be able to achieve here is to navigate a web page using headings to reach various news stories and be able to read the content from within those news stories. So let's see if we can get our friendly. So we're on the RTE page and we're in business, so let's navigate by heading.

So I'm navigating the page by heading at the moment browsing all the stories on the website. If I want to take any of those stories and read those, what we can do is we can open a link to that story, and again, it tells me exactly what the link to the story is. So it does what it says on the tin. Let's see, will it take us there. So let's read that then, so we can share the story if we want to. So, we can read any of those stories via that method, just loading up the RTE Webpage, browsing the story by heading and clicking on the link, which is clearly described to tell me exactly what it is. So that would be an example of good accessibility. Now let's head off to the movie, so we've heard all the bad news. We've had all the bad news. Ready. Let's go to the movies.

Time for some entertainment, so a couple of years ago, I wanted to take my goddaughter off to the movies. It was her birthday, so my treat as a godfather was to take her off to the movies and let her go to any movie that she wanted and then buy our lunch afterwards so a colleague at work at the time said to me, I think it would be a good idea, Bryan, if you booked the movie ticket and while you were at it, if you also booked the seats as well. Much more user friendly experience. So I thought it was a great idea. So this is a different movie app because we're two years later, but the same problem still happens. So let me show you what that is so we can read about the movie.

So it's Disney's Christopher Robin. This is one of the latest movies out at the time, it was Smurfs The Lost Village that I wanted to book. ‘Blank’.Sso we can read all about the movie. We have got a table, tell me the length of the movie and who's starring in the movie as well.

104 minutes, close to two hours. Let's read a little bit about it. So we know who's in it. All right. Ok, so we got a brief synopsis of what it's about. Here's the clanger. Did you see that? Time shown in red are sold out. To a screen reader user, it's like looking for a needle in a haystack. So I've hit my first block straight away, so maybe I'm better off just going in and taking my position in the queue. But so I had to get a colleague to complete the task of booking the seats. An obvious error and obviously an accessibility error. I did contact movies at Dundrum, but they don't seem to have fixed it. But let's push it on further.

I got this checked yesterday by a colleague and I was told that no times are shown in red. Don't know if that's still the case today, but let's aim to book something. So it's good because there's a certain amount of accessibility implementation and that is a table view so I can navigate the table quite easily. Moving by row to row and column to column by using the up, down, left and right arrow. So this is actually quite a good way.

OK, so we know the date. And we know the time, and I'm going to assume that this is not one of those red times, let's see. Ok, so it's loaded the page up. So now I obviously want a book by ticket, so I have to choose the type of ticket that I'm going to go for. And this is a really important consideration in terms of accessibility implementation. All the fields need to be clearly labelled to allow a screen reader user to know exactly what they are. So as you'll see, I'm going to tab through these fields using the tab key and as all content must also appear in a logical tab order to allow me to do that with correct field labels. So let's try.

Now it doesn't tell me what the ticket type there is. All I hear is Combo Box None. Now a combo box is the way I would select the amount of each ticket that I'd like, but I don't know what ticket type is selected here. I did go through this with a colleague last night, and what happens is, as you'll see, the fields aren't labelled correctly, so I'll tab on. Large suite plus combo deal. That's what I'm hearing, but that's not how it's appearing in reality, because the field labels that I'm hearing from my screen reader are not in sync with what's going on at the screen. So there's a big labelling issue here, so I could probably end up paying way over the odds to take my Goddaughter to the cinema. So choosing the wrong ticket type and that's why issues like fare labels, issues like having content structured in a logical tab order are critical to a screen reader user. So I didn't get any further with this. Needless to say by myself, I had to get a colleague to complete it. We did go to the cinema and it was really good, so it did actually end well. So let's have a look at some shopping. Amazon UK is a site that I would use regularly. It's a site that I probably use way too much, but there you go, my credit card certainly feeling the pinch. But they do have good accessibility features built in.

Ok, so let's have a look. So the way I would look on Amazon is I would search for whatever I want because I ain't going to spend two hours browsing through all the content that Amazon have got over there. So let's do that. So you heard there the where it said search, edit. So that allows me to interact with the field on this form and put in some content that I want to find. So I'm a bit of a music geek and a bit of a sound geek, so I'm going to look for some Bose SoundSport headphones. Now I have Jaws set up again to my preferences that it won't echo, use our characters as I type them in. I could have it set up that it would echo absolutely everything which would drive me around the bend, which is why I don't have it set up. So I'm just going to type it in. And with hit enter. And that little bleep that you heard there coming from the screen reader that signals to me that it's come out of the firm's mouth, as we call it, the way a screen reader would interact with what's on the page. So I'm back to what they call the virtual cursor, and we'll talk about that in the last web demo that I'll give. And the virtual cursor is the cursor that I would use to read the content that's on the screen. So let's have a look. Will browse by heading.

So we've got our search results up. There's one hundred and three results. I'm not going to take you through all this, I promise. Let's find one of them. So again, I'm moving by heading. It tells me what the product is. It tells me the colour of it that it's black because Amazon have put a lot of time and effort into the link text that they use on their pages.

So, it's aqua blue, and these are black. So let's open up this one. Simply by pressing enter on a link, it will activate it and take it to that page. So what I'm going to look for here is the product description and again, good structure on these pages, lots of headings heading level one and heading level two and good link text as well.

This is what we want to find out what it going to do for us? Let's see. So it fully describes to me what the product is, and again, I can set yours that it will read all that text in a continuous way as well if I want to. Are there any buttons on this page? Let's see. Does it go to the button? Add to basket button clearly labelled right there on the page, I could get there very easily by pressing the letter B. I won't add it to my basket because I'm afraid to check my credit card, but that's how a feature like a button would work, and that's how Amazon would work. The checkout procedure is very accessible, and then all the forms on Amazon are in a good state as well in terms of accessibility. So the final web page I'll have a look at will be the Links Web page because it did mention flights earlier on when we had jazz up.

So we'll open up our links to aerlingus.com. Over the last couple of years, we’ve have done a lot of work around accessibility. I have been on the QA testing team. Jaws never stays quiet, does she? So I've done a lot of work on the accessibility team working with the whole team on the project, working with the project manager, the business analyst, the devs and the product owner in a true agile environment to give users who use their links to come a good experience, certainly in terms of accessibility. So let's try and book a flight somewhere and I'll show you the forms. And then I have one or two things to say, and we'll take some time for questions.

This is good accessibility implementation because it tells me what a departure airport is, Dublin is in there already. Let's tab on. So it's asking me what the arrival airport is. We'll put in Amsterdam. So it tells me that it's a return trip, and the checkboxes are announced as well as being ticked.

So we can fill in our date there. Let's change that. And it also tells me that the field is required as well. You heard the screen reader announcing the word required. So that’s all fine, even as one passenger finds the flights button clearly labelled. This wasn't always in this shape, by the way. It wasn't, it used to be quite arduous to book a flight, but I think we've done some good work. So let's have a look, and we can get there again by using the hatch key to browse by headings and its Dublin to Amsterdam. Let's have a look at the table of results that's returned.

Grade with five columns five rows, Very descriptive. So how long it's going to take. I know the arrival time. The flight number. I heard the way it said collapsed, so that's telling me what the state of the button is if I expand that. I did say we'd mentioned those words virtual cursor again, so we can read the content here. And there are the benefits.

That's the price, so we'll click that button to select it. Again, informative. It tells me that it's been added, so that's really how the Aer Lingus. I won't take you through the whole book and flow because it would take a while, but that's how accessibility has been implemented at Aer Lingus to ensure a good user experience for the screen reader user. Let me just take you back to the last two slides.

So since the 1990s, since I began using screen readers, they've come on leaps and bounds. Apple have now built in a screen reader into an
iPhone called voiceover. I can buy an iPhone, bring it home, open it up, triple click the home button if it was an old iPhone because that's been dispensed now, but you can still achieve the same thing and turn on voiceover straight away. Microsoft have done the same with narrator, and Google have done exactly the same. What drives all this content? Not Brian Dalton, that's for sure.

It is the Web Content Accessibility guidelines that are set around the world, and they drive the standards for accessibility. What companies and bodies have to do to implement good accessibility features into their presentation. Hopefully, I've given you a whistle stop tour of accessibility with a few technical hitches along the way, but hopefully I've managed to get there. If I do have time, I'm happy to take some questions now. If not, I'll certainly be happy to take them through the day. Thank you so much.