Tutorials
Short, focused articles on one idea at a time. Filter by level or type, or search for a topic.
-
Automated accessibility testing and its limits
Run axe and Lighthouse, read their results, and know the large share of issues only manual testing finds.
-
Testing with a screen reader: NVDA and VoiceOver basics
Start NVDA or VoiceOver, navigate by headings, landmarks and forms, and note what to listen for.
-
Accessible media: captions, transcripts and audio description
What WCAG requires for audio and video, writing captions and transcripts, and avoiding autoplay problems.
-
Building an accessible modal dialog
Use the dialog element for modals: focus moves in and back, Escape closes, the background is inert.
-
Accessible disclosures, accordions and tabs
Build show-hide components and tabs with the right markup, keyboard support and ARIA states.
-
Accessible navigation menus and dropdowns
Site navigation and dropdowns that work by keyboard and screen reader, and why app-style menu roles are usually wrong.
-
Live regions: announcing dynamic changes
Tell screen reader users about updates such as search results, saved messages and errors with live regions and status roles.
-
Motion, animation and vestibular disorders
Why motion can make people unwell, WCAG motion criteria, and implementing prefers-reduced-motion properly.
-
Accessibility in single-page apps
Announce route changes, move focus to new content and keep titles updated in client-rendered apps.
-
Running an accessibility audit and remediation plan
Scope an audit, combine automated and manual testing, record issues against WCAG, and prioritise fixes.
-
Complex widgets: comboboxes, grids and accessible charts
Patterns from the ARIA Authoring Practices Guide for comboboxes and data grids, and making charts understandable.
-
Choosing breakpoints from content, not devices
Find breakpoints where the layout breaks instead of copying device widths, and how many you really need.
-
Links or buttons? Choosing the right element
Links navigate and buttons act: the difference for keyboard and screen reader users, and fixing div buttons.
-
Responsive tables and wide content
Keep tables, code blocks and embeds usable on small screens without breaking the page.
-
Testing responsive designs in DevTools and on real devices
Device emulation, zoom testing at 200 and 400 percent, real-device testing and common responsive bugs.
-
Arrays
Indexed and associative arrays, nested arrays, adding and removing items, and the array functions you will use every day.
-
Container queries and container units
Make components respond to their container instead of the viewport, with container-type, @container and cq units.
-
Functions
Define functions with parameters, defaults and return types, understand scope, and use named arguments, arrow functions and closures.
-
Responsive navigation patterns
Menus that adapt from desktop to mobile: priority, off-canvas and disclosure patterns, with accessibility built in.
-
Loops: while, for and foreach
Learn while, do-while, for and foreach loops in PHP, when to use each one, and how to avoid infinite loops.