Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

How to Make Your Website Accessible

Web Squadron via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn how to make your website accessible through this comprehensive 38-minute tutorial that provides updated guidance for 2025 on implementing web accessibility best practices. Master the fundamentals of web accessibility by exploring language selection, installing essential code snippets including colour contrast checkers and font clamp calculators, and implementing proper HTML semantic structure for headers and footers. Discover when and how to use alt-text versus aria-labels for different types of content, including site logos, image logos, and SVG icons, while understanding the critical importance of maintaining proper HTML heading tag hierarchy. Explore WCAG 2.1 AA colour contrast requirements and learn to distinguish between descriptive buttons that don't need aria-labels and icon-only buttons that do require them. Understand the differences between images with alt-text descriptions and container background images, and determine when aria-labels are necessary for add-to-cart buttons, pop-ups, and interactive icons. Implement hidden tooltips for accordion navigation, ensure proper form labeling, and add captions and controls to videos while incorporating pause buttons for background videos. Address common issues with skip-to-content functionality and enhance user experience with focus styling and social icon accessibility. Gain practical knowledge through hands-on examples, code snippets, and CSS implementations that will help you create more inclusive web experiences for users with assistive technology.

Syllabus

00:00:00 This is Why You will Rock Accessibility
00:01:04 Language Selection
00:01:14 Install Code Snippets Trust Me
00:02:21 HTML Tags for Header and Footer Templates
00:04:05 Using Alt-Text or Aria-Labels
00:04:55 Site Logo with Alt-Text and No Aria-Label
00:06:50 Image Logo with Alt-Text and No Aria-Label
00:07:27 SVG/Icon Logo with Alt-Text and an Aria-Label
00:09:53 HTML Heading Tag Hierarchy
00:13:06 Colour Contrast that meets WCAG 2.1 AA
00:17:34 Descriptive Buttons don’t need Aria-Labels
00:18:19 Icon-Only Buttons do need Aria-Labels
00:20:02 Images and Alt-Text Descriptions versus Container BG Images
00:21:24 Do we need Aria-Labels with Add to Cart or Pop-Up Buttons?
00:23:21 You do need Aria-Labels with Icons that have actions
00:24:05 Add a Hidden Tooltip to help navigating the Accordion
00:26:59 Use Labels with Forms
00:27:38 Ensure Videos have Captions and Controls
00:28:32 Add Pause Buttons for Background Videos
00:29:07 Skip to Content doesn’t always work
00:34:58 Bonus Extra Advice about Social Icons
00:35:26 Bonus Extra Focus Styling
00:36:37 Conclusion and Start Thinking Ahead

Taught by

Web Squadron

Reviews

Start your review of How to Make Your Website Accessible

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.