videos and audio content Archives /Tag

Build Accessible Iframes That Work for Everyone
Frames have a messy reputation in web accessibility. Classic <frameset> and <frame> elements broke layouts, confused screen readers, and were finally deprecated in HTML5. Their modern successor—the humble <iframe>—is still very much alive, powering everything from video embeds to checkout widgets. Yet accessible iframes can introduce their own barriers when titles are missing, keyboard focus gets trapped, or content can’t resize.

If you care about delivering inclusive, standards‑compliant code, you don’t have to ditch iframes altogether—you just need to implement them thoughtfully. This guide walks you through the evolution of frames, the accessibility pitfalls of iframes, and the best practices that help every user interact with embedded content smoothly.

Why Accessibility Still Matters for Embedded Content

Accessible design is good design. Clear labeling, keyboard‑friendly navigation, and responsive layouts benefit everyone—especially shoppers using screen readers, people who enlarge fonts, or users browsing on small devices. Taking a little extra time to make your accessible iframes also reduces legal risk and improves SEO by keeping your markup clean and semantic. In short: a well‑built iframe keeps users engaged and protects your brand.

A Quick History of Frames (and Why They Were Retired)

In the late 1990s, developers used <frameset> and <frame> to split a browser window into scrollable panes. Cool at the time—frustrating in practice. Search engines struggled to index framed sites, URLs didn’t reflect the visible page, and assistive technologies couldn’t provide meaningful navigation cues. By the time HTML5 rolled around, frames were officially removed from the specification.

Where Iframes Fit Today

The <iframe> element solved many of the old headaches by embedding external documents inside the current page without breaking browser history or URLs. Developers rely on iframes for:
- Video and audio players
- Social media timelines
- Interactive maps
- Payment widgets
- Analytics dashboards
While the element itself is valid in HTML5, browser and assistive‑tech support varies depending on how you configure it. Screen readers, for example, announce the title of an iframe, then treat its contents as part of the main document—so a poorly labeled or keyboard‑unfriendly iframe becomes an instant roadblock.

Best Practices for Accessible Iframes

Give Every Iframe a Descriptive Title

Screen readers announce the title attribute before loading iframe content. A short, meaningful label tells users what to expect and helps them decide whether to enter the frame.
```
<iframe
  src="product-demo.html"
  title= "Product Demonstration Video">
</iframe>
```
This small addition satisfies WCAG 2.1 Success Criterion 4.1.2, which requires that every interactive element have a programmatically determinable name and role.

Keep Keyboard Navigation Intuitive

Users should be able to tab into an iframe, move through its interactive elements, and tab out without getting trapped. Test with only your keyboard:
1. Press Tab until focus enters the iframe.
2. Navigate its internal controls with Tab, Shift + Tab, and arrow keys.
3. Confirm you can exit the iframe and continue through the rest of the page.
Avoid blanket tabindex= "-1" values unless you intentionally want to remove an element from the tab order. If the embedded content comes from a third party, advocate for keyboard support or consider a different provider.

Maintain a Logical Heading Structure

Many screen‑reader users jump by headings. If your main page begins with <h1> then <h2>, the iframe shouldn’t suddenly start with another <h1>—that’s like slipping a spare title page into a novel. Match the heading level to the surrounding hierarchy and keep it consistent:
```

<h2>Customer Reviews</h2>
<iframe
  src= "reviews.html"
  title= "Latest Customer Reviews">
</iframe>

<h3 id="reviews-heading">Latest Customer Reviews</h3>
```
Let the Browser Handle Scrolling

Setting scrolling="no" or hiding overflow might make your layout tidier, but it hurts users who zoom text or rely on larger fonts. Leave scrolling to the browser unless you have a specific, accessible iframes alternative.

Embrace Responsive Iframes

Hard‑coded widths and heights break on small screens and large zoom levels. Use relative units or CSS that scales with its container:
```
<iframe
  src="store-locator.html"
  title= "Store Locator Map"
  style="width: 100%; height: 400px; border: 0;">
</iframe>
```
If you need a flexible height for dynamic content, explore the resize event or IntersectionObserver to adjust height programmatically—just be sure any script changes don’t steal keyboard focus.

Hide Decorative or Redundant Iframes

Sometimes you embed content that adds visual flair but no real information—say, a decorative animation. In that case, keep it out of the accessibility tree with aria-hidden= "true":
```
<iframe
  src="confetti-animation.html"
  title= "Decorative animation"
  aria-hidden= "true">
</iframe>
```
Hidden frames remain in the DOM for sighted users but won’t distract assistive‑tech users with irrelevant announcements.

