Introduction to Web Accessibility WCAG 2.1
- 3 hours on-demand video
- 15 articles
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- 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
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.
What the course covers, how its structured and what software is required to be downloaded.
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.
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.
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.
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 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.
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.
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).
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.
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.
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.
- 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
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.
- 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.