Accessibility On The Web

Brian Dalton at UXDX Europe. Video: https://youtu.be/2It469dxMrQ

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

Meet JAWS

[00:00:02] JAWS: Center title placeholder level 1. Accessibility on the web. Please allow me to introduce myself. Subtitle placeholder level 1. 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 center. 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. There are approximately...

[00:00:45] Brian: 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 Jacobsen. No one's mistaken the accent: she's from Australia. She's used in lots of technical gadgets. She's used on my iPhone, I know taxi companies use her in their GPS systems as well, and we've borrowed her for JAWS for screen reading. She's a well-traveled lady.

[00:01:16] What we're going to do is take you through some of the requirements in terms of accessibility, show you some websites that I would use, and show you some of the functionality in websites that's important to me to enable me to navigate. 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. We'll be around all day as well. Let's kick on, then, and rock on to the next slide.

[00:01:43] JAWS: No selection.

[00:01:45] Brian: 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 looks like. It is a picture of a shark. Before I bought JAWS in the 90s, I did think that Jaws was something that swam in the sea, and he terrified the life out of me. That's what the logo for JAWS looks like.

[00:02:04] So what is JAWS? It's more than just a 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 1,500 euro to buy the professional version of JAWS. In the early 90s, when I began using it first, I took a bank loan out. I asked my mom to go guarantor, and 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.

[00:02:36] It can be fully customized 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. It can speak all punctuation or no punctuation. You can get it to read certain areas of your screen and focus on certain areas of your screen as well.

How a blind person navigates a screen

[00:02:50] JAWS: Body placeholder. No selection. Title placeholder level one. Process.

[00:02:57] Brian: 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 build up an image in my mind of what the screen actually looked like. Where are things positioned on the screen: top left, bottom right-hand corner, top right, bottom left? Then I would 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 they will take me when I click those links. It's just the same as you would have if you close your eyes. Look around the room, close your eyes, and you've got a picture in your head of what this room looks like and where I am in relation to you. If you close your eyes, you've got the same thing as I have: a picture in your head of what the room looks like and where everybody is positioned.

Making web content accessible

[00:03:36] JAWS: Body placeholder. No selection. To select or not. Title placeholder level 1. Making web content accessible.

[00:03:45] Brian: Making web content accessible: this is what JAWS likes best. So what does he like, or she? What we look for is clear headings. Can we navigate around the page using headings? Are all the links labeled? Do they do what they say they're going to do? Is there good descriptive text on our links? Are the buttons labeled? Every action that you do with a mouse must also be able to be performed by a keyboard or screen reader user. 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 tell me what the button is.

[00:04:24] If I want to hit "go to homepage," 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 should be labeled as well, to tell the screen reader user what they're going to look at and what the image in front of them on the screen is. That's what I mean about making web content accessible. What I have up there is: good design enables, bad design disables. Obviously, if you've got good HTML5 content built in from the get-go, you're on a winner straight away.

[00:04:56] JAWS: Body placeholder. No selection. Title placeholder level one. Important considerations.

[00:05:03] Brian: These are some important considerations as well 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.

[00:05:20] JAWS: No selection. Title placeholder level one. Important consideration.

[00:05:26] Brian: Okay, and these are just some more considerations that you can look at. We can make these slides available later on if anybody would like to have a look at them.

[00:05:34] JAWS: No selection. Title placeholder level 1. Screen reader development.

[00:05:37] Brian: We're going to come back to that at the very end, because I will show you how screen readers have developed since the early 1990s, since I began using this stuff a long time ago. So let's get into some real meat, then. Let's get into some demonstrations of some of the websites that I would use.

Reading the news on RTÉ

[00:06:00] The news is always something I like to find out about, what's going on. Have I set up Wi-Fi? I haven't.

[00:06:05] JAWS: Internet Explorer. You're not connected to a network.

[00:06:09] Brian: I've got Wi-Fi, sorry. While we're waiting for the good guys, the good guys are on the job, let's explain. What I want to do is bring up the RTÉ web page. This is a very heavily populated page. It's got lots of content on there, lots of news stories. 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. Let's see if we can get our friendly...

[00:06:51] JAWS: Okay. Top of file. Blank. News. UXDX. RTÉ News latest.

[00:06:57] Brian: So we're on the RTÉ page and we're in business. Let's navigate by heading.

[00:07:04] JAWS: Address and search bar toolbar. Security. RTÉ News latest breaking news stories. Wrapping to top. Bill to legalize abortion services introduced in Dáil, heading level three, link.

[00:07:12] Brian: I'm navigating the page by heading at the moment, browsing all the stories on the RTÉ website.

