HTML Mastery: Accessibility, ARIA, Performance & Web Components
Audit real-world markup like a senior front-end engineer: text alternatives, contrast maths, accessible names, ARIA, keyboard and focus order, live regions, responsive images, lazy loading, layout shifts, script loading, custom elements and Shadow DOM, with every answer checked as you go.
- One-time payment
- Instant access right after payment
- Secure checkout with Stripe
About this course
This advanced course trains you to audit HTML like a senior front-end engineer. In 22 hands-on labs you read real markup and work out what browsers and screen readers do with it: you compute contrast ratios from hex codes, resolve accessible names, validate ARIA roles and states, trace tab order and roving tabindex, debounce live regions and check form labels. On the performance side you pick srcset candidates, evaluate sizes attributes, resolve picture sources, find lazy LCP images, score layout shifts and order defer, async and module scripts. You finish with custom element lifecycles, Shadow DOM slots and a full release audit. First lesson free.
Lessons
- Text Alternatives: Auditing Every Image on a PageFree
- Colour Maths I: From Hex Code to Relative Luminance Locked
- Colour Maths II: Contrast Ratios and WCAG Thresholds Locked
- Accessible Names: Which Source Wins? Locked
- The First Rule of ARIA: Implicit, Redundant and Missing Roles Locked
- ARIA States: Valid Values and a Toggle Trace Locked
- Landmarks and the Heading Outline Locked
- Tab Order: Native Focus, tabindex 0, -1 and Positive Values Locked
- Composite Widgets: Roving tabindex and Arrow-Key Traces Locked
- Target Size and Focus Indicators: Measuring in CSS Pixels Locked
- Accessible Forms: Labels, Descriptions and autocomplete Locked
- Live Regions: Polite, Assertive and Debounced Announcements Locked
- Responsive Images I: srcset Width Descriptors and Device Pixel Ratio Locked
- Responsive Images II: Computing the sizes Attribute Locked
- The picture Element: Formats, Art Direction and First Match Locked
- Lazy Loading, fetchpriority and the Fold Locked
- Layout Shifts: width, height, aspect-ratio and the CLS Score Locked
- Script Loading: defer, async and type=module Execution Order Locked
- Critical Path: preconnect, preload and Late-Discovered Resources Locked
- Custom Elements: Lifecycle Callbacks Traced Locked
- Shadow DOM: Slot Assignment and Style Encapsulation Locked
- Final Project: Page Audit and Release Gate Locked