 I'd like to introduce you all to Graham Unfield who is the accessibility guy, that's how he'd like to be self-titled and accessibility obviously is a big deal it's 20% of web users are affected in some way and I'd like to hand over to Graham and it's 30-minute talk and then 10 minutes question. Thank you. Anyway, as you can see, my talk is called Accessibility for WordPress and introductions are here. Before I start a little bit about me, I know that my fanbase is down in front here. But for those of you who don't know me, I'm a web accessibility consultant and my day job means that I help people improve the web accessibility of their websites. And I do that by testing websites for accessibility. I also help primarily developers but it's also content authors and designers as well solve accessibility issues with their websites. I'll carry on because my voice is quite loud so you should hear me. I've written the training course which I do for various clients and hopefully one day I'll be able to offer the training course more widely. I'm also a WordPress developer. I've developed accessible WordPress websites and I'm a member of the WordPress accessibility team of which there are other members here. And is that echo all right? It's ever so echo-y. Okay, right, let's get going. So, accordions, we all know what they are and they're not hard, are they? Many JavaScript libraries have got accordion patterns in them, for example, JQuery UI. And there's also plugins which will help you do accessible accordions and that's an example of one there that's actually quite good. So, what's this presentation all about? Why are we here then? Okay. So, do we know that those accessible patterns in JQuery UI and the other ones that are available, do we know that they're truly accessible if they claim to be so? And do we know, and this is the most important bit, how the accessibility bit works? And so, what I'm going to do in this presentation is I've taken accordions as an example and I'm going to go through the HTML and JavaScript techniques to build a simple accordion. But what I'm going to do is a basic introduction to ARIA to help you understand how you make such JavaScript interaction accessible to people using assistive technologies. That is specifically people using screen readers who may or probably be blind and also people using voice recognition software if they're most impaired and they use voice commands to action their machine. So, there's a lot of JavaScripts around in WordPress these days and there's probably going to be more. So, the more JavaScript that there is, the more ARIA is going to become important as we go forwards. It's useful for other interactive elements too. I'm going to talk about accordions, but it's also tab panels, modals, light boxes, et cetera, et cetera, et cetera. All of these elements are very likely to need some ARIA to actually make them work and usable for everybody. So, our target with this very brief little project is, this is a requirement, our target is to make them our accordions that make sense and can be used by people using a mouse, people using touch devices, people who choose to or have to use the keyboard only who can't use a mouse. People using a screen reader, I mentioned, typically blind people. That's on desktop or mobile. These are two desktop screen readers and I'm hoping if I've got time at the end to quickly demonstrate what we've built using NVDA, which is a popular screen reader and also Dragon Naturally Speaking, which you might use if you're motor impaired. Then these switches, these are more complex, very custom built for people with more severe motor impairments. Typically, they might use their elbow to control these or their neck or their leg muscles or whatever in some ways. I think Stephen Hawking, you know, these are things that are very customized for people, but typically they emulate keystrokes and that's why keyboard interactivity is very important to get right for accessibility. So, our desired interaction pattern, this is the interaction design requirements. Okay, so I've got, I'm thinking, the accordions is kind of like a frequently asked questions page, so you've got a series of questions and then you've got a panel that shows you the answer and everything like that. So, our accordion questions, I want to click on them and that will open and close the panels. I want to tab between those questions. If I'm using the keyboard, so if I tab around a page, it'll go from one question to the next to the next. If I'm using the keyboard, I want to use the enter or the space key to actually action those so that it opens or closes the panel. And when I've opened or closed the panel, I want focus to go into the panel and you'll see why that is important later on for screen readers. Also, if I'm closing the panel, then I want to make sure that focus stays on the actual question itself. Also, I'm going to add in some up, down, left and right arrow keys. This is because there's more than one way of doing a lot of these accessibility models and some people like to use the up and down arrow keys to get access for accordion groups and also tab panels and stuff like that as well. So that's our requirement for interaction. And here is our starting point. A very, very simple HTML. This is just what we're going to start with. We're going to start customizing that. And it's good for SEO to start with just that simple thing because when Google visits your site, it's not going to be running JavaScript necessarily. And so your HTML with the questions and everything like that will help with the SEO of your site. And it's progressive enhancement because we're actually going to use JavaScript to amplify what's there and improve what's there to actually turn that into an accordion. In the past, screen readers didn't interact with JavaScript very well. I'm talking 10 years ago now. These days, you don't have to worry about that. All screen readers can cope with JavaScript. You can do that on mobile as well. And so that's not usually a problem. Okay, so the very first thing we're going to do is to, in our HTML, is add a container. Now, I've given it a class of act group. You can give it a content, whatever class you want. That's important that that goes there because we're going to do more with this later. And it's to enclose all your accordions, however many you've got, whether it's two or 20. Okay, the very next thing we're going to do is maybe add some other classes, one onto our heading and some on... We're going to put the answer in a panel because, after all, we want to hide and show this. So it's sensible to put it into some kind of div or something to hide and show it and there's our content again. And the next thing we're going to do is we're going to lay the framework. And we're still in the simple HTML stage at this point. I'm going to put a data ID of one, data ID of two, et cetera, et cetera on this. This is going to drive our JavaScript adding IDs and stuff later on. So how do we get this code into WordPress then? The options are we might have a custom post type that is frequently asked questions. I've done this on a client's website in the past and then we do a custom query and we output the HTML in using PHP functions to actually do that. And so we can put the required format into our HTML then. I've also done this for customers as well. I know some people aren't happy with short codes, but some of my clients actually quite like them. And so I've got an app group, short code, and then the questions and the answers in it. And of course you can do, if you want to, put the code directly into the editor. How you do that is up to you, basically. So the rest of the story is all about JavaScript. And I'm not going to go massively into the JavaScript. I've used jQuery for my example. There are other libraries out there and there are other ways of doing it. But typically you might find items like this in your query. So I'm finding all the accessibility questions, the accordion questions, and I'm going to set everything up in this routine here. Okay, that's okay, but you'll remember that our simple HTML featured a heading and a panel. Now, headings don't normally get focused by default. So we're going to need to make sure that they do so that I can use my keyboard to interact with them. They also don't normally get events. So we're going to have to cater for that too because if I want to click on that heading or if I want to tab to it and then use the Enter key, I'm going to have to do some special processing for that. And this is important for when I'm using voice recognition software as well. So I'm going to add some attributes into the headings and to do this. Now, focus management in accessibility is when you've got JavaScript. Whatever you're doing, whether it's stuff like this, tab panels, single page apps too, you know? Focus management is really important. You always need to have direct control over where focus on the page is. If you don't, it can sometimes get lost. And anyone who relies on the focus, like for example, keyboard users or screen reader users, it can just get lost at the top of the page. So it's really important that you keep the tight control over that. So I'm going to use two special tab index values. You may or may not have seen before. The first thing I'm going to do on the headings is to put a tab index of zero. And what that does, it actually makes the headings become part of the tab order of the page. It doesn't influence the order. The order that they are in the tab order of the page is determined by the order in the content. So that lets them get focus. The other thing I'm going to do is put a tab index of minus one on the panels. Now, I mentioned in our interaction design specification that when I open the tab panel, I want focus to go on to the panel. And that's why I'm using this. Tab index of minus one means that something is not part of the tab order of the page, but it allows me to actually put focus onto it. It's usually obviously on elements that wouldn't normally get focus. In this case, it's a div. You need to do this for Chrome and Safari. If it was just Firefox and just Internet Explorer, remember those days, I wouldn't have to do this. But because of Chrome and Safari, if you don't do this, then focus will not get successfully transferred onto elements that wouldn't normally get focus. What am I going to say here? Right, so I've said when a tab old header is actioned, I move focus into the panel. In your JavaScript library, you want to be careful about this. In your focus management, if you're ever going to move focus, you will need to make sure that that element fully exists in the DOM first. This is especially true for screen readers. Screen readers kind of sit in a layer above the browser, and they are responsive to any changes in the DOM, like hiding and showing or adding extra content in. But they don't always get the news as quickly as we might on Twitter or something like that. There can be a bit of a delay, and you're going to have to test this out. So you need to avoid doing things like this, which you can do in jQuery. So I'm showing it, and I'm putting the focus on it immediately, because sometimes, especially if you've got some animation going on in there, then the thing won't fully exist before you try and give it focus. So it falls down between the floorboards, basically. So do something like that, or even if you find, you know, you'll need to test this out. You can test this using a keyboard yourself. Consider adding a few milliseconds delay before you put focus onto the element. I mean, a few milliseconds, you know, five or 10, no one's going to notice that, basically. So we're going to add our tab index in now. Notice it's on the heading, and also the tab index of minus one on the div itself. I'm only showing just one of the question and answer bits from now on, otherwise the slides would get too cluttered. The other thing I've done is I've given IDs to the actual header there, that's acq1, and the actual panel, aca1. And that's driven, in my case, from the data IDs I've put there already, okay? Now, when accessibility and with ARIA, IDs become very important, because you're often going to be referring to other things on the screen from where you are now, and the ID is the way to do that. And of course, we all know in our HTML specifications that if I use the ID attribute, they've got to be unique within a page, right? And so we need to make sure that's correct. Okay, the screen reader experience. I've touched on a bit of this already. When the page loads, screen readers know about it. If the page changes after the page loads, you can't rely on the fact that screen readers know that it's there. The DOM gets updated quite quickly for them, but your screen reader user is generally only focused on one part of the page. If something changes over here or over here or whatever like that, they're not going to know about it. So you need to make sure they're informed of what's going on. It didn't used to be the case that screen readers got an updated DOM at all. So interactivity 10 years ago doing this, it was very difficult to get it to work, right? See? Okay, native functionality. Now, we all know that native HTML elements have their own set of default interactions. All browsers and assistive technologies can deal with that fine. And they also carry the necessary properties so that screen readers can tie into that, right? An example is a checkbox. Here's some things you might have on your pizza. The checkbox describes what it is. It's a checkbox. And also, using the label which is associated with it, it will tell you what it represents. It will also tell you, and via a screen reader, as well whether or not it's selected. However, what we're doing here is, and with a lot of other interactive components, we're using our basic blocks, Lego bricks, if you will, to build something else, right? That extends the native functionality of what we're using, the components we're using. There is no native HTML component for an accordion, so we're building it from other things. And this is where ARIA comes to a rescue to help us glue it all together. ARIA, it stands for Accessible Rich Internet Applications. It's a bit of a clumsy acronym that there you go. It's a series of attributes, basically. Most of them have an ARIA prefix. Not all of them. There are three main types of ARIA attributes, roles, and these describe what an element is for, what it does, effectively, or what it should do. Properties describe the features of this element and how it relates to other elements on the page. And then we've got states, and that's where what I am doing at the moment, whether I'm selected, hidden, checked, etc., etc., etc. So we're going to use these ARIA attributes in my little model, and I'll explain what they are as we go through. Okay, so here's the very first one. This is the container that I made you add earlier, and I'm going to give it a role of tab list, and I'll explain why in a minute. And then the heading, I'm going to give it a role of tab, and the actual sort of panel where the answer is has a role of tab panel, and that's where the content sits. But hold on a moment, we're doing an accordion here, aren't we? Not a tab panel. But actually, if you think about it, accordions and tab panels, especially from a perspective of someone who's blind, actually work in a very, very similar way. You've got a series of items that effectively toggle something else, that toggle a panel of some sort elsewhere. And so the functionality is actually very similar with the main difference that typically with accordions, you can have multiple panels open at once, and with tab panels, usually one of them's open when you first load the page. But other than that, they actually function in a very similar way. The same is also true of carousels, if you think about it, but I'm not going to go any further into that. That was part three, which I hadn't got time for. So that's why they share the same ARIA roles, and so that's why it looks as though they've got tab panel, ARIA attributes when actually it's an accordion. Okay, so now let's get started. The very first one we do, notice our container again, and that's another reason why it's really important to have that, ARIA multi-selectable. What that is telling a screen reader and a voice recognition software, like Dragon Naturally Speaking, is that... because it's assigned with the role of tab list, this is telling me it's a list of items that behave a bit like a tab panel, and it tells me that I can have more than one selected at once, so this is much more down the route of an accordion rather than a tab panel. If it was a tab panel, ARIA multi-selectable typically would be false. Now, in my heading, because remember, if I click on the heading or action it with a keyboard, I want this to open something else. So we give it this here, this ARIA controls, and this is telling the browser and the AT, I control something else. I actually am in charge of some other thing on this page. And it's also the ID is in there, so it says ARIA controls equal, and then I've put the ID of the element that I'm controlling, which is the actual div where the answer is. And there's a kind of a reverse relationship going on here. ARIA labeled by, and I've put the ID of the question, so it's kind of like a two-way thing. This is saying I rule that, and this thing is here. Is this thing up here defines what I am? And there's my content here. Okay, what else have we got? Oh yeah, the states. This is where it tells the screen reader or the other assistive technology where we are at at the moment. So there's two here. ARIA selected on my heading says, much as you would imagine, this is whether or not I'm selected at the moment. And it's the initial state, because I've loaded the page, none of my accordions are open, the initial state is false. ARIA expanded equals force. This refers to the thing that I control. So this is telling the screen reader user that the thing I'm controlling is currently not expanded. And the other one here that I've added now is on the actual panel, which is probably hidden using a display none in your style sheet, but just belt and braces, I'm using the ARIA hidden attribute, which tells the screen reader or assistive technology to ignore this, basically. So this is what it looks like with my content in when the panel is closed. If I then click on it or otherwise action it, I'm now going to open it. All that's happened is that I've changed the ARIA selected value to true, ARIA expanded also true, because I've opened the panel and the ARIA hidden is set to false. And I think we're there. So in your jQuery library it's dead easy. All you're doing is just manipulating, you're doing some setup of attributes and then you're manipulating whether a panel's visible, you're changing the ARIA and then you're moving the focus as appropriate. So this is obviously how you would put a click on the heading thing, that's easy enough. And then you've got key down because the heading wouldn't normally receive any events, you need to actually specify key down events as well. And you need to listen to which key is pressed. If it's an interorder space, then you should hide and show the tab panel. If it's a down arrow or the right arrow, you want to transfer to the tab on to the next one within the group, that is. If it's up arrow or left arrow, then it moves focus upwards to the previous one within the group, if there is one. And so that's it. What I'm now going to do very briefly is to demo a model, the one I created earlier. So you can actually see it working. And the first thing I'm going to do is put my headphones on because I've got Dragon Naturally Speaking running. And you can see up there is an icon at the top, right at the very top, and I'll fire it up in a minute. Now Dragon Naturally Speaking, I've got the latest version here and it worked better with Internet Explorer than anything else. But firstly, before I get into that, what I'm going to briefly show you is what my accordion page looks like if there's no JavaScript enabled, okay? It's just headings and answers. I've got a panel here that is the one where JavaScript's enabled. And as you can tell, the design for this cost me a lot of money. I wanted something nice and clear and I got this. So I'm starting at the top of the page, I think, and I'm now pressing the Tab key. Okay? These are still headings, remember? So I've got a link there. This has got focus, et cetera. I'm also now going to use the up and down arrow keys to move between them. And when I'm sitting on one, I'm going to press the Enter key and it opens. And I've got a focus indicator going around that as well to help me know that that's got focus. And when I do Shift Tab, focus goes back onto the heading and I press Enter and it closes it up again, okay? So it's fully keyboard accessible. Obviously, I'm not going to show you how it works with a mouse because you'll have to assume that that works like that. Now, I'm going to get Dragon involved in this. So... Wake up. Wake up. Sometimes with Dragon gets a bit sensitive because I had trained it with my voice and when I'm sitting in my office at home, I talk quite calm and everything like that. When I'm in a gig like this, I can get quite excited. It changes the timbre of my voice and sometimes it doesn't behave itself. So let's try it again. Naughty Dragon. Okay. Wake up. Please work. Wake up. Yes, actually, you're very right. I haven't switched the microphone on. Bonus to that person over there. Okay. Go to sleep. Go to sleep. Yes, right. I've switched the microphone off temporarily now. Okay, so what I'm going to do is I'm going to issue a command. Now, Dragon, loads of commands. I'm not going to see all of them because it would take a whole presentation in itself to show you how this works. But suffice to say, I can actually influence these very easily. I'll show you that now. Wake up. Wake up. Yes. Click newsletters. Click newsletters. Click frequency. Click unsubscribe. Go to sleep. Now, notice that I didn't say the full text. The Dragon's very clever. All I needed to say was what was you know, sufficient in sufficient detail to actually decide. If I actually say something that's ambiguous, Dragon actually will help me and I'll just briefly show you that. Wake up. Click how do I. Notice these numbers, it's got one and two. They're very small for you, those of you at the back. But it's got, there are more than one things that actually are on the page that say how do I and so it's given me a one and a two and now I do choose two. And it actions that one. It's very clever. Go to sleep. Go to sleep. Thank you. That is the that is the end of my Dragon Naturally Speaking demo. I'm just going to close it down, please, because I'm now going to fire up NVDA, which is a screen reader. It's not the only screen reader you can get, but it's a good one. Right, okay, Dragon actually stopped working. That's kind of what I wanted. Let's get rid of that. And now I've got Firefox running. Here we go. Whereas Dragon Naturally Speaking works best with Internet Explorer, Firefox works best with Firefox. And so I've moved across to Firefox here. I've got the same thing going here. That's the non-JavaScript version. We're onto the JavaScript version here. And I'll just get NVDA running. Hopefully the sound's going to work now. Let me just turn it up slightly. Right. Right, now, it does talk a lot. Right, now, it does talk a lot. Right, now, it does talk a lot. But what I'm going to do to make life easy for you, because it's a very computerized voice, as you can hear, there's a useful feature in NVDA that I think is there for debugging where I can actually get a screen up. So it actually prints out on the screen what it's saying, so that might help you. So I'm going to get that going now. Right. Right, let me move that over there out of the way. Right. Okay. Right, okay, so we may laugh, but actually some people rely on this software and the reason it's so verbose is that in a web page, there's a lot going on. And so you can see what it's... The other thing that's why it's so verbose is because NVDA, unlike other screen readers, is also used by some people who are dyslexic, because as you hover over things, it will tell you what's underneath your mouse pointer. And so if you're dyslexic, you can hover over a paragraph and it will read it to you, and it will give you functionality. There's probably a way of turning that off, actually, but I haven't found that yet. So it's told me, I'm sitting on, as you can see from the focus flashing there, the heading level one, and it's told me it's a heading level one, okay? So this is using screen reader and like semantic elements and whatever. So I'm going to press the tab key. This is a key that's often used with screen readers. Link before accordion group link. Okay. So focus is now sitting on this one here and it read out link before accordion group. That's the text of the link and then it tells me it's a link. So a tab again. Tab control, how do I get your newsletters? Tab collapsed one of three level two. Right, now there's quite a lot going on there. Remember we stuck all that area in there. So this is payback time, right? So it's saying tab control. So I'm in a tab control now, guys. How do I get your newsletters is the text that's on the screen. It's a tab because I put the very necessary role in there. It's collapsed because I told you it was already expanded false. One of three because there's a list of three of them in there. Level two. It's a level two heading actually. So now if I move tab again. Can I control the frequency? Tab collapsed two of three level two. Notice it hasn't repeated that we're in a tab control because it's kind of the way that screen readers work. It'll only tell you once that you're in some kind of grouping like this. That's true of also when you use a field set in form controls. So you're supposed to know that, but you've got a list of how many there are. Really useful information. So if I tabbed again, then you would get the same. But now I'm going to press the enter key. Expanded selected. When you sign up, you can select the frequency of the newsletters. Right, a couple of things that went on there. As soon as I press the enter key, it opened the panel which changed the aria attribute. Aria expanded to true. So now it said expanded. It also changed the aria attribute of selected to true also. So it's now telling me it's selected. And then I moved focus onto the panel. And so if you move focus onto the panel, this is a useful thing for screen readers for you to do. Single page apps, hybrid apps and everything like that as well. Put focus on a panel rather than a specific element and it will start to read out what's in the panel. And so these are quite small panels, these. And so it's just read out what's in there. Okay. Now if I tab back to the header. Can I control the frequency? Tab expanded selected to three level two. Now it's still telling me it's telling me that it's a tab but it's also saying expanded selected. And if I press enter. Collapsed. Collapsed. Okay. Thank you very much. I love that timing for that for timing. So that is the end of my demonstration using NVDA. And that is the end of my presentation of how we would do accessible accordions using ARIA. Thank you very much. That was a really good presentation there. We're going to take some questions now. So if you have anything to ask, we'll hand up over. Excluding the machine asking questions. Okay. So if we can pass the mic back. Hi Graham, thank you very much. Question is, is there any ever a case where the ARIA selected and ARIA expanded would have different values? I can't think of any reason why that might be the case. Because ARIA selected, describing two different things but often things that go in parallel. Because the ARIA selected is the element that I'm on at the moment, which is the heading. And the ARIA expanded is referring to the thing that I said that I control. So it's giving me two parallel pieces of information there. I can see it's sort of overkill, but this is kind of like everything's there, the information's there. I've showed you NVDA. Not all screen readers work quite the same. VoiceOver on an iPhone works in a similar way, but not quite the same. I can't demo that because I've no way I can get my iPad in there. If anyone wants to see that working in a minute, I can potentially show them out at some point. But, you know, I can't imagine a situation where they'd ever be out of sync, really. And if you could just... Oh, you've got it already. A couple of things. So with the JavaScript version you had, you had sort of colours and grey bits on it. I assume that's just CSS using the focus thing. And I do think that you didn't really see the JavaScript behind it. So how do I actually select the elements using the area? Is it the same way I'd select any other attribute? Or is there a special sort of way in JavaScript you'd get the area and say, if it's selected, then do this? Yeah. Are you talking about how I would style that in my CSS? Yeah. So that was the first part. So how would I have presumably got to target in JavaScript which parts are open and closed to action and how to do that? Yes. What I've done within my jQuery, I'm not sure it's necessarily the right way of doing it, but the way I've did it is that I've got like a... For the click, I say go and find anything within the accordion group, and that's why I've given that a class rather than an ID because there might be more than one on a page. And then find an question in there and then put a click element on that and then it's got the each in my jQuery. So each one you allocate and this is what you need to do if someone clicks this one, right? And similarly with the key down. The key down's more complicated because you've got to quiz to see which key was pressed, but in some ways and then I've got a function that I've written which covers both of them that says hide the accordion and it takes in the ID of the one that you want to impact because each one will have a unique ID on the page and that's how I've done it basically. So it's, I mean I can show you the JavaScript if you want a little later or whatever but in terms of doing the styles I actually use attribute selectors on the ARIA attributes to help style the thing, right? Rather than adding in extra classes which I mean you can do if you want but I just use on the headings and the panels I've actually tied into the ARIA selected attribute so that's how I've done it. Does that answer your question? Cool. I've got another question if you could just pass the mic down. Are any of the ARIA values implied? I was particularly thinking Sorry, can you start again? I can't hear. Are any of the ARIA values implied? I was thinking particularly with if you've specified role tab list, if you weren't to specify ARIA multi-selectable would it be interpreted as null or false? With Boolean attributes of which the ARIA ones often are not all of them though if the attribute is not there then the browser and the assistive technology will assume that the value is false. That is why you've kind of got that double negative with the ARIA hidden one because obviously ARIA visible would be more sensible in some ways but so it's ARIA hidden equals false is like a double negative but it's because the absence of those Boolean attributes is taken as false. Okay, does that answer your question? Yes, thanks. Hands up if you have a question with one at the front, I'll come in. Claire. Thanks, do you have a link to the live demo? Do I what, sorry? Do you have a link to the live demo? I do have a live demo and I will share that on Twitter because this is running on my machine but I have got a version of that running up on a research area on my website so yes I can post that and people can pick it apart to their hearts content. Any more questions? We've got one just behind you. If you're just getting started with assistive technology can you recommend any particular one that you could start with? Particular. Assistive technology, so if you want to start testing your websites. Right, okay. The very first thing that I think you should do that everybody should do when they're building a website or doing some sort of website for a client the very first thing is to make sure that you can tab to everything on the page that needs to get focused and that you can see where focus is. If you can get that right you're like 70% of the way there sometimes. NVDA is free to download the other one, the industry standard is JAWS that's a very expensive piece of kit. Some people say it's slightly better than NVDA but other people would say they're about the same. NVDA is free to download it's an open source product and that's a screen reader and if you do a Google search or whatever search engine you might choose to use on instructions for how to use a screen reader there are a few websites that will give you all the necessary keystrokes because believe me with a screen reader there are shed loads of keystrokes to actually get the thing to do what it wants. I mean I only showed you a scratch the surface on this stuff really. So that's a free one you can use if you've got an iPhone all iPhones and iPads have voiceover built into them I would recommend that you would test with that. If you look in settings general accessibility you will find voiceover and there's a tutorial in there as well because believe me it does radically change how your iPhone works. There's the corresponding one in Android called Talk Back but to be honest no blind people really use that because it's so bloody flaky and yes you can quote me on that so that's why most blind people who have a smartphone and a lot of them do will have an iPhone basically. Dragon Naturally Speaking is a great piece of software isn't it? I actually do use it myself to write reports if I'm doing accessibility testing it's useful to record stuff and write it down all the time or whatever that will cost you probably if you get professional version or something like over 100 quid just over 100 quid or something like that screen readers and voice recognition software totally different things but with Dragon Naturally Speaking there's easy ways to use it as long as you mark your stuff up properly there's very little that's not accessible for Dragon users but you can make things very hard for them as well so start with NVDA but also before you even do that just make sure you can tab to everything on your website and that it's obvious where you are when you're tabbing on your website Thank you Okie dokie thank you very much Graham that was a really good talk