[00:07:18] JAWS: Taoiseach says Soviet Union remarks unwise and insulting, heading level three, link. Minister briefly discussed broadband plan with bidder, heading level three, link. Denis Naughten said he has never been directly involved...

[00:07:28] Brian: If I want to take any of those stories and read them, we can open a link to that story.

[00:07:33] JAWS: Blank. Heading level three, link. Minister briefly discussed broadband plan with bidder.

[00:07:36] Brian: 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?

[00:07:42] JAWS: Minister Denis Naughten. Minister briefly discussed...

[00:07:46] Brian: So let's read that, then.

[00:07:48] JAWS: Heading level one. Minister briefly discussed. Updated slash Thursday the 4th of October 2018, 14:22. Link. Share slash zero. Link. Share. Link.

[00:07:59] Brian: So we can share the story if we want to.

[00:08:01] JAWS: Minister Denis Naughten said he has...

[00:08:02] Brian: Here's the article.

[00:08:03] JAWS: ...never been directly involved in the procurement process. Minister Denis Naughten said he has never been directly involved in a procurement process. Link. By Petula Martin[?], link, business journalist. The Minister for Communications has confirmed that he attended a dinner in New York hosted by the head of the bid for the National Broadband Plan, at which issues relating to the bid were briefly discussed. Speaking on RTÉ...

[00:08:24] Brian: So we could read any of those stories for you. That method is just loading up the RTÉ web page, browsing the stories by heading, and clicking on the link, which is clearly described to tell me exactly what it is. That would be an example of good accessibility, good a11y features, built into a website.

Booking cinema tickets at Movies@Dundrum

[00:08:43] Now let's head off to the movies. We've heard all the news, we've had all the bad news already, so let's go to the movies.

[00:08:50] JAWS: Profession UXDX. Downloads. Drop. Demo site. Aer Lingus and Movies@Dundrum. Time for some entertainment. Movies@Dundrum. Internet Explorer. Movies@Dundrum.

[00:09:10] Brian: 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, let her go to any movie that she wanted, and then buy her lunch afterwards. A colleague at work at the time said to me, "I think it would be a good idea, Brian, if you booked the movie ticket, and while you were at it, booked the seats as well." Much more user-friendly experience. I thought it was a great idea. This is a different movie, because we're two years later, but the same problem still happens. Let me show you what that is. We can read about the movie event details and showtimes.

[00:09:51] JAWS: Heading level 2. Movie title. Movies@Dundrum. Movies. Internet Explorer. Event details. Disney's Christopher Robin, heading level 3.

[00:10:00] Brian: So it's Disney's Christopher Robin. This is one of the latest movies out. At the time it was Smurfs: The Lost Village when I wanted to book. So we can read all about the movie.

[00:10:09] JAWS: Table with two columns. Blank. Heading level 3. Disney's Christopher Robin. Blank. Table with two columns.

[00:10:14] Brian: I've got a table telling me the length of the movie and who's starring in the movie as well.

[00:10:20] JAWS: Directed by Marc Forster. Column one. Top of column. Genre: animation, adventure, comedy. Running time, column 2: 104 minutes.

[00:10:31] Brian: Close to two hours. Let's read a little bit more.

[00:10:34] JAWS: Blank. Starring Hayley Atwell, Ewan McGregor, Chris O'Dowd. Blank.

[00:10:41] Brian: Okay, so we know who's in it.

[00:10:42] JAWS: Synopsis: working-class family man Christopher Robin encounters his childhood friend Winnie the Pooh, who helps him to rediscover the joys of life.

[00:10:49] Brian: Right, okay, so we've got a brief synopsis of what it's about. Here's the clanger.

[00:10:55] JAWS: Blank. Note: times shown in red are sold out.

[00:10:57] Brian: Did you hear that? "Times shown in red are sold out." To a screen reader user, that's like looking for a needle in a haystack. So I've hit my first blocker straightaway. Maybe I'm better off just going in and taking my position in the queue. I had to get a colleague to complete the task of booking the seats. An obvious accessibility error. I did contact Movies@Dundrum, but they don't seem to have fixed it. But let's push on further.

[00:11:26] JAWS: Blank. Note: times shown in red...

[00:11:29] Brian: I got this checked yesterday by a colleague, and I was told that no times are shown in red. I don't know if that's still the case today, but let's aim to book something.

[00:11:38] JAWS: Table with five columns and eight rows.

[00:11:41] Brian: It's good, because there's a certain amount of accessibility implementation in that it's a table view, so I can navigate the table quite easily, moving from row to row and column to column using the up, down, left and right arrows. This is actually quite a good way of doing it, but it's a pity I just can't complete it. Let's press on.

[00:11:59] JAWS: Friday the 5th of October 2018. Row two.

