216digital.
Web Accessibility

Phase 1
Web Remediation for Lawsuit Settlement & Prevention


Phase 2
Real-World Accessibility


a11y.Radar
Ongoing Monitoring and Maintenance


Consultation & Training

Is Your Website Vulnerable to Frivolous Lawsuits?
Get a Free Web Accessibility Audit to Learn Where You Stand
Find Out Today!

Web Design & Development

Marketing

PPC Management
Google & Social Media Ads


Professional SEO
Increase Organic Search Strength

Interested in Marketing?
Speak to an Expert about marketing opportunities for your brand to cultivate support and growth online.
Contact Us

About

Blog

Contact Us
  • Ease Into Motion: Smarter Animation Accessibility

    Imagine clicking into a website and being hit with swirling graphics, sliding panels, or a bouncing button that just won’t stop. For many people, that kind of animation isn’t just annoying—it’s physically harmful. Dizziness. Nausea. Migraines. Disorientation. For users with motion sensitivity, these effects are all too common.

    As developers, we love using motion to make our interfaces feel alive. But when it comes to animation accessibility, we need to be just as thoughtful about who we’re designing for. Great UI isn’t just beautiful—it’s inclusive. And making motion safer doesn’t mean removing it altogether. It just means giving people control.

    This guide breaks down what you need to know about motion sensitivity, how to comply with the Web Content Accessibility Guidelines (WCAG), and how to build user-friendly animation for your projects using CSS, JavaScript, and real-world techniques.

    Who’s Affected by Motion—and Why It Matters

    Motion sensitivity happens when animations or transitions trigger unpleasant physical reactions. This might include nausea, vertigo, blurry vision, headaches, or even migraines. It’s especially common for people with:

    • Vestibular disorders
    • Autism spectrum disorder
    • ADHD
    • Epilepsy

    In fact, over 35% of adults experience some kind of vestibular dysfunction by age 40. That’s not a small edge case—it’s a significant part of your user base.

    The Trouble With Flashing and Distractions

    Animations can also cause cognitive overload. Users with ADHD or processing differences may find it hard to stay focused when elements are constantly moving. Looping carousels or animated background transitions can pull attention away from the main content or calls to action.

    And then there’s photosensitive epilepsy. About 3% of people with epilepsy can have seizures triggered by flashing lights—especially red-on-black or high-contrast flickers. That’s why WCAG has strict guidelines around flash frequency.

    WCAG and Animation Accessibility: What to Follow

    Before diving into the specifics, it’s important to understand that these aren’t arbitrary rules—they exist to protect people. Animation accessibility is a fundamental part of inclusive design, and these guidelines offer a framework that helps you avoid unintentional harm.

    Key Guidelines

    • 2.2.2 – Pause, Stop, Hide: Any moving content that starts automatically must have a clear way to pause or hide it, unless the motion is essential.
    • 2.3.1 – Three Flashes or Below Threshold: Avoid flashing more than 3 times per second.
    • 2.3.3 – Animation from Interactions: If your animation happens because someone clicked, scrolled, or hovered—it still needs to be safe and optional.

    How to Apply These Guidelines

    • Don’t loop animations forever.
    • Offer controls to pause or stop motion.
    • Never rely on animation alone to convey important info—back it up with text or icons.

    Animation accessibility is about making sure motion adds value without harm.

    Using CSS to Respect Motion Preferences

    What Is @prefers-reduced-motion?

    This media query checks whether a user has asked for less motion in their operating system:

    @media (prefers-reduced-motion: reduce) {
      * {
        animation: none !important;
        transition: none !important;
      }
    }

    If users toggle Reduce motion in macOS, iOS, Windows, Android, or Linux, they’ll instantly get a calmer experience.

    Design Strategies

    • Remove parallax scroll and large translations.
    • Swap animated GIFs with a static frame or CSS background-image.
    • Tone down fades and slides—transitions shorter than 250 ms are usually fine.
    • Provide fallbacks that still communicate state changes (e.g., use color or underline instead of a shake animation to signal “invalid input”).

    Giving Users Control With JavaScript

    Even if someone’s system doesn’t request reduced motion, they should still have a choice. Here’s a simple example:

    <button id="toggle-motion">Toggle motion</button>
    <script>
      document.getElementById('toggle-motion').addEventListener('click', () => {
        document.body.classList.toggle('reduce-motion');
        localStorage.setItem('reduceMotion', document.body.classList.contains('reduce-motion'));
      });
      // Persist preference between visits
      if (localStorage.getItem('reduceMotion') === 'true') {
        document.body.classList.add('reduce-motion');
      }
    </script>

    Then, in your CSS:

    .reduce-motion * {
      animation: none !important;
      transition: none !important;
    }

    Let users decide what works for them. Animation accessibility is about empowerment.

    Pause on Hover or Interaction

    You can also pause motion when someone hovers or focuses:

    @keyframes spin { to { transform: rotate(360deg); } }
    .loader {
      animation: spin 1.5s linear infinite;
    }
    .loader:hover,
    .loader:focus-visible {
      animation-play-state: paused;
    }

    This small touch gives users breathing room without turning off design completely.

    Progressive Enhancement: Accessibility First

    Start safe, layer on flair. Treat the reduced‑motion version as the baseline and add richer animation only if the user hasn’t opted out. This progressive‑enhancement approach prevents regressions—future devs won’t accidentally forget animation accessibility because the “accessible” state is the default.

    /* Base styles: minimal motion */
    .button {
      transition: background-color 150ms ease-in;
    }
    /* Only animate if motion is OK */
    @media (prefers-reduced-motion: no-preference) {
      .button:hover {
        transform: translateY(-2px);
      }
    }

    You can combine media features to catch multiple needs:

    @media (prefers-reduced-motion: reduce) and (prefers-contrast: high) {
      /* Ultra-accessible styles */
    }

    Performance & UX Benefits of Reducing Motion

    • Battery & CPU savings on low‑power devices (less layout thrashing, fewer GPU layers).
    • A cleaner interface helps all users focus on content and calls to action.
    • Lower cognitive load means faster task success—key in e‑commerce checkouts or complex forms.

    When stakeholders balk at “turning off the fun stuff,” show how reduced motion often speeds up perceived performance and increases conversions.

    Testing for Motion Accessibility

    You don’t need to eliminate all animation—you just need to know when and where it matters.

    Use Tools Like:

    • PEAT (Photosensitive Epilepsy Analysis Tool): Checks flash frequency and contrast against seizure‑safe limits.
    • WAVE: Flags continuous animations and missing pause controls.
    • Google Lighthouse: Includes audits for @prefers-reduced-motion.
    • Manual Device Testing: Turn on Reduce motion in the OS and navigate your site—does anything still move?

    Combine automated scans with human walkthroughs—especially for pages heavy on micro‑interactions. Ask testers with vestibular or cognitive disabilities for feedback if possible.

    Responsible Animation Is Good UX

    Animation accessibility isn’t about banning creativity. It’s about respecting user choice, following WCAG, and providing explicit opt‑ins or opt‑outs. When you honor @prefers-reduced-motion, add site‑level toggles, and keep flashes below seizure thresholds, you deliver the best of both worlds: engaging motion for those who love it and a calm, usable experience for those who don’t.

    Need a quick check on your motion strategy—or a deep dive into ADA compliance across your entire front end? Schedule a personalized accessibility briefing with the team at 216digital. We’ll help you uncover hidden risks, refine your animation patterns, and build inclusive experiences that look amazing and feel great for everyone.

    Let’s create motion that moves people—in the right way.

    Greg McNeil

    May 21, 2025
    How-to Guides, WCAG Compliance
    Accessibility, animation, How-to, motion, WCAG, Web Accessibility
  • Color Contrast That Pops: Accessibility in Every Shade

    Color is one of the most powerful tools in a designer’s toolkit—but without the right contrast, even the most beautiful interface can become unreadable. For users with low vision or color blindness, low contrast isn’t just inconvenient—it can make content completely inaccessible. And while most developers know the basics of accessible design, color contrast often slips through the cracks when brand guidelines or fast-moving deadlines take over.

    This article isn’t a beginner’s primer—it’s a hands-on guide for developers who already know what WCAG is but want smarter, more practical ways to apply color contrast in real projects. From testing tools to design techniques to working with brand colors, we’ll cover how to create experiences that look sharp, function well, and work for everyone.

    Understanding Color Perception and Its Impact on Accessibility

    To build truly inclusive designs, it helps to understand how users perceive color in the first place. The human eye detects color based on hue (the type of color), saturation (how strong it appears), and lightness (how bright or dark it is). This is where the HSL (Hue, Saturation, Lightness) model becomes useful—it mirrors how people actually experience color and helps designers assess contrast more accurately.

    Now, pair that with accessibility data. Around 300 million people worldwide live with color blindness, and another 253 million have low vision. That’s not a small edge case—it’s a significant portion of your audience. For these users, poor color contrast can turn buttons, labels, and links into frustrating puzzles. A green button on a gray background might seem fine to a fully sighted user, but it can disappear entirely for someone with red-green color deficiency.

    By considering how color vision deficiencies affect perception, developers can make smarter choices—ones that improve usability for everyone without drastically changing their design.

    WCAG Guidelines on Color Contrast

    To guide these decisions, the Web Content Accessibility Guidelines (WCAG) lay out specific requirements. For Level AA compliance, normal text must have a color contrast ratio of at least 4.5:1. Large text—defined as 18pt or 14pt bold—can meet a slightly lower bar of 3:1. If you’re aiming for AAA (which is more stringent), the numbers jump to 7:1 and 4.5:1, respectively.

    But contrast isn’t just about text. It also applies to non-text elements like icons, buttons, graphs, and interactive controls. These need to be distinguishable too, especially for users navigating with limited vision or screen magnifiers.

    That said, not everything falls under these rules. Logos and purely decorative graphics are exempt. This makes room for brand expression, but it also challenges teams to strike the right balance: How do you honor brand colors without sacrificing clarity? The good news is that small adjustments can go a long way.

    Tools and Techniques for Evaluating Color Contrast

    So how do you check if your contrast choices meet the mark? Fortunately, there’s a wide range of tools designed to make this easy—no guesswork required.

    Online contrast checkers are a great place to start:

    • WebAIM Contrast Checker is fast and simple—just plug in your colors and get a pass/fail result.
    • TPGi’s Colour Contrast Analyser lets you test live screen elements with an eyedropper tool.
    • Coolors Contrast Checker is especially helpful when working within a palette—it gives instant feedback as you test combinations.

    To take your testing further, browser extensions can simulate what your site looks like to users with different types of color blindness:

    • Colorblindly and Dalton show you how your design holds up for users with vision deficiencies.
    • Color Enhancer for Chrome allows you to customize and tweak colors directly in the browser.

    For those who prefer working within browser developer tools, Chrome DevTools offers built-in accessibility checks. You can inspect elements, see real-time color contrast ratios, and even simulate vision impairments. Pair that with media queries like @prefers-color-scheme or @prefers-contrast, and you’ll be ready to serve more inclusive experiences automatically—based on a user’s own system settings.

    Best Practices for Implementing Accessible Color Contrast

    Once you’ve got the right tools, the next step is applying best practices to your design and development process.

    Start by designing with accessibility in mind from the beginning. Don’t rely on color alone to convey meaning. Pair colors with icons, patterns, or text labels—so if a user can’t see the red “error” outline, they can still read the “required field” message.

    Next, build testing into your workflow. Just like you check for responsive breakpoints or load time, checking for color contrast should be routine. Use automated tests, then follow up with human feedback to catch edge cases tools might miss.

    Also, remember to document your choices. A clear, shared record of approved color combinations and contrast ratios will help your team stay consistent across projects. Whether it’s a design system in Figma or internal guidelines in Notion, this documentation keeps accessibility top of mind for everyone involved.

    The Role of Browser Extensions in User Accessibility

    While developers work hard to build accessible designs, many users also rely on their own tools to improve visibility. Browser extensions like Colorblindly and Dalton allow users to adjust or simulate colors in a way that meets their personal needs.

    It’s important to remember that just because users can adjust colors, doesn’t mean developers shouldn’t strive for accessible defaults. By ensuring strong color contrast from the start, you make life easier for everyone—and reduce the need for users to rely on workarounds.

    Plus, by understanding how these tools work, developers can better anticipate what users experience and design with greater empathy.

    Balancing Brand Identity with Accessibility

    Now comes the tough part—color contrast often butts heads with brand design. Changing a brand’s color palette can feel like touching sacred ground. But here’s the thing: contrast issues can usually be fixed with minor adjustments.

    Sometimes it’s as easy as tweaking brightness or adding a subtle border. Instead of throwing out your palette, consider enhancing it. You might slightly darken a background color, lighten the text, or add supporting visuals that boost readability. Your core colors stay intact—just optimized for accessibility.

    And don’t worry—accessibility lawsuits are rarely about brand color alone. They’re about whether people can actually use your site. Keeping that goal in focus will help guide the right compromises.

    Final Shades of Wisdom

    At its core, color contrast is about communication. It makes your message easier to read, your interface easier to use, and your site more welcoming to everyone—regardless of how they see the world.

    With a solid grasp of the WCAG guidelines, the right tools in your toolkit, and smart design strategies, it’s entirely possible to meet accessibility goals without sacrificing visual style. Make contrast checks part of your process, revisit your palette with intention, and bring your team along with documentation and testing habits.

    And if you’re not sure where to start or want a second opinion, schedule a quick ADA compliance briefing with 216digital. We’ll help you uncover any color contrast issues hiding in plain sight—and map out a path toward a more inclusive, accessible web.

    Greg McNeil

    May 20, 2025
    How-to Guides, WCAG Compliance
    Accessibility, color contrast, WCAG, WCAG 2.1, WCAG Compliance, WCAG conformance, Web Accessibility
  • How WCAG 1.3.1 Supports Cognitive Disabilities

    Have you ever landed on a website where everything feels jumbled and disorganized? You’re left scrolling and clicking aimlessly, struggling to find exactly what you’re looking for. While that’s frustrating for anyone, imagine how overwhelming it can be for people who live with cognitive disabilities—conditions that impact concentration, memory, and decision-making.

    That’s exactly why WCAG 1.3.1 exists—to help make sure your website’s information is structured clearly enough for everyone, including those using assistive technologies, to understand it. WCAG 1.3.1 ensures your site’s headings, labels, lists, and content flow are similarly clear, logical, and user-friendly.

    Considering more than 10% of U.S. adults experience cognitive disabilities, overlooking these details can unintentionally exclude a significant audience from fully engaging with your site. By understanding and applying WCAG 1.3.1, you’ll create a digital space that feels welcoming and intuitive for everyone—no matter how they access your content.

    What Is WCAG Success Criterion 1.3.1?

    WCAG 1.3.1 is part of the Web Content Accessibility Guidelines (WCAG) 2.0 at Level A, falling under the “Perceivable” category. If that sounds a bit abstract, think of it like sorting a stack of papers into clearly labeled folders. Without labels or folders, everything’s just a heap of documents. That’s no fun for anyone—especially when you’re in a rush to find something specific.

    In web terms, WCAG 1.3.1 means your headings, lists, and form labels should make sense both visually and in the background code. This way, a screen reader can “see” the right order of information. If you’re only styling text to make it bold or bigger instead of using proper headings, you might be leaving people who rely on assistive technology in the dark.

    A well-structured site is like a neatly organized book: each section has a clear title, bullet points highlight the big ideas, and you don’t have to guess where to look next.

    But here’s the important part: WCAG 1.3.1 goes beyond just how things look. It ensures that the underlying relationships in your content—like which label belongs to which form field—are crystal clear to anyone using a screen reader or navigating with a keyboard. It’s basically an invitation for everyone to participate comfortably, no matter what tools they use to browse.

    How WCAG 1.3.1 Supports Individuals with Cognitive Disabilities

    Before diving into specific tips, let’s talk a bit about what cognitive disabilities actually are. These cover a wide range of challenges with attention, memory, problem-solving, and more. Here are a few common examples, along with how WCAG 1.3.1 makes their digital lives easier:

    ADHD (Attention Deficit Hyperactivity Disorder)

    People with ADHD might find it really tough to focus if a page is cluttered or if the layout changes all the time. Too many pop-ups, ads, or random bold headings can be a nightmare.

    By keeping a consistent layout, using proper headings, and breaking text into smaller chunks, you give users with ADHD fewer distractions so they can quickly find what they need.

    Autism Spectrum Disorder (ASD)

    Some individuals on the autism spectrum thrive on predictability. Sudden layout changes or bright, blinking ads can cause stress or confusion.

    Predictable navigation, clearly marked headings, and removing “visual clutter” create a smoother, calmer experience. When you group information logically, it’s like giving users a map that helps them explore your site at their own pace.

    Dyslexia

    Large blocks of unbroken text can be overwhelming for someone with dyslexia. Inconsistent fonts or formatting can make reading even harder.

    Clear headings, logical order, and bullet points break down the content into manageable pieces. This lets readers focus on one idea at a time instead of getting lost in a long wall of text.

    Remember, WCAG 1.3.1 isn’t just a fancy acronym. It’s a set of principles that tell you how to code and structure your site so people with various cognitive disabilities—and really, all people—can find what they’re looking for without extra stress.

    Best Practices to Implement WCAG 1.3.1

    Use Proper HTML Markup

    • Headings (<h1> to <h6>): Mark each section appropriately. It’s like having chapters and sub-chapters in a well-organized book.
    • Lists (<ul>, <ol>, <li>): Want to highlight key points or steps in a process? Use real list tags. These help people scan for main ideas.
    • Tables (<th>, <caption>): If you share data, make sure tables have clear headers, so screen readers can point out each column accurately.
    • Form Labels (<label> for <input>): Even a small tweak—like changing “Email” to “Email Address”—can help a lot.

    Make Labels and Associations Meaningful

    • Descriptive Form Labels: Be specific. “Name” could mean first name, last name, or both. “Full Name” is clearer and reduces guesswork for users who rely on assistive tools.
    • Grouping Related Form Elements: If you’re asking for billing and shipping information, use <fieldset> and <legend> to separate them. It’s like labeling two different drawers in the same cabinet.

    Keep a Logical Reading Order

    • Match Visual and Code Order: If your page appears in a certain order visually, make sure the code follows that same flow. That way, screen readers read the content in the correct sequence.
    • Avoid Layout Tables: Using tables to position content might scramble the reading order for assistive technologies. Stick to headings, sections, and CSS for layout.
    • Check CSS: Sometimes, fancy layouts shift elements around so that a screen reader says one thing while you’re visually seeing something else.

    Allow Alternative Navigation Methods

    • Use ARIA Landmarks: Elements like <nav>, <main>, and <aside> tell assistive tools what each section is for.
    • Keyboard Accessibility: Make sure users can reach all buttons and links by using the Tab key. Some folks don’t or can’t use a mouse.

    Common Mistakes to Watch Out For

    Depending on Style Instead of Structure

    For instance, using large bold text to indicate a heading but never actually marking it with <h2> or <h3>.

    Overloading with Unstructured Content

    Huge paragraphs with no headings, lists, or visual breaks can make reading a challenge for anyone, let alone someone with a cognitive disability.

    Skipping Testing

    Even if your code looks good, testing with screen readers or keyboard-only setups can reveal hidden problems. If possible, invite real users with disabilities to test your site and share feedback.

    Better Structure Means Better Accessibility

    When you boil it all down, WCAG 1.3.1 is about one key idea: making your content easy to understand and navigate. By using proper headings, clear labels, and logical order, you’re welcoming people with ADHD, ASD, dyslexia, and other cognitive disabilities into a space where they can comfortably engage with your content. And really, that’s a win for everyone. A well-organized site helps users who don’t have disabilities, too, because it’s simply easier to use.

    If you want to stay ahead in the accessibility world, WCAG 1.3.1 is a great place to start. It doesn’t have to be a big, daunting project, either. Sometimes, small changes—like adding more headings or re-labeling form fields—can make a huge difference in someone’s online experience.

    If you’re ready to optimize your site’s structure for everyone’s benefit, 216digital can guide you through each step. Our team will help you make sure your site meets WCAG 1.3.1 standards without losing any of your own unique style or branding.

    Greg McNeil

    March 26, 2025
    WCAG Compliance
    Accessibility, WCAG, WCAG Compliance, WCAG conformance, Web Accessibility
  • What Is Audio Description?

    Imagine trying to enjoy a movie when you can’t actually see what’s on the screen. Suddenly, a huge portion of the story—communicated by the actors’ gestures, the set design, and other visual elements—becomes almost impossible to follow. This is where audio description comes in.

    For people who are blind or have low vision, audio description is a vital tool that helps them understand what is happening on screen. It turns visual information—like who is walking, what they are wearing, and how they move—into words that fill in the gaps left by dialogue alone. By including audio descriptions, developers can help build a more inclusive internet that meets everyone’s needs.

    What Is Audio Description?

    Audio description (AD) is defined as “the verbal depiction of key visual elements in media and live productions.” It is a spoken narration that explains what viewers would normally learn from sight alone. AD covers facial expressions, important movements, scene changes, costumes, and on-screen text. Think of AD as the spoken equivalent of alt text for images. Just like alt text describes a picture’s contents when you can’t see it, audio description tells you what is happening visually when you are unable to follow by sight.

    Because so many key story elements are conveyed without dialogue, AD ensures blind or low-vision users are not missing out. For instance, a character might make a worried face or show a letter to another actor without saying anything. Without words describing these details, viewers may lose track of the story. That is why this accessibility measure is so important—not just for visual comprehension, but also for equal participation in popular culture.

    How Is Audio Description Created?

    Creating audio descriptions is both an art and a science. It calls for careful planning and precision so the narration enriches the original content without interrupting dialogue or other important sounds. In general, there are two main steps: writing the script and voicing the narration.

    Writing the Script

    A trained describer, or sometimes an automated tool, watches the content and notes crucial visual elements that are not otherwise explained. This includes body language, set design, and even text on signs. A human writer can craft a highly accurate script, but some creators use AI-generated drafts as a starting point. A hybrid approach—AI plus human editing—can offer speed and cost benefits while maintaining quality. Once the script is ready, it is carefully timed to fit into breaks between lines of dialogue or music cues.

    Voicing the Description

    The next step is to record the narration. Human-voiced AD typically uses professional voice actors who can deliver the right tone and clarity. An alternative is synthesized speech, where a computer-generated voice reads the script. This can be faster and cheaper but might lack the warmth and nuance a human can provide. After recording, an audio engineer mixes the new narration with the existing soundtrack. Quality assurance is essential: the final version must be clear, accurate, and properly timed so it helps the viewer without overwhelming the original audio. Many organizations also test the finished product with actual users to confirm it meets their needs.

    How Is Audio Description Published?

    When it comes to publishing audio descriptions online, developers have a variety of technical approaches:

    • User-Selectable Audio Track: Many streaming services and video players provide a separate track that includes AD, often referred to as a Secondary Audio Program (SAP).
    • Pre-Mixed Versions: Sometimes, the AD is integrated directly into the main audio track, so every listener hears the narration by default.
    • Extended or Integrated Descriptive Audio: In content with rapid action, an extended track may pause or slow the video to allow sufficient time for detailed narration.
    • Separate Files on Streaming Platforms: Services like Netflix, Disney+, and Amazon Prime frequently offer multiple audio versions, including AD, which viewers can select. Physical media (DVDs, Blu-rays) often include these options too.
    • Mobile Apps and Live Performances: Apps can synchronize real-time narration with a live show or museum exhibit, allowing users to hear descriptions without disturbing others.
    • Text-Based Alternatives: If adding audio tracks isn’t feasible, a WebVTT description track can be paired with a screen reader to deliver the same information through speech.

    Benefits of Audio Description

    While the primary users of this feature are people who are blind or have low vision, there are many others who benefit. Students who like to listen to content while taking notes, commuters who cannot watch a screen, and people who multitask all gain from this practice. Even individuals seated far from a display or those preferring a more multi-sensory viewing experience can find it helpful.

    For content creators, adding audio descriptions can grow their audience and boost engagement. Accessibility also supports legal compliance in many regions, protecting organizations from potential lawsuits or fines. Beyond that, it improves a brand’s reputation by demonstrating care for all viewers. Some producers have even seen gains in search engine optimization (SEO) when they create written scripts or transcriptions as part of the process, which can lead to better discoverability of their content online.

    Alternative to Audio Description

    In some cases, offering audio descriptions may not be possible or practical due to limited budgets, time constraints, or technical hurdles. Still, there are alternatives that can help ensure some level of accessibility:

    • Descriptive Transcripts: A transcript that includes not just dialogue, but also details on the visuals. This gives readers enough information to follow the narrative independently.
    • Captions with Added Context: Although captions are mostly designed for viewers who are deaf or hard of hearing, they can be adjusted to include simple notes like “[John grins]” or “[Mary enters the room],” aiding those who need more visual context.
    • Embedded Descriptions in Dialogue: Some creators write scripts that naturally mention key visuals, such as, “Look at that bright red balloon floating into the clear sky!” This type of embedded language can fill in some gaps without a formal AD track.
    • Assistive Technology Integration: Proper use of HTML, ARIA labels, and structured content can also help screen readers convey visual information more effectively.
    • Live Describer Services: For virtual events or video calls, a live describer can offer on-the-fly narration. This can be a good choice if you cannot embed pre-recorded descriptions in the media.

    Why Audio Description Is Worth Prioritizing

    At its heart, accessibility is about recognizing each person’s perspective. When web developers and content creators integrate audio descriptions into their videos, they do more than fulfill legal requirements: they make a statement that everyone belongs. By adding thoughtful narration, you help paint the full picture for anyone who can’t see it, broadening your audience and enriching the viewing experience for all. Even small improvements can bring about major changes in how people engage with your content.

    Collaborating with experts, like the team at 216digital, can guide you through each step, from scripting to publishing. In the end, it isn’t just another feature—it’s a powerful bridge to inclusivity, ensuring nobody is left out of the story.

    Greg McNeil

    March 25, 2025
    How-to Guides, WCAG Compliance
    audio description, captions, videos and audio content, WCAG, WCAG conformance
  • How to Make Websites Accessible for Cognitive Disabilities

    When was the last time you visited a website and ended up completely confused? Maybe it had flashing ads, a messy layout, or awkwardly placed menus. Now, imagine dealing with this sort of frustration on almost every site you visit—because your brain processes information a bit differently. Unfortunately, that’s the daily experience for many individuals. With 13.9 percent of U.S. adults having some sort of cognitive disability, this leaves millions of Americans unable to navigate the web.

    In this article, we’ll explore how cognitive disabilities affect web usage, the challenges they pose, and how you can adjust your design to be more welcoming. The good news is that creating a more inclusive website doesn’t have to be complicated. Small tweaks, like adding clear labels or allowing extra time to complete tasks, can have a massive impact. Let’s dive in!

    Understanding Cognitive Disabilities

    Cognitive disabilities influence how someone interprets and processes information. They can affect attention span, memory, comprehension, problem-solving skills, or social interactions. The impact varies from person to person, but there are shared themes. Some individuals may need larger text and simpler language, while others might require more time or predictable page layouts. Although these needs may differ, the core principle remains the same: clarity is key.

    Generally, cognitive disabilities can be divided into two main groups:

    • Functional Cognitive Disabilities: These conditions might be less severe but can still disrupt daily routines. Examples include learning disabilities, ADD/ADHD, dyslexia, or dyscalculia.
    • Clinical Cognitive Disabilities: These tend to be more profound or long-term, such as autism spectrum disorder, traumatic brain injury, Down syndrome, dementia, and Alzheimer’s disease. In all cases, designing websites with an emphasis on simplicity, structure, and user-friendly navigation goes a long way.

    Common Types of Cognitive Disabilities and Their Effects

    Each type of cognitive disability can pose different obstacles online. Here are a few examples:

    • Dyslexia: Reading difficulties, especially with dense paragraphs.
    • ADHD: Hard time focusing on cluttered or rapidly changing pages.
    • Dyscalculia: Challenges with numeric or math-heavy tasks, such as checkout forms.
    • Auditory Processing Disorder: Struggles with audio content lacking captions.
    • Visual Processing Disorder: Difficulty interpreting complex visuals or layouts.
    • Memory Impairments: Problems recalling steps in sequences, like multi-page forms.
    • Autism Spectrum Disorder: Sensory overload triggered by certain fonts, colors, or animations.

    How These Disabilities Affect Web Usage

    It’s important to remember that cognitive disabilities manifest uniquely in each person. Designing with clarity and adaptability ensures a broader audience can engage more comfortably. Ordinary tasks such as ordering groceries or completing a job application become far more accessible when pages are uncluttered and navigation is logical. To achieve this, adopting user-centered methods and testing your designs can reveal hidden issues.

    Key Challenges for Cognitive Accessibility

    Overwhelming Cognitive Load

    We’ve all seen websites that feel like a newspaper glued onto your screen—crammed text, ads, sidebars, and banners everywhere you look. Users with cognitive disabilities often struggle to pick out the key information on such pages. Even something as simple as bulleted lists or subheadings can help prevent that sense of overload.

    Navigation Barriers

    If you’ve ever clicked a menu and had zero idea where to go next, you know how frustrating poor navigation can be. Sites with unclear or hidden menus, inconsistent layouts, and random page names create extra hurdles for people with cognitive disabilities. Offering a straightforward menu, a search bar, and a site map will help all users feel in control.

    Complex Forms and Inputs

    Nobody likes forms that ask too many questions—but for people with cognitive disabilities, it’s even tougher. Vague field labels, surprise questions, and steps that rely on memory can cause confusion and mistakes. Straightforward instructions and friendly error messages can turn a chore into a breeze.

    Inconsistent or Distracting Design Elements

    Blinking ads, auto-refreshing slideshows, and colors that clash might grab attention, but they can also distract or confuse someone who’s trying hard to focus. Inconsistent layouts—like having the search bar in a different place on each page—can also leave users guessing. Keeping things steady and predictable is a win for all.

    Time-Sensitive Tasks

    You’re halfway through a form, trying to enter your address, and suddenly, you get logged out. Then you lose everything you typed. That’s annoying for anyone, but imagine if it happens often because you need more time to read or type. Flexible time limits and a warning before logging out can ease this pressure and show respect for different reading or typing speeds.

    WCAG Guidelines for Cognitive Accessibility

    The Web Content Accessibility Guidelines (WCAG) were created to help make the internet more usable for everyone—including people with disabilities. Developed by the W3C, these guidelines lay out best practices for building websites that are easier to navigate, read, and interact with. While WCAG covers a wide range of needs, it’s especially helpful when it comes to supporting people with cognitive disabilities.

    For individuals who struggle with memory, attention, problem-solving, or language processing, small design choices can make a big difference. WCAG 2.2 includes updates that directly address those needs—like giving users more time to finish tasks, making instructions clearer, and cutting down on distractions that might make it hard to focus.

    Think of WCAG as a toolkit that helps you build a site that’s more inclusive and user-friendly.

    Tried-and-True Practices for Cognitive Accessibility

    Clear, Concise Content

    • Straightforward Language: Write like you’re speaking to a friend while still being professional—jargon should be explained if it’s absolutely necessary.
    • Short Paragraphs and Lists: Make it easy to skim by breaking text into sections. Bullet points and short paragraphs help focus attention.
    • Thoughtful Headings: Headings provide a quick roadmap of the page. They’re also handy for anyone using a screen reader to jump between sections.
    • Text Alternatives: Use alt text for images and captions for video so people who struggle with visual or auditory processing can still follow along.

    Straightforward Navigation

    • Consistency: Keep your menus, logos, and search bar in the same spots on every page. This predictability helps people know exactly where to look.
    • Descriptive Labels: Instead of a generic “Learn More,” say something like “View Our Product Line.” Users shouldn’t have to guess where a link will take them.
    • Avoid Sudden Refreshes: If the page absolutely must reload or update automatically, let the user know beforehand—or give them control.

    Forms That Don’t Confuse

    • Explain Each Step: If the form is long or complex, provide a brief overview of why you need this info and how to fill it out.
    • Group Fields Logically: Put personal info in one section, payment details in another, and label each field clearly.
    • Useful Error Messages: “Invalid entry” doesn’t really help. “Please enter a valid email address” is much clearer.
    • Password Manager Support: Some people can’t remember lots of usernames and passwords—avoid any code that interferes with auto-filled credentials.

    Reducing Distractions

    • Clean Layouts: Keep a consistent, minimal approach to layout, with important info easy to find.
    • Minimal Animations: Flashing images or pop-up ads can be overwhelming, especially for people with ADHD or autism. If animation is crucial, give users a way to pause or hide it.
    • Customization Options: If possible, let visitors adjust text size, contrast, or spacing so they can create a more comfortable reading environment.

    Tackling Time Constraints

    • Extend Session Times: If your site automatically logs people out, give them a warning and a way to keep going.
    • Auto-Save: Nothing is more discouraging than losing everything after spending 15 minutes filling out a form. An auto-save feature can be a lifesaver.
    • Flexible Deadlines: If a task or process has a time requirement, consider allowing extra time or offering a simple way to request it.

    Helping with Memory and Task Completion

    • Familiar Icons: A magnifying glass for search is universally recognized—using something obscure forces a visitor to learn new symbols.
    • Progress Bars: For multi-step tasks, let users see how far they’ve come and how much is left. This can ease anxiety and keep them moving forward.
    • Save Preferences: Whether it’s language settings or preferred font sizes, remember these choices so returning visitors don’t have to redo them.

    Testing and Ongoing Refinements

    • Automatic Tools: Programs like Google Lighthouse or WAVE can highlight accessibility problems, but they’re no substitute for real testing.
    • Manual Checks: Try your site with screen readers or text-to-speech software. It might reveal a few blind spots.
    • Ask Real Users: Feedback from people who live with cognitive disabilities is invaluable. They’ll notice details or problems that might slip by everyone else.
    • Regular Updates: Technology and standards keep evolving. Plan a routine review of your site’s accessibility features, so you stay ahead of any issues.

    Making Web Accessibility a Priority

    Making a website more accessible for people with cognitive disabilities doesn’t require a complete overhaul—it starts with awareness and intentional design. When you prioritize clarity, predictability, and flexibility, you’re not just meeting the needs of some users; you’re improving usability for everyone who visits your site. Every adjustment, from a well-placed heading to a thoughtful timeout warning, can make a meaningful difference.

    If you’re unsure where to start or how to move forward, 216digital is here to help. We work with businesses of all sizes to identify gaps, implement best practices, and build experiences that are truly usable—by everyone. Accessibility isn’t a one-time fix, it’s an ongoing commitment—and we’re ready to walk that path with you.

    Greg McNeil

    March 20, 2025
    WCAG Compliance
    Accessibility, cognitive disabilities, WCAG, WCAG Compliance, WCAG conformance, Website Accessibility
  • Getting Focused: Why Focus Order Matters for Web Accessibility

    Most people never think about what it would be like to navigate a website without using their mouse. This is a reality for many users with visual or motor impairments. They rely on using other input modalities, such as the keyboard or gestures, to navigate a web page. This is where focus order comes into play.

    In this post, we’ll look at what focus order is, why it’s so important, how it connects to the Web Content Accessibility Guidelines (WCAG), and the most common issues you’ll want to fix. Then, we’ll share a few tips on how to test and improve it on your own site.

    Life Without a Mouse

    Picture going through your favorite website using only your keyboard. You press Tab to jump from one link or button to another. If the focus order is set up right, you’ll move through the page in a smooth, logical sequence, usually from top to bottom. But if it’s not, you could land somewhere unexpected or miss entirely essential parts of the page.

    For anyone who can’t use a mouse, a messed-up focus order often leads to frustration. Improper focus order can lead to the cursor jumping around the page illogically or preventing them from using necessary functionality.

    Avoiding Common Pitfalls

    1. Skipping Interactive Elements: If a link or button is not coded using the proper semantic HTML tag or does not have the correct attributes, it will not be focusable at all, and users who can’t use a mouse will be unable to interact with the element.
    2. Jumping in Strange Ways: If you rely on random tabindex values or a messy HTML structure, the focus may go from the header to a random footer link before bouncing back up. That’s tough to follow.
    3. Getting Trapped: Pop-ups, modals, and iframes can trap keyboard users if the code doesn’t let them tab out. People might get stuck until they refresh the page.
    4. Invisible Focus: Many designers, developers, or store owners choose to hide the focus outlines for aesthetic purposes without realizing how many people rely on them to navigate the site. Without visible focus outlines, motor-impaired users have no idea which element is currently focused on or selected.

    The WCAG Connection

    Focus order plays a key role in meeting the standards laid out in WCAG. Some of the main ones include:

    • 2.4.3 (Focus Order, Level A): Content should follow a logical order when tabbing through the page.
    • 2.1.1 (Keyboard, Level A): All site functions should work with only a keyboard.
    • 2.4.7 (Focus Visible, Level AA): People should see which element is active at all times.
    • 2.4.11 & 2.4.12 (Focus Not Obscured, WCAG 2.2, Levels AA & AAA): The focused element has to remain visible instead of scrolling off-screen.

    Meeting these criteria helps make sure your site is accessible and much easier to navigate.

    Simple Tips to Get It Right

    • Use the DOM Order: Write your HTML in the order you want people to move through the page. That way, you don’t have to force things with unique attributes.
    • Use Correct Elements: If you have something clickable, make it a <button> or <a>. This makes it automatically focusable without extra work.
    • Be Careful With tabindex: tabindex= “0” can help include an element in the natural focus sequence. tabindex= “-1” keeps something out of the normal flow but still lets you focus there with scripts. High or random values can create chaos.
    • Manage Modals Properly: When a modal pops up, focus should jump into it. People should be able to tab around inside and close it without getting stuck. Once it’s closed, the focus should return to the element that opened it.
    • Keep Focus Visible: If your brand style doesn’t match the default outline, customize it with a high-contrast border or box-shadow. Whatever you do, make sure people can still see where they are on the page.

    Testing and Tweaking Your Site

    1. Manual Testing – Put your mouse away and try tabbing through the page. Ask yourself if the order makes sense and if you can reach everything you need.
    2. Browser Tools – Chrome DevTools and Firefox Accessibility Inspector can show you how each element appears in the accessibility tree, which can help you spot weird focus flows.
    3. Automated Tests – Tools like WAVE and Lighthouse are helpful for flagging fundamental problems, though they won’t catch everything.
    4. Real Users – If possible, ask people who rely on keyboard navigation to test your site. They’ll be the quickest to notice focus issues you might miss.

    Wrapping Up

    Focus order might sound like a small detail, but it’s a massive deal for those who rely on the keyboard to get around. A logical, precise tab sequence helps keep your site user-friendly, no matter who’s visiting. If you’re worried about your site’s accessibility, it’s never too late to run an audit or refresh your code.

    Need extra help? Contact 216digital, where we specialize in creating accessible websites that work well for everyone. Whether you just need a quick review or a complete accessibility plan, we’re here to make your site feel welcoming for all kinds of users.

    Greg McNeil

    March 19, 2025
    How-to Guides, WCAG Compliance
    focus order, WCAG, WCAG conformance, web developers, web development
  • Coffee Shop Website Accessibility: What’s Missing?

    Have you ever visited a coffee shop’s website to check their menu, order online, or see their hours? Did you feel lost because the site was confusing? Now, imagine dealing with that struggle each time you want to find your go-to latte. Or when you want to learn about a shop’s new roast. For people who rely on screen readers or have other visual impairments, that frustration can happen a lot.

    Many coffee shop owners and content creators in the United States might not realize these barriers exist. Making sure everyone can move around your website without trouble is more important than you might think. In this post, I’ll point out some common obstacles and why they matter. I’ll also share how a few small changes can make a big impact.

    Why Does Coffee Shop Website Accessibility Matters?

    When you think about coffee shops, you might picture a warm atmosphere and friendly baristas. You might also imagine the smell of freshly brewed beans. Online, we want to capture that same welcoming feeling. By focusing on coffee shop website accessibility, we want to make sure people can order their favorite drinks. We also want them to read menu items or discover new roasts without trouble.

    If a visually impaired customer struggles to find key details, they might miss out on daily deals or new seasonal drinks. They could even miss basic facts like store hours.

    One often overlooked detail is how screen readers work. These tools read text out loud to users who can’t see the screen. If a website isn’t organized well, or if images don’t have good descriptions, screen reader users can miss key details. It’s crucial to keep everything labeled and clear. That could mean they never learn about your limited-edition pumpkin spice latte or your special buy-one-get-one-free deal. By making a few updates, you can share the joy of your coffee shop with everyone who visits online.

    Missing Alt Text for Images

    Coffee shops show off photos of their specialty drinks, pastries, and interiors. There’s nothing quite like seeing a perfectly steamed latte art design on the homepage. However, if these images don’t include a brief written description (often called “alt text”), a screen reader can’t share that info with someone who is visually impaired. That leaves them guessing what’s in the image.

    What to do:

    • Make sure each picture has short alt text that describes what’s shown. If you have a frothy cappuccino in a ceramic mug with a leaf design on top, write something like, “Cappuccino with leaf latte art in a white mug.”
    • Keep it simple and clear. A few words can help everyone enjoy the same tasty-looking photos.

    Hard-to-Read Text and Poor Contrast

    Sometimes, coffee shop websites use warm and earthy color palettes to match the cozy vibe of a local café. But light brown text on a cream background can be hard for many people to read. Dark red lettering on a black background can cause the same problem.

    If your text and background colors don’t have enough contrast, users might struggle to read menu items or promotions. They could also miss important contact details.

    What to do:

    • Pick colors with high contrast, so text stands out. You can use free online contrast-checker tools.
    • Keep text large enough so visitors of all ages can comfortably read your menu and shop info. Test on a phone or tablet to see if users need to zoom in.

    Unclear Headings and Structure

    Have you ever looked at a website and felt lost because everything blended together? Using clear headings and labels helps both sighted users and people with screen readers navigate your site.

    When your text is broken into sections like “Our Menu,” “About Us,” “Location,” and “Contact,” users can jump right where they need to go. This layout helps both sighted users and screen readers. Screen readers also rely on proper heading levels (like H1, H2, H3) to guide listeners in the right order. If headings aren’t used correctly, the page can feel disorganized for those who can’t see it.

    What to do:

    • Give each page a main heading (H1), then use H2s and H3s for subheadings.
    • Don’t skip heading levels. Going from H1 to H3 can confuse people using screen readers.

    Unlabeled or Unclear Links and Buttons

    Buttons like “Order Now,” “Sign Up,” or “View Menu” should clearly say what they do. If a button only says “Click Here,” screen reader users might not know what “here” refers to. The same goes for links.

    If many links are labeled “Learn More,” it’s tricky to figure out which page or product each link goes to. Users might have to guess or click blindly.

    What to do:

    • Use descriptive link and button text, like “Order a Latte” or “Learn About Our Pastries.”
    • If you offer online ordering, label each step so people know exactly what to do next.

    Forms Without Proper Labels

    Some coffee shop websites have newsletter sign-up forms or contact forms for special orders. If these forms aren’t labeled well, a screen reader might say something like “edit box” instead of “email address.” That can leave users guessing what to type.

    What to do:

    • Label each form field clearly. For instance, use “Name” or “Email Address” so people know what goes where.
    • Provide helpful error messages. If someone enters an invalid email, explain what happened and how to fix it.

    Videos Without Captions or Transcripts

    Video might not be the first thing that comes to mind for a coffee shop website. Still, some shops post video tours, latte art tutorials, or interviews with the barista. If these don’t have captions or transcripts, users who are deaf or hard of hearing could feel left out. Good website accessibility means making the site easy for everyone, not just folks with vision challenges.

    What to do:

    • Add captions to your videos or provide a simple transcript. This helps anyone who can’t hear or who’s watching in a quiet place (or a super noisy one).

    How to Get Started

    Improving coffee shop website accessibility doesn’t have to be complicated. You can start by using free online tools that scan your pages and highlight issues like missing alt text or low contrast. It also helps to ask a few friends or loyal customers to test your site and tell you what works and what doesn’t.

    If you find bigger problems, think about working with a web developer who understands website accessibility. They can guide you through changes and help you meet standards commonly used in the United States. Even small fixes can create a smoother online experience for everyone, from a busy parent ordering pastries for the weekend to a coffee enthusiast searching for a new blend to try.

    A Warm Welcome, On and Offline

    When people walk through your coffee shop’s door, you greet them with a smile. Why not do the same online? A website that’s easy to use creates that same feeling of warmth and belonging. Whether someone’s checking your menu for gluten-free treats, ordering a bag of beans for home, or simply browsing the specials, clear labels and good navigation make them feel included.

    By focusing on coffee shop website accessibility, you open your digital doors to everyone. It’s a great way to build community, grow your business, and show off what makes your café special. After all, everyone deserves to enjoy that perfect cup of coffee—no matter how they get there.


    If you’re ready to make your coffee shop’s website more accessible but aren’t sure where to start, 216digital can help. We specialize in website accessibility solutions tailored to small businesses, making sure your site is welcoming for everyone. Let’s work together to create a seamless online experience—just like the one you offer in your shop.

    Greg McNeil

    March 14, 2025
    How-to Guides, WCAG Compliance
    Accessibility, coffee shop, forms, Image Alt Text, videos and audio content, Web Accessibility
  • Captions or Subtitles: What’s the Difference?

    You’ve probably used them without a second thought—watching a movie in another language, scrolling social media with the sound off, or trying to follow dialogue in a noisy room. But have you ever noticed that sometimes the text includes sound effects and speaker names, while other times it’s just the spoken words?

    It’s easy to assume captions and subtitles are the same, but they serve different purposes. If you’ve ever struggled to keep up with fast dialogue or wished for more context in a quiet scene, you’ve already experienced the difference—maybe without even realizing it.

    So, what really sets them apart, and why does it matter? Let’s break it down.

    What Are Captions?

    Captions do more than just show dialogue—they make videos accessible for people who are deaf or hard of hearing. They include spoken words and crucial audio cues such as background noises, tone changes, and speaker identifications.

    Additionally, captions help content creators comply with important accessibility guidelines like the Web Content Accessibility Guidelines (WCAG), the Americans with Disabilities Act (ADA), and Section 508.

    Types of Captions

    Closed Captions (CC) give viewers control to switch captions on or off and even adjust their appearance. Think YouTube, Netflix, or Zoom.

    Open Captions stay visible all the time. They’re perfect for social media videos, events, or public places where you can’t rely on viewers to activate captions themselves.

    What Are Subtitles?

    Subtitles primarily translate spoken words into another language for viewers who can hear but might not understand what’s being said. Unlike captions, subtitles typically skip audio cues and speaker names. They’re great for international movies or videos aimed at a global audience.

    Subtitles vs. Captions: Key Differences

    FeaturesCaptionsSubtitles
    PurposeAccessibility for Deaf/ Hard-of-hearingLanguage Translation
    Includes Sound Effects?YesNo
    Speaker Identification?YesNo
    Non-verbal Audio Cues?YesNo
    Assumes Viewer Can Hear?NoYes

    Why Are Captions Important for Web Accessibility?

    Captions create truly inclusive content accessible to everyone. Beyond meeting legal requirements, captions help businesses avoid compliance risks and potential lawsuits.

    But captions have benefits beyond compliance—they boost SEO by enabling search engines to index your video content effectively. They enhance viewer engagement, especially in quiet or noisy environments, and help non-native speakers follow along more easily, improving comprehension and retention.

    Open vs. Closed Captions: Which Should You Use?

    Choosing between open and closed captions depends on your content and audience.

    Open Captions are excellent for social media, live events, and public displays, where activating captions isn’t practical. They ensure every viewer can immediately access your message without additional steps.

    Closed Captions are ideal for platforms like YouTube or Netflix, where viewers prefer customizing their caption viewing experience. They’re also essential for educational videos, multilingual content, or professional presentations, where accuracy and personalization enhance viewer experience.

    How to Add Captions to Your Digital Content

    Adding captions can be straightforward, whether you choose manual or automated methods.

    Manual captioning involves creating captions yourself or with professional tools like Adobe Premiere Pro or YouTube Studio. This ensures accuracy and is highly recommended for educational and professional content.

    Automatic captioning services like YouTube auto-captions or platforms such as Rev.com provide quick results but may vary in accuracy. Always review and correct auto-generated captions to maintain quality and compliance.

    Understanding caption file formats is also beneficial. Popular formats include SRT (.srt), widely compatible across platforms like YouTube and Vimeo, and VTT (.vtt), ideal for web-based videos with additional formatting options.

    How to Add Captions

    • Create or auto-generate captions.
    • Review and edit carefully for accuracy.
    • Export the appropriate caption file.
    • Upload the caption file to your video platform

    Best Practices for Creating Accessible Captions

    • Prioritize Accuracy: Always proofread and edit captions.
    • Ensure Readability: Choose clear fonts and ensure strong contrast.
    • Be Concise and Clear: Keep captions brief but sufficient to communicate context.
    • Clearly Identify Speakers: Use identifiers like [John]: to clarify speakers.
    • Strategically Place Captions: Position captions without blocking essential visuals, typically at the bottom of the screen.

    Captions & Subtitles: Enhancing Your Content

    Captions and subtitles aren’t merely text overlays—they enhance viewer experiences, improve accessibility, and expand your content’s reach. By captioning thoughtfully, you’re making your videos richer and more inclusive.

    Looking to improve accessibility on your website? At 216digital, we’re ready to help. Reach out via our contact form below and schedule an ADA briefing. Let’s explore how we can elevate your digital presence and engagement together.

    Greg McNeil

    March 10, 2025
    WCAG Compliance
    Accessibility, captions, Closed caption, subtitles, videos and audio content, WCAG, WCAG Compliance, Web Accessibility
  • Why Should Websites Prioritize Multimedia Accessibility?

    Today, video and audio have become essential ways to share information. In fact, the average person now watches about 84 minutes of online video each day, and that number continues to grow. Podcasts, livestreams, and short clips fill our feeds, but there’s a critical point many content creators overlook: not everyone experiences multimedia in the same way. For individuals without access to captions, transcripts, or other multimedia accessibility features, valuable information can slip through the cracks.

    Research from Johns Hopkins University shows that 1 in 5 people live with hearing loss that affects everyday communication. Add that to the 21 million with visual impairments and the 65.6 million with learning or attention-related conditions, and you have over 130 million Americans who might struggle with typical video and audio formats. Below, we’ll explore why it’s so important to make your multimedia accessible and share some key steps for doing it right.

    Video and Audio Accessibility

    Multimedia accessibility means designing video and audio content so people with hearing, visual, or cognitive challenges can fully engage. Often, this involves retrofitting existing videos or podcasts to align with guidelines such as the Web Content Accessibility Guidelines (WCAG). These guidelines outline how to make digital media easy to perceive, operate, and understand for everyone.

    People can encounter many barriers online. Someone who is Deaf or hard of hearing won’t know what’s being said without captions, and a person with low vision may have trouble following on-screen text without audio description. Even individuals with learning differences might find it tough to keep up if the video moves too fast. By addressing these issues, you create a better experience for everyone—whether they have a disability or simply prefer a different way of engaging with content.

    Why Remediating Multimedia Is Essential

    Inclusive User Experience

    Making your videos and audio clips accessible ensures you’re not leaving anyone behind. Features like captions, transcripts, and audio descriptions help people with disabilities, but they also benefit those watching in a noisy coffee shop, people who learn best through reading, or anyone who wants to watch without turning up the volume. Accessibility features often help more users than you’d expect, much like how ramps and elevators benefit parents with strollers and travelers with luggage, not just individuals who use wheelchairs.

    Legal Compliance & Risk Mitigation

    In the United States, laws such as the Americans with Disabilities Act (ADA) and Section 508 require accessible digital content in many situations. Failing to meet these requirements can lead to lawsuits, financial penalties, and damage to your brand’s reputation. It’s far safer—and more ethical—to be proactive about multimedia accessibility rather than risk legal problems down the road.

    SEO and Discoverability

    Making your multimedia content accessible also helps search engines like Google understand what’s in your videos and audio. That’s because search engines can’t watch a video or listen to a podcast the same way humans do—but they can read text. When you add captions, transcripts, and descriptive metadata, your content becomes easier to index, which can boost your search rankings and bring more people to your website.

    Key Multimedia Accessibility Techniques

    Captions and Subtitles

    Captions display the spoken words, plus important sounds (like music or a door slamming) on screen. They can be closed (user can turn them on or off) or open (always displayed). Effective captions must be accurate, in sync with the audio, and easy to read. This is crucial for people who are Deaf or hard of hearing, but it also helps viewers in noisy surroundings or those who find text easier to follow.

    Transcripts

    Transcripts are full text versions of everything said and heard in a video or audio file. They should include key sound effects or music cues as well. Transcripts are especially helpful for people with hearing loss or attention difficulties, but they’re also a big plus for your search engine optimization because they offer a text-based format that Google can index.

    Audio Descriptions

    For viewers with visual impairments, audio descriptions explain important visuals that aren’t covered by dialogue—like a shift in setting or a character’s facial expression. Ideally, these descriptions are inserted during natural pauses in the speech so they don’t interrupt the flow of the content.

    Using an Accessible Video Player

    Even well-captioned videos aren’t truly accessible if the video player itself is hard to navigate. Look for a player that supports keyboard navigation, screen readers, adjustable playback speeds, and independent volume controls for different audio elements.

    Planning Multimedia Accessibility from the Start

    While it’s possible to add accessibility features to existing media, it’s much easier (and less time-consuming) to plan these features from the beginning. Choose platforms that support captions, transcripts, and audio descriptions, and be sure to test your content with real users who rely on assistive technologies.

    Conclusion

    Making your videos and audio content accessible is about ensuring no one is left out. It’s not just good ethics or a legal must-have—it also boosts your SEO, widens your audience, and enhances user satisfaction. By adding captions, transcripts, audio descriptions, and user-friendly video players, you’re creating content that welcomes everyone.

    If you’re ready to take the next step, 216digital can help you make your website’s multimedia content truly inclusive. Contact us today to learn how. Multimedia accessibility is more than just checking a box—it’s about respecting your audience and future-proofing your brand in an increasingly diverse digital world.

    Greg McNeil

    February 24, 2025
    WCAG Compliance
    Accessibility, videos and audio content, WCAG Compliance, Website Accessibility
  • WCAG Basics: “Change of Context” or “Change of Content”

    Have you ever clicked on a text field and suddenly found yourself whisked away to a new page without warning? Or maybe you saw a form error message pop up out of nowhere, but your cursor stayed right where it was? These two situations hint at the difference between a “change of context” and a “change of content.”

    If you’re trying to make your website accessible, it’s important to know which is which because the Web Content Accessibility Guidelines (WCAG) treat them very differently. In this post, we’ll explore both terms, share some real-life examples, and give you tips on how to keep your site friendly and easy to use. By the end, you’ll have a stronger grasp of WCAG best practices and the confidence to apply them to your site.

    Why These Terms Matter

    People who rely on screen readers or keyboard navigation often can’t see or skim an entire page at once. Sudden or unexpected changes—like being redirected to a new tab—can be disorienting for them. That’s why WCAG sets clear rules to help you avoid making people feel lost.

    However, understanding “change of context” and “change of content” also helps with other accessibility concepts. For example, clarifying how your content updates ties right in with “Alternative for Time-based Media” or “Media Alternative for Text“—two other areas covered under WCAG. The more you know about these related topics, the better your site will serve all kinds of users.

    “Change of Context” in Plain Terms

    A “change of context” is a big shift in what a user sees or how they interact with the page. Under WCAG, it can include:

    • Opening a new window or tab without telling the user.
    • Moving the focus to another section of the page unexpectedly.
    • Redesigning the layout in a way that confuses users.

    For example, imagine you click into a text field, and suddenly, your screen shifts to another form altogether. That’s a huge jump! WCAG 3.2.1 (On Focus) says you shouldn’t trigger this kind of shift just because the user’s focus landed on an element. If the user ends up somewhere new, or a new window appears without their Input, you’re dealing with a “change of context.”

    “Change of Content” in Action

    Now, let’s say you click a menu button, and the menu expands without moving your cursor or launching a new page. That’s a “change of content.” You’re still in the same place—you can just see more information. This kind of change is usually okay as long as it doesn’t confuse or mislead.

    WCAG makes the point that not every content update equals a context change. You can display a tooltip, expand a dropdown, or show an inline error message without violating rules. As an example, if you’re filtering products on an eCommerce site and the list of items refreshes while your focus stays put, you’re likely good to go. The user expects new content to appear, so it’s not disorienting.

    When It Becomes an Accessibility Issue

    Mixing up these concepts can cause problems for people who rely on assistive technologies. For instance, if your site changes context every time someone selects a checkbox, they might lose track of where they were. WCAG 3.2.2 (On Input) warns against automatically triggering a big context shift unless you clearly warn the user or let them choose when it happens.

    At higher levels of WCAG (like AAA), 3.2.5 (Change on Request) says that major shifts should happen only when the user deliberately starts them—or they should be easy to dismiss. That means you can’t force a pop-up window to stay on screen with no way to close it. People need control over how they explore your site.

    Status Messages and Alerts

    Some sites show status messages—like “Item added to your cart”—that don’t move focus but do tell assistive tech users what’s happening. That’s allowed under WCAG 4.1.3 (Status Messages) because the screen reader can announce the alert without taking the user away from what they were doing.

    Things get trickier when an alert moves focus to itself. Sometimes, that’s necessary (say, with a big error), and if the user’s action triggers it, it can still meet WCAG standards. But if your site automatically shifts focus to a timeout warning with no user action, that can become a disorienting change of context—especially at the AAA level of WCAG compliance.

    Tips for Making It Work

    Keep People Where They Are

    Unless there’s a solid reason for moving focus or opening a new page, don’t do it. A small update to the same page is usually a “change of content,” which is less disruptive.

    Give Users a Heads-Up

    If you need to make a “change of context,” warn the user first. For example, say, “Selecting this option opens a new window.” This aligns with WCAG recommendations, especially 3.2.2.

    Test with Assistive Tech

    The best way to find out if your site is user-friendly is to try it with screen readers, keyboard-only navigation, or other assistive tools. You’ll quickly spot if something is shifting unexpectedly.

    Use ARIA Properly

    If you have alerts or status messages, use ARIA roles like role= “alert” or aria-live so screen readers can announce them without moving focus. This follows WCAG 4.1.3 guidelines for status updates.

    Think About Your Audience

    Some changes of context, like a security timeout, might be needed. Just remember to give the user control whenever possible.

    Wrapping It Up

    Understanding when something is a “change of context” rather than just a “change of content” is a big part of complying with WCAG. When you keep these definitions clear, you’ll avoid creating barriers that leave users confused and frustrated. It also ties back to important concepts like “Alternative for Time-based Media” and “Media Alternative for Text,” which help make websites more inclusive overall.

    Remember, WCAG doesn’t just set rules—it helps us create better experiences for everyone. If you need extra guidance, 216digital is here to help. We can perform an Accessibility Audit to see where your site stands, offer advice on meeting WCAG success criteria like 3.2.1, 3.2.2, 3.2.5, and 4.1.3, and suggest ways to make your site easier for all. 

    Ready to get started? Schedule a consultation with 216digital today and make sure you’re on the path to a more inclusive, user-friendly website!

    Greg McNeil

    February 20, 2025
    WCAG Compliance
    Accessibility, WCAG, WCAG Compliance, WCAG conformance, Web Accessibility, Website Accessibility
1 2 3 4
Next Page
216digital Scanning Tool

Audit Your Website for Free

Find Out if Your Website is WCAG & ADA Compliant













    216digital Logo

    Our team is full of expert professionals in Web Accessibility Remediation, eCommerce Design & Development, and Marketing – ready to help you reach your goals and thrive in a competitive marketplace. 

    216 Digital, Inc. BBB Business Review

    Get in Touch

    2208 E Enterprise Pkwy
    Twinsburg, OH 44087
    216.505.4400
    info@216digital.com

    Support

    Support Desk
    Acceptable Use Policy
    Accessibility Policy
    Privacy Policy

    Web Accessibility

    Settlement & Risk Mitigation
    WCAG 2.1/2.2 AA Compliance
    Monitoring Service by a11y.Radar

    Development & Marketing

    eCommerce Development
    PPC Marketing
    Professional SEO

    About

    About Us
    Contact

    Copyright 2024 216digital. All Rights Reserved.