Developing for Accessibility (Beginner Friendly): Build an Accessible Webpage! | Brenton Kelly | Skillshare

Developing for Accessibility (Beginner Friendly): Build an Accessible Webpage!

Brenton Kelly, Converting caffeine to code since 2009

Developing for Accessibility (Beginner Friendly): Build an Accessible Webpage!

Brenton Kelly, Converting caffeine to code since 2009

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (44m)
    • 1. Intro

      1:44
    • 2. What is Web Accessibility and What are the Guidelines

      4:11
    • 3. Semantics Go a Long Way

      5:57
    • 4. A Close Look At Links And Images

      7:29
    • 5. ARIA Attributes and Roles

      4:28
    • 6. Accessibility Feature Boilerplate

      3:38
    • 7. Color Contrast

      4:24
    • 8. Accessibility Evaluation

      9:06
    • 9. Accessibility Review

      3:19
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

113

Students

--

Projects

About This Class

This class will teach front-end web developers how to build a simple, accessible webpage with content that is compliant based on Section 508 standards and the Web Content Accessibility Guidelines that are written and maintained by the W3C. We will assume that you have a basic understanding of HTML and CSS and that you’ve built a webpage from scratch before.

The project for this class will be a scenario where you have to build a simple webpage that provides information on your favorite hobby. Your users will be visually impaired for the scenario so you will have to utilize the skills learned to build the page and content in a way that the end-users will be able to fully and easily access all of the information in the page via keyboard and screen reader.

Helpful Resources:

Meet Your Teacher

Teacher Profile Image

Brenton Kelly

Converting caffeine to code since 2009

Teacher

I've been developing websites since 2009 and I can't imagine myself in any other profession. The ever changing nature of the field is what makes it so much fun. I love learning new things in web development and it's always a great feeling when you build something brand new or solve a complex problem and you feel like you've moved up a skill level. Working on web projects with friends is something I also enjoy. It's a great opportunity to learn from each others strengths and it's also just a blast!

