Introduction to Web Accessibility WCAG 2.1

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

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

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.

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

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.

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

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.

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

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.

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

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.

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

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

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.

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.

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

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.

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.

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

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

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.

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

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

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).

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.

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

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.

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

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

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.

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

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.

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

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

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.

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

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.

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

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.

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.

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

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.

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

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.

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

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

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.

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.

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

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.

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

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.

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

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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

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.

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