[00:12:04] Brian: Okay, so we know the date.

[00:12:05] JAWS: Link. 13:50. Column two.

[00:12:07] Brian: And we know the time, and I'm going to assume that this is not one of those red times. Let's see.

[00:12:12] JAWS: 13:50. Link. Movies@Dundrum. Movies. Page has six headings and 25 links. Heading level...

[00:12:17] Brian: Okay, so it's loaded the page. Now I obviously want to book my 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 labeled to allow a screen reader user to know exactly what they are. As you'll see, I'm going to tab through these fields using the tab key, as all content must also appear in a logical tab order, with correct field labels, to allow me to do that. Let's try.

[00:12:50] JAWS: Combo box, none. Combo box, none. Link. Combo box, none.

[00:12:57] Brian: No, it doesn't tell me what the ticket type there is. All I hear is "combo box, none." A combo box is the way I would select the number 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, as you'll see, is that the fields aren't labeled correctly. So I tab on.

[00:13:16] JAWS: Large sweet combo deal plus tickets at 18 euros and 95 cents. Combo box. Large sweet plus combo deal.

[00:13:24] Brian: 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 on the screen. There's a big labeling issue here. I could probably end up paying way over the odds to take my goddaughter to the cinema through choosing the wrong ticket type. That's why issues like field labels, and issues like having content structured in a logical tab order, are critical to a screen reader user. I didn't get any further with this by myself, needless to say. 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.

Shopping on Amazon

[00:14:03] JAWS: Close document window.

[00:14:04] Brian: Let's have a look at some shopping. Amazon.co.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 is certainly feeling the pinch. But they do have good accessibility features built in.

[00:14:26] JAWS: Amazon.co.uk. Amazon. Context. Maximize. Leaving menus.

[00:14:38] Brian: Okay, let's have a look.

[00:14:42] JAWS: Top of file. Address is amazon.co.uk. Amazon navigation region.

[00:14:46] Brian: The way I would look on Amazon is I would search for whatever I want, because I'm not going to spend two hours browsing through all the content that they have got there. So let's do that.

[00:14:57] JAWS: Search edit. Search edit.

[00:14:59] Brian: You heard straight away it said "search edit," so that allows me to interact with the field on this form. I'm putting in some content that I want to find. I am 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, so that it won't echo characters as I type them in. I could have it set up so that it would echo absolutely everything, which would drive me around the bend, which is why I don't have it set up that way. I'm just going to type it in, and we'll hit enter.

[00:15:33] That little bleep that you heard there is coming from the screen reader. That's a signal to me that it's come out of forms mode, as we call it, the way a screen reader would interact with what's on the page. 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. The virtual cursor is the cursor that I would use to read the content that's on the screen. Let's have a look.

[00:15:56] JAWS: Amazon.

[00:15:56] Brian: We'll browse by heading.

[00:15:57] JAWS: Search results, heading level one.

[00:16:00] Brian: So we've got our search results up.

[00:16:01] JAWS: 1 to 16 of 103 results for...

[00:16:05] Brian: There are 103 results. I'm not going to take you through all of these, I promise. Let's find one of them.

[00:16:10] JAWS: Combo box collapsed. Bose SoundSport Bluetooth wireless in-ear headphones, black, heading level 2, link.

[00:16:16] Brian: Again, I'm moving by heading. It tells me what the product is, and it tells me the color, that it's black, because Amazon have put a lot of time and effort into the link text that they use on their pages.

[00:16:26] JAWS: Bose SoundSport Bluetooth wireless in-ear headphones, aqua blue, heading level 2. Bose SoundSport Free truly wireless sport headphones, black, heading level 2, link.

[00:16:35] Brian: And these are black. Let's open up this one, simply by pressing enter on a link, which will activate it and take you to that page. What I'm going to look for here is the product description, and again, good structure on these pages: lots of headings, heading level 1 and heading level 2, and good link text as well.

[00:17:00] JAWS: Title is Bose SoundSport Free truly wireless... Frequently bought together, heading level 2. Customers who... Special offers and product promotions. Compare with similar items. Have a question? Product details. Sponsored products. Product description, heading level 3.

[00:17:17] Brian: This is what we want to find out: what's it going to do for us? Let's see.

[00:17:21] JAWS: Blank. No wires means no limits. Bose SoundSport Free headphones are truly wireless, so you can enjoy total freedom of movement with nothing, not even a single cord, in your way. The acoustic package is designed to deliver sound so clear and powerful, it'll motivate you...

[00:17:33] Brian: So it fully describes to me what the product is, and again, I can set JAWS so that it will read all the text in a continuous way as well if I want to. Are there any buttons on this page? Let's see.

