Introduction to Web Accessibility WCAG 2.1
4.4 (9 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
126 students enrolled

Introduction to Web Accessibility WCAG 2.1

Learn web accessibility and apply best practice WCAG 2.1 accessibility patterns and techniques to your websites
4.4 (9 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
126 students enrolled
Created by Ross Mullen
Last updated 8/2020
English
English
Current price: $76.99 Original price: $109.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3 hours on-demand video
  • 15 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Master the fundamentals of WCAG 2.1, including the 3 levels of conformance, the POUR concepts and sufficient techniques
  • Create solid document hierarchies with HTML5 landmark regions, headings, logical tab order sequences and semantic elements
  • Build accessible content with descriptive images, understand how to determine accessible colours and layout tabular data with datatables
  • Create accessible forms that include error and validation patterns using best practice WCAG 2.1 techniques
  • Gain confidence and understanding of what it means to build an accessible website
Course content
Expand all 58 lectures 03:12:28
+ Welcome To The Course
3 lectures 11:58

An intro into the course, a little about me and my background, web accessibility employment trends and some of the reasons why you might want to choose this accessibility course if you're still making up your mind.

Preview 08:32

What the course covers, how its structured and what software is required to be downloaded.

Preview 03:15

Course prerequisites to prepare before beginning.

Course Preparation
00:11
+ Web Accessibility Overview
10 lectures 35:13

WCAG 2.1 are the guidelines to make web content accessible for users with disabilities.

Introduction To Web Accessibility
00:47

WCAG 2.1 is the acronym for the web content accessibility guidelines version 2.1.

By the end of this lecture you’ll understand the web content accessibility guidelines version 2.1, the history of accessibility in web content, and what the standard is now.

Preview 08:46

The POUR principles make it easy to understand which guidelines affect which part of the web content.

In this lecture we’ll look at the POUR principles in detail and understand how the 4 categories make it easier to find the relevant accessibility guidelines to check and build against.

Preview 06:48

Links to the WCAG 2.1 quick reference document, individual guidelines, success criteria and techniques.

POUR Principles Links
00:04

WCAG 2.1 success criteria have three levels of conformance from single A to triple A.

In this lecture you'll understand the three levels of conformance, what the success criteria from each level mean and help identify which conformance level to use and which criteria can be incorporated into reach goals.

The 3 Levels Of Conformance
06:10

Links to the WCAG 2.1 individual guidelines and success criteria discussed in The 3 Levels of Conformance lecture.

The 3 Levels Of Conformance Links
00:03

Understanding if you’ve correctly passed a success criterion can be challenging, you’ve applied the technique correctly isn’t this now a pass?

In this lecture we’ll talk about how to check the techniques used to make content accessible are valid, i.e. they pass WCAG 2.1 conformance. We’ll look at the failure techniques which are a collection of statements which can be applied to content to determine if it has passed or failed against a relevant success criterion.

How To Assess Web Accessibility
05:30

Link to the failure criterion F78 in the WCAG 2.1 documentation.

How To Assess Web Accessibility Links
00:00

Within each success criteria are techniques which can be applied to make content accessible.

In this lecture we’ll discuss success criteria techniques and explain the different types of techniques available, which include general techniques, HTML techniques and CSS techniques.

Types Of Sufficient Techniques
04:32

This is a short test to demonstrate your knowledge from the Web Accessibility Overview module.

Recap What Is Web Accessibility
3 questions

The WCAG 2.1 guidelines are organised under four categories abbreviated to POUR. Perceivable, Operable, Understandable, Robust.

Principles, Guidelines, Success Criteria and Sufficient Techniques, these are the building blocks towards understanding WCAG 2.1 and building accessible web experiences.

Key Takeaways For Web Accessibility
02:31
+ Building The Structure Of A Page
12 lectures 40:28

Structuring a page means providing accessibility support to act as scaffolding which page content can be added onto.

In this module we'll discuss:

  • How to create descriptive page titles for individual pages and pages which are part of a sequence

  • Set the page language to allow screen readers and other assistive technology to load the correct language profiles

  • Use skip links to avoid repeating content such as navigation menus on the top of every page

  • Apply headings and HTML landmark regions to structure a page better for screen reader users

  • Understand when it is appropriate to use the tabindex attribute on interactive elements

Why Page Structure Is Important
01:09

A page title is one way a user can orientate themselves to a website and can be used to describe the topic or purpose of the page.

By the end of this unit you'll understand how a descriptive page title helps a user know what content a page contains, how to detail individual steps if the page is part of a sequence and extend this to include the website name to create a relationship between individual pages and the website as a whole.

Create Descriptive Page Titles
05:55

A good example of a descriptive title is the example of our company website, the text is "Web accessibility audit | CANAXESS".

Create Descriptive Page Titles Link
00:01

This is a short test to demonstrate your knowledge from the Create Descriptive Page Titles lecture.

Recap Create Descriptive Page Titles
3 questions

A language code helps screen reader and other assistive technology users identify text content and announce specific words and phrases correctly.

By the end of this lecture you'll understand the problem of language mismatch when a code isn't specified, be able add a correct language code to HTML pages and be able to localise pages even further by using a region code for a specific variant of a language.

Set The Page Language
05:26

Check the resources for links to a Stack Overflow question describing the differences between the language codes en and en-US and the W3C internationalisation page on language tags in HTML and XML.

Set The Page Language Links
00:03

This is a short test to demonstrate your knowledge from the Set the Page Language lecture.

Recap Set The Page Language
3 questions

Page content which repeats across multiple pages is a challenge for keyboard and screen reader users if there is no way to avoid the content.

By the end of this lecture you'll be able to create skip links which navigate to different parts of the page and if necessary, render the skip links hidden until a keyboard user encounters them.

Bypass Repeating Content
07:29

The skip links on our website demonstrate navigating to Main Content, Newsletter Signup and the Footer as these are areas which we've decided keyboard or screen reader users may want to navigate to.

Bypass Repeating Content Link
00:02

This is a short test to demonstrate your knowledge from the Bypass Repeating Content lecture.

Recap Bypass Repeating Content
3 questions

Headings provide a visual hierarchy that breaks up content and allows a user to easily scan the page.

At the end of this lecture you'll be able to use headings to provide a coherent structure to a webpage. You'll understand you don’t need to use all heading levels, and the heading levels you do use need to be applied in a sequence and that sequence not skipped.

Preview 05:17

This is a short test to demonstrate your knowledge from the Create Logical Headings lecture.

Recap Create Logical Headings
3 questions

Landmark regions are an accessibility feature that help identify the high-level regions of a page for screen reader users.

By the end of this lecture you'll be able to understand the accessibility support HTML5 landmark regions provide and confidently begin adding the most common landmarks of header, footer, main, article and nav to your pages.

Add HTML5 Landmark Regions
05:26

This is a short test to demonstrate your knowledge from the Add HTML5 Landmark Regions lecture.

Recap Add HTML5 Landmark Regions
3 questions

Every interactive element on a webpage receives keyboard focus when the user presses the tab key.

By the end of this lecture you'll understand how an incorrect tabindex value can adversely affect the keyboard navigation of a webpage. You'll be able to hide content from the keyboard tab sequence using the value -1, introduce content into the regular keyboard sequence using a value of 0 and understand nothing good ever comes from a positive tabindex value.

Preview 07:21

This is a short test to demonstrate your knowledge from the Avoid an Artificial Tabindex lecture.

Recap Avoid An Artificial Tabindex
4 questions

We spoke about some of the ways a page can be structured better to improve its ability to be navigated by screen reader and assistive technology users.

Good accessibility is making the things you see (the content) accessible as well as the things you can’t see (the structure).

Key Takeaways For Building The Structure Of A Page
01:11

This module has explained why the accessible structure is important. Now it’s your job to apply all what you’ve learnt to the demo website ACME fashion house.

Activity Building The Page Structure
01:06
+ Adding Page Level Content
10 lectures 45:45

Page level content is what the user interacts with, this could be images, links or even datatables.

In this module we'll discuss:

  • How to choose an accessible colour combination, and use tools to make the job easier

  • The difference between decorative and descriptive images, where both have an ALT attribute but not always require ALT text

  • How semantic elements can be used to give content more meaning to assistive technology

  • Making sure focus styles are visually distinct when navigating from the keyboard and mouse

  • Grouping related links together with ordered and unordered lists

  • Providing descriptions for datatables and identifying column and row headers using the scope attribute

What Is Page Level Content
01:09

Colour contrast is really important for users with visual impairments.

At the end of this lecture you'll be able to identify and apply an accessible colour contrast. You'll understand the WCAG 2.1 guidelines for colour contrast but appreciate that they're very technical and instead leverage the support of a free tool to make it easier for you to choose a colour combination.

Choose Accessible Colours
06:05

This is a short test to demonstrate your knowledge from the Choose Accessible Colours lecture.

Recap Choose Accessible Colours
1 question

For vision impaired users every image needs to provide a text alternative, which is a way for the user to understand what the image is describing.

At the end of this lecture you'll learn how a visually impaired user can understand an image when they can't see it. Understand when to apply succinct ALT text to describe a descriptive image and when to use blank ALT text to ignore a decorative image.

Preview 05:09

This is a short test to demonstrate your knowledge from the Decorative & Descriptive Images lecture.

Recap Decorative & Descriptive Images
3 questions

Semantic elements are HTML elements which provide a structure and meaning to the content on the webpage.

At the end of this lecture you’ll understand how semantic elements can be used to structure a page better, and how that structure is then communicated by a screen reader. You’ll also understand that when semantic elements are used the HTML code becomes easier to read as there is less reliance on DIV and SPAN elements.

Use Semantic Elements
07:55

This is a short test to demonstrate your knowledge from the Use Semantic Elements lecture.

Recap Use Semantic Elements
3 questions

The often-overlooked way of navigating a website is via the keyboard.

By the end of this lecture you'll be able to understand why a clear indicator for focused elements is required and confidently apply CSS focus styles for mouse and keyboard navigation onto all interactive elements. And you'll also be able to ensure the focus styles are consistent between different modes of navigation.

Add Keyboard And Mouse Focus
05:36

This is a short test to demonstrate your knowledge from the Add Keyboard and Mouse Focus lecture.

Recap Add Keyboard And Mouse Focus
3 questions

Links are the core way to navigate between webpages, but creating link text which is understandable can be a challenge.

By the end of this lecture you'll be able to understand the benefits of clear link text, how to spot poor link text by using the reading aloud technique and ensure all links you add have text which is clear and understandable when read individually.

Preview 07:16

This is a short test to demonstrate your knowledge from the Write Clear Link Text lecture.

Recap Write Clear Link Text
3 questions

Sometimes links on a page are related, they may be links in the header such as navigation or links in the footer.

By the end of this lecture you'll understand the added extras that come with grouping related links together provides to the user, and also why you need to use this technique carefully, additionally you'll be able to identify which list element to use to trigger the screen reader to give out this extra information.

Group Related Links
05:32

This is a short test to demonstrate your knowledge from the Group Related Links lecture.

Recap Group Related Links
3 questions

The table element is the best way to display tabular data.

By the end of this lecture you'll understand how a screen reader user can navigate tables. How to apply table headers, use the scope attribute to associate data cells with the headers and provide a short summary using the caption element.

Use Datatables For Tabular Data
04:43

This is a short test to demonstrate your knowledge from the Use Datatables for Tabular Data lecture.

Recap Use Datatables For Tabular Data
3 questions

Page level content is what people can interact with.

By adding a little more markup or using it slightly differently means many more users can have the opportunity of interacting with and understanding the content.

Key Takeaways For Adding Page Level Content
01:03

This module has explained why semantic elements, grouping mechanisms and consistent focus effects are important. Now apply all what you've learnt to the demo website ACME fashion house.

Activity Adding Page Level Content
01:17
+ Structuring A Web Form
12 lectures 44:14

Forms are the cornerstone to every website. With a form, users can contact the site, login, register, comment and even buy items.

In this module we'll discuss:

  • How users may typically navigate a form and why it’s important to build according to accessibility principles

  • The benefits of using labels and associating them to form elements to create a programmatic relationship

  • Ensuring any data formats and data constraints are easily identified and understood

  • Identifying similar controls and grouping them together using fieldset and legend elements

  • Applying solid error handling patterns, which are a combination of inline errors supported by a global validation summary listing all errors

Preview 00:56

The way a form is built can make it very easy or very hard for users navigating in a non-traditional way. By building forms with an understanding of several ways people may interact with it means we can build a form which is more accessible to all, and forms built with accessibility principles in mind are easier for everyone to use.

Preview 00:51

Nearly all form elements need a label. When a label doesn’t provide enough information describing what to enter, more errors are likely.

By the end of this lecture you'll understand why labels are critical in helping a user understand the type of input a form control requires and you'll know how to use the FOR and ID attributes to create a programmatic relationship which triggers the screen reader to announce the label when the control receives keyboard focus.

Preview 05:31

This is a short test to demonstrate your knowledge from the Add Labels To Controls lecture.

Recap Add Labels To Controls
3 questions

If data is required to be a specific format or in a specific sequence this needs to be communicated.

At the end of this lecture you'll understand why formatting information must also be conveyed to the user and you’ll be able to add this extra information to any existing label. This extra information when combined with the previous lectures technique of programmatically associated labels will enhance a label which whilst already did a good job of explaining the type of data, now also describes any specific formatting requirements as well.

Identify Data Formats
05:39

This is a short test to demonstrate your knowledge from the Identify Data Formats lecture.

Recap Identify Data Formats
3 questions

Giving the user advanced notice of what they are required to complete on a form makes it much easier for them and reduces errors.

At the end of this lecture you'll understand why using the red asterisk is not the most accessible way for identifying mandatory fields, and introduce an alternative method which achieves the same result - that is marking up a form field which is mandatory, but in a way which is accessible and friendlier.

Highlight Required Input
05:49

This is a short test to demonstrate your knowledge from the Highlight Required Input lecture.

Recap Highlight Required Input
3 questions

Grouping related controls together can help a user understand relationships more clearly between components.

At the end of this lecture you'll understand how to group related form controls together using semantic HTML to allow screen reader users to understand related controls. You'll understand that although grouping is a good way of creating relationships which are conveyed without relying on the way components are arranged, the technique should be used only when necessary.

Preview 05:29

This is a short test to demonstrate your knowledge from the Group Related Controls lecture.

Recap Group Related Controls
3 questions

Forms may apply validation when a user has tabbed to another control, may group many errors together to make it easier to find problems or provide more details surrounding various issues to help reduce errors a user may make.

Accessible form validation isn't difficult, but it does require applying several patterns in a particular way to maximise a screen reader users navigation and helping a user understand the form.

Handle Errors
00:51

Unless error messages are coded correctly they won't be announced by a screen reader and the user won't know the error exists.

At the end of this lecture you'll understand the placement of the error message in the HTML code is crucial for screen reader user understanding when a control is in error. You'll be able to avoid inline validation patterns which remain hidden for screen reader users and instead apply accessible inline validation patterns.

Use Inline Errors
05:05

This is a short test to demonstrate your knowledge from the Use Inline Errors lecture.

Recap Use Inline Errors
3 questions

Error suggestions are an additional way to help users complete a form. The error message can be used to tell the user not only that an error has occurred but what caused it and how it can be avoided.

At the end of this lecture you'll understand that inline error messages can be used to not just inform the user what they have entered incorrectly but also as a way to suggest what they can enter to minimise further errors. And we'll demonstrate 3 common error patterns which cover a majority of error scenarios.

Suggest Corrections
06:03

This is a short test to demonstrate your knowledge from the Suggest Corrections lecture.

Recap Suggest Corrections
3 questions

Grouping all errors together at the top of a form can make it easier for a screen reader user to understand quickly if a form is in error.

At the end of this lecture you'll understand how to assemble all page errors together using a validation summary region. How to use correct markup when grouping the errors and how to return focus to this region if the page is returned in error.

Use A Validation Summary
05:12

This is a short test to demonstrate your knowledge from the Use A Validation Summary lecture.

Recap Use A Validation Summary
3 questions

Accessibility in online forms is applying several accessibility techniques together so they become complementary to each other. Ordinarily each technique on its own provides only a very small accessibility improvement, but when combined together provide an online form that follows best practice accessibility and has been improved for many users.

Key Takeaways For Structuring a Web Form
01:10

This module has explained how to improve the structure of a webform to make it more intuitive for people with disabilities to use. Now apply all what you've learnt to the demo website ACME fashion house.

Activity Structuring a Web Form
01:38
+ Conclusion
11 lectures 14:49

Each lecture on its own has taught you a small part of building with accessibility in mind, but as the course has progressed and more modules and units have been taught your skills and knowledge have increased. Through this course you’ve understood accessibility is a layering process, where each technique builds upon the last and ultimately results in a better digital experience for all users.

Recap Of What You Have Learnt
06:10

Web accessibility is discussed heavily online, be part of the conversation and listen to what others have to say.

In this lecture we’ll discuss how to be involved with the numerous conversations about accessibility happening online, how to find them and what you can learn.

Be Involved In The Conversation Online
02:13

People to consider following on Twitter, the list isn't exhaustive and will continue to be updated.

External Twitter Links
00:02

There are many books on web accessibility available each offering a slightly different perspective. We’ve listed several books and links which we encourage you to consider reading in the resources section of this lecture.

Books To Get About Accessibility
01:28

These are books which we’ve found useful for our own learning and improving our understanding on technical and cultural web accessibility. This list isn’t exhaustive, and we will continue to be updated.

Books To Get About Accessibility Links
00:05

Just as there are several books available about accessibility, many people blog about accessibility as well. We’ve listed links to blogs which we encourage you to consider reading in the resources section of this lecture.

Websites And Blogs To Read More About Accessibility
01:18

These are websites and blogs that we use in our day to day work to keep on top of emerging trends in web development and the impact they may have on web accessibility. This list isn’t exhaustive, and we will continue to be updated.

Websites And Blogs To Read More About Accessibility Links
00:02

Now you’ve reached the end of the course the support doesn’t end. Signup to the CANAXESS newsletter for accessibility hints and tips and reach out to me on Twitter and email me to celebrate your wins and successes and help you find answers to your accessibility problems.

Reach Out To Me
02:16

Email, follow me on Twitter and connect with me on LinkedIn.

Reach Out To Me Links
00:00

Now it's your chance to provide feedback to us. What worked, what didn’t work, what could be done better? We tried to make this course a fundamentals course and could only add so much.

Feedback Survey And Teacher Evaluation
01:11

Link to the end of course survey. What worked, what didn’t work, what could be done better?

Feedback Survey And Teacher Evaluation Link
00:02
Requirements
  • You need to be comfortable with writing HTML and CSS in a text editor
  • A mobile phone screen may be fine for viewing this course, but you'll want something larger for the hands on exercises
  • You will need either a desktop or laptop computer
  • We recommend using Google Chrome or Mozilla Firefox and ensure they're up-to-date but Microsoft Edge is acceptable as well
  • This course is hands-on and interactive, you need to be willing to do the lecture quizzes and end of module activities
Description

Note. Our course material is continually evolving. This course will be updated for free throughout 2020 and is the one stop shop for everything you need to begin building accessible websites. This is the best online web accessibility course available at a very affordable price.

This course is designed to teach you the fundamentals of web accessibility and how to apply those techniques to websites that you create. The modules are organised into categories grouping accessibility techniques to the relevant parts of a web page.

Each lecture explains one accessibility concept only and after every lecture there is a quiz to complete followed by the end of module activity applying all you've learnt onto a demo website. Most lectures are approximately 5 minutes long with no lecture being over 10 minutes in length.

You will learn:

  • An overview of web accessibility guidelines and WCAG 2.1

  • Build the structure of a page using a skeleton of accessibility support

  • Create content in an accessible way

  • Improve the structure of web forms using accessibility best practice error handling and validation patterns

  • Apply accessibility techniques to a demo website hosted on GitHub

This course gives you practical reusable patterns and best practice accessibility examples to apply to your projects. Web accessibility is fast becoming a required skill when developing for the web. The accessibility guidelines can be difficult to understand and challenging to apply. It's often left up to developers to try and do their best making content accessible by attempting to read and understand very complex technical guidelines.

Employers are looking for developers with an edge, web accessibility is that edge. Understanding how people with disabilities navigate a website and how you can make the experience better will set you apart from other developers. If you work in website or software development, UX or UI design in any frontend or backend technology this course is for you.

Web accessibility is more important than ever with more and more services are moving online. Unless these services are accessible the web can become a huge barrier for people with disabilities rather than a great opportunity to help with independent living.

Who this course is for:
  • Developers who want to get hands-on and really understand and become familiar with web accessibility and common accessibility patterns for the websites and web applications they build.
  • UI designers who need to understand the accessibility constraints for building web UI's.
  • Software architects and business analysts who want to build in accessibility requirements early in the decision making process.