Meeting Web Accessibility Guidelines (Section 508/ WCAG 2.0)

You don't have to be an accessibility expert to make your sites accessible. This course will help you attain the knowledge and skills to meet web accessibility guidelines and make your sites accessible to all users.
Course info
Rating
(94)
Level
Beginner
Updated
Sep 7, 2016
Duration
1h 44m
Table of contents
Description
Course info
Rating
(94)
Level
Beginner
Updated
Sep 7, 2016
Duration
1h 44m
Description

If you are a web/front-end developer, the work you produce must be accessible to all users. In this course, Meeting Web Accessibility Guidelines (Section 508/ WCAG 2.0), you will get hands-on, practical code examples that you can start using today towards your goal of meeting official accessibility guidelines. First, you will learn the differences between Section 508 and WCAG 2.0, helping you to decide which guideline to use. Next, you'll dive into real-world, reusable code patterns/techniques and matching them to relevant guidelines. After finishing this course, not only will you be equipped to acquire government/education-related contracts, but you'll be able to make sites that meet established accessibility conformance guidelines and are more usable for everyone.

About the author
About the author

Gerard K. Cohen loves front end engineering so much that he is on a mission to make sure that the web is inclusive to all users, making rich internet experiences available for all. He believes great Ux includes performance and accessibility.  Gerard lives in Oakland with his wife, and when he is not sleeping or drinking Zombies at tiki bars, he helps raise awareness by speaking at Front End and Accessibility conferences around the country

Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Welcome everyone, my name is Gerard K. Cohen, and I'll be your guide for this course on Meeting Web Accessibility Guidelines. I'm a passionate front-end engineer, and for the last 4 years I have worked on building an accessible UI framework to be used by over 80 commercial applications for one of the country's largest banks, well known for being the first to offer online banking. In this course, I will introduce and go over the differences between 2 major accessibility guidelines, Section 508 and WCAG 2. 0, and give you my recommendation on which guideline to choose. Then, I'll head straight into real-world, reusable code patterns and techniques by retrofitting an existing site to meet relevant guidelines. I'll adequately discuss semantic HTML, the basis for all accessibility, by demonstrating proper document sectioning, hierachy, and structure, lists, navigation, accessible tables, accessible forms, and accessible media, including images and videos. I'll round out the course by talking about responsive web design and its impact on accessibility. All along the way, I'll use a live screen reader to demonstrate the before and after of each recommendation. The only prerequisite for this course is that you should have a basic understanding of HTML, CSS, and JavaScript. To be clear, accessibility is not a checklist or a product, and doing everything exactly as I demonstrate here in this course will not guarantee an accessible compliant site. Even though I'll be going over specific tips and code examples that you can use over and over again, it's important to note that meeting guidelines is completely dependent on your particular site and content. But by the end of this course you should have the knowledge to understand the core principles, and skills on how to adapt them to your user's needs. You don't have to be an accessibility expert, but you do need to make your sites accessible. And I hope you'll join me in making the web available for everyone by learning how to meet web accessibility guidelines.

Choosing a Web Conformance Guideline
All right, first things first. We need to talk about web accessibility conformance guidelines. So in this section, I will help you navigate through the very important decision of choosing the proper web conformance guideline. I'll start with a brief introduction of official conformance guidelines. Then, I will introduce you to Section 508 and the Web Content Accessibility Guidelines, or WCAG. We will do a high-level overview of both, and discuss how they compare, contrast, and overlap. And finally, we will discuss which you should choose. Web conformance guidelines help in providing guidance on how to ensure that your websites are accessible to people with various disabilities. They can also cover you from expensive discrimination lawsuits. Now, I don't mention lawsuits to scare you, but it is a real thing, and it does happen. I would rather you focus on the positive benefits of ensuring access to users with disabilities that will also impact all of your other users, including better SEO and greater usability. You will also be doing your future self a big favor, as one way of looking at disabilities are the certain effects of old age. At some point, you will eventually have diminished vision, hearing, and use of your hands. When it comes to web accessibility there are 2 main guidelines to follow that I've already mentioned, Section 508 and WCAG. Let's first talk about Section 508.

HTML
Believe it or not, one secret to good accessibility lies in the markup, the HTML that you choose to build your site. This makes accessibility kind of easy because it's just HTML, but it also makes it hard because you have to know how to use HTML. HTML is semantic, and semantics are extremely important to accessibility. You get so much accessibility for free if you use HTML properly. See, the way that the Web stack works, and by Web stack here I mean HTML, CSS, and JavaScript, is that you can build an entire site or application using divs and spans, styles you need with CSS, and then create all your interactivity with JavaScript, and it'll work, for the most part. It may not be as performant, or as performant as it could be, but it'll work. It definitely wouldn't be accessible though. Actually, you could make it accessible by adding ARIA, but you would be going a really long way to add back in everything that you stripped out. Again, HTML is already accessible, and has been since the beginning of the web. So, we're going to be spending a good chunk of time discussing how to use HTML to improve the accessibility of an already existing site. I'll first start by talking about document structure and landmarks, the foundation for everything. Then I'll go into proper application of various types of lists, which will lead nicely into navigation and skip links. I'll talk about tables, and last, but definitely not least, I'll demonstrate proper forms, focus indication, and color contrast. But this isn't really an HTML course, or a course in semantics, because there are already really good courses here on Pluralsight for that. The focus here will be on using proper markup and semantics to meet our chosen conformance guideline of WCAG Level AA.

Media
One reason why the internet has exploded over the years has been the introduction of media, images, audio, and video. This rich media has turned the internet into an immersive experience. We need to make sure that this immersive experience translates to users with disabilities, and WCAG has some very specific guidelines around media that I'll be talking about in this video. The basis for accessible media comes from Level A guideline 1. 1. 1 for Non-text Content, which states that all non-text content that is presented to the user has a text alternative that serves the equivalent purpose. Level A only requires that you provide text alternatives to media, but I'll also be talking about Level AA guidelines that require alternate means of providing equivalent purpose and meaning. The important takeaway is that you need to make sure that users with hearing and vision impairments can also benefit from rich media content. A quick overview of this section. I'm going to talk about images, including background images via CSS and accessible SVG, then I'll go over the guidelines for making audio accessible, as well as video, and finally some additional media guidelines I want you to be aware of.

Responsive Web Design and Accessibility
Responsive web design and accessibility are natural partners. If you consider that the goal of responsive web design is supporting as many screen sizes and devices as possible, you can easily see how it begins to help with accessibility. But of course there are a few things that I want to make you aware of, including the last couple of guidelines to meet. Most of the things that you need to worry about when implementing a responsive design revolve around switching context, order of content, focus order, and finally I will go over some loose ends with additional responsive patterns and guidelines.