When to Skip Accessible Iframes Altogether

Modern CSS and JavaScript let you load external content without the iframe overhead. Consider:
- Server‑side includes to pull fragments directly into your HTML.
- fetch() + DOM injection for dynamic widgets (with proper sanitization).
- Progressive Web App patterns for seamless, app‑like experiences.
These approaches often improve SEO, simplify styling, and remove the focus‑management headaches that come with nested browsing contexts.

Testing Your Work

Automated scanners like Lighthouse and WAVE spot missing titles, keyboard traps, and contrast issues quickly. But true confidence comes from hands‑on tests:
1. Screen reader run‑through — Use NVDA on Windows or VoiceOver on macOS. Listen for the iframe title, navigate inside, then move back out.
2. Keyboard‑only tour — Unplug your mouse. Can you tab to every control, activate it, and proceed?
3. Zoom and reflow — Increase text size to 200 percent or zoom the browser. Does the iframe stay readable and scrollable?
If something feels awkward or blocks progress, iterate until the experience is as smooth as the rest of your site.

Wrapping Up

Accessible iframes aren’t about flashy code—they’re about giving every visitor a clear path to your content:
- Describe each iframe with a short, helpful title.
- Ensure keyboard users can enter, navigate, and exit effortlessly.
- Keep heading levels logical and scrolling natural.
- Use responsive sizing and hide purely decorative frames.
- Test with real assistive technology and people whenever possible.
Ready to audit your site’s iframes—or any other accessibility concern? 216digital can help. Schedule an ADA‑compliance briefing with our team, and let’s make sure every part of your web experience works for everyone who lands on it.

Because inclusive code isn’t a luxury—it’s the standard today’s web deserves.
Greg McNeil

May 19, 2025

How-to Guides

Accessibility, How-to, iframe, videos and audio content, Website 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
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

Features	Captions	Subtitles
Purpose	Accessibility for Deaf/ Hard-of-hearing	Language Translation
Includes Sound Effects?	Yes	No
Speaker Identification?	Yes	No
Non-verbal Audio Cues?	Yes	No
Assumes Viewer Can Hear?	No	Yes

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
ADA Compliance for Videos
If you’re a website owner, developer, or content creator, you might already be familiar with the importance of making your site accessible. You might have heard about adding alt text to images or ensuring that your site is navigable using just a keyboard. But what about videos?

Videos are a powerful way to communicate with your audience, but if they aren’t accessible, you could be missing out on a large portion of your audience and might even run into legal issues. In this article, we’re diving into ADA compliance for videos, why it’s important, and how to make sure your videos are accessible to everyone.

What is ADA Video Compliance?

ADA stands for the Americans with Disabilities Act, which was passed in 1990 to prevent discrimination against individuals with disabilities. While it originally focused on physical spaces like buildings, the ADA has evolved to include digital spaces, including websites and the content they host. When we talk about ADA compliance for videos, we’re referring to making sure that your videos can be accessed and understood by everyone, including people with disabilities.

ADA compliance for videos is closely related to the Web Content Accessibility Guidelines (WCAG), which provide a set of standards for making web content more accessible. The most recent version, WCAG 2.1, lays out specific guidelines for making videos accessible.

Why is ADA Video Compliance Important?

You might be wondering why ADA video compliance is so crucial. There are a few key reasons:
1. Inclusivity: Making your videos accessible ensures that everyone, regardless of ability, can engage with your content. This isn’t just the right thing to do, it also makes good business sense. When your content is accessible, you open up your site to a broader audience.
2. Legal Requirements: The ADA requires that digital content be accessible, and failure to comply can result in lawsuits. While the law may not specifically mention videos, courts have interpreted the ADA to include all web content, including multimedia such as videos.
3. Better User Experience: Accessible videos provide a better experience for all users. Features like captions can help people understand your content in noisy environments or when they’re not able to use sound.
4. Search Engine Optimization (SEO): Adding captions, transcripts, and other accessibility features can also help with SEO. Search engines can’t watch videos, but they can read captions and transcripts, which can help your content rank better in search results.
WCAG 2.1 Video Requirements

Understanding and following WCAG guidelines can help make sure your videos meet ADA requirements. The latest version, WCAG 2.1, sets clear rules for making videos accessible, which are important for legal reasons.

