Transcripts
1. Introduction: welcome to this course on Web design accessibility. This is a wonderful topic to be involved with, because by doing it, not only we making the Internet a better, fairer place, but we're also providing a ton off benefit, like opening up our websites to whole new markets and whole new customers on making the experience better for everyone to improve. Our conversion rates improve our usability. So whether you're looking at that bottom line or whether you're just looking to out a really valuable skill to your CV, that's important, too, because employees these days they want to know that software engineers can make things accessible because they know how important that is. And they are looking for that. And they're asking for that in interviews. I'm Chris I'm a software consultant on Does Not for 10 15 years now worked for a lot of international brands, helping them make their Web sites more accessible. And I'm also a qualified psychologist. So might think that's a bit of a nod combination. But I love figuring out how computers work I love figuring out how humans work on bringing it all together like this is really exciting, so I can't wait to teach you all of the material that will recovering in this course. Don't forget to download the cost handbook so you can read along with the video lessons on . I'll see you inside the first lesson.
2. Quick start guide: Let's look at some of the ways you can get started really quickly with accessibility on the first is just to turn a screen reader on and start trying to use your website on. When you do this, a lot of time, you really quickly spot the issues that they're. So if you're on Windows, you can use Jaws, which is Ah, paid piece of software. But you can get a free trial, or you can use the slightly less popular, definitely gaining in popularity. Envy the A, which is completely free. And if you're on the newer version of Windows, it now comes with a built in screen reader called Narrator. If you're on Mac, then that has a built in screen reader called Voice Over You on Lenox Areas Walker and Lennon Screen Reader. And if you want Android, there is a built in screen reader called Rate called Talk Back. So these really easy to get hold off on in the next module will go on a deep dive into some of them and how they work. But you can download them, install them and just start having a play with them or some of them in just built in, so it's a great way to get started. Secondly, you can also do a similar thing with a bunch of online tools, including wave, which just allows you to put in a website you are l on. It will then show you that website on all the things that things might potentially be an issue. And so really, without having Teoh learn everything of accessibility, you can just start fixing stuff because I'll tell you what's coming up have also made a quick list off things I see a lot that could do with improving, so it was gonna be a top for hope. But there's definitely six. Number one is heading hierarchy. You want one hate one target on top of the page and then it wants to cascade down. You can have multiple hitch twos, but then you want to hate free and hate for on all of these. Wanna have semantic meetings will go into all of these in more details in the inclusive design module. But just to give you a quick heads up your headings one cascade down nicely Insufficient color contrast between your foreground in your background, making text hard to read focus issues whenever there's a motile or an interactive element. If you're using a screen reader or navigating the website via keyboard rather than the mouse, can you get in and out of those models? Number four is form inputs about labels, even if you hid the labels. It's really important to have that label air to tell people what's going on, because it might be obvious if from a visual context, but it's no obvious if you can't see. So it's really important to have those labels in their number five buttons too close together. We often think off accessibility as a problem of people who can't see because screen readers of the predominant way we make computers more accessible. But there's also motor impairments or just generally, people with big fingers trying to tap for mobile devices. So we need to make those tap areas click areas nice and big, so that if you don't have perfect motor skills, you can still hit those buttons without hitting the one next to it on Then finally, number six is video content without captions. Ideally, every time we provide video content, we want to caption it for people who have hearing difficulties on also things like podcasts or just audio streams could also have a transcript so that people who can't hear or people that don't want to hear can just read the transcript instead. And we'll go into more detail in all of these topics in the inclusive design module. But there's a few ideas just to get you started.
3. Accessibility tools: in this module will look at some of the tools you can use to help you identify accessibility issues on met your designs more accessible. We're starting with this because it will really help you get started quickly. If you get these tools in, they'll start showing you how to fix things immediately so you can start making your website better today.
4. Lighthouse: light will look at Life House, which is a tool built into the Google Chrome Web browser. Let's start by navigating to a website that we want to order it and the nodes to access it . We need to open Chrome's developer tools to do this. We can't even write licking hit spect or if we just fit F 12 on the keyboard and then probably starting this elements tablet and become so. But if we go to order, it's here. It will bring up this audit scream of a little light house, and we can choose where we want to order it as a mobile or desktop device. We can choose what we want to order it and how we want the connection to be simulated as well. So in this case, we can simulate it down to a phone of for G, and then when we have Pete of all his options, we can just hit this ribbon order. It's button, and this isn't specifically for accessibility. Also does Performance and ASIO and gives us loads of really useful information. Jets takes a minute to run while it simulates various different connections, and then it will give you a score out of 100 for each of these items. So performance not so good, but accessibility fto going really well. So let's scroll down and see what the report Saiz. Here we are in excess ability, so it's flagged up this issue in particular. It's saying that we haven't got enough contrast between foreground and the background, and if we open this up, it will even takers to the elements and tell us here this is the phone number. So this will be down at the bottom of the page here where it saying there was enough contrast. Just fair enough, you go back to the order it and it also gives a list of all the things that it's looked at past. For example, the area attributes the role, attributes, ideas being unique, we can see all the good stuff we've done, and also any features are just know accessible, not relevant to this website because there's just no on this page displayed here as well. So this is a really useful Children's to get a quick overview of any problems, and it will take you to the problems as well, and it also gives you that performance tips if we got to performance, gives us all this advice on how toe increase performance as well. So it's a really useful tool. Just gives loads of information. Glad quickly.
5. VoiceOver: in this lesson, we're going to look at how to use voice over, which is the built in the Reiter that comes with Mac OS. Andi. It talks with a lot, said. There might be some talking over as I talk and vice over talks. But to get started, we just need to hit command. Five on alternate voice of on voiceover on chrome New Tab, Google Chrome Window Address and Search Bar Edit text has keyboard focus and then we can tell Lincoln Address acceded. Lead Sank. City Clinic Co. UK didn't Web content and to never get around, we need to use the voice of a modifying keys by default, their control option. So we hold those down on, then do whatever we want. Sometimes we need to shift here as well. It's not like JoJo's wages press up and down. That's quite a lot of keys to hold. But for a start, we can just hold the voice of modify keys and then scroll Chris quota leads, anxiety clinic, private therapy and l s one where content you are currently on. Whether comically shift went to the Web area. Press control option. Shift down. Arrow voice over is quite good, as you can see that as to giving you the direction of the things you need on now, we've dropped into the Web content, and we conveyed through the page leads Anxiety clinic Crume has New window Less is skip to main content, quite a few uncomfortably on the link to click this link. Press control option space that you might see websites doing is they have a hidden skip to main content link near the top. The only appears when you give it focus so that when you scroll through using the keyboard or using a screen reader, it comes up straight away. But cited uses don't need that link. I won't say it. Link called a book an appointment. You are currently navigation. You are a visited link book online visited, linked, visited, link our therapy and what's currently on the link To click this link Press control option space A get example off where you would layout page semantically, but you might make it visually look difference. A book online that probably the main call to action of this page, so that actually comes first in the navigation on the over links come after that now when they're screaming to go through the page. Logically, it sees a book online that even though visually, we've laid it out to be the avoid around. So that was a joke to that. Visiting my Link book online, you press visited first name Edit text main customize and control. Google Chrome Update is available. You are currently on a button to click this button press control option space. And with voiceover, it's quite easy to do farms. Could you just go straight? H n Crume has New Window Customer. Chris Button. You are current chromebook online leads anxiety Clinic visited Link Link Skip to main content has presently focuses. Skip to main content. Heading level one book online. You're Johnson. Insert phone for email. A gentle contain complementary. You want to link the end off end off heading level to link heading click link Heading. It went weak but visited. Link visited press visited link frequently asked questions, Leads, anxiety, clinic Web content, compromise and control. Google Chrome update is available. You are currently on a button to click this button. Press control option space. Quite easy to test how accessibly orbs likes are just by turning on voiceover. If you've got a Mac, Andi, start having a go for your website and see if you can do the things that you want to do. And if not, then maybe it's time to rethink the way you've designed it. Voiceover off.
6. JAWS: on this laptop, we have Jaws installed, which is the most popular screen reader for Windows. So let's take a quick look at it. Stop my just opening it up, John for Windows, BBC. That's home. That's brutal. Crow BBC That's home. Typically, it will change the color scheme. Infuse in the advanced color schemes on I've already got a Web page loaded up here on the main way you navigate in Jaws is just by using the up and down arrows visited link over page play heading level to accessibility Lease list of two items. Same page link. Skip to content like a lot of websites to BBC. Put some hidden accessibility links in there. If we want to skip straight down to the main content enjoys, we can hit Q, which from the shock keys and again keep going down. Heading level to welcome to the BBC Sunday 2 February. Unlike voiceover that puts a visual indicator of where you are on the screen, George doesn't which obviously isn't problem if you're blind, potentially a problem for partial, excited people, but the feedback from jobs generally good, so you probably don't need it if you're using a screen reader. It's more if you're testing as a visually sighted person that you might want that kind of voice over style. Indicator. Blank petting level three link Australian Open men's title in the link from tennis blank petting Level three link from rugby union are now. If we want to break it down a little bit further, we can use the left and right arrows, and that will read individual characters O r. And there's a ton of clock role. Enjoy yours so you can get it to read on sentence level and get it to read on a line level . You can get it to eat on a character level. There's a bunch of different chocolates for those intended navigating around the page. Typically, you want to do it by headings, hopefully the headings or so correctly on the website you're looking for. So, for example, if I want to go to for the Level two headings, I can just hit the two key or top stories heading level till news headlines headed level to live sports headlines heading level to Lick this weekend Sports heading level two three Things we love today, heading level two on If you want to get through the hate free headings again. Just use the free cake text colors Capture semantic jungle culture heading level three. Ancient ship Rebuild his world's biggest three D jigsaw heading level. The 400 national National Security, which inspired legends heading Level three Link. That's a quick demo of basic navigation. Now let's look at actually doing something, and that'll give us a chance to see Jaws is for modes as well. So that's load up this website for lead anxiety There. We'll just get the home page restart against Anxiety Clinic Licked leaves Anxiety Clinic visited. Live Page has four region state headaches and 22 least leads. Anxiety Clinic. National Rifle therapy You know that's one visited leg leads and desire leaves anxiety visited Link leaves, Anxiety Cliff. Same page Link Skip to Main content again. An accessibility link at the top that will take people don't to it called a book and appointment link 0113 to Navigation Region. Good use of the NAFTA tags that link book Godlike. Let's hit this book online so we're on the link Spaceflight to select Godlike nationally decided the clinic Dash Google Crow Book up like national eats and decided the clinic slash Google crow. But God, like national eats and desire, the clinic remain. Region Article Region First name Edit News John People is old Plays are to read the script of text booking form. Step one of three type of text forms. Vote. You might have heard that little peep as we loaded the page, and that's to indicate that George has gone into forms mode where it let you fill things out. It did actually say forms mode in this case as well. It's on a very for both setting, so let's try filling something out. Our I in Jaws weekend just hit Enter to submit form. There is lots further down, but let's just see what happens if we just hit it now. Ever alert Air Hollow Square Bullet, please. After your phone number, close this alert. First name Edit News John Keep Lessel Plays are to read the script of text Chris booking form Step one of three type of text. So no perfect our handling here, but it has read out the alert, so that's great. We also just like in a regular bows, weaken tap through the interactive element type text. You can also do that. Enjoys what? Three. What? What, What? What? What? What? Quote content. You screaming? What? Jeter combo box. Please elect, please email. Hey with you, scroll up and down in the case. Way to submit some like that. Step to that leaves and desire the clinic that Google crow But God like that step to national leads and desire the clinic that Google chrome continue button. So that's a quick look at how to use the Jaws screen reader. That's milligram cheat sheets out there that give you a full breakdown off all the different commands available, so I recommend checking that out.
7. WAVE: in this lesson will look at the Web accessibility evaluation to also known this wave and this is provided by Web aim. So if we get it the Web aim website and we want to find the wave too. Once we get here, we can't input website. In this case we're used to be. We see it go and this will load up the BBC website on one side and give us this report. It's looking pretty good. Couple of contrast errors, no major arrows, plenty of alerts. And if we go down into viewing the details in your sausage, it's hit the details tab. It will take us through each of the elements. So, for example, very low contrast, we can just click. These it will take is to the specific piece of text. This goes into much more detail than lighthouse. So, for example, we got suspicious text alert because here we've got more link and here we've got read more link that doesn't really provide any context. So if you imagine going through with Screen Reader and it just read mawr, not a very helpful link can we can go through things like Texas, for example, too small to read also takes us through all of the good stuff and each of the structural elements. So the seas toe helpers imagine how to navigate page as a scream redwood, where you were going through the headings. It marks each of those helpers. Understand? For example, here's a H two and here's the hate freeze below it so that we can check. We've got everything in order. And if we didn't have hierarchical headings than the wave, till would flagged that up and it also inducts is the use of all. The area will learn more of our area later, but this is a way to help give extra context to screen readers. And you can get more information, including a built in contrast tool, and we'll talk about contrast again later as well. But again, this is quite detailed report on our website, so you can put your U R L into the address Bar on. It will generate this a detailed report on all the things that are good about your website and things that you could improve as well
8. W3C Validator: in this lesson will look at the W three c validation to which is a tool which validates our hates to Mel. Now that's not really directly related to accessibility. But one of the most important things we can do to make our website accessible is used semantic html and those validate html so that the browser composite correctly said any screen readers composite correctly on we've not any major problems like that. There's freeways that this tool can work. You can just put the u R L in or if you're still developing locally, you could upload a flat hate female file if you had one, or you can just copy and paste hates to mail into here and hit. Check this example we're going to validate. Based on that you are out. So let's just use the BBC website. I will check on Dhere. We've got the report. So it found worn error on plenty of warnings to doesn't look like there's something majorly wrong here, wants us to move a meta tag higher up on a lot of kind of old school things. So, for example, we used to at an attribute that was typed text. Jarvis crypto allow JavaScript resources that's no longer required as of html five. Put a lot of code still has it in. In fact, we've got some more errors down here as well. This is a really nice tool because we all a lot of the time think we're writing great html but actually stunned change. Or maybe we just make a mistake. Maybe things just aren't quite as good as we think, and so we can go to the validator, check it out, fix any errors and the better quality hates tomorrow we can produce, then the less likely it is that a browse or screen reader is going to get confused when it's looking at something that you don't understand.
9. Disabilities: in this module will look at the range of accessibility issues that users of your website may be facing, so that when it comes to designing it, weaken, going to do a whole spectrum of different conditions and make sure that we're catering for as many as possible.
10. Sight: in this lesson will look at site. The Royal National Institute for Blind People suggest that two million people in the UK are living with sight loss, which is significant enough to impact their daily lives. So it doesn't have to be fully but enough that it's classed as a disability, which is approximately 3% off the population Now, a lot off countries, they're gonna have similar to that. And in fact, if countries have a less well developed healthcare system, the UK could even be higher than that. So we're dealing with a significant amount off the population, and this is spread over a wide range off conditions on severity, so someone could have no site it all. In which case there typically gonna use Screen Reader because that's the only options unless they're using some kind of Braille system. So typically on the desktop, this might be jaws or envy D A or voice over. If you're on a Mac and also in a mobile device, talk back on Android of both. So the on iPhone were very popular as well, especially as the mobile ones tend to come built in to the software then as well as being fully blind. We might also have partially sighted people, so they just have impaired vision and they are low. The time also use screen readers because it just makes it easier. But they may also use things like Gypsy zooming in to make things bigger. It's a lot to built in tills there. There's the browser zoom function, and you can get third party accessibility software, which helps them. Or they may simply struggle. I've got friends who have partial sightedness on the Holy Do is just stick their face right up next to the screen so they can see it. So it's worth considering that as well, that people major trying struggle for it. And so we want to make it as easy as possible for them. And this could be created by a large range of conditions and will go fruit some of the effects of that later in this lesson. Another thing too, really consider its colorblindness. This effects about 5% of people wanting 20 on how much colorblindness who is varies. But it tends to be that people have specific have specific sensors in their eyes missing on , so they tend to be affected by a specific combination of colors, the most common of which is red green. But there's lots of different examples, and there's a big gender difference in Colorblind said Well, men far more likely to struggle with colorblindness and women. And it can also be Grady ated. So how color blind you are is is also on a scale. So even if you have red green colorblindness, it could be very severe, and you could be unable to still difference when the two or it could be not, not severe on most of the time. If you make things fairly distinct, people will be able to tell them apart is a big range there. Some of the effects that we find is obviously just not being able to see it all. But also things could be blurry. Or maybe people have blind spots that's quite common. And they may even not be aware of those blind spots because, unless, alas, you're very hyper focused on them. It's really easy to forget because our vision jokes compensates. So, for example, we all have a blind spot in each of our eyes where the optic nerve comes out. The back of the eyeball. There's no sensors there to detect the light and said the reserve spot way. If you close one eye, you can. This just a spot in the over. I we just can't see anything, but we never see that because our vision, our brain, just seamlessly complicates Ring fills in the rest of the world because what we're saying isn't a direct images while our brain thinks is there based on the information is getting from my eyes. Now we're senses. So what that means is that we all have blind spots and we don't notice them. So even if you have a condition which creates larger, more significant blind spots, chances I your brain will gypsy fill things in so blind spots really important. Also, people may just be able to only see a report a small part of the screen at one time. If they're zooming in or they really have to press their face up against the screen, then they're not gonna be able to take in the whole thing at once. So we want to consider that and how things scale in our designs on. Also, people may not be able to distinguish color, so we want to make sure that when average, it's using color as an indicator
11. Hearing: in this lesson, we'll talk about hearing. The hearing is never graded condition. Some people have no hearing at all. Some people have limited hearing. On another common condition is tinnitus, where you've got ah, sound constantly going in your ears, typically ringing or buzzing something like that, which again makes it more difficult to hear. Andi can be quite uncomfortable to live with in terms of the relevant Teoh Web design. It's a pretty short list because here we're talking about audio and video content on as long as you factoring in there. That's the main area of concern, and we look at how to do that later on in this course.
12. Motor: in this lesson will look at motor impairments, so some users have difficulty controlling the mouse on. They may use a key ward to never get instead, or they may just use the mouse but find it really difficult to click on things, so they may have two hands that may have one hand they might not have any hands on. They might use a range of different accessibility devices. Some people have to control the computer with their mouth because they've got no corruption right down to the less severe end where maybe someone has something like Parkinson's disease, where they really struggle to move their mouths to where they wanted to. Theo and clicking on small targets is really difficult, or they may be using voice control to control that computer. So the effects means that if you, for example, have a lot of links or buttons close together, some users may really struggle. Or if you have a massive list of links and someone's using the keyboard, scroll through the page, then that's gonna be really irritating because it will take them ages to get through that list. And so we want to take keyboard, navigation and navigating around the page with something over than a mouse into consideration on. We want to take the size of any of our tap targets or links into account as well, and we'll look at that in the inclusive design module.
13. Cognitive: in this lesson will look at cognitive constraints. No, all disabilities are physical, and people can also have learning difficulties and specific problems with their memory. Their attention. It could be on the autistic spectrum. They could have dyslexia or distracts here, which is the maths equivalent off dyslexia. So there's all of things. Even if people's physical bodies work fine, they could still have some trouble using the things we design. And it's important that in order to be inclusive, we factor those in a swell, and typically this involves simplifying it. So we want to make sure we use simple, accessible language on. We want to present that in a very readable way. So that means looking at things like line spacing and making sure with chunking information . So we're not giving people huge, unreadable paragraphs. We want the designed to be clear on the call to action, which is what you want them to do. Clicking a button, filling out forms, reading on article, whatever it is is really clear. We want a consistent look and feel, so if we have a color scheme in a certain button for the action to do next, we want to make sure that's consistent across the site so that it's really obvious to someone trying to interact with our designs, what's going on. And of course, all of these things just make our website better for everyone. That's the nice thing about inclusive design is when you make it better for someone who's struggling, you also make it better for people who don't have any physical or cognitive impairments, and you've conversion rates are likely to be higher for everyone, not just the people. We have specific problems you're trying to cater for.
14. Inclusive design: in this module will get technical, will go into the hates him out, and look at how we can structure our websites to make them accessible to everyone, getting right down into the details and work at the Web content. Accessibility guidelines offer us a lot of guidance on how to do this and which level of compliance you want to achieve is up to you. Most commercial companies would tend to go for Double A, which is a great level of accessibility and still gives you the flexibility to do that. Nice fun design work If you want to be extra strict, for example, you're a government agency, were a remit to reach everyone in the population and not too fussed about having fun. Sparky Commercially based designs. Then you may go for Triple A, which is an extra tough standard to reach. To enjoy. Your websites are super accessible As we go, fruit will touch on these and we'll go for each area off were designed to see what we can do. What is best practice
15. Semantic HTML: in this lesson will look at semantic. Html. Hopefully, you're already familiar with the term, but if not, then it refers to the meaning off tags. So in Hates Tomorrow four we tended to wrap everything in DIV. On span tags and thes have almost no meaning of. And then that by default, one is blocking. When there's an in line element, they don't tell us anything about Page. So when a computer is processing the HTML, it doesn't know what something is when it's a devora span and then hates him or five came along on wanted to address this problem and answer more meaningful tanks. So now we have things like the header and footer tank we've got in the main article Tank the aside. Tag to win. To get sidebar, we've got figures to put graphs and charts in. We have knaves to put navigation in Andi. Now, if you look at a paid written and hope to my five, it just makes a lot more sense because it's very easy for a computer to see What's the header? What's the navigation? Where's the articles? What's in the footer? And it all makes a lot more sense now this is really important because it's not just browsers and search engines that need to be able to understand this. But when a screen reader comes to look out what's in a 60 mile page, it needs to understand the page so that it can help the user. Now forget around. If a user wants to get to the menu bar to the navigation, where's that if it wants to skip past all the links in the head and get to the main content ? How? It's easy for someone who is just visually excited to do that because they can get scroll down. But if your screen reader wants to do that, then how do you get that working wolf? We use semantic tags. We can get most of this for free because we instantly tell the screen reader how the page works on as we go through. The rest of this module will look at this in more depth, but there's so much semantic information available if we use the vegetable five tanks, but also if we just use the stuff that's been built in to hate him l from the early days. So, for example, when we're using forms, making sure the inputs of the correct types, making sure they have labels on them. All the things like this that tell a computer that tell the browser how the page works super useful for screen readers because it helped them work it out and present the information in a really coherent manner on the labs uses to navigate around our designs much easier.
16. Text: in this lesson will look out the Yusof text in designs, and one of the big concerns here is headings using CSS. We can make headings look whatever we like, so we can have a heat one that's really small. We can have a hate six that's massive and dominates the page on DSO. What we want to do is use the correct tag for the semantic meaning and everything else is done via CSS. So we don't want to think of Tags is representing a specific look or style. Put the right tags in to make semantic sense to the page on. Then we'll just style them however we want. So what that means is that each poachers have worn and joke's worn hate. One tag on this is your title for the page. So this is a thing that you read, and it tells you what this whole page is about below, that we can have multiple hates to tags. So if there's multiple important topics on the page, each one might have its own age to and then below this we would have each off the lower down tag. So if you've got subsection within them, that's when you'll start using hate free and hate four and everything inside it should be hierarchical on. We don't to skip anything so we don't want to go for my hate to to a huge four. Because if that happened and you were using a screen reader scrolling through the headings , you might think you've messed the hate tree. Or when it reads out, heading level for something, you're gonna think you've missed the hate free. And in fact, if it just wasn't on the design that super confused so typically you might have say, Hate one of the top of the page. And then, if you've got Siris of articles that would be hate twos or if it's an article page itself, the hate one might be the article name and then the body below it. And if you've got things like side bars or footers that also need heading, then your best making those I hate to a swell and then any subheadings below that that breakdown part of that teach to would then go down to the hate free in the hitch. Four text layout is also important, so we wanna have that strong color contrast on in the lesson on color will talk about what , exactly is an accessible level of contrast. But as we talked about earlier, you can use tools to measure the contrast to make sure that it's sufficient. We want text nice and big to make it readable on. We want to use paragraph tags so again, making that semantic HMR work forwards. And instead of the line break tags, we want everything. This paragraph it wants to be inside a paragraph tank on. We also want to consider line spacing and font choices. So traditionally, serif fonts, the ones with the little decorations on, have their easier to read for most people. But there's not much in it. And there's some evidence that if you have conditions like autism, it's actually more difficult to read. So San Serif fonts are a great choice and maybe save the Sarah phones four headings. Let's look at an example off a well laid out back of text versus and not so well laid out Book of taxed. So here we've got some examples where on the left, everything's put into one giant paragraph would not much line spacing between them on on the right we have two paragraphs on plenty of line spacing on. I think most of us would agree that the text on the right is for more readable than the taxed on the left and again just by doing these improvements were helping everyone. It's inclusive design. It's not just for specific conditions, but actually our website gets better for everybody on that's what we want.
17. Links: in this lesson will look at links. So one of the things that we want to do is make sure we using the tag hyperlinks and buttons for their intended purpose is so a link should take you to a different Web page on a bulletin should do some kind of functionality. So we want to avoid this idea where which it's taking a link tag and hijacking. It was some kind of on click event to do something when in fact it was never intended to be a link. So we got the A, Tag said sends users to another Web pages. So we don't want these fake Buehrle's where we just put a little hash in there on, then hijack it with the on click. In such cases, we want to make sure we're using a button. Similarly, the over way around Ah, button shouldn't take us to a different Web page. It should be performing some kind of action on if we need to take the used to a different Web page than we should be using a link. In terms of styling these, we can use CSS to make them look however we want. So what that means is you can make a link tag look like a button you can make a button looked like a link, So think semantically first. What's it doing and use the appropriate tank? And then you can style of power you want now in terms off making the links. As we discussed earlier, we should never just use color to indicate something. So we want another indicator, which is why traditionally, links have bean in blue and underlined to indicate there a link. But there's other things we can do, but that's it. Good strategy, because that's traditionally what's been used on hates Jemele. Andi is what continues to be used by a lot of sites, so it's very understandable if we can make visited links look slightly different in a screen reader. They'll tend to be read out was visited link anyway, so you may just want to provide that information to visually sighted users. So there, at least getting this much information is a screen reader of whites. A screen reader kind of gets an advantage. Maybe that's nice that they're not always running behind, and we also want to think about the descriptive text. So we want to avoid this. Click here to view an article saying The click here is the link. Difficulty with that is in a screen reader readapt section at a time, so we'll just say Link. Click here, and that doesn't really give you any information about what the link is about. So if you think, imagine when the screen reader reads out the tax that is a Lincoln, it says Link. And then it reads out. The taxed that taxed should tell the user walk. The link is about because of allies. All we get is a bunch of things that say Click here, click here. Click here on. That doesn't make sense for Seo purposes, because it doesn't tell the search engines what the link is about. On the same problem, it's screen readers. They can see it's a link, but they don't really know what the link is about. So making sure we have descriptive taxed in our links adds a lot of context
18. Colour: in this lesson will look at the role that color plays in our design. On one of the most important things is to make sure that there is sufficient contrast between the foreground on the background, because if we put text on, say, white background, black tax, super easy to read. But a lot of the time for popular to put, say, tax over images on there's no always as much contrast in MX attacks really difficult to read. So in terms of accessibility guidelines that were clear standards of contrast that should be achieved in order to make that text readable. So a compliant, which is what most commercial businesses would be striving for normal text wants to be 4.5 to 1 on large attacks because it's easy to read, can have a bit less contrast. So nice to be free to one. If you're, say, a government department or someone who an organization that has really high accessibility standards, you probably want to give the Triple A compliance, which means your normal tax wants to have a contrast of 7 to 1 on your large tax wants to have a contrast of 4.5 to 1. How do you know how much contrast is? Well, you can use one off the many contrast tools. So, for example, this one is provided by Web Aim, and you take the hex values of your colors and you punch them in, and it will tell you what your contrast ratio is. There's also a variety of over tools. Such a browser plug ins that will do this for you, maybe even eyedropper section on tell you what the contrast is there to make it much easier . Cedar have to pull out the color values and taken to an independent tool. In this example, we using, ah, white background, some nice blue text, and that creates a great color contrast suitable for everything. But say, if we were doing some kind of red taxed than if it wasn't strong enough, say again here we've used a medium red on a white background that wouldn't necessarily reach accessibility guidelines, because if you look at, say, the normal text there, it's a lot harder to read in the black text. Now, when we move up to large text, then it's a bit easier to read that would then reached double a because you don't need as much contrast on the large taxed. But it would still wouldn't reach the trip lay standards because you really need strong contrast to make it easy to read. I hate just looking at the example and comparing that to say, the title of the slide. There's a clear difference there in how easy they are to read. The other thing to consider is that color should not be used as an indicator. So we talked about this in links. You can't just make links a different color. They want to have some over indicator because if the user is color blind than they're not necessarily going to be able to see. So, for example, a lot of time success messages will be in green and error messages will be in red or buttons and links will indicate things Well. There's nothing wrong with having a green success message and a Red Arrow message, because for most people, those colors do indicate the happy path on an error. But we can't solely use that, because if we did that for these users are colorblind, they wouldn't be able to tell what's going on. So let's look at an example on this on a real website. So on the Leeds anxiety clink for final if the top example of an error message that would not be very accessible, because if you are red, green colorblind, you might not be able to see that red. And it wouldn't necessarily indicate to you that that was an error. Whereas in the bottom example, we've then added in a little error triangle with the appropriate out tax to let the user know their on screen reader there in an air estate so that when they use it, sees this, they can look at the color. They can look at the little icon that can look at the descriptive, taxed in the icon on all of those different features. Tell them it's an error. So if they're struggling with any one of those things, that plenty of information to give them context toe, let them know it's an error on. We're not just relying on them having perfect color vision to be able to work that out. It also makes it more semantic because we assume that people know that red means era. But that could be a cultural thing on, so just giving them a much context and there's much semantic meaning as possible makes it clearer
19. Images: in this lesson will look at the use off images, and this starts with the out attributes. This is an alternative description that gives screen readers some context about what it's about. So you stick your image in, and then in the out tag, you describe what's in the image. So if you're using a screen reader, you know what's going on. And we only need to use the out attributes when there is something to describe. So something's purely decorative then we don't need in there. What we want is a blank out tag, for example, on these buttons here we've got a little newsletter icon to say Join our newsletter No person icon to request a callback which, obvious from the link text. What's going on there in the icons digits? Decorative to add more meaning. So in this case, rather than describing the image because that wouldn't give any value to someone using a screen reader, we would still include the out attribute. But it would just be blank and someone to include it so that a screen we did knows that it's supposed to be blank, because if you just leave it out, the screen reader will read out on labeled image, whereas if we just put a blank out tagging that the screen reader knows to just ignore this because it's decorative. Andi, unless you're looking at it, you're cited. You don't need to see anything about it. We also need to consider taxed within images. And generally we want to avoid this if possible. Because screen readers can't do anything about it and some accessibility tools that might modify the text a health, for example, they might add more contrast to it. Or they might change the font size well. They can't really do anything about it if it's embedded in an image so they can't work on it. But if you have to use it, then make sure that it conforms to accessibility. Standard this means having a contrast of at least free toward, even if it's large text. And even if you're only going for double a compliance if you're going for Triple A or its smaller regular body text than the contrast wants to be even higher to give people the best chance of being able to read it
20. Audio and video: in this lesson will look at the use of multimedia within our designs. For video production, a good place to start is avoiding flashing imagery. This causes real problems. People. We have conditions like epilepsy, but also things are alternatives well on. To be honest, flashing, Andrea is just annoying across the board. Loads of people find annoying, and therefore, if we can avoid it, that's a great start. Consider making an audio descriptions of what's going along on. Do that while you're shooting the video because it's really hard to go back and do it later on, then went editing the videos. If you have to use taxed. Ideally, we don't want to. But where, where we have to use it, let's just make sure that it conforms to accessibility guidelines. So we want plenty of high contrast on their on. We want nice, large text. When we then take that and put it into a Web page. We want to use the native tags of possible to give it that semantic control so that the video and the audio tags, rather than the old school flash players and things like that, if we can much better to give the flowers of control over that, because again, that's something that a accessibility tool can go in. Can inspect the hopes TML can understand what's going on and give the user control over that woes. If we're using some proprietary system, they're not necessarily gonna have access to that again. Avoiding auto play is great, people find not really annoying again. That's not something just for specific accessibility problems, which it is an accessibility guidelines to not use ultimately, but also everyone else will thank you because almost everyone finds auto playing annoying as well on. We want to make sure those video controls are accessible. So for implementing custom controls than we want to test those with keyboard navigation to make sure that they work fine and that you can run through them. We've say screen reader or without using a mouse, just to make sure that everyone can get to those controls where possible, we always want to provide a transcript off what's going on Andi again. This is just something that makes it better for everyone, because even people without disabilities often prefer to read the transcript, for example, you're on public transport. Maybe you forgot your headphones on or you just like to read along with the video. I know on a lot the FedEx courses. They put the video on one side of the screen, and they put the transcript on the other side of the screen so you can literally listen to the video and read along on its obviously great if you've got hearing and parents. But a lot of people that can hear fine like to do that as well. So, again just makes it better for everyone on. You can easily get these transcriptions and captions made by providers so you can go and hire someone on a service like five year. You can go to transcription services like Rev on the Egypt's. Give them your audio in your video and they combat with captions or transcript or whatever it is that you want again. Captions similar to a transcript transcript turns to be a written, polished version. Captions are the subtitles. It will actually get in the video on again. We can juts easily. Go and get these made from tools such as rev or fiver. We can also upload your videos to YouTube, and YouTube will now automatically create some captions for you, or we can manually create them using software like subs Factory, which will let have had those captions in. So it depends on what you're working on. If you want to keep things cost effective, then you can do yourself with sub factory. If you just want to get it done, you can get us somewhere like rev on. Just pay someone else to do it for you. And then we could just stick those on the video on that way, Even if you can't hear, you can read along with what's happening.
21. Forms: in this lesson will look at using forms in our designs. It's one of the most powerful features we can use. Here is the label. Every input should prepared up with the label so that when a screen really gets to that form field, it can identify what's supposed to be inputted into that field by reading out of the label to the user. So every time you go on input, they should be inappropriate label telling the user what was going on has become fairly common practice to use the placeholder attributes on fields as well. This isn't recommended because this is far better served as an additional hint rather than presenting the same information as a label. So, for example, if you had a date of birth field, you would want the label to say date of birth. You wouldn't put date of birth into the placeholder because that would be duplicating information. Instead, you want to provide a hidden, for example, that format that you would like the date both in put it in, for example, data a slash one from like year. She wanted in that format that would be on appropriate thing to put into the place holder. Or you could also just avoid using placeholders altogether because they tend to be confusing. One of things I looked at when I was doing my master's thesis and psychology wars, just what effect the placeholder was having on a lot of the time. It confused people because although it's great out in the browser, it's not clear, especially if your vision's not great, like it looks like it's kind of being completed. Andi. So sometimes people just skip the input all together, thinking that I already have the value or didn't know why that value was in there. So placeholders can be useful to provide hints. But skipping them all together is often a better option. We often disable buttons, especially when we want form to be in a valid state. But again, we're recommending that you avoid disabling. The books were possible because when you do this, it takes out the tab index. So the tab indexes where if you're skipping through the page by hitting Tamp, it will take you to all of the action. What elements on the page, such as links, imports, buttons and when you disable a button, it takes out of that. So again, if you're using a screen reader and your tabbing through the page, you're not going to see that button, and you're gonna be confused and wonder where it is. So a better option is to allow the user to submit the form in a valid state by going to the button and clicking it on, then telling them what they've done wrong on what they need to fix before they can submit it and continue when the hardest parts or of making forms accessible is dealing with errors If possible, then we want to take them to the source of the era. But what's most important is it's really clear that the form is invalid and more importantly, what they need to fix which fields are broken. So a lot of time you submit form, and it just says, please complete all form fields. Some of them are optional, some of them and not you don't know which ones really annoying. Therefore, we want to make it really clear to the user which fields are causing the problem, and what we need to fix a great way is to take them to the error, but also provide some every description on we can use the area described by toe identify an error message for that field will talk a bit more about area later. But in this example, for example, we've gone email address input. Andi, maybe they use it didn't import anything into that. So we're reporting the MANERA in this case that the email address is already registered weavers. So we've got the label describing what the input is. But we've also got this area described by which is telling them that email dresses already registered and so meaning to evil log in or use a different email address.
22. ARIA: in this lesson will talk about area and we'll start with a introduction. So it's tons for accessible, rich Internet applications. And it came around because we start building on this cool Web to stuff where we were implementing desktop computer style functionality in a browser. Onda Love. The time is really difficult to convey the semantic meaning to the browser to assistive technology. And so the W Free See went away on the Kim of area incorporated into who html on it allows us to make all this cool functionality that were building in These things are just where pages their applications, to convey that meaning to the assistive technology in the browser so that everyone can work out what's going on. Our first stop recalled from the mains using semantic HTML. So when we can use this, we do Onda. We only kind of dropped back to area when we just unable to communicate the meaning that we want in vanilla hates email, but there are times you might want to use it, but more proactively. For example, in the less non forms we talked about how we don't want to disable the submit button, for example, because that will take out of the tab index. Now it's fine to make the bottom look disabled, so we could use CSS to style it so that it looks great out and has a little axe on the cursor. Someone hovers over it, but we don't actually want to use a disabled after view because that makes it invisible to assistive technology. So in the same way that we can just great out with CSS and make it look like it's disabled , we could also use something like the area disabled attributes to tell screen readers what they would see like a visual excited person would see. It would see a great out button in the same way the screen reader would still be able to tap to it. But it would see this area disabled. One of the attributes we can use Harris roles. Andi Rolls tell the assistive technology about what type of element names. So, for example, if you're planting a custom menu, you could give it a roll of navigation Well, for example, if you're styling up from check boxes on, the only way to make that work is with a series of nested spans quite common. If you're doing fancy forms, then you'd want to give the clickable element there a roll of check box so that the assistive technology understood that that wars an implementation off a check box that isn't using the input type. Check what the standard model and also rolled text, which is a little bit controversial because it's not part off the official standard or specifications. But a lot of browsers have implemented it. So if you've got something where a screen reader is because of whatever embedded tags Aaron that is breaking it up into very weird sentences, you could put roll text on the parent element on most of the time That would get the screen reader to read it out. Now, No, All access Billy Consultant like this. A lot of people like sticking to standard, and I can completely understand that I'm a bit of a pragmatist, and I want the best experience possible for someone using a screen reader so I don't mind using it. I think sometimes it can solve the problem. That's a decision for you and how big of a problem you're finding it. What we don't need is redundant rolls, so For example, if you're using the now of tag to indicate navigation, you don't then need to add the role of navigation because that's already implied by the NAFTA AG and the browse it can already figured out. It's only if we're doing a replacement using different tanks that we need to have that extra meaning. A good example of this is from the W three C, where they're building some tabs on. They've got this tab list, which is the top headers, and inside that they've got buttons, each which had vows a roll of tab. And it's using the area selected to indicate whether that button is selected or not. On also what it controls are below. We've got the tabs, which made out dibs because there's no tamp tag on. They will go appropriate labels on. They're using a tab index of zero. So normally, if we used a positive number that would tell the browser right, this should be the fifth element we give it. Tabin looks of five when they're tumbling through it for you zero. That puts into the tab index but drops in the normal flow of the page so that the Browns have figured out, and there's also minus one, which means it wouldn't normally be in the tub index. But we can manually assign it focus using JavaScript such what's going on there with the TAM index. So here we can just see loads of good examples or where you would use all the area tags and how to use them. We also use labels Teoh Add context. So, for example, if you doing a little hamburger icon, which might be obvious to a sighted user, how would we communicate that without ending? We could add in some hidden tax. But we can also just use the area label and just say this is in the menu button. And then we've got area hidden, which is where we want to remove anything from the dom that's purely presentational. So anything important that the browser needs to know about, we wouldn't hide. But for example, in this example that I've got here, we've got an article and it's just an image in a title, and then you click through to the main story. Well, the image saves exactly the same thing is the heading. So if you were scrolling through the page on, you were using a screen reader you couldn't see. You wouldn't need to know that that image was there because it juts, communicates the same information was heading. You don't get any more value if you can't see the image itself. And so we could just hide that, although in this case it's worth noting that we could just use a blank out tank. But you might also wrap that image in a link tag, in which case you could just hide the whole link because again you got the information and heading below it in terms off forms. Then we want Teoh use. Labels labeled by establishes a link between an element and labels. So if you're not just using the standard labels, you can do the same thing by the area labelled by prop. And then we've got bunch of functionality, for example, for recreating check boxes we talked about. You might be using a span and you cannot things like area checked to indicate it on Aria disabled when you're doing the bottoms that you don't want to take out the tab in next. But you do want to indicate to the users it shouldn't submit this form a moment because it's broken. So we'll also look at an example off how we could use this. So here we've got a small that's a check box on. We're gonna indicate that this check boxes about subscribing to a newsletter. So we're going to use the area labelled by and give it the I D of the element we want. But also, let's say we want to add a bit more information, say some small text under it. Then we can use the area described by on the way to think about two. Is the area labelled by It will be read out right the start when it's explaining what the input is about and really described by comes later, it save up to the end. It's kind of like extra information. It's not that important that we can wait for later that wants to go into the area described by Finally, we've got live regions. So in love, Web two were doing dynamic updates to the page. Andi, if you're just moving through the page, you're not looking at the page. You're using a screen reader. You're not necessarily going to know that Some content up at the top has updated. If you're further down the page, so to tell the user what's going on here, we can use Ari alive on this, tells the screen reader to read out. Any changes are going on. There's two kinds. So there's the polite setting, which means a screen reader will read out when it's got time. So if it's reading through something else, it will read that first and then maybe announce it later on. Assertive means you should announce these changes as soon as they happen now for Evers and Alerts, then we already have a short cut to live region we can use and ask him in a role of alert and that will tell the screen reader to read the alert out straight way as well.
Chris Worfolk