Front-end web development is my passion. I also have experience with server-side programming but as the field moves forward, there is more and more of a demand for front-end solutions backed with API's and other web services. Building a dynamic, responsive, accessible, and cross-browser... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Intro: Hi, everyone. My name is Brendan Kelly. Welcome to developing for accessibility, building accessible Web page A little bit about myself. I've been a front end Web developer since 2009 specializing in HTML. CSS, JavaScript and accessibility and various front and frameworks like angular and libraries like Jake Weary, I have, ah, back first degree in Web development and a master's degree in adult education. So today I'm gonna teach you the basics of building an accessible Web page were to cover a number of different areas, like the guidelines that we need to follow such a section 50 wait in the Web content accessibility guidelines that are written and maintained by the W three seat and then also talk about the importance of writing semantic HTML markup and looking at Aria, which stands for successful rich Internet applications. And then look at the various attributes that are available there and how to use those. Then we're gonna look at color contrast and how to properly evaluate your color palette to make sure that you're getting the proper compliant ratios for your Web page. And then we're gonna look at a number of different elements and attributes that you be able to add to your paging utilized right away to get improved accessibility right out of the gate. And finally, what we're gonna do is look at how to properly evaluate your Web page using a keyboard and a screen reader, and also realize some free tools like wave and acts, and look at how those those will be able to help you get the proper compliance. And then, at the end of this course, you will take everything that you learned and build your very first successful Web page that provides information on your favorite hobby. All right, let's go. 2. What is Web Accessibility and What are the Guidelines: started by talking about what Web accessibility is and what the guy islands are that we have to follow. So Wikipedia has a really great definition of what Web accessibility is, and they state that Web accessibility is inclusive practice of ensuring there are no barriers that prevent interaction with or access to Web sites on the World Wide Web by people with disabilities. When sites of correctly design development edited. Generally, all users have equal access to information and functionality, so accessibility is essential for developers and organizations that want to create high quality websites and Web tools and not exclude people from their products and services. Web accessibility and cups is all disabilities, which include visual hearing, physical and cognitive disabilities. So to comb in terms that you hear when talking about accessibility are assistive technologies and adaptive strategies, assisted technologies, hardware and software that people with disabilities used to improve interaction with the Web. These include screen readers that read aloud Web pages for people who cannot read the text screen magnifier for people with some types of low vision and voice recognition software and selection switches for people who cannot use a keyboard or mouse and adaptive strategies are the techniques that people with disabilities used to improve interaction with Web, such as increasing text size, reducing mouth speed and turn on captions. Now, under the two standards and guidelines, which include Section five away in the Web content accessibility guidelines. So 1998 Congress amended that Rehabilitation Act of 1973 to require federal agencies to make the electronics information technology accessible to people with disabilities. Under Section five away, agencies must give disabled employees and members of the public access to information comparable to the access available to others. And some of the examples of these guidelines are providing text alternatives or images and other non text content, including user interface components. Providing synchronized captioning for pre recorded video multimedia. And 1/3 would be providing a reasonable and logical reading order when using a sense of technology. And we're talking a little bit more about that one. Specifically later, when we talk about semantics and proper flow or through a Web page moving on to Web content accessibility guidelines, W. C. A. G for short So W. C. A. G is developed through the W three C process in cooperation with individuals and organizations around the world with a gold providing a single shared standard for Web accessibility that meets the needs of individuals, organizations and governments internationally. So W. C E. G covers the same standards of Section five await but much more. The guidelines and success criteria the W. C A. G organized around the following four principles, which lay the foundation necessary for anyone to access and use the Web content. Anyone who wants to use the Web must have content that is perceivable, operable, understandable and robust. So information and user interface components must be presentable to users in ways that they could perceive. User interface components and navigation must be operable information, and the operation of the user interface must be understandable. And content must be robust enough that it could be interpreted reliably by a wide variety of user agents, including assistive technologies. Under each of the principles are guidelines that success criteria that helped to address these principles for people with disabilities and each of the success criteria are identified with one of three conformance priority levels. There's air level a level double A and level Triple A level A establishes a baseline level of conformance and covers a basic set of core accessibility issues such as alternative text images and captions and videos. Level A is the minimum level of conformance level. Double A includes additional success criteria, such as providing a visible focus indicator for keyboard users and ensuring sufficient color contrast level. Double A is a focus of most organizations because it provides a reasonable target for websites and Web applications, and then level Triple A is the highest level of performance conforming to W C E G 2.1. It leveled Triple A would mean every single success criteria would have to be met has actually stated by the W three C. It's not recommended that leveled Triple A conformance be required is a general policy for entire websites because it's not possible to satisfy all level triple A success criteria for something all right that wraps up standards and guidelines. Next will be looking at HTML semantics 3. Semantics Go a Long Way: in this video segment, we're going to specifically talk about HTML semantics and page order. Semantic markup is HTML that provides meaning to a Web page rather than just presentation. Elements like Header main, butter, knave, a button and so on have specific meaning and convey that to the user's browser and assistive technology. When using semantic markup, a lot has already done for you natively for accessibility. For instance, a tags are used for navigation and buttons or used for user interaction. When a Web pages built with rich semantic markup, it makes it a lot easier and more efficient for assistive technology to navigate through it and convey the information back to the user. So using rich markup isn't going to just make your Web page natively more accessible. But it's also going to improve the S CEO of your site as well. Another important thing you want to keep in mind when developing a webpage for accessibility is keeping your elements in a proper reading order. Two. Special. Just think of it as top left to bottom right Focus. Order is important because when a user's navigating through your page, they're gonna have an expectation as to where that screen reader or focus ring is going to take them next. So if you would have the site name in the header of your site, focused and then you hit the tab key and it jumped down into the page somewhere else, that would be confusing for the user and unexpected behavior. So next I want to show you some examples of my semantic markup that I used in my project. I built a Web page that displays information around you need car restoration. So first I'm gonna show you how I break down the main sections of the Web page using HTML semantic tags. So if we look inside the body, I have my main header, my main main tag and my main footer tag. And when you break down into each of those, then I start to break things into smaller sections, and I actually used the hnl section tag to then note each individual section in each individual area. So if I open up my main tag, this will illustrate that point a little better. So you see where my first section inside main is my intra graphic, and then my second section is my quick link items. And in my third section is my spotlight area. And finally, my fourth is my featured articles. And then if I break into my footer, I have just one section that holds my my text in the Footer and then my social icons. So let's break this down a little bit deeper inside my head. Er, I have my single section, but inside there I have my main H one and in my navigation structure. And whenever I developed websites, I'd like to follow the rule of having one H one in a page, which is always the site name in the header. And then from there, I like to cascade down through the different heading levels, Level H two, h three and so on. And we wanna make sure that we don't skip heading level, because if we do, it's gonna be flagged and accessibility evaluation tools. So then moving on to my navigation structure, I, of course, used the age smell knave tag to start, and then I use an unaltered list. I like to use unaltered lists whenever I have a grouping of related items, and that's not just for navigation. That's four different articles or in this particular case, of course, a list of links and so on. So I use my own word lists and in each list item is a navigation item, and I have just a simple navigation structure. I don't have any drop downs or anything like that. I don't want to complicate it too much for a project. So we just have a regular list of links, nothing too complicated and moving on into the the main tag first section. We have the intra graphic and I mark this up using the figure tag inside the figure tag. We just have our simple image with with, of course, our all text. And then for the caption, I used the FIG caption tag with an H two and a paragraph tag inside there. And if you notice I used my H two, but I use a span tag to break it to multiple lines. It's never a good idea to use multiple age tags when you're just trying to split a title to multiple lines. Just use a span tag inside there, said it, display block and kick it to the next line. That way, assisted technology is going to see that as a single header and not read it is, too. That's gonna be confusing for the user, then move down to our quick link items. I used an H three for this title, and then I used unaltered list again for each quickly item. Now some people might think that using just straight article tags to split these up would be just too good, and they'd be correct. I like to use on ordered list specifically because when a screen reader reads through this , you'll be Oto simply key from one item to another, which, of course, it will be the same if you use article tags. But the plus side to the in order list is it's actually going to say one of four or two of four and so on. And I really like that. I think it's better feedback for the user. So looking inside my own order list, I'm using an A tag for these quickly guidance because they are in fact links. They're gonna be used for navigation. So I use those is my main rapper, and I just have a simple, fought awesome icon with a simple title and a simple caption Moving on to my spotlight. I have just a simple article with an H three in a paragraph tag and then an accent image off to the side, jumping down to my top stories again, I'm using an unaltered lists. Inside each list item is a paragraph tag and then some span tags to create the layout from an image and text. And finally, in my Footer section, I have just a single section with a paragraph tag for my for my text that lines left and then on a nordle ist structure for my social icons that will align right, So that wraps up html semantics. So just keep in mind that there are lots of semantic HTML tags out there, and you want to make sure to use the proper tag for each specific element that you're developing to make sure that you get the most meaning out of your Web page. So up next, we'll take a closer look at links and images 4. A Close Look At Links And Images: way segment. We're gonna take a closer look at links and images, these air common problem areas that I see a lot of my job, and I think it's a good idea to take some time to look at some good usage examples. What I've done here is taken my project Web page and created a couple additional sections down below where I'll illustrate some good image examples, some good link examples and then, finally, some good examples where we mix the two where we have linked images. Taking a look at the first example, we have just a simple image with some all text and the second example. We have an image with empty all text with a description below, Let's jump over the code and see what that looks like. It's so in here, you'll see I'm using an unaltered list again, and in the first item we have that single image with descriptive all text. Now we want to make sure that we use descriptive all text because whenever a screen reader or assistive technology reads this image back to the user, we want to make sure that they use or completely understands what the image is and descriptive all Texas. How we're going to do that, Jumping down to our second example. This is where an image has a visual caption, and in this particular case, we want to leave all attributes empty because it'll cause a redundancy. If you take note, the caption becomes directly after the image and assistive technology will pick up on that . So let's fire voice over and see what these images sound like. What I'm gonna do to navigate these images, it's hold down v o Key's and use my Left and right arrow keys. Now when I say v o Key's, that means control option. If you read documentation about navigating with voiceover, vo will always refer to the control and option keys together. So in the future, when I say vo, you'll know which keys and talking about control plus option and voice that was going to read the text pretty fast because I have my rate up pretty high, but you can access the voiceover utility on your machine to adjust it to your liking. Vintage car car trailer. Before, if you noticed the vintage Chevy truck won best in show, caption was identified correctly by voice over as the image descriptive text. The biggest issues that I see with images on a regular basis are that images either don't have an old attribute at all or have an empty attribute when one is required. Or there's non descriptive text use for the all attributes. So there's two other things that I want to mention a good image usage in the 1st 1 will refer back to my spotlight section above the background images, a decorative image, and it does not convey any content. In these instances, the all attribute should be left empty. More importantly, though, decorative images are best applied via CSS background, so that it's not physically in the flow of the Web page. If you must have a decorative image in HTML structure. What I like to do best is just add a role equals presentation and area Hidden equals true, along with the empty all text. That way, we make sure that it's hidden from assistive technology and in third will refer to the intra graphic section above. Although it doesn't convey much information, I purposely wanted it in the flow of my Web page and to be read by assistive technology now I want to move on to links. There are a number of different things that I wanna talk about pertaining to links a couple of things that include whether or not the link opens in a new window. Proper descriptive text link decoration and avoiding redundant you URLs. So in my good link examples, my first example is just a simple link with descriptive text that does not open in a new window. And my second example is a link with descriptive text but does open in a new window. And what I'm displaying here is the simplest way to alert a user that this link opens in a new window. This is pretty common where the user will have a visual indicator that the link opens in a new window and also will be read by the screen reader to Because, of course, they're going to read the link text and the opens in a new window. Notification is included in that text, so let's jump over the code to see what these look like. So again, using my a nordle ist and my first example is my simple link that opens in the same window with descriptive text. Nothing too complicated going on with this one. But my second example is where I opened the link in a new window, using the target attributes at the blank and where also include the opens, a new window text inside the link description. There are a couple of different ways that you could potentially handle this functionality. But by far the easiest in the only unit we're gonna talk about in this class is the simple opens in a new window text included in the descriptive link text jumping back out to the page. There are three other things I want talk about pertaining to good link examples. And the 1st 1 is that we were sure to use descriptive link text text such as click here or read more, is not descriptive and does not provide context for the user. Shortly we're gonna fire up, voice over, and we're gonna have a display, a list of links that air throughout the web page. And that's where you're really going to be able to see where that could be problematic for us. So we always want to make sure that we give the most descriptive link text Fourth we made sure to use an indicator other than just color. Now you see that by links air green in color, but they're also underlined which users do expect. Other commonly use examples other than underline would be fought weight or borders. And finally, we want to make sure that we match the Focus ST to our hover state so that the interaction is exactly the same, whether you're navigating with keyboard or a mouse. So now I want to open up voice over, and I want to navigate through the two links that we have. But then I want to bring up the list of links that are in the page using the road or function and voiceover boys over you need car restoration. Google Window. You need car restoration content. Give it a try. Open the window. So listening to a voice over, you can clearly tell which link is gonna open a new window in which one's not. Now, let's open up the road or tool and look at the list of links that are in the Web page. Links you link skip to main content links, links, links, links, settling, settling, settling chemically chemical insult me. Find you're looking for something to give it a try. Blinking car Train link. Vintage Chevy Truck won best in show links Facebook link Twitter blinks Lincoln, As I mentioned by looking at the list of links the voice of her provides, you can really see how it would be confusing for a user of all those lists. Just said, click here or read more descriptive link. Tex really helps the user understand what those leaks air for. The last time I wanna cover is some good usage examples of linked images. I have two examples here. To show one is just a simple image with all text that is wrapped in a tag. And my second example is an image with empty all text with an external description that's wrapped in a tag thes two examples air much like the ones that we covered above when we talked about images with all text or images with a visual caption. My first example is just simple image with descriptive, all text wrapped in a tag on. My second example is the image with an empty attributes for the external caption. In my first example, the screen reader will use the image all attributes as the link text. And on my second example, the screen reader will use the caption text as the link text visited. Link Carlin Car Dreamer Let's do like a visited link. Vintage Chevy Truck won best in show, so that wraps up the examples that I wanted to share with. You got to look at some code and look at the examples in action with voiceover. Next, we're gonna be looking area attributes and rolls. 5. ARIA Attributes and Roles: wait. Next segment, we're gonna cover the area Specifications, which is written and maintained by the W three c Various stance were accessible rich Internet applications areas, a set of pre defined attributes used to make Web content and Web applications more accessible to people with disabilities. Its primary uses with situations like dynamic content and advanced user interfaces. Where HTML, CSS and JavaScript alone aren't enough. There are three categories for area attributes. Those are Rolls, Properties and states. Roles are attributes that help to find the element, type and or purpose, and a role value cannot change. Some example. Values of roles are menu menu, bar heading button main and check box properties or attributes that provide additional meaning or information for the element that it is applied to. Some example. Values for properties are area controls. Area has pop up an area live states or attributes that help provide interaction based information for the element that has applied to and states are most likely to change over time through user interaction or other actions. Some example. Values of states are area expanded. Their you checked area Preston area selected to remain within the scope of this class we won't be covering advanced implementations of area market, but I do want to walk you through my project code and apply some of the area attributes that will help increase the quality of my markup. I won't need to use very many because I've already used proper semantic markup. But there are a few areas where I'd like to improve my page. What I want to do first is improve the markup of my navigation bar Shell CEO. My UN ordered list. If I added a roll of menu bar to the well, a roll of none to each ally and a roll of menu item teach link now used a roll of none on each ally because the role of menu bar makes assistive technology recognize it as a menu of our element instead of an actual UL like it is. So if you evaluate your page with inaccessibility evaluation tool, these items be flagged because it's recognizing the UL as a menu bar element and not a UL where allies are supposed to be inside of you. L. So you have to apply a rule of none so that those are compliant. The second area that like to talk about are the icon in my quick resource is section. I have applied an area hidden equals true to each of my icon images, because I want them to be seen visually. But I don't feel it necessary that assistive technology interpret those. And then, finally, for my social media icons, I'm using Icon again inside of each a tag, and there's no descriptive text associated with these. So what I could do is either have text inside of the A tags that's hidden visually but accessible to assistive technology. Or just apply an aerial able to a tag, which I've done so I've applied an area label for Facebook, Twitter and lengthen. Once you apply, these attributes will be able to see the difference in how assistive technology interprets the elements and content. Let's fire a voiceover and navigate the Web pages. See how it's right back to us. Heading level one. You need car restoration work, navigation, one item menu items. You are currently home. Anyone wanted for fabrication menu item before bodywork. Menu item three or four suspensions for four, and a minibar and navigation and a vendor for background image. Complete restoration. You're getting too Two items. Welcome to you need car restoration. This is a small collection of my work, and I hope that you find something a little quick. Resources. You are currently analyst visited. Link Body tips Here are some tips with body issues one for visited links Fine. I'll need some help with a problem to 1/4 visited link. Find cards. This is a list of recently bystanders free for visited links. Find your local swat me to make some deals for end of list heading level three. My favorite part of restoration. You are currently heading level three months even to tell stories. You are currently on a list of items that need to be a visited link. Must have independent suspension. If a visited link customer gets opens a new window down too drunk for free. You can often find parts your project. Local swap meets a visited link. Find a list of your local swap meets here. Opens a new window end of list and of developing for accessibility. Friendly building accessible linkage list visited links Facebook one of three visited linked to three Visit link Clinton free every and at least in the future in the class description have provided a resource called alley style guide in examples where you can find a great collection of usage examples that include area implementations. I recommend looking through these examples. If you need accessibility, help with specific and or advanced implementations, so that wraps up area attributes and rules. Next, we'll be looking at some common features that you can add immediately to your Web pages for improved accessibility. 6. Accessibility Feature Boilerplate: way in this segment, I'm going to share with you some common features that are part of my development skeleton. Easier repeated and required features that must be part of your Web pages for accessibility compliance. The first feature I want to talk about is the HTML Lang attribute. This attribute tells the browser in assistive technology, what language the Web page for content should be interpreted in. I have a Lang attribute applied to the opening HTML tag. If you have sections of content that air in different languages, you can apply additional lying attributes to those parent containers. This feature covers Web content accessibility guidelines 3.1 point one, which is language of page. Second feature that I want to talk about is a skip to main content link. This is important to provide efficient navigation for keyboard users. It allows them to skip repeated content blocks like navigation structures and header elements so that they can jump directly to the main content area. This feature can be achieved in several different ways. I chose to have an enemy down from the very top of the page when it receives focus and then have it disappear once focus leaves the element. The important thing to note here is that it is the very first focus herbal element in the page. Once a user invokes a link there jumped down to the anchor tag where they could begin navigating main content area. I've used a negative one tab index on my anchor tags that it could be used to move the focus indicator to its position but would not receive keyboard focus as a user navigates through the page. Naturally with their keyboard, this feature covers Web content. Accessibility guideline 2.4 point one, which is bypass blocks. The third feature is a consistent focus indicator. Brothers do have default focus indicators, but there are all different and rarely, if ever, meet. Requirements in my project demonstrate a highly visible, unique color contrast compliant focus indicator. It is a two pixel dashed CSS outline applied using the focus CSS pseudo class. The main color that I use is red, but I change it in some of the regions of my project so that it passes color contrast requirements. This feature covers Web content accessibility guideline 2.4 point seven, which is focused, visible fourth feature is allowing page zoom. The report Meta tag provides an attribute called maximum scale. Typically do not use this attribute, but if it is required for your project, be sure that 200% is the minimum. The W three C recommends that users be able to resize content up to 200% without assistive technology. When I do my project webpage, you noticed that I do not lose content or functionality, which is an important aspect to meeting this guideline. Another way to achieve this is through custom controls for adjusting text and or element Size is located the very top of the Web page. However, this is a less common practice. This feature covers Web content. Accessibility guidelines 1.4 point four, which is resized. Text. The last two features that I want to talk about aren't so much existing skeleton items, but are handled the same across all of my development work. And there's our consistency across Web pages. Such a site navigation and branding and using semantic markup. Generally speaking, navigation headers and footers should be very close, if not identical across all pages of website. The main content area will be the only element with slight differences. This provides a more predictable experience for your users. This feature covers Web content. Accessibility guidelines 3.2 point four, which is consistent identification. We've discussed a lot about the importance of using semantic html markup and how it improves the experience of your Web pages. Remember to always choose the best suited markup for your solution. This feature covers Web content. Accessibility guidelines. 1.3 point one, which is info and relationships so that covers my accessibility feature Boilerplate. Next, we're going to discuss color contrast. 7. Color Contrast: in this segment, we're going to talk about color contrast and how to make sure your color palette is compliant. Adequate color contrast is important, so that text you read by people with moderately low vision the Web content accessibility guidelines that we need to look at is 1.4 point three, which is appropriately named. Contrast. It states that the text color, which is identified as the foreground, color along with a background color that the text overlays must have a minimum ratio of 4.5 to 1 for normal text in a ratio of 3 to 1 for large text. The first thing that we need to discuss is that the guideline doesn't set a value on what they deem is normal text size. They do stay in the guideline. That 18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio so we can least keep that in mind. The role that I follow is to consider your default body text size to be your normal text size and evaluate the contrast ratio from there, which is 4.5. The one normal text size is heavily debated. But generally the default text size of my development is around 14 to 16 pixels, or 11 to 12 points. So this information in mind, you can consider the color palette for your website, my favorite told it. Check color contrast is Web Aims Color contrast Checker I provided a link to the tool in the class description. This is a great tool where you can easily paste or foreground and background colors into the inputs, and it immediately provide you with a ratio where passes or fails. What I like most about it, though, is that it provides you with lightness slider so that your color pairs not compliant. You can adjust one or both the colors until it provides a compliant ratio. I haven't found this handy feature in any other color contrast evaluation told that I've used selecting colors that produce a compliant ratio is very easy when you're using a solid color value for both foreground and background color. However, this is not always the case. In today's Web designs, we have text over images, texted rig radiance, text over multicolor backgrounds, text over videos and, more generally speaking text directly or an image or video isn't a good idea unless you have full control over that content and that it won't be changed by 1/3 party where it could produce noncompliant results. Accessibility Evaluation told. Almost always throw false positive violations in these situations to because their algorithms can't determine either foreground or background color. And these more complex elements, simple backgrounds are about the only thing that they can handle. So just be aware of that. We'll speak more about this in the next segment about accessibility evaluation handling more complex situations can be accomplished quite easily. Protects that will sit over images or videos. I highly recommend using a solid color between a text and background element, or at least a color or ingredients set to a high opacity percentage. For example, if you have a slideshow gallery with text, the overlays each slide, you can set the text color toe white in a box with a transparent black background. Given that the images can have any color combination, you should consider the image in his worst case scenario, which we white. In this case, they have a white background with white text that overlays that background with your transparent black box that sits between your text in the image. From here, you can use a tool like color contrast analyzer. To check the value of the transfer of black box with white text, you'll find that you need to stick to at least 60% opacity in order to be complying. In this worst case scenario, I provided a link to the color contrast analyzer tool in the class description. On the other side, consider a situation. We have black text that relates the image inside of a transparent white box. Then you have to consider a pure black image to evaluate the ratio of the transparent white box with black text. The simple scenarios where we have black and white but the same approach to be used to check different colors if needed. Generally dynamic content is the hardest to account for, but the key is to always evaluate. In the worst case scenario, there are actually some situations where your client may have a non compliant brand. The color scheme that they can't change their isn't much you can do in this situation to their actual color scheme, But there is a solution that you can implement to achieve accessibility compliance. The W C E G as a general technique labelled G 1 74 providing it control with a sufficient contrast ratio that allows users to switch to presentation that uses sufficient contrast. You can accomplish this technique by providing a simple on off button for high contrast very top fever website that toggles the site in and out of a high contrast mode. Dunkin Donuts website has a great example of this. Their contrast doesn't go to pure black or white, but it does change nicely. I've implemented a solution similar to this at my job in several occasions where I use black and white with some dark grey accents. It provides great results, and I've seen it get a lot of positive feedback from users. So that wraps up high contrast and how to achieve a compliant color palette. Next, we're going to look at how to evaluate a Web page for accessibility compliance 8. Accessibility Evaluation: in the segment, we're going to look at how to evaluate a website for accessibility compliance. To do this, we're going to navigate a Web page with the keyboard and screen reader and inspect the structure and mark up will then use Web beams, wave evaluation, tool index systems, acts, evaluation tool both as a secondary measure. We're going to start with navigating the Web page with a keyboard and screen reader because it's the most important and reliable form of testing evaluation tools like Wave and Acts only programmatically evaluate on a set of rules, and they often make mistakes. Human testing is always the number one form of testing and evaluation. Wow, navigating with a keyboard and screen reader, I'm going to use just a small set of controls will be using The Vo Key's again that I talked about in a previous lesson. Along with Cherokees, will also tab through the page to make sure that all of the folks herbal elements are properly accessed while navigating, we're going to make sure that the page elements and content or access in a predictable order, and that they are interpreted correctly by the screen reader. Amusing Max built in screen reader called Voice Over. There are many other popular options, like NBD A and Jaws that may be used once we successfully navigate the entire page will open Crume developer tools to check over the mark up and make sure that the structure and content are semantic, along with anything else that may stand out. If you're doing this for the first time, it may feel overwhelming, confusing or difficult, and that's OK. Accessibility evaluation takes practice, and you'll build the skill in no time. For additional help, I provided a link in the class description to a great beginner tutorial for voiceover created by the Chrome developers group called Screen River Basics. Now let's fire a voice over and check my project Web page for accessibility compliance, leading to a lot of talent. Physically skip to main content. You are currently nothing inside of content, just like the other one item heading Level one. You need reservations, navigation. One item. You are really in a navigation menu. Items anyone wanted for fabrication menu item before bodywork, menu item for suspension, many waiting for four and a minibar and navigation and a better background Level two items . Welcome to you. This is a small collection of my work, and I hope that you find something useful. Heading Level three Quick resources. You are currently on heading level three or four items visited. Link body tips Here are some tips for those two bodies. One for visited links Find health needs help or direction with a problem before a visited link. Find cards. This is a list of recently bystanders three or four visited Link swap meets. Find your local swat me to make some deals for for your current list. Heading level three. My favorite part of restoration. The design is like a recording project, especially in the winter. You are currently heading Level three stories with three items you are currently tracking. One of three need to model is such a great free you visited link, so I got to give it a try. Opens a new window for delivery. Must have independent suspension if it's perfect for your customer. Specifically, customer gets opens. A new window blew down to drop in for your free. You wake up. You can often find parts for your projected local swap meets a visited link. Find a list of your locals. Weapons here opens a new window, and the list and me you are currently developing for accessibility begin a friendly, building accessible vintage. You weren't listening items you visited. Link Facebook, one of three visited Lincoln. Three. Visited Lincoln, Lincoln, free every and list, and if so, it looks like we're in good shape. All the elements and content were access to the predictable order and were interpreted correctly by the screen reader. My keyboard controls move throughout the Web page Exactly how the should happen. Nothing interfered with my interaction. Now let's tap to the page to ensure that all of my focus will elements do, in fact, receive focus visited, linked to content. You mean like a mini bar for items? Chassis fabrication, menu item bodywork? Anyway, it's essentially anyone basically body chips. Here are some tips for those are to be physically fine. I'll need some help or direction with a problem. Visited. Klink Find cards. This is a waste of recently bystanders visited Link swap meets. Find your local swat me to make some deals visited link so I can give it a visited link. Customer gets opens a new window visited link. Find a list of your local swap meets here opens a new window. Visited Links Facebook List Revisited Link. You want a visited link? Lincoln Leading my content unique our destination Select attempt. Now that we've confirmed that my focus it'll elements received focus and in the correct order that's now that will check the page structure in markup. Getting a general overview of the page structure. Everything looks really good. Our first focus herbal element in the pages. A skip to main content link, followed by the semantic header main and footer tags, which is what I would expect. Let's break into each of those tags. See how the chunks of content are built. Okay, we can see that the semantic section tags are being used to group the larger sections of content together, which is great. We can also see that the skip to main content anchor is properly placed as the first item inside the main tag. So far, all the HTML elements air in the proper order in the market that was chosen is appropriate . Let's dig into the header a little further. We could see that the H one has been used for the site name, which is what I would expect, and from here I'm going to assume that all of the other headers and page will increment from this H one. The navigation bar has been properly set using the semantic nap tag, along with an unaltered list utilizing the proper area attributes that will help with assistive technology. Moving onto the infographic section, we can see that a figure element has been used to mark this image up with a big caption and H two in paragraph. Inside, we can confirm that the image has a proper all attributes as well. The use of semantic markup here is great, and everything is in the correct order. The Quick Links section uses a correctly incremental H three with a northerly list for the links. Inside each link, we can see an icon element, which is hidden from assistive technology, along with a link title and caption broken down into separate span tags. I like how the dash is used to break up the title captions here, so they're not red by the screen reader as a run on the dash creates a nice pause for the screen reader and dissident visually using the defined alley hidden glass. The Spotlight section uses a single article tag with an H three and paragraph on the left and an image on the right. We can confirm that the image has a proper all attributes as well. The background image does not convey content, so make sure that is not accessible to assisted technology. We can see that it is set as a background image, and that's what I would expect. The feature article section uses another H three with an unaltered list for the articles each article, images, photo left with proper all text. Finally, we could see that the footer uses a paragraph for the tagline and an UN ordered list for the social media icons. Each icon uses an area label, which is perfect, given that these links or just icons and we need discernible text for the links. We've just confirmed that the page structure and content are built using proper semantic markup, and the everything is placed in a proper, predictable order. Now it's time to wrap up our accessibility evaluation by running the wave and acts evaluation tools as a final measure to be completely sure that we did not miss any violations the way of an axe. Tools are browser extensions that I have installed, and we're going to start with the wave told once I click the button, we'll see that wave will evaluate the page and then display the results in the left side bar. We can see immediately that we have zero errors and zero alerts, which is exactly what we're looking for. We can see any alerts, errors, features and more by clicking on the flags. Button in the panel also like to disable CSS by clicking on those styles buttons so that the flagged items are easier to locate. If we had received any alerts or errors, we would see them listed at the very top of this panel, and each item would be individually listed with the information on the violation where it is located in the page. And some helpful information on how to fix it, along with the accessibility guidelines that it pertains to wave also evaluates for color contrast, but I'm going to look at these items in the Axtell in my experience is the axles algorithm makes less mistakes. Well, now open the crew developer tools again and run the axe tool we'll see any violations that it finds in the lower left sidebar, the only items of the evaluation found or color contrast violations. If we had received any violations, we would see them listed in the left sidebar panel, and each item would be individually listed with the information on the violation where it is located in the page and some helpful information on how to fix it. Along with the accessibility guidelines that it pertains to, We can see that the color contrast violations are marked as quote unable to determine contrast for issue or quote elements. Background color could not be determined because element contains an image. Note. I have manually inspected all of these violations and have confirmed that their false positives it's a tool was able to properly evaluate a real color contrast violation. It would list the foreground and background colors along with a non compliant ratio that they produced. I have a few things that I want to mention about evaluation tools. The most important thing is that they're absolutely not perfect. The most common issues that these tools automatically flagged a color contrast situation when the tool was unable to properly evaluate a foreground and or background color instead of marking them as items that require further review. They appear Israel violations, which can greatly inflate the results of the evaluation and are confusing the clients when you ensure that their false positives but are still listed in the results. I have also seen a tools flag, proper area markup and also not flag situations that require it. And finally, I have seen several items flags violations that actually are not based on a real accessibility guidelines but instead are just recommendations from the creator of the evaluation tool. We must always use accessibility evaluation tools with caution, and that is why human testing is always number one. In closing. I want to mention that if a client is questioning the accessibility of their full website, it's a great idea to have them purchase a voluntary product accessibility, template or V pat. A v Pat is a self disclosing document created by the third party bender that outlines the successes and failures in regards to the accessibility of the website. The client can then use it as a god and road mapping any necessary website updates to ultimately achieve accessibility requirements that completes our accessibility evaluation. Next, we're going to take a brief look back and everything that we've learned in this class. 9. Accessibility Review: congratulations for completing the class. Now let's take a minute to recap the key points that we learn in this class. The guidelines that we need to follow while building a Web page or Section 50 wait in the Web content accessibility guidelines, there are direct links to these guidelines provided in the class description. Also, people with disabilities that navigate the Web used assistive technology like screen readers and screen magnify IRS as well as adaptive strategies like increasing text size and adjusting mouse feed. Semantic HTML markup is extremely important for accessibility. It provides a rich interface that assistive technology can more easily access and convey the information back to the user. There's a lot that is achieved for accessibility, with semantic HTML markup alone. Also, building elements in a predictable order is key for navigation links and images or elements that I find to be frequently problematic for accessibility. We looked at some examples of images with simple all Texas Wells images that are accompanied by a caption that holding empty all attributes, we also looked at some examples of links that open in a new window and how to handle those descriptive link text along with proper indication for links are also very important to keep in mind. Area attributes are used to improve the user interface and Web components when HTML, CSS and JavaScript fall. Short area attributes are a pre defined set of roles, properties and states. Role values never change in the life cycle of an application. Property values may change but is infrequent in state values change, often mostly through user interaction. These attributes are interpreted by assistive technology in order to approve overall user experience. There are a few things that should be part of every Web page that is built does include the HTML Lang attribute a skip to main content link, a consistent focus indicator and allowing user to zoom to at least 200% without losing content for functionality. The lying attribute tells the browser and assistive technology what language the Web page or content should be interpreted in. Skip to main content Link is important to provide efficient navigation for keyboard users. It allows them to skip repeated content blocks like navigation structures and header elements so that they can jump directly to the main content area. Finally, a consistent and prominent focus indicator helps the user know what element has keyboard focus? Adequate color contrast is important so that text to be read by people with moderately low vision. The Web content accessibility guidelines states that a foreground color, along with the background color, must produce a minimum contrast ratio of 4.5 to 1 for normal text in a ratio of 3 to 1. For large text. There are many tools that can help build a compliant color scheme, and my favorite is Wedding's color Contrast checker. We were able to look at some simple color situations as well some complex color situations and how to evaluate those for compliance. Accessibility evaluation is very important in making sure that a Web pages compliant based on accessibility guidelines using a keyboard along with screen Reader to navigate the entire page is the number one form of testing Accessibility. Evaluation tools like wave and acts could be used as a secondary measure to be completely sure that you did not miss any violations. Also, be sure to check page structure and mark up along with proper page order and predictable navigation. So you've had a chance to see my project. Many lessons of this class also attached to the project description for further review. If you need now, it's time to create your Web page based on everything that you learn in this class Bill Web page based on your favorite hobby and showed off in the project gallery. Be sure to read the project description for more detail. Good luck, and I can't wait to see what we come up with.