CF

Practical Accessibility - Practical Accessibility for web designers and developers

14h 47m 28s
English
Paid
This course is your guide to the world of web accessibility. It is designed to dispel myths, simplify complex topics, and provide you with practical skills for developing accessible websites and applications that everyone can use, including people with disabilities.

What Awaits You?

The course offers a structured program covering:

  • Basics of accessibility: how it differs from inclusivity and usability, and how these concepts affect design and development.
  • WCAG Guidelines: how to use accessibility standards in daily work.
  • Semantic HTML: how to choose the right elements and write code that is accessible.
  • Working with ARIA: when and how to use ARIA attributes, and what to do to avoid mistakes.
  • Testing with screen readers: setting up the environment and using it to find accessibility issues.
  • Accessible forms, images, notifications, and keyboard control elements.
  • Practical techniques: creating accessible names, using ARIA live regions, optimizing for forced color modes, and much more.

Who is the course for?

The course is designed for frontend developers, interface designers, JavaScript engineers, and backend developers who want to deepen their knowledge in the field of accessibility. No prior experience with accessibility is required to start learning.

What Will You Learn?

  • Identify and resolve common accessibility issues.
  • Develop accessible user interfaces from scratch.
  • Understand how your solutions impact people with disabilities.
  • Confidently apply your acquired knowledge in real projects.

"Practical Accessibility" is an intensive course that you can complete at your own pace, receiving useful tips and examples for immediate application. Become an expert in accessibility and make the internet better for everyone!

About the Author: Sara Soueidan

Sara Soueidan thumbnail

Sara Soueidan is a Lebanese front-end developer specialising in web accessibility and SVG — one of the most cited independent voices in both areas. She has worked on accessibility audits for major sites and publishes Practical Accessibility as the canonical paid course on accessibility for working developers and designers.

Her CourseFlix listing carries Practical Accessibility. Material is paid and aimed at front-end developers and designers ready to take WCAG conformance and inclusive design as serious professional disciplines.

Watch Online 40 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 40 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome to the Practical Accessibility course!
All Course Lessons (40)
#Lesson TitleDurationAccess
1
Welcome to the Practical Accessibility course! Demo
06:55
2
What is web accessibility.
24:05
3
The Web Content Accessibility Guidelines (WCAG)
20:21
4
Does satisfying WCAG criteria guarantee that your website is usable.
09:19
5
Implementing WCAG — Understanding and Techniques documents
08:18
6
Setting up a screen reader testing environment on your machine
13:18
7
What is the accessibility tree.
19:03
8
Semantic HTML accessibility
32:27
9
Creating hierarchy and aiding user navigation with HTML (Part 1)- Headings structure
37:40
10
Creating hierarchy and aiding user navigation with HTML (Part 2)- Landmarks
18:56
11
Buttons vs. Links – Semantics and Usability
15:14
12
Practical semantics- site-wide navigation
15:55
13
ARIA 101
32:41
14
Applied ARIA – creating a custom button component
13:41
15
Responsible ARIA – The Rules of ARIA Use in HTML
16:54
16
The ARIA Authoring Practices Guide
09:13
17
Disclosure widgets
21:39
18
Building an accordion component
18:23
19
Hiding content using HTML, CSS, and ARIA — which one should you use when.
30:50
20
Case Study- Inclusively-hidden custom-styled form controls
09:34
21
Accessible names and descriptions
16:15
22
Techniques for providing accessible names and descriptions using HTML and ARIA
23:58
23
Which accessible name is used when you provide more than one name to an element.
21:00
24
Accessible icon buttons
15:35
25
Concatenating accNames- using aria-labelledby to provide ‘DRY’ names to interactive elements
10:59
26
Label in Name
19:29
27
Enhancing a simple site navigation into an interactive drop-down navigation
34:23
28
Slide-out mobile navigation drawer
22:18
29
Page-level accessibility- Identifying pages by title
06:22
30
Page-level accessibility- What language does your page speak.
15:07
31
Accessible Images
40:39
32
Accessible Forms – Grouping and labelling form fields-v2
31:43
33
Accessible Forms- Validation (Part 1)
30:57
34
Accessible Forms- Validation (Part 2)
35:15
35
Accessible notifications with ARIA Live Regions (Part 1)
38:09
36
Accessible notifications with ARIA Live Regions (Part 2)
29:45
37
Designing accessible focus indicators_2
40:08
38
Providing navigational aid using skip links
17:44
39
Managing keyboard focus in custom widgets with the HTML tabindex attribute
26:10
40
Adapting your websites and applications to forced colors mode
37:06
Unlock unlimited learning

Get instant access to all 39 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What prerequisites should I have before enrolling in this course?
Before enrolling in the course, students should have a basic understanding of HTML, CSS, and JavaScript. Familiarity with web development concepts and experience in creating web pages will help in understanding the course material, especially when implementing accessibility features and using ARIA (Accessible Rich Internet Applications) techniques.
What kind of projects will I work on during the course?
The course includes several exercises that focus on building accessible components, such as creating a custom button with ARIA, building an accordion component, and enhancing site navigation into an interactive drop-down menu. These projects are designed to give practical experience in applying accessibility techniques to real-world web development scenarios.
Who is the target audience for this course?
This course is aimed at web designers and developers who want to improve the accessibility of their websites and applications. It's suitable for professionals who are responsible for creating and maintaining websites and need to ensure that their content is accessible to people with disabilities.
How does the depth of this course compare to other web development courses?
The course offers a focused exploration of web accessibility, covering both basic and advanced topics such as WCAG guidelines, ARIA techniques, and screen reader testing. Unlike general web development courses, it specifically targets the creation of accessible web content, making it highly specialized for those looking to enhance their skills in this area.
What accessibility tools are covered in the course?
The course covers several accessibility tools and techniques, including setting up a screen reader testing environment and using ARIA for creating accessible components. It delves into semantic HTML and the accessibility tree, providing a comprehensive toolkit for developing accessible web applications.
What topics are not covered in this course?
While the course thoroughly covers web accessibility, it does not delve into mobile application accessibility or advanced JavaScript frameworks. The focus is primarily on web-based content, using HTML, CSS, and ARIA to achieve accessibility.
How can the skills learned in this course benefit my career?
The skills acquired from this course are valuable for careers in web development, particularly in roles focused on user experience and front-end development. Understanding accessibility is increasingly important in the industry, and being proficient in this area can enhance employability and allow for the creation of more inclusive digital experiences.