FREELessons: 17Length: 2.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.7 Creating Accessibility

Hello. In this episode of Bombproof Web Design, we're going to be learning about accessibility, how to provide the best possible interaction experience for any of your site visitors who might have visual, auditory or mobile impairments. There are a handful of things to think about. And each one of these can be quite complicated. In truth, creating an absolutely 100% optimized accessible site has a lot to it. There are a lot of things that you can do to help people out. But to cover everything is really a whole other course in itself. For that reason, in this video we're going to be covering the most important things. The things that you can do, and should do in every site to take care of some of the main issues that people will run into. You've actually already satisfied some of these points by following the processes that we've covered in previous videos. One of those is allowing for user control over the base font size on your pages. If a person has a visual impairment and they have some difficulty reading smaller text by allowing them to control the base font size, you also allow them to make text more readable and, therefore, to make it much easier to absorb and interact with your entire website. The next area is to allow keyboard-based navigation. And that's helpful both for people with visual impairment and mobility impairment. Naturally, if you can't see the screen you're not going to know where to point your mouse. So it's not possible for somebody who is blind, or has difficulty making out what's on the screen, to rely on a mouse. Therefore, they need to be able to use the keyboard to get around the page. So providing keyboard based navigation takes care of that part of the equation. It also helps people who have mobility impairment. So, for example, somebody that is suffering from arthritis and they may be using a larger size keyboard to get around on the internet. Or somebody who might be suffering from muscular dystrophy, or somebody that might have hand tremors. Allowing someone to get around your site just using a keyboard is going to be very, very helpful for somebody that struggles to use a mouse or just can't use a mouse. As far as helping out a person who may have hearing impairment, there's one primary principle that you want to follow, and that is if you have any auditory content on your page make sure that you provide text information to accompany that. So if you have a video, provide closed captions to go with that video. Or, if you have some type of voice over, then provide a transcript. And the other two areas that we want to look at is including WAI-ARIA landmark roles and a good heading structure to help screen readers find their way around on a site. And the final area that we're going to look at is color contrast, and that is helpful both for people who may have color blindness, as well as people who have reduced vision. There is one thing I think every web designer should do and that is to spend a day trying to navigate around the internet only using a screen reader once you do that you'll find that to be extremely informative as to what your sites really need to incorporate to be easily browsable. And you'll also get an insight into just how much of a nightmare it can be to browse the internet using a screen reader on a great many of the internet's websites today. I'm just going to give you a little demonstration of how a screen reader would be able to work through this example website here. Now, you won't hear me speaking, I'm going to switch to recording just the computer audio, so you get an idea of what the experience of using a screen reader is like. >> VoiceOver on Safari. Alice in Wonderland. Window. Alice in Wonderland HTML content has keyboard focus. Landmarks, two items. Main, navigation. Links, two items. Chapter One, Chapter Two. Headings, three items. 1: Alice in Wonderland. 2: Chapter 1. 2: Chapter 2. Web Spots, zero. Landmarks, two items. main. navigation. Visit internal link. Chapter one. Press visit internal link. Chapter one heading level two chapter one. Entering main landmark. I've tried the root of trees, and I've tried banks, and I've tried hedges. The pigeon went on without attending to her. But those serpents! There's no pleasing them. Alice was more and more puzzled but she thought there was no use in saying anything more till the pigeon had finished. >> You can see from just that short demonstration how if you can't see what's on the page figuring out where you need to go and what's actually available for you can be really painstaking. And that's why it's so important to try and minimize that friction as much as you can for people. Let's take a look at the code behind this layout. The two most important aspects of what we have going in the code here are the WAI-ARIA roles and the heading structure. You'll notice this code here that says role="main". This tells the screen reader which part of the page contains the main aspect of the content. And then further down here, we have another role navigation. Now you saw at the start of the demonstration I was able to use the screen reader to bring up a list of the landmarks of the page and it told the screen reader that there was a main landmark and the navigation landmark and that then enabled the user to go straight to the navigation area and click through the links there. It would also enable them to go straight to the main area, so that they could get straight into reading the primary content or listening to the primary content rather. Now the other part of this code that was important for the screen reader is having good heading structure. We had the opening heading, the level 1 heading, letting the person know what the content in that space was all about. And then level 2 headings signifying to them what the subsections inside that were about. There's quite a few different WAI-ARIA rules that you can use that will help with screen reader interaction. And I'll include some links where you can read more about those. The ones that you definitely want to start with, and make sure you learn about are landmark roles. The next element of accessibility that we are going to examine is color contrast. Now there's a fantastic little plug-in for Chrome that you can use that will perform an accessibility audit on your website. And as part of that it will let you know if there are any color contrast issues. The extension is called Accessibility Developer Tools and it can be installed via the Chrome webstore. To use this extension, open up the Chrome web developer tools, and go into the Audits tab. Check the Accessibility audit option right here, and then click Run. You can see here, it's told us that we've passed some accessibility tests. Our use of role equals main is okay and a few other bits and pieces. But what it's told us up here is that our contrast ratio on the links is not strong enough. As well as this audit, the extension also gives you some really great feedback tools on the particular colors that you could use to improve your contrast ratios. So if I inspect these specific links, we can see here the colors that are being used on the links. Now, if we click over here on Accessibility Properties, we can see the score that our contrast ratio has been given. It's been given a score of 3.78, but for good, strong accessibility we want to have at least an accessibility ratio of 4.5. Not only has the extension let us know that these particular colors don't have a strong enough contrast, it's also made a suggestion as to what color code we could be using instead in order to reach this 4.5 contrast ratio. So we can copy that code. And then over in our stylist or CSS, we can replace our link color with the suggested color from the accessibility extension. So we're back at our original location. And if we inspect that same link again, you can see that the new color is being applied and now we've achieved the contrast ratio that we were aiming for. If we are to re-run the accessibility audit. Now we're passing all the tests, so you can go ahead and produce your design with whatever colors you want to use to begin with and then you can run this accessibility audit on your color scheme and it will give you little tweaks that you can make to ensure that you have the right contrast ratio. Next up, you'll discover how you can use some of the emulators you've seen me using during this course as well as some extra tools that will be super helpful for you during development.

Back to the top