WCAG 2.1 details most video-related requirements in Section 1.2. This section focuses on providing alternatives for time-based media like audio and videos. Here are the key guidelines for video content for Level A and AA:
1. 1.2.1: For prerecorded videos with no audio, there must be an audio track that gives the same information.
2. 1.2.2: Captions should be included for all prerecorded audio in videos.
3. 1.2.3: Prerecorded videos should have audio descriptions.
4. 1.2.4: Live videos should include captions for all spoken content.
5. 1.2.5: All prerecorded videos must have audio descriptions.
Tips for Creating Accessible Videos

Provide Captions for Multimedia Content

Captions are text versions of the spoken part of a video or audio. They display the dialogue, sound effects, and other audio cues. For example, if a character in a video says, “I’m going to the store,” the caption will show this text on the screen. Captions are usually placed at the bottom of the video, so they don’t cover up important parts of the visuals.

SC 1.2.2 Captions (Prerecorded) states that all prerecorded video and audio content must have captions. This helps people who can’t hear or who prefer to read understand what’s going on in the media.

Think About Your Audience When Writing Captions

Just adding captions to your videos isn’t enough. You need to ensure they’re accurate, easy to read, and truly helpful for viewers.

Here’s what your captions should do:
- Include All Dialogue and Key Sounds: Capture every word spoken in the video, and don’t forget important sounds and music—for instance, sound effects from sports events.
- Match the Audio and Video: Make sure captions sync up with what’s happening in the video. They shouldn’t lag behind someone speaking or an animation on screen.
- Be Readable: Use a font size that’s big enough for everyone to see comfortably.
- Cover All Your Videos: Add captions to every video you share, even on social media.
Watch Out for Automated Captions

When it comes to captions, it’s best to steer clear of automated tools. While AI has gotten a lot better, these automatic captions still make mistakes that can be annoying and distracting for viewers.

If you do use automated captions, make sure to check them thoroughly for errors. The ideal approach is to create your own captions and transcripts while you’re working on your video scripts.

Include Audio Descriptions

Audio descriptions are better than transcripts for people who are blind or visually impaired. Think of them like a podcast that explains what’s happening in a video. They provide information without requiring the viewer to see the screen.

Adding audio descriptions to your videos might feel a bit unusual at first, but it quickly becomes second nature. Audio descriptions are specifically created to help users with vision loss by describing the visual elements of a video. They include a voice track that fits into the pauses between dialogue and other audio; whenever you can, include audio descriptions in your videos.

Provide a Transcript

WCAG guidelines don’t require transcripts for pre-recorded videos with audio. However, if you publish videos without audio, you need to provide a detailed transcript to meet WCAG SC 1.2.1 (Audio-only and Video-only).

While captions alone can make videos accessible, providing transcripts is a good practice. Transcripts let people read at their own pace, which helps those using assistive technology, non-native speakers, and individuals with learning disabilities.

Make Sure Your Video Player Has Accessible Controls

Many people use keyboards to navigate the web without a mouse. Keyboard accessibility is an important part of making websites usable for everyone, but video players can sometimes create problems for keyboard users. These issues usually come from poor coding or JavaScript problems.

To check if your video player works well with a keyboard, open your website in a browser and use the Tab and Shift-Tab keys to move through the controls. As you test, ask yourself these questions:
- Can I use all the controls on the video player?
- Does the keyboard seem to get “stuck” on any control or part?
- Which part is currently selected by the keyboard?
Avoiding Flashing Content

Videos that flash or flicker can be problematic for people with photosensitive epilepsy. WCAG guidelines recommend avoiding content that flashes more than three times per second to prevent triggering seizures.

How to Install Videos on Your Website to Be Accessible

Now that you understand the importance of ADA video compliance and the relevant WCAG guidelines, let’s talk about how to install videos on your website to ensure they are accessible.

Choose an Accessible Video Player

The first step is to choose a video player that is designed with accessibility in mind. Many popular video players, like YouTube’s embedded player, already have features like keyboard accessibility and customizable captions. If you’re using a custom video player, make sure it meets WCAG guidelines by testing it with keyboard navigation and screen readers.

Add Captions to Your Videos

When you upload a video to your site, you’ll want to make sure it has captions. If you’re using a platform like YouTube, you can upload your own captions or use the platform’s automatic captioning feature, though it’s a good idea to review and edit these captions for accuracy. If you’re hosting videos yourself, there are many tools available for creating and syncing captions.

Provide Transcripts

