 Thank you very much, thank you. Right, yes, now I've given many presentations about accessibility and many presentations about accessibility to WordPress conferences and stuff, and other meetups and what have you, but I also do training for developers in accessibility and one of the things I've realised as I've done that is when people actually understand the tools that some people with disabilities use, it really helps them to understand the problems that they've got to solve in when they actually build and design their websites to actually incorporate the needs of people with disabilities. So I'm not going to give you much of a preamble because I haven't got much time, but what I'm going to do in my little presentation here is I'm going to cover and demonstrate very briefly for you two important bits of assistive technology, that's what AT stands for. Assistive technology comes in a variety of forms. This is the simplest for me because I have poor eyesight, but these are both software-based tools. Dragon Naturally Speaking is the one I'm going to do first. It's a live demo, so there's always a bit of a gamble for that. So Dragon Naturally Speaking is speech recognition software for Windows and Macs. It's not currently available on mobile devices, although that will change soon. There's a new Android product coming, I think it's in beta in the latest version of Android, which is going to replicate it as well. It's primarily used by people with motor impairments, people who can't, for whatever reason, interact with the keyboard and interact with a mouse. Obviously it's not just about browsing the web, it's about controlling your whole laptop or PC. I actually use it myself now from writing documents. Once you get used to the fact of talking to your own machine, it can actually be a useful productivity tool. There's lots of voice commands to learn, so I'm just going to get cracking on that. But first, before I get into the demos, I'm just going to talk about the other piece of assistive technology that I'm going to demo, and that's NVDA. NVDA is an open source screen reader. It's free to download, and it's used by people, primarily those with blindness and other site issues. But also sometimes used by people with cognitive impairments, and people with dyslexia as well. It reads out what it finds on the page, so it's basically working off whatever is in the DOM when your website is either arrives in a browser or has been manipulated in a browser. And like Dragon, naturally speaking, this is software that people are going to be using to interact with everything, not just browsing the web. It's a very keystroke-based software. There's lots and lots of keystrokes to learn. I myself don't know all the keystrokes. There's probably hundreds of them, but I know enough to get around. So that's my little presentation out the way. What I'm now going to get straight into is the demo. And we're going to do Dragon naturally speaking first. Now, I'm using this with Internet Explorer. Boom! But it's IE 11, so it's better than it used to be. But what's interesting is that Dragon naturally speaking and some other assistive technologies are designed to work best with Internet Explorer because despite all its faults, Microsoft have put a lot of stuff into Internet Explorer, so there's lots of access to the API and everything like that. And so it's an easy tool for assistive technology to hook into. That's not true of all of them, as you'll see when I demonstrate in VDA. So very simply, you can see there's a little icon at the top of the page telling me that Dragon naturally speaking is running, but it's not actively listening to what I'm saying at the moment. Well, I'll change that in a minute. It's not a time to choke, is it? Wake up. Page down. Page down. Page up. Start scrolling down. Go to sleep. Now, what's interesting is whenever I demo Dragon naturally speaking, I can run into problems because I annunciate things a lot better because I'm talking to lots and lots of people and it doesn't always recognise my voice. When I'm in my office at home I'm much more... talking colloquially perhaps and whatever. But that first demo was to see how you can move up and down a page and everything like that. Now, the next thing I'm going to show you is how you can interact with links on the page. This is using the 2016 theme, which has a good level of accessibility. Wake up. Click link. Now, it's difficult for some of you to see, but there are little green tabs that have appeared next to all the links that are in the current view and I can now choose from one of those links to actually follow it. So, I'm going to say choose for. Choose for. Go to sleep. So, now... Wake up. Behave yourself. OK. I think we're there again. I think we're in control again now. That's one way to operate links, but what you can do also is you can actually specify the link text as well. So, if I do click post six, so if your link text is sufficiently unique enough, you can actually use the link text directly. So, that's kind of briefly how you can get about. Switch to next tab. Go to sleep. Here I've got a page which you'll see again in a minute. Marked up two forms with similar forms and the one on the right-hand side has better accessible markup than the one on the left. I'm just going to show you how you can interact with form elements. Wake up. Click your name. Go to sleep. Now, disappointingly, nothing happened because this is badly marked up this one, but if I try using the ones on the right-hand side, I can interact with the form elements directly because the labels are actually explicitly linked to the input fields. Wake up. Click your postcode. And now, of course, focus is in there. And now I'm showing you the dictation feature. Press tab. Show choices. Move down. Move down. Hide choices. Click yes. Click if not. Go to sleep. So you can see where I can actually directly reference all those input fields using the actual label text. Where you've got things that aren't marked up so well, it's not the end of the world because it's possible to actually, like I did initially with a click link, I can actually say the type of the control and it will give me an option. Wake up. Click checkbox. Choose to. Click radio button. Choose for. Click type text. Choose for. Go to sleep. So, there we go. In a nutshell, that's kind of how, like, you know, a very small, scratchy surface of how people will use Dragon Naturally Speaking to interact with form elements. So, it's... There's just one other thing I want to show you, which is how if you can't access things, things directly, you can actually emulate mouse movement. You don't really want to force people to do this because it's a bit of a pig. And so, you know, if you can make your pages more accessible, it certainly saves people a lot of time. Wake up. Mouse grid. Seven. Seven. Two. Two. Mouse click. Go to sleep. So, you can actually target the mouse using the mouse grid, which sort of, like, increasingly narrows down where the mouse pointer actually is, and then when you're ready, you can issue a click command and it will actually do whatever you want to do. The other thing I'm not going to show you now because it's a bit of a fiddle, but you can, if you want to, emulate a bit of a job facilities. If I have a bit longer, I often will demonstrate that either in the widgets area of WordPress or actually just by moving the tabs around. But I want to end that demonstration of Dragon naturally speaking there, and then I'm going to start up NVIDIA, so I'm just going to do a quick change over. I'm going to close Dragon before I fire up NVIDIA because they don't always play nicely together. OK. I'm using Firefox for NVIDIA because it works best with NVIDIA, Firefox NVIDIA. That's not to say you can't use other browsers, but you get the best experience with that. And hopefully you'll hear something in a moment. Loading NVIDIA. Please wait. Welcome to NVIDIA dialogue. Welcome to NVIDIA. Most commands for controlling NVIDIA require you to fold down the NVIDIA key while accessibility examples, practical demonstrations of accessibility. Right. Now NVIDIA is a screen reader and as you can hear, it's a computer generated voice and it just talks at you all the time. It's because there's lots of information that it needs to tell you about web pages and what's going on. Just to make it easy for you, I'm actually going to turn on a facility for the speech viewer which is really useful, so you can actually see on the screen what it's saying. I'll just get that going. Right. Now the first thing that you hear when you arrive at a new web page is it will tell you the page title. So that's why page titles are very important. And then it will tell you things like how many links are on the page, how many headings are on the page and various things like that. And then it will tell you how many links are on the page, how many headings are on the page and various things like that. Let's look at the links next and there are various ways that people can find links on the page. Links, as you probably know, will get keyboard focus natively. The other things that can get keyboard focus are input fields and buttons. If it's not any of those three things, then keyboard focus won't actually land on it. That's not the only way that you can find links on the screen, but typically people might use the tab control. Clickable banner landmark accessibility examples visited link. Okay, so this is the link that pops back to the home page there and it says banner landmark accessibility examples visited link. So it's bits of information like that, it's telling you it's a link, it's telling you that I've been there before, it's giving you the link text, accessibility examples and actually it's telling you it's moved into the banner area of the site because in 2016 although this is in the left-hand column it's actually marked up as your banner because that's where a logo would go if you wanted it. There's landmark roles are important to help people understand which part of the page they're in and as you move around a page using screen readers it will and you move from one region to the next it will tell you when you've entered a new region. Navigation and mark list with four items home visited link contact us visited link. Okay, so you can use the tab key to move around and in a moment I'll show you the forms page that I showed you a minute ago another way of doing it to which you'll save a bit of time is there's a facility to list the links on a page. Elements list dialogue 3 view level 0 contact us 4 of 20. So what I've got here is a list of all the links on the page and a lot of blind people use this functionality because it saves them time rather than tab tab tab tab moving around the page. People can find the link they're interested in and actually fire that link from within this dialogue box so sometimes you might even find that very few people using screen readers might actually go into the page they might use the dialogue boxes like this. Now I can select the link sample page 5 of 20 level 0 by using the up and down arrow key here and it's telling me that sample page 5 of 20 so it's telling me there are 20 links on that page of which this is number 5 Okay, I'm not quite sure what the level 0 means there because it's not a heading I don't think or maybe it is marked up as a heading I'm not certain on that one but you can actually then the default action is to follow that link if I press the enter key now. Now at the top of the elements list you'll see there's also headings and landmarks and I'm going to use the shift tab control to get up there type grouping links radio button checked alt plus K because it's a radio button group the way to move between to move between the radio buttons is to use the up and down arrow key Right now I've got a list of all the headings on the page and this is really useful because if you've got a very busy page like for example the BBC news page front page this can be a godsend for people because it enables them to quickly find sections of the page that might be interesting to them and that's why it's really important to use headings and to make sure that the hierarchy of the headings is sensible because you'll notice we can see this but it's also going to tell me if I move into the heading recent posts one on three level zero recent comments two on three level zero now the level zero is making sense because it's kind of telling me that these are sort of top level ones homepage expanded three on three level level one video on Qasos expanded one on three now I've moved into one that's actually heading there which is sort of kind of nested inside some other section and so it's saying level one so NVIDIA is telling me about the hierarchy here and the other thing is this enables a screen reader users to move around a page because the default option here is when I've found a heading that I'm interested in I press the enter key and I move directly to that part of the page not something that sighted users who are using keyboard can actually do but briefly whilst this dialogue box is still open I'll show you the other thing the landmarks bit at the top I mentioned earlier the landmarks were the various regions on the page because 2016 which is the theme in use here has a good level of accessibility it's marked up well with landmark roles and you can see the various ones up there banner is where you put your site name you know your logo etc etc navigation well that speaks for itself complimentary is often stuff to do with a sidebar there's probably too many complimentary's there you don't need multiple ones of those main is where your main content is and content info is often associated with the footer where you might put your contact details and other bits and pieces like that so in the same way as with headings I can select the area of the page I want to be in access home visited link contact us visited link sample page link expand child menu button collapse blog now I've there's a lot going on there but it's actually moved focus into the first element within the area within the region that I selected now other ways of moving around the page if I want to move from heading to the heading to heading I haven't got to select the headings list I can just use the H key out of list complimentary landmark complimentary landmark recent posts heading level 2 so I'm down here now at the bottom I'm not going to move too far from that but recent posts at the bottom left hand corner there I found the next heading so if I press H complimentary landmark recent comments heading level 2 these are the sort of widget area headings main landmark homepage heading level 1 heading level 2 now we're in the we're actually in the content area now so it said that Latin vitae bronchus or key heading level 2 and there's loads of commands like that so it's not just headings I can move from link to link to link that way I can move to from form element through form elements this way if I want to as well right moving on I'm going to show you how NVIDIA works example forms heading level 1 forms markup link link before form heading level 2 badly marked up form the default when when you arrive at a new page is that it will start usually starts at the top and start reading down and if you let it go it will probably read you the entire content of the page very few people are actually going to do that because obviously it can take quite a while so people will be using the various tools that I've shown you to actually help them navigate their way around a page and find stuff they're interested in so where are we let's see combo box please choose collapsed right check box not checked okay I'm going to cheat for badly marked up edit for auto complete blank right now I've put focus into the your name text box and this side is the one that ones that aren't marked up properly and so it's told me edit has auto complete blank edit is the type of the control has auto complete is like a browser setting and blank is the current value but what's missing from the equation there is there's no prompt to tell me what this inputs for so if I then do the tab again combo box please choose collapsed the next thing in the tab order is that select or drop down and you can say it's like combo box please choose collapsed so it's a combo box that's the type of thing it is please choose is the current value and it's collapsed it means it's not expanded because you can if you know the right key strokes you can actually expand the select to actually review the options check box not checked similarly check box not checked now I'm not going to labour it by going through all of them but suffice to say there is no meaningful information being given to the screen reader user in this side of the side because the labels aren't correctly marked up so I'm going to quickly whip through check box radio but radio edit multi check box not checked I have read the terms submit button your postcode edit has auto complete blank right now focus is on the your postcode field and immediately you can see that we've got the prompt your postcode edit has auto complete so it's prompting me what it needs in this input field which dessert did you have combo box please choose collapsed so I can now once I'm in the once again the prompt what dessert did you have and I can now now when I'm using the up and down arrow key here to actually move through the options one of the key things if you do any interactivity with JavaScript that's driven from a drop down every time I do that it fires the on change event so if you've ever got anything that's driven off a drop down you need to be very careful because it might mean that screen reader users can only ever see the first element because as soon as I change it to something else it might take me somewhere else that's if you ever use that a drop down as some kind of navigation feature would you recommend us to your friends grouping yes radio button not checked one of two now radio buttons are interesting thing because they have it's a radio button itself and it's got a label associated with it but radio buttons are often like pretty much always they're an answer to a question and so you need to make sure that there's sufficient markup in this form to basically propose the question in this case would you recommend us to your friends and then the answer as well and that is done using a field set and with a legend so you create a field set into which you place your radio button group and then you let your legend becomes the question you want to ask now that's important because I've done some work thank you I've done some work with insurance quote journeys and home insurance there might be lots of questions that have a series of yes and no answers like are there any tall trees is your property near a river are there other buildings within 20 meters or something like that and if you don't get the markup right all you get is a sort of yes yes radio button not checked no radio button not checked no radio button not checked and so it's important that you get the labels right be wary of doing this is my last point I have read the terms and conditions there where you've made you've put a link inside a label one of the browse one of the lesser known features of browsers is if you've got a marked up label if you click on that label it puts focus into the input field so when you put a link in a label you're actually confused in some ways you're confusing the browser because you're saying I want someone to be able to click on this to go to a different page but also it's part of a label so actually if I want to click on that I want to put focus in that input field now if you do it how I've done it on the right hand side that's okay and it will treat it as two separate items the problem with you get with that at the moment using voice over in iOS devices like on your iPads and iPhones voice over is the built in screen reader with that is that it treats it as a label but you can't get to the link and so if that's the only way that people can get to see your terms and conditions anyone using voice over on an iOS device they're not going to be able to get to that so that's something to bear in mind as well as I say I can go on for hours about this but I'm not going to I'm going to stop there this is just scratching the surface I hope that's been useful thank you very much