[00:17:44] JAWS: Go button. Add to basket button.

[00:17:46] Brian: There's a Go button, and the important one is the Add to Basket button, clearly labeled 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 all the forms on Amazon are in a good state as well in terms of accessibility.

Booking a flight on Aer Lingus

[00:18:11] The final web page we'll have a look at will be the Aer Lingus web page, because I did mention flights earlier on, when we had JAWS talking.

[00:18:21] JAWS: UXDX accessibility. Title placeholder level 1. Screen reader development. Demo site. Aer Lingus. Amazon. Aer Lingus. Internet Explorer. Cheap flights to Ireland...

[00:18:35] Brian: So we'll open up aerlingus.com. Aer Lingus over the last couple of years have done a lot of work around accessibility, and I have been on the QA testing team.

[00:18:48] JAWS: Cheap flights...

[00:18:49] Brian: JAWS never stays quiet, does she? I've done a lot of work on the accessibility team, working with the whole team on the project, with the project manager, the business analysts, the devs and the product owner, in a true agile environment, to give users who use aerlingus.com a good experience, certainly in terms of accessibility.

[00:19:11] JAWS: Cheap...

[00:19:14] Brian: Let's try and book a flight somewhere. I'll show you the forms, and then I've one or two things to say, and we'll take some time for questions.

[00:19:19] JAWS: Departure airport edit. Dublin.

[00:19:24] Brian: I know this is good accessibility implementation, because it tells me what the departure airport is. Dublin is in there already. Let's tab on.

[00:19:33] JAWS: Return trip radio button checked. Arrival airport edit. Use JAWS key plus Alt plus M to move to controlled element.

[00:19:39] Brian: So it's asking me what the arrival airport is. We'll put in Amsterdam.

[00:19:45] JAWS: Expanded. Outbound trip type selection. Return trip radio button checked.

[00:19:51] Brian: It tells me that it's a return trip, and the state of the checkbox is announced as well, being ticked.

[00:19:59] JAWS: One-way radio button, not checked. Multi-city. Outbound day edit, required. Use JAWS key plus Alt plus R to read descriptive text. 05.

[00:20:06] Brian: So we can fill in our date there. Let's change that.

[00:20:10] JAWS: Day edit, required. Use JAWS key... Month edit, required. Year edit, required. Inbound day edit, required. Use JAWS key plus Alt plus R to read descriptive text. 14.

[00:20:19] Brian: It also tells me that the field is required as well. You heard the screen reader announcing the word "required." Well, that's fine.

[00:20:28] JAWS: Passengers button. Find flight button.

[00:20:33] Brian: Clearly labeled. This wasn't always in this shape, by the way. It used to be quite arduous to book a flight, but I think we've done some good work. Let's have a look.

[00:20:45] JAWS: Page loaded. Dublin to Amsterdam, heading level 2.

[00:20:49] Brian: We can get there again by using the H key to browse by headings, and it's Dublin to Amsterdam. Let's have a look at the table of results that's returned.

[00:20:55] JAWS: Grid with five columns and 5 rows.

[00:21:00] Brian: Very descriptive.

[00:21:01] JAWS: 6:15. Row two. Flight duration 1h 40m. Arrival time 8:55. Flight number EI 602. Economy from 110.99. Toggle button collapsed.

[00:21:16] Brian: You heard the way it said "collapsed," so that's telling me what the state of the button is. If I expand that...

[00:21:23] JAWS: Close panel button. Out of table. Please use virtual cursor to read the content.

[00:21:28] Brian: I did say we'd mention those words "virtual cursor" again. So we can read the content.

[00:21:32] JAWS: Saver. List of 3 items. 10 kilogram cabin bag. And there are the benefits... Saver, 110.99 button.

[00:21:43] Brian: That's the price, so we'll click that button to select it.

[00:21:46] JAWS: Saver 110.99 button. Flight has been added.

[00:21:50] Brian: Again, informative. It tells me that it's been added. I won't take you through the whole booking 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.

Screen reader development and WCAG

[00:22:05] Let me just take you back to the last few slides.

[00:22:07] JAWS: UXDX accessibility on the web. PowerPoint. UXDX accessibility. Placeholder level 1. Operating systems. Language English. No selection. To select. Title placeholder level 1. Screen reader development.

[00:22:23] Brian: Since the 1990s, since I began using screen readers, they've come on leaps and bounds. Apple have now built a screen reader into the 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 with 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 nicely? Not brain dolphin[?], that's for sure.

[00:22:49] JAWS: Title placeholder level one. Driving...

[00:22:52] Brian: It's the Web Content Accessibility Guidelines. They're 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. We've had 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.