After you’ve added captions, the next step is to create a transcript of the video. You can offer the transcript as a downloadable file or display it directly on the page below the video. Providing a transcript not only helps with accessibility but can also improve your site’s SEO.

Include Audio Descriptions

For videos with important visual content that isn’t described in the audio, consider creating a version of the video with audio descriptions. This can be as simple as adding a voiceover that describes key visual elements or creating a separate audio track that users can turn on if they need it.

Test Your Videos for Accessibility

Once you’ve added all the necessary accessibility features, it’s important to test your videos to ensure they are actually accessible. This means watching the video with captions and a screen reader, navigating the player with just a keyboard, and making sure the video content is clear and understandable, even without sound or visuals.

Use an Accessibility Checker

There are many tools available that can automatically check your site’s accessibility, including your videos. These tools can identify issues you have missed and suggest ways to fix them. Regularly running these checks can help you maintain ADA compliance as you add new content to your site.

Make Accessibility a Priority

Web accessibility isn’t just a legal requirement—it’s a way to make your content more inclusive and reach a wider audience. By focusing on ADA video compliance, you’re taking important steps to ensure that everyone, regardless of ability, can enjoy and engage with your content. Whether you’re a website owner, developer, or content creator, making your videos accessible should be a top priority.

Remember, accessibility is an ongoing process. As you continue to create and share video content, keep WCAG guidelines in mind, and make it a habit to review and update your accessibility features regularly. Not only will this help you avoid legal issues, but it will also help you create a more inclusive and welcoming online experience for all your users.

If you need help with video accessibility or legal compliance, we’re here to help. Schedule a briefing with 216digital today so that you can confidently take this next step into digital accessibility.
Greg McNeil

August 9, 2024

How-to Guides

Accessibility, ADA Compliance, ADA Website Compliance, videos and audio content, Web Accessibility, web development, Website Accessibility

Build Accessible Iframes That Work for Everyone

Why Accessibility Still Matters for Embedded Content

A Quick History of Frames (and Why They Were Retired)

Where Iframes Fit Today

Best Practices for Accessible Iframes

Give Every Iframe a Descriptive Title

Keep Keyboard Navigation Intuitive

Maintain a Logical Heading Structure

Let the Browser Handle Scrolling

Embrace Responsive Iframes

Hide Decorative or Redundant Iframes

When to Skip Accessible Iframes Altogether

Testing Your Work

Wrapping Up

What Is Audio Description?

What Is Audio Description?

How Is Audio Description Created?

Writing the Script

Voicing the Description

How Is Audio Description Published?

Benefits of Audio Description

Alternative to Audio Description

Why Audio Description Is Worth Prioritizing

Coffee Shop Website Accessibility: What’s Missing?

Why Does Coffee Shop Website Accessibility Matters?

Missing Alt Text for Images

Hard-to-Read Text and Poor Contrast

Unclear Headings and Structure

Unlabeled or Unclear Links and Buttons

Forms Without Proper Labels

Videos Without Captions or Transcripts

How to Get Started

A Warm Welcome, On and Offline

Captions or Subtitles: What’s the Difference?

What Are Captions?

Types of Captions

What Are Subtitles?

Subtitles vs. Captions: Key Differences

Why Are Captions Important for Web Accessibility?

Open vs. Closed Captions: Which Should You Use?

How to Add Captions to Your Digital Content

How to Add Captions

Best Practices for Creating Accessible Captions

Captions & Subtitles: Enhancing Your Content

Why Should Websites Prioritize Multimedia Accessibility?

Video and Audio Accessibility

Why Remediating Multimedia Is Essential

Inclusive User Experience

Legal Compliance & Risk Mitigation

SEO and Discoverability

Key Multimedia Accessibility Techniques

Captions and Subtitles

Transcripts

Audio Descriptions

Using an Accessible Video Player

Planning Multimedia Accessibility from the Start

Conclusion

ADA Compliance for Videos

What is ADA Video Compliance?

Why is ADA Video Compliance Important?

WCAG 2.1 Video Requirements

Tips for Creating Accessible Videos

Provide Captions for Multimedia Content

Think About Your Audience When Writing Captions

Watch Out for Automated Captions

Include Audio Descriptions

Provide a Transcript

Make Sure Your Video Player Has Accessible Controls

Avoiding Flashing Content

How to Install Videos on Your Website to Be Accessible

Choose an Accessible Video Player

Add Captions to Your Videos

Provide Transcripts

Include Audio Descriptions

Test Your Videos for Accessibility

Use an Accessibility Checker

Make Accessibility a Priority