course materials
All the essential ingredients from Baking the Blueprint for Accessible Design in one place.
Whip up some accessibility knowledge with our course materials. Below, we provide everything you knead to create inclusive designs. You’ll find a fully baked list of key terms and definitions, accessibility checklists to ensure your projects rise to the occasion, and a sprinkle of extra resources to sweeten your workflow.
Terms & definitions
A11Y- Short for "accessibility," like the secret ingredient that makes sure everyone can enjoy the final recipe—derived from the 11 letters between "a" and "y."
accessible design- Like gluten-free or vegan treats—specifically crafted to accommodate unique dietary needs, ensuring everyone can indulge.
alt text- The "recipe notes" that describe images, providing essential details for those using screen readers or when images fail to load.
assistive technology (screen readers)- The oven mitts for your design—tools like screen readers that help everyone access your content.
back-end developer- A developer who works on the server, database, and logic that power a website behind the scenes.
brand- Your bakery’s (or businesses’) unique flavor—the overarching story and emotional experience you serve your audience.
branding- Your bakery’s (or businesses’) unique flavor—the overarching story and emotional experience you serve your audience.
captions- Text that appears on a video to represent spoken dialogue and important sounds
contrast The sugar and salt balance—it ensures the most important elements stand out, especially for those with visual impairments.
CSS- the frosting, sprinkles, and piping work that make a cake look appealing. It styles and decorates the raw structure (HTML) to create a visually delightful experience
dead text- The "stale dough" of design—text embedded in images that cannot be accessed by assistive technologies or indexed by search engines.
dynamic layouts- The "adjustable baking pans" of design—layouts that adapt seamlessly to different devices and screen sizes, enhancing usability and readability.
focus indicators- The "piping" on your digital designs—visual highlights that show which interactive element is selected, aiding users navigating via keyboard.
front-end developer- A developer who builds and designs the parts of a website that users interact with.
full-stack developer- A developer skilled in both front-end and back-end development.
headings- The "layers" of your cake—structured text elements (Title, Heading 1, Heading 2… ) that organize content hierarchically for better navigation and readability.
HTML- HTML is the base cake batter, forming the essential structure of a webpage before any frosting or decorations are added. Without a solid HTML foundation, your website (or cake) won’t hold up properly
information architecture- Information architecture is like organizing your baking station so that flour, sugar, and mixing bowls are in logical places. When everything is well-structured, it’s easier (for both bakers and website users) to navigate efficiently.
keyboard navigation- The "rolling pin" of accessibility—a tool that allows users to navigate your website efficiently using only a keyboard, crucial for users with mobility impairments.
layout- The way you "slice" your loaf—how your information is organized to make it easy to consume.
links The "breadcrumbs" that guide users through your digital bakery, connecting them to different pages or sections with meaningful, descriptive labels.
live text- The "fresh ingredients" of digital content—text rendered as actual text (not an image), making it readable for assistive technologies and search engines.
operable- "Like a rolling pin or mixer that works for everyone, ensuring your tools are accessible and functional no matter the skill level.
perceivable- "The aroma wafting from the oven—it’s how everyone notices and enjoys your baked creation, whether visually, through touch, or by scent (alternative ways to experience content).
POUR- Perceivable | Operable | Understandable | Robust
semantic HTML- using precise ingredient labels in a recipe—calling for “granulated sugar” instead of just “sugar” so that bakers (or browsers and assistive technologies) understand exactly what’s needed
SEO (Search Engine Optimization)- The practice of improving a website’s content and structure to rank higher on search engines. Making sure your bakery is on the main street instead of a hidden alley, so more customers (search engines) can find it easily.
transcript- A written version of the spoken content in a video or audio file
typography- The flour in your recipe—the foundation of how your content is "readable" and understood.
understandable "The recipe card written plainly, with no confusing steps—everyone can easily follow along and get great results.
understandable- Recipes must be clear and simple to follow.
validated HTML- HTML that has been checked to ensure it follows web standards and has no errors. Like double-checking a recipe to make sure all measurements are correct before baking to avoid a disaster.
visual identity- The icing or sprinkles on the cake—how your brand looks, including logos, colors, and typography.
WCAG- Web Content Accessibility Guidelines; standards for making web content accessible to all users.
checklists
Print Accessibility Checklist
- Use web-safe sans-serif fonts (Arial, Roboto, Helvetica, Verdana).
- Use relative font sizes (e.g., rem, em) instead of fixed pixels.
- Allow text resizing up to 200% without loss of function.
- Avoid justified text (creates uneven spacing).
- Ensure text can be read across different screen sizes and orientations.
Color & Contrast
- Follow WCAG contrast ratios (4.5:1 for small text, 3:1 for large text).
- Do not rely on color alone—use icons, underlines, or text styles to differentiate content.
- Ensure good contrast across different devices and display settings.
Layout & Readability
- Structure content using headings.
- Break content into short, scannable sections with clear headings.
- Ensure a logical reading order for screen readers and keyboard navigation.
Inclusivity & Alternative Formats
- Ensure all images have alt text for screen reader users.
- Offer transcripts for audio and video content.
- Provide multiple navigation options (keyboard, voice control, touch).
- Support zoom and reflow for better readability on smaller screens.
Digital Accessibility Checklist
- Use Proper Landmark Elements – Structure content with <header>, <nav>, <main>, <section>, and <footer> to help screen readers and assistive technologies navigate efficiently.
- Label Interactive Elements Clearly – Use <button> instead of <div> for clickable elements, and include aria-label or descriptive text when needed.
- Ensure Forms Are Accessible – Use <label> elements for inputs, associate them with form fields using the for attribute, and provide clear error messages.
- Use Descriptive Links & Buttons – Instead of "Click here," use meaningful text like "Download the accessibility guide" to improve context for screen reader users.
- Enable Keyboard Navigation – Ensure all interactive elements are focusable (tabindex when necessary) and that users can navigate using only the keyboard.
ARIA Roles
- Use Landmark Roles to Define Page Structure – Roles like role="banner", role="navigation", role="main", and role="contentinfo" help assistive technologies navigate content more efficiently.
- Enhance Non-Semantic Elements with ARIA – If using <div> or <span> for interactive elements, apply ARIA roles like role="button" or role="dialog" to define their function.
- Provide ARIA Live Regions for Dynamic Content – Use aria-live="polite" or aria-live="assertive" to announce updates to content without disrupting the user’s experience.
- Ensure Forms Are Accessible with ARIA Labels – Use aria-labelledby and aria-describedby to provide additional context for form fields, especially when standard <label> elements are not sufficient.
- Manage Focus with ARIA Roles – Use aria-hidden="true" to hide non-essential content from screen readers and aria-expanded="true" to indicate when menus, dropdowns, or accordions are open.
Keyboard Navigation
- Ensure All Interactive Elements Are Focusable – Use tabindex correctly so users can navigate buttons, links, and form fields with the Tab key.
- Maintain a Logical Tab Order – Follow a logical, intuitive sequence to prevent confusion (e.g., left to right, top to bottom).
- Provide Visible Focus Indicators – Ensure focus states (like a visible outline or highlight) are clear so users know where they are on the page.
- Enable Keyboard Activation – Ensure users can interact with all elements (buttons, menus, modals, etc.) using Enter or Space, not just a mouse.
- Avoid Keyboard Traps – Users should never get stuck in an element; always allow an easy way to navigate out (e.g., Esc to close a modal).
Dynamic Layouts
- Ensure Content Reflows Responsively – Use flexible grids, relative units (em, %, rem), and CSS media queries to maintain readability across different screen sizes.
- Maintain a Logical Reading Order – Structure HTML elements in a meaningful sequence so that resizing or reordering doesn’t disrupt screen reader or keyboard navigation.
- Test with Zoom & Text Resizing – Ensure content remains usable when zoomed to 200% or when users increase text size without breaking the layout.
- Avoid Overlapping & Hidden Content – Ensure dynamically added or resized content doesn’t obscure essential elements or become inaccessible.
- Provide Clear Navigation & Landmarks – Use ARIA landmarks (role="banner", role="main", role="navigation") and skip links to help users navigate efficiently.
Accessible Forms
- Use <label> Elements for Inputs – Always associate labels with form fields using the for attribute (<label for="email">Email Address</label>) so screen readers can identify them.
- Ensure Proper Focus Order – Use a logical structure so users can navigate fields using the Tab key, and avoid disrupting the natural tabbing order with tabindex.
- Provide Clear Error Messages & Instructions – Use aria-describedby to link inputs to help text and dynamically update error messages so they’re announced to screen readers.
- Use Fieldsets & Legends for Grouped Inputs – Wrap related form elements (e.g., radio buttons, checkboxes) in <fieldset> with a <legend> for better context.
- Enable Keyboard & Screen Reader Compatibility – Ensure all inputs, buttons, and dropdowns are navigable with a keyboard and that ARIA roles (aria-required, aria-invalid) provide additional cues when necessary.
Interactive Accessibility Checklist
- Use sans-serif fonts (Arial, Helvetica) for better legibility.
- Minimum 12pt font size, 18pt+ for large print materials.
- Maintain consistent letter and line spacing (1.5x line spacing).
- Avoid decorative or script fonts for body text.
- Left-align text for readability.
Color & Contrast
- Ensure text/background contrast of at least 4.5:1 (small text) and 3:1 (large text).
- Avoid color-only indicators—use bold text, patterns, or icons for emphasis.
- Test for colorblind accessibility with tools like Adobe’s Color Blindness Simulator.
- Consider readability in various lighting conditions (e.g., bright light, dim light).
Layout & Readability
- Use clear headings (H1, H2, etc.) to organize information.
- Keep text sections short and avoid dense paragraphs.
- Use ample whitespace between text blocks and elements for clarity.
- Avoid cluttered designs with too many elements close together.
- Bold or highlight critical information (e.g., store hours, allergens, key messages).
Inclusivity & Alternative Formats
- Provide large-print versions (minimum 18pt font, high contrast).
- Offer Braille or tactile elements for visually impaired users.
- Use QR codes to link to digital versions of print materials.
- Provide multilingual print versions when applicable.
resources
- Adobe Color Contrast Checker – Test color contrast for readability.
- WAVE Accessibility Tool – Check contrast and text legibility in digital PDFs.
- Adobe Acrobat Accessibility Checker – Ensure PDFs meet accessibility standards.
Learning Resources
- WCAG 2.1 Guidelines – Use relevant contrast and readability criteria for print.
- Plain Language Guidelines – Best practices for making written content accessible.
- Inclusive Print Design Basics – Resources on accessible typography and contrast.
Print Accessibility Resources
Alt Text & Image Accessibility
- WAVE (Web Accessibility Evaluation Tool) – Checks if images have meaningful alt text.
- Adobe Acrobat Accessibility Checker – Ensures PDFs have alt text and are accessible.
- axe DevTools – Browser extension for checking image descriptions in digital content.
- YouTube Automatic Captions – Auto-generates captions but requires manual review.
- Otter.ai – Creates transcripts for meetings, videos, and podcasts.
- Rev.com – Offers professional captioning and transcript services.
- NVDA (NonVisual Desktop Access) – Free screen reader for Windows.
- VoiceOver (macOS/iOS) – Built-in screen reader for Apple devices.
- JAWS (Job Access With Speech) – A widely used screen reader with advanced navigation features.
- Microsoft Accessibility Checker – Identifies accessibility issues in Word, PowerPoint, and Excel.
- NoCoffee Vision Simulator – Simulates visual impairments, including motion sensitivity.
- Accessibility Insights – Checks for motion-based accessibility issues.
Learning Resources
General Digital Accessibility
- Web Content Accessibility Guidelines (WCAG) – The core standard for accessible digital content.
- Microsoft’s Accessibility Guide – Best practices for making Word, Excel, and PowerPoint documents accessible.
- Google Docs Accessibility Guide – How to ensure Google Docs are readable by screen readers.
- WebAIM Alt Text Guide – How to write effective and meaningful alt text.
- Adobe’s Guide to Alt Text for PDFs – Instructions for adding alt text in PDFs.
- W3C Captions & Transcripts Guidelines – Standards for making audio and video content accessible.
- Captioning Best Practices (DCMP) – Formatting guidelines for high-quality captions.
- Screen Reader Testing Guide – How to test and optimize documents for screen readers.
- Apple’s VoiceOver Guide – How to make digital content work with VoiceOver.
interactive Accessibility Resources
General Web Accessibility Testing
- WAVE (Web Accessibility Evaluation Tool) – Checks for accessibility issues, including form labels, ARIA roles, and interactive elements.
- axe DevTools – Browser extension for automated accessibility testing of interactive content.
- Google Lighthouse – Audits web pages for accessibility, including ARIA roles and keyboard navigation.
- Accessibility Insights – Automated and guided testing for detecting issues in forms, buttons, and interactive components.
- NVDA (NonVisual Desktop Access) – Free screen reader for Windows to test interactive elements.
- VoiceOver (macOS/iOS) – Built-in Apple screen reader for navigating web forms and interactive UI elements.
- JAWS (Job Access With Speech) – Advanced screen reader used for professional accessibility testing.
- Keyboard Navigation Testing Guide (W3C) – Best practices for ensuring all interactive elements are accessible via keyboard.
- ARIA Validator – Checks for proper ARIA roles and attributes in web content.
- aXe-Core ARIA Checker – Identifies ARIA misuse and suggests improvements.
- HTML Validator (W3C) – Ensures proper semantic HTML structure, which improves accessibility.
Learning Resources
ARIA & Interactive Components
- ARIA Authoring Practices Guide (W3C) – Best practices for implementing ARIA roles in interactive web components.
- Using ARIA in Forms (MDN) – Guide for adding ARIA attributes to web forms.
- WebAIM: Accessible Forms – Step-by-step guide to creating screen-reader-friendly forms.
- WCAG 2.1 Guidelines for Forms – Official accessibility standards for form inputs, error handling, and labels.
- Reducing Motion Sensitivity (MDN) – Best practices for animations and motion effects.
- Captions & Transcripts Guide (W3C) – How to make interactive video and audio content accessible.
