 Helo. Thank you very much for coming to us to talk about testability. For a while now you had Sarah on the screen to explain what we've been talking about. Is there anyone in the room that actually understood what Sarah was talking about there? This is what people are actually experiencing that have a disability when they come onto some of our websites. If they're struggling to understand the content, struggling to understand the information that we're providing, this is essentially what we're witnessing right now. So what we're going to do is we're going to talk around essentially how to do little changes, little bits here and there to essentially help all of your website visitors, your editors, actually achieve an accessible website. Now I know I'm up against the lunch break which is next so I've only apologised to that but I've got videos and hopefully a few stats that hopefully make this go a lot easier for you as well. So let's work out myself. I'm a digital agency owner based in Nottingham. So in Nottingham UK we are famous for Robin Hood's back in Janebeth. The main things that we're there for comes from the Nottingham Fires Football Club. But we're actually going through a transformation process ourselves. We are making sure that any website that we produce will be certified by the third party charity as an accessible website. So I'm here ready to talk about the journey that we're taking through there as well. A very important fact to think about in Nottingham is that we're actually not two universities. So people do have a choice in Nottingham. If one university isn't making a mark it can easily go to another. Now I understand we're in a bit smaller than some of the states in America but it's a real fact to think about when we are creating the information. So we've got a wide range of people in the room. First of all, hands up if you are a developer. Designer, content writer. Everyone in this room, you're all part of this process so it's fantastic. Final hands up for these kind of accessibility notes. Great. If there's anything I say wrong please correct and start to work. The one thing that I think about accessibility is I think it's flipping great. I really do. Anything that we do it is fantastic. Anything that we can do to make people visit our website or enjoy the content that we're creating anytime that we can improve that is better. Now my background is I used to work for the local authorities, I worked for local governments, I worked for local counters to try and make their websites more accessible. I then worked on a couple of universities, I then worked on a range of private businesses so we've been able to pass that knowledge through and the beauty of what we've been doing is we've worked on many content management systems. Now we're here at WordCamp, we all love WordPress but anything I talk about today can go through if you're using any other content management system. Drupal, Terminal 4, anything you can think of. All the fairing, all the ideas around this can work into that for you as well. So earlier I showed you the slide of Sarah signing, talking through. It's exactly the same for if you're blind. If people are trying to look at your website and something for you correctly or there are certain areas that have just been forgotten about this is essentially what they're having read out to which is absolutely nothing but very useless. So when you're building your website you have to think about everyone. It's not something that you can just think about at the end. It's a whole process. Use as many people as you can to actually talk through your website with them. As everyone here heard of the film Frozen, quite a small independent film I air. I think it's used quite a bit. Frozen was fantastic on many things now. If your children heard the song I'm sure you'd be hearing it constantly over and over again. One of their trailers was actually very good. There was no talking, there was no speaking, it was just acting essentially. But this is great, it's really engaging. Children are loving things like this. But if I'm blind I have no idea what is going on. Nothing's been described to me. So what can you do? You can start to add audio transcripts. Now hopefully my sound will work with this. So hopefully the next slide will be a bit better. So as you can see from there it's exactly the same but it's just someone actually narrating what is happening. Now you can take that one step further from the captions or something else in there but it's to show you how that video has now brought in more people. Now it's to engage more people within that video. And by having that it's just a trailer. I think how many extra people now don't see that movie because it actually may increase it and it'll allow more people to enjoy that. Now the next video is four minutes long but this video is done by Channel 4 a broadcaster in the UK. But what they did was with the power of the games they went above and beyond in what they did. So this video is just one example of what they did. So this is a signed version of their trailer. Yes I can. They also did an audio descriptor version as well. I'm going to play this in full because this shows you how accessibility isn't boring. Accessibility doesn't mean you have to have a black and white page. This video is just fantastic. I hope you enjoy it depending on where you are. But typically a nice round figure is one in five. So let me take this family for example. There's five people in there. One of them will need to save it. That's kind of what the rule is from here. But really you've got four people in there that need glasses. Now glasses, it's a sort of a position for this sort of family that's trying to be improved. So that's the system technology straight away. You've got three of those people that actually have dyslexia. They will struggle to spell or struggle to actually enter content on the page. So then have a short attention span. Granted that is definitely me. And the other person in there is Elton. We have to think about the Elton here because we need to make sure that our content and make sure that the things that we're putting on the screen or transcribing to them can be understood by them as well. So the one in five is that's fantastic because if you think about, again, the population of Boston. You've got 675,000 people here. If your university or your college area or your after-school activity is not accessible you could potentially be looting up quite a few people. If it's the same person comes on the website and actually thinks, what else can I do when I come to university? I can't understand that thing. Maybe I'll go somewhere else. 135,000 people. But then if you think about the population of the US, why it's a big number, because you're not just looking at recruiting people in Boston, you're looking at recruiting people technically worldwide. So if you think about it from a United States point of view 65 million people would be registered as disabled. 65 million people that we could be missing out on that we could be not engaging in. So where we go through everything, we plan, we design, we try and develop everything to my new detail. We use the latest technology, the latest JavaScript plug-in or anything like that. We're not thinking about everyone and we really need to start thinking about everyone. So what's the big barriers here? We kind of think that the standard you're looking at for the many barriers, knowledge is always going to be a barrier. That's why we're all going to things like WordCamp. We've got an accessibility workshop next week. Sorry, tomorrow. And another accessibility talk tomorrow as well. I'll be going to them, because I still need to be proud in expanding my accessibility knowledge. This is why we're going to conferences. This is why we're learning certain things. So knowledge is in short-term marriage that we can always overcome. A tweet, a message, a blog post, linking up with a local charity, which is what we have done. This is going to help that knowledge. Time is a really bad excuse. Time is not a problem. We manage things correctly. Obviously, two talks ago, we talked about how you've managed yourself. If you manage a project correctly, time isn't really going to be a factor. You start looking at accessibility. We're very start in the initial meeting. It's just going to be part of your workflow. There's nothing extra we have to do then. Who has never had a problem client that's always going to be an issue in there. And typically with money, money is always going to be an issue for the client. Do they have to spend more money to have an accessible website? The answer is no. If your workflow is still going through, you're not changing anything in there. You're just ensuring that you're engaging with more people. So the client may want that bigger logo on his homepage or something like that or maybe more content over here. But if you do that in an accessible way, that's not going to be a problem. And when it comes to money, again, by having an accessible website, it can increase the revenue that might come into your website. So back home we've got a budget airline, mainly using them because they used to say branding colours as ourselves, but they are very good at their stats. They say that they have 450,000 people who are disabled that use their airline. Now, typically they are an online only, website, an online only provider. So, roughly you're looking at about $120 on an average for a flight with an air glaring. If they weren't looking after these people, that's $54 million that they are just missing out on. And again, that's just to help highlight the fact. But if you can put that in front of your client and put that in front of a group of people, they're just going to try and think, why are we not doing this anyway? Why is this not part of everything that we do? Typically when we use a website, if it's slow or has that unsecure log that doesn't look too professional, we'll walk away. We'll go and use another website straight away. So, you have to think, once if it's a disabled person using your website and it wasn't inaccessible, they will do the exact same thing. They will go to another website, they will go to another college or another university and actually try and do something that is more accessible and more inclusive. It is a gateway to what you're providing. So, if your website's not accessible, why would your facilities not be accessible? So, again, this is why we've teamed up with the short rest. The short rest are a charity that use real disabled people that are testing this on a daily basis. They're not using automated tools. Yes, they've done it a little bit, but at the end of the day, you can easily fake an accessible website using an automated tool. I can happily show you further down the line today as well. So, these people will go in, they'll use the website because this is what they do on a day-to-day basis anyway. So, what we did is we recently went to WordCamp in Belfast, Northern Ireland, and we produced two websites, and we brought along Alan, who is second on the right end of this image. Alan actually is a screen reader that was, did have full visibility when he was younger, when he'd used his diabetes, lost it at the age of 20, I believe. So, he knows what things do look like, but now he's using the screen reader to actually interpret what that is now. So, the next video I'm going to show you is Alan using this on a bad website. The two websites are identical, but what we've done is we've hacked, coded in excessively and it's a painful thing to do. So, I'll go through this. I might stop the start screen a little bit, but it's a really, really good reading. Looking at a web page, there are two identical. This one has been introduced for an example of a banned page for a screen reader. The current page will show all the elements that make it more accessible, however visually they look the same. I'm going to refresh the page to simulate using a link to go to this site and you'll see or hear what happened. That's a key example of how they look like. They look like all genes of lots of other things that you can hear to assure the quality of the screen reader. It's curious but it's a little bit of a problem. It's only a little bit of a problem and I'm going to be happy. It's made such a simple. As you could try here, it's very hard to distinguish draws and navigating around to find a port button before navigating to it and therefore pausing the video. Ideally, you should have the person being able to manually reactivate in the play button. When on a page, first call-for-call for myself and second call-for-headings which will break your page up. I've only got one page in here which, in effect, I need half the page and a description that says more videos. Okay, underneath I'm perhaps finding more videos but what content will be in the rest of the page. As you can hear, I'm finally finding with dogs all the videos. How do I run? That's information. It's a website that makes me come down to the very bottom run which, on a bigger page, will be missed or will take a screen reader a long time to find out the information that I need. On finding the information, there are also links. It should be descriptive so it will be heard down the first link I've come to is a clip here. The description doesn't really mean anything as well as you can hear. Click here will emphasize what's on that page. The only reason or way I'm going to be able to find out the information is by typing and listening above. If you like what you see. Okay, so a little bit more descriptive, I don't know if there would be if you like what you see about Jesus, then click here which gives more description of where the screen reader will go. There's also graphics. Okay, which you can hear is behind rooms area. Belfast, which is our limited words. Chains, I think there's a little bit of description but not really signing up perhaps somebody can see. If you jump into that, it does navigate down. Ainsons are in the text and it will cheer to you, right? As you can hear, there is a whole stream of iron cheese or cheese dishes with no breaks in between. It's like a sentence. I'm going to say soon that this will be broken down into a list. Back in the gap between each element so that the screen reader can identify into them items. For example, could be whether it is chocolate buttons at a supermarket. Does that mean it's chocolate you eat and buttons you wear on your shirt or is it actually chocolate buttons the whole thing of being chocolate? Also we have on the food fields, we also have a sign-up for the newsletter where it's again important for the website. However, we've got many of us by our descriptive part that I'm saying not teched. Again, the only hope that I have will be to tell you to them and and finally I will ask you that right there but to me. Again, you're going to survive instead of having email coming from across or something else saying on more description. Now you may thought then there's too much talking going on, there's so much going on on there but that's a real person using a real website as the inaccessible. They have to use a screen reader so the more that we can do to make that process a lot easier the better. And also playing video, everyone's one of these that engages people straight away and as soon as they can see that video they'll sign up for this that number. I didn't hear a thing and the little things by him allowing to pause a video that brings in more links that YouTube loves to have the related videos. Each related video is then an image a link and a text so that is now almost increased in number of links, number of images in your page that is not really part of your content and again it makes things a lot easier. So, with that in mind how can we improve? We need to start looking at little ways to do that. You may have picked up a few things in there so form fields are pretty cool no water playing videos to make sure you're heading the right way. They're always good start to fix but you don't want to be fixing these towards the end. You want this to be part of the process so when should you start thinking about accessibility? You should start thinking about accessibility at the very start of your project. You've held your point it is going to be accessible. It doesn't matter how you're going to make it accessible it's up to us as developers, designers and content writers to make it accessible it's just part of our workflow so it can be a selling point but also at the same time that you know that you are making an accessible website you're thinking about it at the very start. You can look at your wireframes you can instantly find problems with a website by looking into wireframes carousels, how many carousels have been used on that page before so when a carousel works what's the screen reader reading out when that's been slid across is it reading them all out? Is some of what we've made a bit of a cognitive difficulty is the slide going too quickly so they can't understand it is the text too small? Is things flying all over the place trying to bring people's attention to them? All of these things you can think about straight away is going to be in this wireframe video but you can know straight away right that they don't have to auto-start how do you label them on? A really good way to start is looking at the it's just a really quick checklist of things to look at to raise start to the very start to the project this is being updated constantly and it's doing little things like really talking about the areas talking about how you should be doing certain things but again it's really good to look at this at the start there are a few links coming up soon so we will be putting them out there on to things like that to go on for so once we've moved on from our wireframes we then start to look at things like the design, we have to start putting the meat on the bone and this is when your designers will start to come so your whole project team will be part of this because it's not individual silos which we all like to work in everyone is part of every phase of this project so when we bring in the designers there is a lot for them to consider is there no code mind in the audience? can you see a number in the screen? and it's making sure that we can try and negate this problem not everyone can see the number 74 in there how can we portray that information you may have realised I quite like stats I love cheese jokes but this is my favourite stats of all times that's a lot of X combinations a lot I'm not going to try and pronounce that very long number but only 1% of those combinations are accessible that's 141 million combinations that are accessible and there is no designer that can tell me you can't make an accessible website that many color combinations you can go so it's bringing designers in very early on now I understand when you work with maybe an existing project you may have some problems it's always trying to find ways around that as well the hex color scheme so our company is black and orange one of the most inaccessible color combinations I found out while we were going through this process which is always a fun task so we did a test so our typical orange and black was failing WCAG guidelines essentially section 508 that's going to be failing as well this is just not going to work but if we keep an eye on the foreground color and see how that slider moves minimal it's moved to a very slightly brighter orange but it's now passing the vast majority of our tests so our websites are now including people that may have issues with color contrast and that's a very small change that's hardly anything but that ratio is a lot better now for us so the chapter I've just used is a website of resources contrast checker really really good tool to have a look at there's loads of tons of different pick colors maximum loads so really utilise some of these color checkers as well we use Trello in pretty much all of our projects it really helps different organizations work with us and also for internally but they've actually got a color contrast setting so if you use the color blinds issues it gives you patterns it gives you other areas to distinguish between colors which is a really handy little tool and that is using on Trello right now and then it comes to my people so I'm a developer of hearts I've been developing for a very long time so bringing this all together getting the designers getting everything like that free now we have to actually make the code and actually make this work I don't want to go into the debate now of icon fonts or SPGs there's loads of little debates out there for another time but for this example we're just going to use the icon font so designers your white people would love just icons on there and it will make sure that that people can go to their social media the problem is there's no text in there whatsoever so a screen reader will just read out nothing they won't be able to go to their social page and if you have a link going to a website then it's just going to be a blanket not going to go anywhere on that button so by putting in some hidden text so this is just a class that is essentially making absolutes off the screen so a screen reader, Google, anything like that is going to pick this up but your design is not going to change in any shape or form it's going to stay exactly the same for you as well so by doing little things like this is making better technically you've got more content on the screen as well now, Google isn't a person Google is an algorithm Google is an algorithm that's picking up content I'm not an SEO expert pretty much that that's what Google does the more text and the more content that's relevant to your page is going to be picked up so by default an accessible website is a more SEO friendly website there are other little tools that you can use with different developments like a landscape and that's going to Aria Aria provides extra content to essentially your code a good example is Aria in one which means screen would completely ignore that another brilliant use is Aria live so any time that you may be put an item in a basket you'll see maybe notification in the top right that you've got something popped in the basket at this amount blind users won't see that by using something like Aria live you can read out what has just happened things like Aria are required so all of your form fields will know straight away what is required and what isn't there are thousands of things to go in there as well so again really good resource for having them for certain things and then content guys, I've not forgotten about you it's still an extremely important part of the website there's no content so it's now your turn to try and engage with those people as well making sure your head instructions are perfect making sure that you are going to 3 or going down or something jumping back up is perfect you saw Alan then struggling because there was no headings on that page break it out make it allow to use that website a lot easier it will read out a lot better for you that is just gibberish to me not only because I'm using Loremson but pretty much it's sanctuary, it's got start points all over the place really close together I will turn off this page straight away so what can we do short paragraphs bullet points you'll engage a lot more people this way it will still understand what we're trying to do but we've just made it easier for everyone to use one of the things that I had to switch up because I was running out of time sorry, it's essentially meaningful links click here is rubbish Google click here and you'll get Adobe App for AdReader pop up because that's what most people use when the link is read out so don't read out in the full name of where they go it's going to read out the text so visit more about or read more about such and such not just read more not just click here because there will be thousands of click here there will be multiple read more you can use that content that I used earlier so your button can say to a visual person read more but there's some text behind the scenes that says read more about this page and text to the screen and bring in more information my next video I can't play but is that actually using an accessible website which is actually identical to this I'll be around the more daily I'll tell you a quick look up I'm just sorry I can't play it for you so once we've done everything we've got the websites up there now what we need to do is start checking now checking using real people checking using online accessibility checkers are fantastic but please note accessibility checkers will pass, they will give you false positives but they are a very good tool to find out what's going on so wave is brilliant it's a really good tool to allow to quickly check the page it's very visual there's apps plug in as well there's loads of things that you can use and it's all free if it's free use it you're making the website that's a flaw it's a through very good in England now we've got a Chrome extension again it's brilliant because what this does it links you to the problem and then links you to the WCAG guidelines to tell you why it is a problem so again a very good tool to just have an area of Chrome thank you very much any questions please I can tell people that hungry for lunch right so if you do have any questions later like I said I'm around all day giving a shout we're offering free access to the checks so a quick walk with your website while I'm here come and grab me more than half to have a look and we've got a load of free drinks as well just come and have a chat afterwards cheers guys, thank you very much