 Hello everyone, thanks for turning up for this chat. We are going to talk about accessibility on general, why it's important and how we're going to start working this in to essentially your workflow, so nothing ever impacts on anything there. Now before we talk, really I'd like to just have a quick hand us the only time you'll be audience participation. So hands up if you're a developer, designer, content writer, agency owner, accessibility fan. Perfect, you guys are my favourite. So can I give you a bit of a background about myself? Yeah I've worked in local government for a very long time. I was able to kind of use all of my knowledge in that and actually bring that in to into HECS productions. In all honesty accessibility is flipping great in all honesty. It's not only going to help you from making sure that you are including everyone into your website, into your mobile applications, but independently you're bringing that into a bit of an SEO strategy as well. If a screen reader can read your content so can Google. So if you are having a little bit of trouble, really emphasise that point. I've got a background of procuring content management systems so we're actually having a good understanding of it. It is the content management system that helps but it's also a lot of things you need to put into your work there to allow your content to be accessible. Currently we're working with the GES at the moment to actually help implement the legislation into mobile and accessibility. On that point you've got to the 29th, please, please, please submit any consultation with comments that you may have about how to make public bodies websites accessible. To kind of give you a good idea of an inaccessible website, there you go. Some people will not see anything on their web page, they will not hear anything on a web page. So when you're developing something or designing or even thinking about a web page, sometimes this is the response that they're going to get. Absolutely nothing. So we really need to make sure that any website that you create is for everyone. So there's quite a few things that you can kind of think about. Obviously we've just looked at site on there. You could also think about things like hearing impairment. What happens if someone is reading your video but you can't actually see any of the subtitles? They may also just be on a bus and they don't want to actually have their audio being displayed. So again, subtitles is a brilliant way of stopping that. Audio doesn't work, that's a bit of a one. So yeah, by putting things on my subtitles is extremely useful. So it's little things like this that you can start working into your content to actually allow it to work. One thing I would highly recommend doing and I didn't have time to put in this presentation, if you Google frozen audio description, if you've got children, maybe don't do it with them because they'll want to watch that film again and again and again. But have a look at the trailer with their audio described. It is fantastic and it's certainly something that will really help you push things forward. When you're thinking about people with a disability, you're thinking about one in five people in the UK. Now if your website's inaccessible, one in five people cannot access the information on your website. And we all don't think that is right. If you think about this in a real world example, it's a beautiful family, kind of randomly picked at randomly in there. But there's five people in this screen. Now not one of them has declared themselves as being disabled. But you've got four people in that screen that require glasses. You have three people that do have a mild case of dyslexia. You've got two people that have very short attention spans and one person is elderly. Now all of those aspects and all of those ideas of people or those characteristics of people actually require you to think about how your content is on a website or a mobile device. If you think about my sister, she uses the phone all of the time. No matter where you are, time of day she'll be on her phone. Now today is a lovely beautiful day. What happens if her screen is being impaired because there is a bright light of sun on her screen? She can't read her content. So again, thinking of other ways to have that content read out to them or allow them to actually start to in consuming information without the need of relying on just text on the screen. If we think about the population of Northern Ireland, 1.81 million roughly give or take. And if we use the one-in-five statistic, that's 3,62,000 people registered as disabled. So potentially this amount of people cannot view a web page because you've not gone through the proper process to find out why it is inaccessible. So we plan, we design, we develop, we put our life and soul into building things. But we're not thinking about everyone while we do that. Now there could be many reasons why we aren't doing that. Knowledge is a key one. Now we're still learning as an agency. We've partnered up with the Shore Trust to actually bring more knowledge into this. I do not have a visual impairment. I have glasses to help me see when I'm looking at distances. But you've got someone like Alan who is completely blind. Requires a screen reader to actually go through that whole website. I can't replicate that. I can close my eyes and try using the George system. But actually having that knowledge and having that expertise will help us move that forward. And as an agency any website that we produce will be accessible from the AA and AAA standard. And we're using the knowledge from Shore Trust to make sure that anything we produce follows that. The one thing we will talk about a lot today is time. Time is not an excuse. Time is something that we can always make for. Time is something that is just that we've not workflowed it properly. We need to think about every step. Who's got a fan of a client that always wants a logo just a little bit more bigger? Or they really want a website to pop out of the screen. In all honesty, if you should be building, designing or creating websites, accessibility should always be in your mind. You should always be developing or designing a website that is accessible. It should happen for them automatically. There will always fall back to you and say, well it's going to cost me more money if it's going to be accessible. And they think as a designer, a developer, an agency owner, that it's going to cost you more money to do that. But again it's thinking about how your workflow is in place to make sure that everything that you do is just flowing the normal flow. If the client is really adamant that I've got no money, you can't make this website accessible, think about a very orange airline that has very decent fares. They've got on their website that nearly half a million people registered, disabled use their flight services. If you think about that from an average fare, it's definitely didn't pay that to come over here, but an average fare is roughly about 90 pounds. So if they couldn't service those people on a website, on their application, that's a hell of a lot of money that they're losing. And it's little things like that that we can easily put into our briefs, our conversations with clients, to actually show them what they are missing out on. But that's the client. Think about your everyday life. How many times have you missed a bean collection and needed to contact a council to say, can you come and pick it back up again? A lot of website forms are inaccessible, labels are done incorrectly, maybe the colour contrast is incorrect. If you think of everything that you do on a day-to-day level, you've done a thing. There's a lot of people here that can't actually use the content, they can't consume anything. So really have to think about that and then take those real-world examples to your client. And the way that we looked at this is we saw that there was a need. You know, we needed to start making websites that are fully accessible for everyone. So we did, we partnered with the short trust. A few of us went down to need to actually witness one of our councils actually being completely audited. We were able to sit back and actually witness this. So we had a lot of different disabilities being shown to us and actually how the websites will actually start being put together. The team were fantastic, they're really well-conducted, they really opened our eyes up to different ways of doing things. And these are real people. We use personas all of the time in the work that we do. But hands-on people actually use a persona that actually has a disability or has something that has a way of not using a web page efficiently. You know, we don't think about this. So we use real people to actually find out what they're doing and how they're using their websites to make sure that it is working right for them. So how can we do it? How can we help our clients, how can we help people that are visiting the web pages to do that? Everything starts here. That very first meeting, that very first client interaction that you have, be it an email, a phone call, a face-to-face meeting, everything gets brought up here. You tell them why you're making your websites successful. You're telling them what we're doing to make sure that we're doing that. This may not be with a client. This can be your team, your third-party providers, your freelancers that you might be using. Anyone that's part of your project should be brought in for accessibility right at the start. We try to go to a content management provider. They wanted us to help them with accessibility. They said, great, come and talk to us when it's 80% done and we'll start talking about accessibility. Think of how many things have gone wrong since then. Think of how many times they've had a question, but they've just not thought about it so they've done the display none. We've hidden it straight away. Everything should be considered right at the start. Once you've moved that on, then start to think about the wireframes. So even though you're not putting any colour to the screen, what you're doing is you're starting to get the layout right. Is there a carousel or a slider being involved in here? Are video things... Yes, fantastic. So how is that going to be displayed on a screen reader? So when a slide moves, are you still reading the content? Does the person have control of the slider? Does the video auto play? Things like this you really have to consider. And things that we always look at, and I have to thank you very much for bringing us up yesterday during the Contribute today, theallyproject.com checklist is fantastic. When you start wireframing, check this out, because it will give you a couple of points of where you can actually start, be it at certain areas. It's something that is definitely worth just making a little note. So when it goes to your designer or your developer, you'll then be able to start working with them on that. And then moving on to the design phase. They're aware of what's gone on. They're aware of what we're doing, what we're trying to achieve and how we're trying to achieve it. So start thinking with them and start talking to the developers. Make sure there's a nice flow with everyone talking, because this will help them. Good things that they can really concentrate on is color contrast. So color contrast is massive. You need to make sure that you are differentiating certain parts. So here we've got an example of a colorblind test. There's a number in there. Some people in this room will be able to see it, and some people won't be able to see it. So what we need to do as designers and developers is make sure that we find ways that they can differentiate. Certain things you can try are the color contrast checker. So this is what was our corporate orange. And this was our corporate background on our website. And we found out that we failed every single time. So, by making extremely small change to the foreground color, we've then become pretty much successful on heading text. And yes, we're not very good on the normal text, but very little chance that we're going to be using that. But if you just look at the lightness and the difference between the two that we're using, that is a minor difference. It's very, very small. But I'll tell you what, that is making a world of difference to a lot of people. A quick one to go on. The resource color contrast checker. Please give it a go. You can put in hex codes. If you have a Mac or anything, there are color droppers that you can pick up in news and there are apps. All of these links will be available, so we'll make sure that you will have access to all of these as well. We use Trello on a second-by-second basis that feels like I was getting notifications up. But they have labels, and the way that they've worked on the color contrast is actually putting in patterns to allow people to differentiate between the different colors within there. So it's not just a case of making sure that you're only using completely opposite colors. You're actually putting patterns into that as well. And because everything that you've done, everyone's been part of this, you can then pass this over to the developers. You've got your wireframes. You know where you're going to be using certain roles. You're going to be using certain other items. And then what it will be now is they'll just be putting those final touches on things. They'll be making sure that you've got skip links in there. They'll make sure that you've got the right areas, the right links in the right places because it's all been wireframed. It's all been thoughts about it. The design is all been there for you. One of our biggest, biggest bug bears are these beautiful things. Everyone's social links. Everyone's using something like font awesome or maybe another icon font. My SVG's fantastic. You can put a title in there. You can get the text being read out to you. But if you have kind of the standard font awesome font, that's great. It's being displayed on the screen. Now, if you put a web link in there, you'd think, right, on a screen reader that needs to be read out. But the problem is, they're not going to read anything. There's no text in there whatsoever stating that this is a link to something. So by putting just a hidden area in here, there's not been displayed from the front end. It's been just displayed in the code. It's allowing you to say what the link is doing. So someone like Alan, who uses a screen reader, will actually hear Visit Facebook and they know that they'll be going to the Facebook web page. So you're taking a photo. I won't change it. And from the front end, everything looks the same. Nothing's changed. So your styles, you're going to keep your designers happy. You're going to keep the initial quality and happy as well because it's still going to be looking exactly the same. Not rambled on quite a bit. Now I'd like you guys to actually see or hear this in action. So we're going to welcome Alan up to the screen to give you a quick introduction. And then what we're going to do is go through how a screen reader uses and it hurt me to do a very bad accessible web page and how the difference it looks from an accessible and a good web page. Now we're going to do this on the screen. So if you want to see Alan's keys and how they're using it, if you want to visit www.Thorlicks.com. We're going to try and set up a bit of a live streaming as well. So on your phone or on your laptop you'll be able to see what Alan is actually typing and why you can see this being done on the screen as well. So just give us a couple of minutes and we'll just get this set up. So afternoon is it on the screen? On the screen is a site that James has put together or that cheese. This is his bad site for accessibility. In a moment we'll show you how the better one or the good one looks. So please take note, hopefully this shouldn't be any change visually. Now James obviously said you can watch how Jaws works but think about like virtual reality if you want to close your eyes be in my virtual reality and hear what I see because sometimes the site and your hearing sort of overtakes. But I'll leave that to you. Right, so with Jaws I use a lot of shortcut keys to navigate around a page. Now we've got memories for a screen reader they only hear where the cursor lands nothing around the outside or to left or to the right or any direction. So it's just literally where the cursor lands is why here. So I'm just going to refresh the page pretending that I've just gone through it by a googling because I'm think. That's fine isn't it. Okay, so when James sent me this initially it didn't make me sit back in my chair. So hopefully I can trust it. Okay, so this is the initial link ready. Okay, so we've got contrast here of Jaws talking and the video. The problem is I can't hardly hear anything or could you hear me? Okay, so we've got some shortcut keys that you might look at before hopefully I can go straight to it on call. Oh, thank you for that. Okay, so it's taken me a few minutes or seconds to find out where pause is and to actually pause the video so I can operate my screen user screen reader sorry to navigate around the page. Now the first thing I normally do when I get to a page is look for headings. Now headings will for screen reader minimise how much information is on a screen. If you think of a newspaper you've got a heading and then you've got different text size or font size to each story and your eyes can visually go to that story you want could be on the page and then go to that page to get more information from it. That is just like a web page hopefully with headings but if you imagine you've got no headings it will be like looking at paper all the same font same colour all the way down and what I'll have to do then is listen to the whole page. Now we've only got a small page here but if you imagine a bigger site we've got 20-30 pages to get the information you actually want it's going to be quite difficult. So I have got a shortcut key which brings down all the headings and hopefully heading list dialogue heading list view more videos calling to one of one to remove the items in the video. Oh was it? Oh. Okay. More videos calling to one of one. So there because James Tate said there's no headings there but we have got one which is the YouTube video but I've got nothing else. So am I now thinking of a page or is it just videos? Okay because if I've got that then I can quickly jump to that information. I'll get my key buddy. Enter heading level 2 more videos. YouTube video. So it's down to YouTube video. Link out to make cheddar cheese. If I want to know how to make cheddar cheese I'm there. Anything else it doesn't matter. Okay but obviously on a website you can have your details in contact details. You're going to have different information about cheeses on here or to go to other people's websites that perhaps sponsoring you or allowing you to advertise on there. So headings are a really good tool for a screen reader. Okay now we heard a little bit of the form fields. We're looking to making a contact. Now James on his site has put not just any contact details but he's actually got somewhere we can sign up to have alerts or a newsletter which again is for somebody who's doing a site it's going to be really good to keep in contact with that person who's visiting. But the headings they've got no information there about how to keep in contact. Select a more field dialogue and list one, list two. Watch later button 118 to move to item new with the arrow keys. Share next button. Close button. Seek slider play button. Unlabeled once later 100% button. So I've got a button which this is button. You've got your eyes shut then you haven't got a clue what it's going to do. Setting menu. Fullscreen button. Name edit. Email edit. Name edit. I've got name which okay it's a name. I don't know what I'm signing up for but it's a name. Email edit. Email. Radio button. I've checked. Okay and I'm not checking. I've got a button that I've not checked. Radio button. I've checked. But I'm going to clue what am I signing up for or is it to allow other sites that we've heard today to have that information is it allowing people to share certain information. So I may be going down there clicking it and not really knowing what it is as um Caps lock off. Caps lock off. This game. I can also navigate individually. I don't have to use the jewels list. Name edit. So it's got name. Email edit. Grabbing the top. Name edit. Email edit. Right. So email. Radio button. I've checked. HTML. Okay. So I've got to go down there. Radio button. I've checked. Is actually the HTML. What for? I don't know. Radio button. I've checked. Plain text. Plain text. So I've got something over my HTML or plain text. Now is that for the email? Is that for a newsletter? I've got to start guessing. Something else that comes on websites that perhaps is more of a debate on the people who are blind or visually impaired is the use of graphics. Now graphics are good for myself. I lost my site when I was 28. But I've got some memory of images. You know, things are happening in life. So it will bring a website to life. But what we've got here hopefully. Select a graphic dialogue. List one. List zero. Hello Belfast. Hello Belfast. Okay. Now I can work that out as hello Belfast. Okay. The only difference there really, again, is it's not even taking time. The only part thing is that James hasn't put a space between hello and Belfast. Now that's an easier one to work out. Some aren't. I have to go over it key by key. Cheese-photo.jpg Okay. So we've got cheese-photo.jpg Well okay it's cheese. Right fine. We did a little bit better than I did suggest. Some websites I'd like to go to and there's graphics on there which are just numbered. There's just got some numbers there. Now the problem there is I don't know whether I'm missing something. Is it an instruction? Is it something that's going to be important information behind? Let's be wondering what is going to happen there. Okay. But I do know it's a cheese-photo and it's got a lot of information after that. Which cheese do you like? Okay. Which cheese do you like? Oh good. I know that one. So you're gabbling her on. Okay. What's really there? It should be a list. Okay. A great sort of example that I taught somebody is your list when you go shop in chocolate buttons. Okay. So do you get chocolate buttons from Cadris or do you get two items chocolate and some buttons for wherever you need buttons for? Okay. So the screen reader is just listing or reading a whole sentence which should be actually a list. So which phrase event led? Okay. You've also heard the video. Again just for the dialogue. List one, list two. Watch later. Play button. Play. Okay. Sometimes. Oh yes. There's no where to talk about the combination of buttons. Again show you the beginning. Call. Again because I can use the initial letter if not too bad. However we've got about five videos to play and obviously play and pause of the same initial letter is going to take me a long time to get there. Yeah. Okay. Now I hope they're going to change so if I delete this it'll be. Oh yeah. Oh dad. Oh dad. Website or ls-microsoft word. Website or good example. Hopefully. I thought you were. Good example. Enter. Okay we'll do your options or we can click it. I'll say I thought it was good. Microsoft word dialogue enabled to open hdmps colon slash slash orlix.com slash A11 to build. That's a wonderful thing. Main script to edit. Internet explorer. Escape for a fresh new page. Address and search using an easy example of good an easy example of good A11Y. Page has one frame. Two regions. Six settings and eight links. Okay. Quite good. There's a button there that just turns people's options again. No. So what we're going to do is just go over now the good example to assist screen readers. Okay. So as we said before we've got the first time to go on there. We're going to look for head ins. Heading list dialogue. Heading list new. Hello. Belfast word cam. Belfast colon one. One of six. So we've got heading level one. So we're going to activate that. It should go straight to the main information on this page. Which obviously is saying hello to yourselves. Some content you might want to read colon two. Content you're going to read. So we're not going to that heading. I'm going to get the information I want underneath. A wedge of Swiss cheese ready to be Swiss cheese. Do you like colon two? Okay. Some examples of cheese colon three. Contact us colon two. Okay. Now we've got the best of it first. Developers. And now you've got to contact us. So I could go straight there. And then there's the newsletter. Okay. So again I can just ignore in a way the rest of the page and quickly jump to that and think what I want to do. Get the newsletter. Escape. I've seen the example of code A11Y. Blitz list dialogue. Blitz list 0. Okay. Now I've got a link slave. We didn't go over that on the bad example. But I can just show you on the good one. Skip the content. That normally means that on every page you go on your page there's going to be a duplicated sort of home contact us links at the top. Depending on how many you've got there is the how the distance from the top to your main content. Now you've got to skip link it would or should skip the user all the way down to the main information. Alternatively a screen reader can use the number one to jump to the heading level one or as you've seen it will hurt going up to the heading list and finding that hello Belfast. Accessibility statement. Okay. Next one down to the link accessibility statement. Two things here. The accessibility statement should give confidence to people who use assistive technology to know that your site is helping them. So they've got that confidence of going all through your procedures and actually getting to the end product. Along with helpful hints that perhaps they're not known before especially if they've just started using assistive technology, things like the PDFs and other documents. Lots of times when we test the site the accessibility link is normally or sometimes at the bottom of the page. Now for myself I think well if there's something there that's going to help somebody don't you want it the first one or two links you're at. For myself I don't have the information if I'm going to go all the way down to the bottom. I've been there, I've done it already. Okay. Don't load our keys making PDF left bracket 200 kb right bracket left. Okay. So there's a PDF file there. On the bad one it wasn't labeled as a PDF it was just a link. This one was only user whether it was screen reader or can you see it visually? Visually it's PDF, you know what document you're opening and the sites. It's giving all the information there to anybody who wants to take note of that or if they want to open it and realise that it's up to them. Sign it up for our expert course left parent, external link, right parent. Okay. So we've got the sign of help for our expert course. Okay. Now James has put information alongside. Again can you see it visually? No. Okay. So it's not visual but for a screen reader it's allowing them to know that when activating that link it's going to go to a new window. Now you might think why is that important? The importance is that somebody might go then on that new window go to the home link and think they're coming back on your home page. If they're not realising they're actually on a different site. There you may lose your client, your visitor. Okay. But there you're giving them the information to know how to navigate back to your site or to delete the one they're on which automatically will go back to yours. Oh it's me calling. Okay. Now hopefully that the links maybe will directly give in the direction to the screen reader what information is going to happen or what you're going to get when you activate that link. So let's have a look at these graphs hopefully. Okay. Well hello. Well come and bill faster. Okay. Okay. So that one is a same graphics but it's a bit more descriptive. It's telling me what sort of cheese it is. Now we ended up discussing last night and said that perhaps somebody who's been blind since birth is not necessarily going to remember what image that is in their head. But there must be some of the in my opinion scents of how Swiss cheese tasted or smelt. And I think I'm sure it would have that sort of sense if they knew it was there as well. So again a good description on actually what's happening is beneficial. So let's go and see if we can find how to sign up for the slice of cheese. Go about 30 seconds. Sorry? A wedge of Swiss cheese fancy a slice of our cut fancy a slice of our cut fancy a slice of our cut fancy a slice of our Ch diaper cutting level details. Here's what I did to before. Details nailed. You know. That gives them a brief outline on one page on the experience of an inaccessible website... ...that will hinder somebody who wants to visit your site... ...and keep on them being interested. Y ni'n cael ei bod i'r ysgolwyd, ar y cyfnod, i neud i gael â'r cyfuddio, cyfnodi'r cyffredin, ac yn ddwi'r ysgolwyd wedi'i gael ei sgolwyd. Felly roedd yn gallu gwpeth gweld i'r teimlach a gweithio leaders. Rhaid i chi bod yn ddigon. I hope you found that. It really is your document when you actually see this actually in place. So just a few things to sum up, putting this into your workflow until you see this actually happening, we find it very hard to actually start to move things forward. So things that is worth going back to actually start implementing into maybe some of your code. Please have a look at the ARIA website to allow you to add extra information to maybe some of the code that you develop. So for example, if you add something to a basket, then it's great if you find out someone's been added to a basket, but from a screen reader's point of view, how do they know what's been activated? So things like ARIA Live is extremely exciting from the code point of view. You can actually program your shopping cart to read out that maybe one item has been booked, maybe the seats number, the cost, everything will be read out to them and you've not done anything extra. You just put this little label into some of your code and it's allowing a screen reader to be read out. So extremely useful. There are so many of these little labels to have a look at. Please take your time and have a good look through them. Wave is brilliant. It's a very good automated tool. So when you go through some of your checks with maybe some of your designers or your developers, using something like Wave on a Chrome or Firefox plug-in, all actually on this web page, it will quickly highlight some of the issues, heading structure, contrast issues, forms not being correctly labeled. Very, very good, very quick, very easy to use. Site Improve also do a Chrome extension and it does exactly the same thing, but this will actually link you to the WCAG guidelines that you're actually failing at the moment. So rather than just seeing what the error is, it will help you educate and actually start finding out why this is an issue. Again, I know these links go pretty quick. I'll tweet them out. You can use them as much as you can afterwards. And that's it from us. Thank you very much, guys.