Introduction to Web Accessibility WCAG 2.2

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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?