How-to Guides Archives- Page 2 of 9/Category

Accessible Accordion vs Disclosure: Dev Best Practices

Disclosures and accordions show up all over the place—FAQs, menus, settings panels—you name it. They seem simple enough, right? But making sure they actually work for everyone takes more than just toggling some content and calling it a day.

If you’ve ever wondered when to use <details> versus building an accordion with buttons and ARIA, or how to keep screen reader users from getting lost in a sea of hidden panels, you’re not alone. This guide breaks it all down—what to use, when to use it, and how to build a truly accessible accordion without overcomplicating the code.

What Are Disclosure and Accordion Widgets?

Disclosure Widgets: Simple, Native, and Often Overlooked

Disclosures—also known as show/hide widgets—are ideal for toggling a single section of content. Think expandable FAQs or inline help that doesn’t clutter the UI by default.

Here’s a basic example using semantic HTML:

<details>
  <summary>Need more info?</summary>
  <p>Here are more details you might find useful.</p>
</details>

This pattern is fully native and built into the browser, which means it comes with keyboard support and screen reader compatibility right out of the box. You also get the open attribute, which allows you to control whether the content is expanded by default.

The main advantage here is simplicity—no JavaScript needed, and fewer chances to introduce accessibility issues.

Accordion Widgets: More Complex, More Control

An accessible accordion expands on the idea of disclosure by managing multiple content panels. In most implementations, only one section is open at a time, helping users stay focused and reducing cognitive overload.

You can build an accordion using multiple <details> elements, but if you want to control behavior more precisely—like closing other panels when one opens—you’ll need JavaScript.

Here’s what a minimal HTML-only version might look like:

<details name="accordion">
  <summary>Step 1</summary>
  <p>Instructions for step one.</p>
</details>

But to meet WCAG standards for a true accessible accordion, you’ll need to manage keyboard navigation, state indicators, and focus behavior—topics we’ll cover next.

Accessibility Considerations Developers Must Prioritize

Keyboard Navigation That Works for Everyone

An accessible accordion must support meaningful keyboard interactions. Here’s what users expect:

Tab and Shift + Tab to move between interactive elements.
Enter or Space to toggle a section open or closed.
Arrow Up/Down or Home/End to move between accordion headers in more advanced versions.

Missing any of these can make your component unusable for keyboard users. The WAI-ARIA Authoring Practices offer detailed guidance on accordion interaction patterns—worth bookmarking for reference.

Use Semantic Elements—Always

If there’s one golden rule, it’s this: never sacrifice semantics for styling.

That means:

Use <button> for interactive triggers—not <div>, <span>, or anchor tags without href.
If you’re toggling visibility, it’s a button, not a link.
Ensure that elements behave as users (and assistive technologies) expect.

Using semantic elements is one of the most effective ways to ensure your accessible accordion behaves predictably across screen readers and input types.

Add ARIA Where Needed, Not Everywhere

ARIA should enhance native HTML—not replace it. But when you’re building a custom accordion in JavaScript, ARIA becomes essential for communicating component state.

Here’s a basic implementation:

<button aria-expanded="false" aria-controls="info">More Info</button>
<div id="info" hidden>
  <p>Here’s the additional info.</p>
</div>

const btn = document.querySelector('button');
const content = document.getElementById('info');
btn.addEventListener('click', () => {
  const expanded = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', String(!expanded));
  content.hidden = expanded;
});

This ensures screen readers can track whether content is visible or hidden, creating a seamless experience for all users.

Common Accessibility Mistakes (and How to Fix Them)

Even seasoned devs slip up. Here are a few common issues that can break accessibility—and how to address them:

Mistake	Problem	Solution
Non-focusable triggers	`<div>`s with `onclick` don’t work for keyboard users	Use `<button>` or add `tabindex="0"`
Links used instead of buttons	`<a>` without `href` doesn’t convey intent	Replace with semantic `<button>`
Missing state feedback	Screen readers can’t detect if content is expanded	Dynamically update aria-expanded
Focusable elements in hidden content	Users tab into content they can’t see	Use hidden or display: none correctly

Most of these issues stem from skipping semantic HTML or relying too heavily on JavaScript without proper state management. An accessible accordion avoids these pitfalls by focusing on clarity, intent, and interaction feedback.

Best Practices for Developers

Building an accessible accordion that holds up in the real world means going beyond code snippets. Here’s what to keep in mind:

Start with Progressive Enhancement

Whenever possible, begin with HTML <details> and <summary>. They’re accessible by default and supported in all major browsers. Use JavaScript only when additional behavior—like limiting panels to one open at a time—is truly needed.

Prioritize Focus Visibility

An accordion is only as accessible as its focus states. Make sure every interactive element has a visible focus indicator, and don’t override :focus-visible in your CSS. This isn’t just a WCAG 2.2 requirement—it’s also just good UX.

Avoid Overengineering with ARIA

Don’t reach for ARIA unless you need to. Native HTML tends to be more robust across assistive technologies, and using ARIA incorrectly can make things worse. When in doubt, simplify.

Test Like a User

If you’re not testing with a keyboard, you’re flying blind. Add screen reader testing with NVDA, JAWS, or VoiceOver into your QA flow. Run Lighthouse and WAVE scans, but don’t rely on them alone—they won’t catch everything an actual user would encounter.

Real-World Application: From Good to Great

Let’s say you’re rebuilding a legacy FAQ section. It uses JavaScript to toggle open answers, but it’s riddled with <div>s and missing ARIA.

Start by replacing the markup with semantic HTML:

<details>
  <summary>What’s your return policy?</summary>
  <p>You can return items within 30 days.</p>
</details>

Then, enhance with JavaScript if you want only one section open at a time. Layer in ARIA attributes to improve screen reader support. Suddenly, you’ve turned a clunky widget into a polished, accessible accordion that works for everyone.

Wrapping It Up

Disclosures and accordions might seem interchangeable, but the differences matter—especially when accessibility is on the line. Whether you’re working on a quick FAQ or building a fully dynamic interface, an accessible accordion ensures users with different abilities can navigate and interact with your content.

At the end of the day, accessibility isn’t about checking boxes—it’s about building better interfaces for everyone.

Need help auditing your components?

216digital offers in-depth accessibility support. Schedule an ADA compliance consultation to review your current implementation and ensure everything meets WCAG standards—without compromising design or performance.

Greg McNeil

May 8, 2025

How-to Guides

Accessibility, accessible accordion, Disclosure, How-to, HTML, semantic HTML, web developers, web development

Accessible Form Validation: A Developer’s Guide
Forms are everywhere—login screens, signups, feedback surveys, checkout pages. They’re a cornerstone of user interaction on the web. But here’s the thing: if users can’t fill them out easily and accurately, your form isn’t just failing them—it’s failing your business.

That’s where accessible forms come in. Accessible forms aren’t just about ticking boxes for compliance—they’re about creating better experiences for everyone. Whether someone is using a screen reader, navigating with a keyboard, or dealing with cognitive or motor disabilities, your form should guide, inform, and support them from first click to final submit.

This guide will walk you through the essentials of accessible form validation, based on WCAG guidelines 3.3.1 through 3.3.4. No legalese—just practical advice you can implement today.

Meet the Guidelines: WCAG 3.3.1 to 3.3.4

Let’s simplify the four WCAG success criteria most relevant to form validation:
- 3.3.1 Error Identification: If something goes wrong, users need to know what happened and where it happened.
- 3.3.2 Labels or Instructions: Don’t make users guess. Tell them what’s required.
- 3.3.3 Error Suggestion: If they make a mistake, suggest how to fix it. Don’t just point and shake your digital finger.
- 3.3.4 Error Prevention: For serious forms (like taxes, legal documents, or financial data), build in checks to stop mistakes before they happen.
Together, these guidelines form the foundation of truly accessible forms.

Labeling: The First Step Toward Clarity

Every good form starts with clear, semantic labeling. You’re not just adding text—you’re defining meaning and context for both users and assistive technologies.
- Use the <label> element, and link it to the input with for="input-id" and id="input-id".
- Place labels above the form field, not beside or inside. It’s easier to scan and better supported by screen readers.
- Be concise but descriptive. Instead of “Name,” try “Full Name (First and Last).”
Skipping proper labels is one of the fastest ways to make your form inaccessible—and one of the easiest problems to fix.

Inline Error Messaging: Real-Time Feedback That Actually Helps

Don’t let users fill out a whole form only to learn they messed up three fields. Inline validation catches issues in real time, helping users correct them before they submit.
- Position error messages near the field—ideally right below or beside it.
- Keep the language helpful and plain: “Password must be at least 8 characters.”
- Use aria-live="polite" to announce error messages as they appear for screen readers.
This creates accessible forms that support users proactively instead of punishing them after the fact.

Don’t Skip aria-describedby

Want to add help text, error messages, or extra instructions that screen readers can pick up? Use aria-describedby.

This attribute lets you associate one or more descriptions with a form control. It’s a game-changer for accessible forms, especially when validation feedback or detailed guidance is involved.

Example:
```
<input id="email" aria-describedby="emailHelp emailError">
<small id="emailHelp">We'll never share your email.</small>
<span id="emailError">Email is required.</span>
```
You can dynamically update which IDs are referenced based on validation state, ensuring that assistive tech users always get the right context.

About Placeholders: Don’t Rely on Them Alone

We’ve all seen it: fields with placeholder text like “Enter your email,” and no label in sight. Here’s the problem: placeholders disappear as soon as users start typing—and that’s bad news for accessibility.

Use placeholders for examples, not for instruction.
- ✅ “example@example.com” is fine.
- ❌ “Enter your email address” as your only guidance? Not okay.
Also, watch your contrast ratios. Light gray placeholder text on a white background might look trendy, but it can fail WCAG color contrast guidelines—especially for users with low vision.

Smart Form Validation

Validation is about more than catching errors—it’s about building trust. If your form is flaky, unclear, or inconsistent, users will bounce.
- Use client-side validation (like HTML5 validation or JavaScript) for instant feedback.
- Always back it up with server-side validation to catch anything missed and guard against malicious input.
- Block submission until all required fields are valid—and clearly explain why a field isn’t.
Whether it’s a missed checkbox or a mistyped phone number, your form should guide users toward fixing the issue—not leave them guessing.

Crafting Helpful, Accessible Error Messages

Bad error messages are like bad customer service: unhelpful, vague, and frustrating. Let’s fix that.
- Be specific: “Username is required” > “Error.”
- Never rely on color alone (like red borders) to indicate problems. Use symbols (like ❗), text, or both.
- Keep error placement consistent—typically below the input or in the same visual region.
- Use simple language. If someone has to decode your error message, it’s not helping.
This clarity benefits everyone—from screen reader users to someone filling out your form on a noisy subway.

Test It Like You Mean It

Automated tools are great, but they only catch part of the picture.

Start with:
- Lighthouse for quick audits.
- WAVE for spotting contrast or structural issues.
Then go deeper:
- Run through the form with keyboard only—can you reach and complete every field?
- Try it with a screen reader (VoiceOver, NVDA, JAWS). Does it announce labels, instructions, and errors?
- Ideally, test with real users with disabilities. There’s no substitute for lived experience.
Accessible forms are never a “one-and-done” task. They’re a process—build, test, refine, repeat.

Keep Moving Toward More Accessible Forms

Every form you build is an opportunity to include—or exclude—someone. Whether it’s a simple newsletter signup or a detailed application, accessible forms ensure everyone gets a fair shot at completing the task.

This isn’t just about compliance. It’s about craftsmanship. It’s about building smarter, kinder digital experiences—ones that don’t leave users behind.

Need help building forms that meet WCAG standards and feel good to use? Connect with 216digital. We’ll help you create, audit, and refine accessible forms that work for every user—and every device.
Greg McNeil

April 18, 2025

How-to Guides

Accessibility, ADA Compliance, forms, How-to, WCAG, Web Accessibility, web development, Website Accessibility
Accessible Documents: 7 Issues You Might Overlook
Have you ever tried to read a PDF on your phone only to pinch‑zoom until the text blurs? Now, picture that same frustration multiplied for someone who relies on a screen reader, a keyboard, or extra magnification. Inaccessible documents aren’t minor annoyances—they’re brick walls that block information. That’s why creating accessible documents is more than a best practice—it’s a necessity.

This post walks through seven barriers often hidden inside PDFs and Word files. For each one, you’ll see why it matters, which Web Content Accessibility Guidelines (WCAG) success criteria apply, and how a few practical tweaks can open the door for every reader.

Invisible Obstacles: Why Documents Trip People Up

Web pages are usually built with clear HTML tags that signal headings, lists, and links. Conversely, documents mix text, images, and complex layouts in a single container. If you skip semantic structure or rely on visual styling alone, those layers become invisible mazes for people using assistive tech.

WCAG was designed for the web, yet its principles work perfectly for accessible documents. Meeting them keeps your files usable for screen readers, keyboard navigation, high‑contrast modes, and more.

1. Missing or Misused Headings

When screen reader users rely on heading levels to navigate, skipping or misusing them turns a well-organized document into a frustrating guessing game. Simply enlarging font size doesn’t cut it—headings need to be properly structured.

Make it better: Use built-in heading styles (H1, H2, H3, etc.) in Word or Google Docs, not manual formatting. Stick to one H1 per page for your title, followed by a clear hierarchy.

Don’t forget: WCAG 1.3.1 requires meaningful structure—not just visual formatting. Run an accessibility checker before exporting to PDF to make sure your headings stay intact.

Pro tip: Set your document language, so screen readers know how to pronounce text correctly. In Word, go to Review > Language > Set Proofing Language.

2. When PDFs Are Just Pictures

A scanned contract that looks fine on screen may be completely silent to assistive tech. Without real text, a screen reader simply announces “graphic… graphic… graphic.” There’s no searching, no enlarging, and no reading.

What to do instead: Use OCR (Optical Character Recognition) to create a text layer. Adobe Acrobat, ABBYY FineReader, and Google Drive all have built-in OCR tools.

Make it work: Always proofread OCR results—blurry scans and fancy fonts often lead to errors.

Standards check: WCAG 1.4.5 requires using real, selectable text whenever possible.

Bonus tip: Use document properties to add a title and author—these help screen readers and improve file organization. In Word: File > Info > Properties.

3. Color Contrast That’s Too Subtle

That soft gray text might look sleek on a light background—but if you have low vision or are reading on a dim screen, it becomes nearly invisible.

How to fix it: Check color combinations before publishing. Use tools like WebAIM’s Contrast Checker or Adobe’s color contrast tools.

What the guidelines say: WCAG 1.4.3 calls for a minimum contrast ratio of 4.5:1 for standard text.

Design reminder: Check charts, infographics, and callout boxes too—those often sneak past brand reviews.

4. Vague Link Text

When every hyperlink says “Click here,” a screen reader user hears the same phrase over and over, with no context. It’s like walking through unlabeled doors and hoping for the best.

Do this instead: Write descriptive links like “Download the 2025 Benefits Guide (PDF).” This helps everyone know what to expect before they click.

Standards note: WCAG 2.4.4 requires link text to make sense on its own.

Extra clarity: In Word, use ScreenTips (Alt + Ctrl + D) to add hover-text instructions for links.

5. Images Without Alt Text

If an image doesn’t include alt text, assistive tech can’t describe it—and users miss the point. Charts, infographics, and even decorative flourishes need attention.

Quick fix: Describe the key message, not every visual detail. For example, summarize trends or highlight data points in charts.

WCAG compliance: Guideline 1.1.1 requires text alternatives for all meaningful images.

Helpful tip: Tag purely decorative images as “null” or “decorative,” so screen readers skip them. For complex visuals, link to a longer description or add it in an appendix.

6. Tables That Don’t Translate

Tables made with tabs or manual spacing may look fine, but screen readers can’t follow the structure. Data ends up being read out of order—turning financials or schedules into a jumbled mess.

Get it right: Use built-in table tools. Define the first row as a header and use column headers where needed.

Testing tools: In Word: Table > Properties > Row > Repeat as header row. In Acrobat Pro, use the Table Editor and test with NVDA or VoiceOver.

Remember: WCAG 1.3.1 also applies here—data must be presented with proper markup and relationships.

Avoid this: Don’t use tables for layout. It may seem like a shortcut, but it often leads to accessibility headaches.

7. Lists That Don’t Act Like Lists

Typing dashes or asterisks might look fine visually, but to a screen reader, it’s just a single paragraph. The structure—and meaning—is lost.

Better approach: Use the bullets or numbering tools built into Word or Docs. Real lists help assistive tech break up and interpret content correctly.

After exporting: Run “Autotag Document” in Acrobat and verify that lists are correctly tagged.

WCAG reference: Once again, 1.3.1—structure matters.

8. Use Clear Language and Layout

Overly complex language or long-winded paragraphs can be barriers in themselves. Accessibility isn’t just about code or design—it’s about comprehension too.

Try this: Write with clarity. Use simple words, short sentences, and plenty of white space. Break things up with subheadings and bulleted lists.

Pro tip: Aim for an 8th-grade reading level or below when possible. Tools like Hemingway Editor or Microsoft Editor can help simplify your language.

9. Choose the Right Export Settings

Even the best-crafted document can lose accessibility features when exported carelessly.

Before hitting “Save As”:
- Use formats that preserve tags, alt text, and headings (e.g., PDF/A).
- Use built-in export tools from Word, not third-party converters.
- Double-check using an accessibility checker like Adobe Acrobat’s.
10. Provide Alternative Formats

Not every user consumes content the same way. Offering alternative versions ensures a broader reach.

Examples:
- A transcript for a video.
- A plain-text version of a design-heavy PDF.
- A mobile-friendly HTML version of a Word document.
- This level of flexibility supports users with screen readers, low vision, dyslexia, and more.
Beyond the Basics: Keep Creating Accessible Documents

Fixing the top document issues is a great start—but real accessibility doesn’t stop at a checklist. It’s something you build into the process and revisit as tools evolve, teams shift, and standards update.

Don’t rely on tools alone. Automated checkers are helpful for flagging missing tags or contrast issues, but they won’t catch everything. They can’t tell if your heading structure makes sense or if your alt text actually describes the image. A quick manual review—ideally from someone who understands assistive tech—can make all the difference.

Keep your team in the loop. Many of the most common document barriers come down to simple habits: skipping heading styles, forgetting to add alt text, or using layout tables. Short training sessions or documentation refreshers can prevent a lot of repeat issues, especially if you’re onboarding new staff or updating templates.

Check your templates yearly. Accessibility standards grow. So do the tools we use to write, design, and export. A quick annual review of your document templates helps ensure you’re not accidentally locking in outdated practices or missing opportunities to improve.

Make Your Documents Work for Everyone

Document accessibility isn’t about perfection—it’s about intention. When you take the time to apply heading styles, write descriptive link text, or check contrast ratios, you’re creating something that works for more people, in more ways.

These changes aren’t hard. They’re habits. And once your team knows what to look for, accessible documents become second nature—just like spell check or formatting a title page.

At 216digital, we offer more than advice. We can review your files, train your staff, and even build accessible templates tailored to your needs. Every project we take on includes complementary ADA training—so your team is empowered, not just compliant.

If you’re ready to move past the guesswork and start building documents that include everyone, schedule a quick briefing with us. Together, we can turn accessible content into a shared standard—not a scramble.

Let’s take that first step—one document at a time.
Greg McNeil

April 16, 2025

How-to Guides

Accessibility, accessible documents, How-to, PDF, WCAG, Website Accessibility
How to Use aria-describedby for Web Accessibility
Have you ever looked at a form, seen the bold text or red borders, and instantly known what to do next? That’s because as visual users, we get a lot of clues from layout, color, and spacing. But for someone using a screen reader, those visual hints don’t exist. Instead, they rely on code—programmatic clues—to make sense of what’s on the screen.

That’s where aria-describedby comes in. If you’ve ever struggled to make a form, button, or modal accessible, you’re not alone. aria-describedby is a powerful tool that helps users understand what’s happening—if you use it right.

In this article, I’ll walk you through how to use aria-describedby the right way. We’ll go through practical code examples, real use cases, and common mistakes. I’ll also show you how it ties into making things like captions and subtitles more accessible, especially for users with assistive technology.

Unpacking aria-describedby

aria-describedby lets you link an element to other content that gives extra detail. It points to the ID(s) of one or more elements that contain helpful text. Think of it like this:
- aria-labelledby gives something its name.
- aria-describedby gives it extra explanation.
If a screen reader sees an input with aria-describedby= "pw-hint", it will read the input label and the hint.

Why It’s Important

Used correctly, aria-describedby helps you meet the Web Content Accessibility Guidelines (WCAG) success criteria. It improves accessibility for users who rely on screen readers. It’s especially helpful when native HTML doesn’t cover all the information a user needs. This matters for users navigating complex interfaces—like forms, modals, or media players with captions and subtitles.

When Should You Use aria-describedby?
- Form fields: Add help text or error messages.
- Buttons: Clarify what will happen, especially for destructive actions.
- Dialogs/modals: Explain what the dialog is for.
- Tooltips: Offer extra information without cluttering the interface.
- Live status updates: Let users know when things change, like upload progress or loading indicators.
aria-describedby can even support captions and subtitles in video players by giving extra context for the screen reader user, describing what’s happening beyond the visual content.

When Not to Use It
- If HTML already does the job (like using <label> or <fieldset>).
- If it adds repetitive or unnecessary text.
Code Walkthroughs: Real-World Examples

Let’s get into some code. These examples show how to use aria-describedby in ways that make a real difference.

Form Fields

Password Requirements
```
<label for="pw">Password</label>
<input type="password" id="pw" aria-describedby="pw-hint">
<p id= "pw-hint">Password must be at least 12 characters long and include a number.</p>
```
Error Messages
```
<label for="email">Email address</label>
<input type="email" id="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" class="error">Please enter a valid email address.</p>
```
Multiple Descriptions
```
<input type="text" id="username" aria-describedby="username-req username-tip">
<p id="username-req">Must be at least 8 characters.</p>
<p id="username-tip">Displayed on your profile.</p>
```
Buttons

Destructive Action Explanation
```
<button aria-describedby="delete-desc">Delete Account</button>
<p id= "delete-desc">This will permanently remove your account and all data.</p>
```
Dialogs and Modals

Accessible Dialog
```
<div role="dialog" aria-modal="true" aria-labelledby="dialogTitle" aria-describedby="dialogDesc">
  <h2 id="dialogTitle">Confirm Deletion</h2>
  <p id= "dialogDesc">This action is permanent and cannot be undone.</p>
</div>
```
Tooltips and Live Regions

Accessible Tooltip
```
<input type="text" id="first" aria-describedby="tip1">
<div id="tip1" role="tooltip">Optional field.</div>
```
Status Messages
```
<div aria-describedby="upload-status">
  <input type="file" onchange="showUploadStatus()">
  <div id="upload-status" aria-live="polite">Uploading...</div>
</div>
```
These techniques can also apply to custom media players. You can use aria-describedby to point to captions and subtitles that are visible on screen but also need to be announced programmatically.

Common Mistakes to Avoid
- Too Many Descriptions: Linking to 3 or 4 IDs might overwhelm users.
- Broken References: Make sure every ID you point to actually exists.
- Redundant Content: Don’t repeat what’s already in the label.
- Timing Issues: Don’t change the text dynamically during focus unless absolutely necessary.
- Inconsistent Patterns: Keep your approach consistent across similar components.
Best Practices for Effective Implementation
- Write Clear Descriptions: Keep them short, useful, and easy to understand.
- Avoid Jargon: Explain things in plain language.
- Keep Descriptions Visible: If possible, don’t hide the text—what helps screen reader users can help sighted users, too.
- Use Native HTML First: ARIA is a supplement, not a substitute.
- Test Often:
  - Use screen readers like NVDA, JAWS, and VoiceOver.
  - Test in browsers like Chrome, Firefox, and Safari.
- Stay Consistent:
  - Create reusable components.
  - Document your design patterns.
  - Automate accessibility checks.
This also applies to any content with captions and subtitles—they should be clearly described in a way that works for both visual and non-visual users.

Beyond the Code: Organizational Tips
- Code Reviews Should Include Accessibility
- Use Linters and Audits: Tools like Google Lighthouse or WAVE to catch ARIA barriers.
- Add Accessibility to Your QA Checklist
- Train Your Team: Make sure everyone knows what ARIA does and doesn’t do.
If you’re building tools with captions and subtitles, include accessibility from the start. Don’t bolt it on later.

Accessible Descriptions, Better UX

aria-describedby is one of those quiet heroes of accessibility. It helps fill the gaps between what users see and what assistive tech can tell them.

Used well, it improves the user experience for everyone—not just people using screen readers. It’s especially helpful in forms, dialogs, and anything with captions and subtitles, where the added context can be critical.

So remember: use aria-describedby intentionally, test it thoroughly, and keep your patterns consistent. And if your team needs help making your site or app more accessible, 216digital offers expert guidance to help you meet compliance standards—while creating a better experience for all users.

Let’s keep building an internet that works for everyone. One line of code at a time.
Greg McNeil

April 11, 2025

How-to Guides

ARIA, aria-describedby, How-to, Web Accessibility, web developers, web development, Website Accessibility
What Designers Get Wrong About Accessible Web Design

When we talk about accessible web design, most people picture developers digging into code to fix issues after the fact. But the real magic—and often the biggest missed opportunity—starts much earlier in the process. It starts with us, the designers.

Design isn’t just about how something looks; it’s about how something works. That includes making sure every user can interact with it, regardless of ability. The challenge is, even seasoned designers can unintentionally leave accessibility gaps in their work. Not out of carelessness, but simply because we weren’t taught to think about it.

Let’s take a look at the most common ways accessible web design gets overlooked in the design phase—and how small changes can make a big difference. These aren’t technical developer fixes. They’re simple, design-first decisions that help create a more inclusive experience for everyone.

Relying on Color Alone

Using color to communicate meaning—like red for errors or green for success—might feel intuitive. But it doesn’t work for everyone. People with color vision deficiencies may not distinguish between red and green. Others might be browsing on devices in bright sunlight or with grayscale settings turned on. Color alone just isn’t enough.

The good news is that accessible web design doesn’t mean ditching color—it means backing it up. A red border becomes more effective with an icon like an exclamation point and a short label that says “Error.” Color still enhances the message, but now it’s readable by everyone, regardless of how they perceive color.

Poor Contrast Between Text and Background

Minimalist palettes are trendy, but light gray text on a white background can create a serious readability issue. For users with low vision, poor contrast turns your carefully crafted content into a frustrating puzzle. It’s not just a style choice—it’s a usability barrier.

Aiming for at least a 4.5:1 contrast ratio ensures your text is readable under a wide range of conditions, including mobile screens and bright environments. Tools like WebAIM’s Contrast Checker make it easy to test combinations. With accessible web design, clarity and style can absolutely coexist.

Hover-Only Interactions

Hover effects can make an interface feel sleek and modern, especially for desktop users. But the reality is that not everyone navigates with a mouse. Touchscreen devices and keyboard users don’t have the option to hover, which means they could miss essential content like tooltips, dropdowns, or action buttons.

Accessible web design calls for interaction that works across devices and input types. If something appears on hover, it should also be accessible via keyboard focus or tap. That way, no one is left guessing—or worse, completely missing part of the site.

Hiding or Removing Focus Styles

One of the more subtle mistakes designers make is removing focus outlines to make interfaces feel cleaner. That glowing blue ring might not match the brand aesthetic, but it’s a crucial indicator for users navigating with a keyboard. It shows where they are on the page.

Instead of removing it, try styling the focus indicator in a way that fits your brand. Make it visible, make it intentional. It’s a small touch, but it honors the needs of users who rely on keyboard navigation. That’s the heart of accessible web design—keeping things usable, not just pretty.

Icon-Only Buttons Without Labels

A trash can, a gear, a hamburger menu—these are all familiar icons to some of us. But they’re not universal. Assuming every user will instantly recognize what an icon means can create confusion, especially for users with cognitive differences or those who are new to digital interfaces.

By adding a short label like “Delete” or “Settings,” or by providing an accessible name using ARIA labels, you give your users clarity. Icons still add visual interest, but now they’re functional for everyone. It’s another way accessible web design respects a broader range of experiences.

Vague Link Text

Link text like “Click here” or “Learn more” might seem harmless, but it quickly becomes a problem for people using screen readers. These users often navigate by skimming a list of links, completely out of the surrounding context. If all the links say the same thing, it’s impossible to know where they go.

Writing meaningful link text—like “Download the 2025 Pricing Guide” or “Explore Our Accessibility Services”—adds clarity for everyone. Plus, it’s great for SEO. In accessible web design, clarity and functionality always go hand-in-hand.

Layouts That Fall Apart When Text Is Resized

Many users with low vision increase their device’s text size to read more comfortably. But if a layout isn’t built to handle that, the entire page can fall apart. Text overlaps, buttons get cut off, and navigation becomes a mess.

Designing with flexibility in mind—using relative units like em, rem, or percentages instead of fixed pixel values—helps keep layouts intact even when zoomed in. Responsive grids, media queries, and scalable components all support accessible web design by making sure your content can adapt.

Skipping Alt Text on Images

Every image on your site has a purpose, whether it’s decorative or informative. But when you leave out alt text—or worse, insert placeholder text like “image123.jpg”—users who rely on screen readers are left without context.

Good alt text is short, specific, and helps users understand the image’s role in the content. For example, “Smiling customer using our mobile app” is useful. If the image is decorative and adds no meaningful content, you can mark it as such so screen readers skip it. Accessible web design makes visuals work for everyone, not just those who can see them.

Hard-Coded Font Sizes

Hardcoding fonts in pixels may seem like a safe bet for maintaining visual control, but it can limit how users adjust their settings. People who need larger text may be blocked by your choices, especially if CSS prevents scaling.

By using relative units, you give users control over their reading experience. Fonts should scale with their preferences, not fight against them. Accessible web design puts usability first, allowing your audience to engage with your content in the way that works best for them.

Overly Complex Navigation

Mega menus, fancy interactions, and unique navigation patterns can look impressive in a mockup—but they can create major barriers for people using keyboards or assistive tech. When navigation becomes a puzzle, users are more likely to get frustrated and leave.

The most effective navigation is simple, consistent, and easy to explore. Use clear labels, test with keyboard-only input, and rely on semantic HTML whenever possible. Accessible web design doesn’t mean boring—it means dependable, predictable, and inclusive.

Where Good Design Meets Real-World Impact

Designers have the power to make the web more inclusive. And the best part? You don’t have to start from scratch. These changes are often small, thoughtful adjustments that make a big difference for users who rely on them.

Accessible web design isn’t a limitation—it’s an invitation to create better work. It asks us to go beyond trends and think deeply about the people who use the things we build. With every project, we can help make the internet a place where more people feel seen, supported, and able to fully participate.

If you’re looking for a partner who understands the balance between beauty, functionality, and accessibility, 216digital is here to help. Together, we can make accessible web design the standard—not the exception.

Greg McNeil

April 8, 2025

How-to Guides, Web Design & Development

Accessible Design, ADA Lawsuit, How-to, responsive design, UX, Web Accessible Design
eCommerce Accessibility: Cart & Checkout Best Practices
As a front-end developer, you already know how much the small stuff matters—clear labels, logical tab order, and meaningful feedback. These details don’t just polish the experience; they make the difference between a site that works for everyone and one that silently shuts people out. When it comes to eCommerce accessibility, gaps tend to show up in the usual suspects: shopping carts, forms, payment flows, and filters.

Below, we’ll explore common eCommerce accessibility gaps and show you how to fix them. You’ll see examples of HTML and ARIA attributes that make a real difference in usability—without requiring you to overhaul your entire site. Just clean, thoughtful code that helps your work reach more people, the way it’s meant to.

Why Accessibility Matters in E-Commerce

Better eCommerce accessibility results in a better user experience. When you streamline navigation, label form fields properly, and offer multiple payment methods, you’re benefiting everyone, not just shoppers with disabilities. You’re also opening your doors to more customers, including those who use screen readers, have limited mobility, or simply prefer an intuitive layout.

Beyond enhanced usability, there’s also the legal side. Lawsuits related to eCommerce accessibility are on the rise. Addressing accessibility from the start can help reduce legal risks, but the bigger win is ensuring all potential customers feel welcome in your store.

eCommerce accessibility often breaks down at a few critical points:
- Shopping carts with unclear or missing labels.
- Forms and checkouts that don’t offer proper error messages.
- Payment flows that are dependent on inaccessible CAPTCHAs or limited payment methods.
- Product filters that are keyboard-incompatible or lack clear feedback.
If you’re a developer responsible for these features, you’re in the perfect position to fix these problems. A few strategic lines of code or well-placed attributes can help transform a confusing checkout into a seamless experience for all.

Making Your Shopping Cart Work for Everyone

Add Clear Labels (Yes, Even for Buttons)

It’s a common oversight to have buttons or icons without descriptive text. Screen readers can’t interpret an icon unless you provide an aria-label or similar attribute. Give every button clear text or an invisible descriptor for assistive tech.
```
<button aria-label="Remove item from cart">
  Remove
</button>
```
This simple step ensures that anyone using a screen reader knows exactly what action they’re about to take.

Let People Update Cart Items Without Guesswork

Quantities, item removals, and other cart updates should be straightforward. If you’re using a numeric input, label it properly so a screen reader user knows what they’re adjusting.
```
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" value="1">
```
When quantity fields are clearly labeled and keyboard-friendly, customers can adjust items easily—no mystery involved.

Show Helpful Feedback When Things Go Wrong

Errors happen: maybe a shopper enters an invalid quantity or tries to remove an item that’s no longer in stock. Instead of reloading the entire page (and frustrating users), use an aria-live region to announce errors in real-time:
```
<div role="alert" aria-live="assertive">
  Error: Please enter a valid quantity.
</div>
```
This alerts people using screen readers without forcing them to refresh or hunt for an error message.

Shipping Forms That Are Easy to Use (and Easy to Navigate)

Use Straightforward, Consistent Labels

Forms can become confusing if users aren’t sure what to type. Proper <label> tags tied to the correct inputs make a huge difference for both sighted customers and those using assistive tech.
```
<label for="address">Shipping Address:</label>
<input type="text" id="address" name="address">
```
When labels are descriptive and consistent throughout the form, everyone knows exactly what information to provide.

Make Sure Users Can Tab Through Fields Logically

Keyboard-only users often navigate by pressing the Tab key. If your form fields aren’t in a logical sequence, they’ll jump around unpredictably. Paying attention to the natural DOM order is usually enough, but if you must alter it, use tabindex carefully.

Show Errors Clearly and Offer Suggestions

Generic error messages like “Invalid input” force users to guess what they did wrong. Instead, offer specific guidance so people know exactly how to fix the issue:
```
<div role="alert">
  Error: ZIP code must be five digits.
</div>
```
This clarity benefits everyone, speeding up the checkout process and reducing frustration—two big wins for eCommerce accessibility.

Designing a Payment Flow That’s Smooth and Inclusive

Offer More Than One Way to Pay

Variety in payment methods—credit cards, PayPal, Google Pay, Apple Pay, etc.—ensures different shoppers can complete purchases in a way that suits them. Some assistive technologies work better with certain payment platforms, so having options expands your customer reach.

If You Use CAPTCHAs, Make Them Accessible

Nothing derails a checkout faster than an inaccessible CAPTCHA. If possible, rely on server-side checks. If you do need a CAPTCHA, consider offering an audio version or a more user-friendly alternative. This prevents people with disabilities from being locked out at the final step of their eCommerce accessibility journey.

Choose Accessible Payment Gateways

Third-party payment platforms can introduce new accessibility issues. Do a quick review to ensure any external gateway meets basic WCAG standards and is compatible with screen readers and other assistive tools. Even the best checkout flow can fail if the final payment step isn’t accessible.

Don’t Let Product Filters Be a Barrier

Make Filters Keyboard-Friendly

Checkboxes, sliders, and dropdowns all need to be navigable via keyboard. That means ensuring users can Tab to each control, use arrow keys for sliders, and press Enter or Space to toggle checkboxes or confirm a selection.

Let Users Know What Filters Are Applied

Always make it clear which filters are currently active, both visually and programmatically (via ARIA attributes). This helps sighted users and people using screen readers track their selections and remove or adjust filters easily.

Stick to Native HTML Controls When Possible

While custom-styled checkboxes and radio buttons can look appealing, they often introduce accessibility quirks. Native HTML elements are easier to make accessible:
```
<fieldset>
  <legend>Filter by Size</legend>
  <label><input type="checkbox" name="size" value="small"> Small</label>
  <label><input type="checkbox" name="size" value="medium"> Medium</label>
  <label><input type="checkbox" name="size" value="large"> Large</label>
</fieldset>
```
You can style them to fit your brand while ensuring they work out of the box for most assistive tech. It’s one of the easiest ways to improve eCommerce accessibility.

Testing and Validating Your Work

Start with Automated Tools (But Don’t Stop There)

Tools like Google Lighthouse and WAVE are great starting points. They scan for many common issues, but automated tests can’t cover everything, especially more nuanced user interactions.

Test Manually with Real Assistive Tech

Grab a screen reader like NVDA (Windows) or VoiceOver (Mac). Try using only your keyboard to navigate the site. This hands-on approach reveals a lot about real-world usability that automated checks might miss—especially in areas related to eCommerce accessibility.

Get Feedback from Real Users

If you can, involve people with disabilities in your testing. Their direct experience helps pinpoint issues you might never notice on your own. Real-world feedback is invaluable for refining the shopping journey.

Small Fixes, Big Impact

Building an accessible eCommerce site doesn’t require a complete overhaul. Most improvements, like adding clear labels or structuring forms properly, are quick, incremental changes in your code. These small fixes can significantly enhance the experience for shoppers who rely on assistive technology—and often make the site more pleasant for everyone else as well.

If you want more detailed guidance or an expert review, there are plenty of resources on WCAG and web.dev. You can also team up with 216digital, where we specialize in making sure online stores meet eCommerce accessibility standards from start to finish. Whether you need help with checkout flows, product filtering, or a full-site audit, our team is here to ensure every shopper can complete their purchase with ease.

Remember: inclusive design isn’t just a checkbox—it’s a mindset. By prioritizing eCommerce accessibility at each step of your development process, you’ll build online shopping experiences that truly welcome everyone. And that’s good business for everyone involved.
Greg McNeil

April 4, 2025

How-to Guides

Accessibility, ecommerce website, How-to, WCAG Compliance, Web Accessibility, web developers, web development, Website Accessibility

Alt Text or Image Description? Why Accessibility Comes First

“Should you optimize for SEO or accessibility?” That’s the wrong question.

Let’s be honest—there’s a lot of confusion floating around online, especially on social media, about the difference between alt text and image descriptions. Some folks say you should cram keywords into alt tags. Others say just describe the image “vaguely” for the algorithm. Neither approach helps real people—and they don’t help your brand either.

This article clears things up. We’ll break down the key differences between alt text and image descriptions, explain how both support accessibility and SEO (yes, both!), and offer practical ways to use them well. The goal? Helping you create content that’s not just searchable, but actually usable—for everyone.

Because putting accessibility first doesn’t mean you have to sacrifice SEO. In fact, it means building digital spaces that work better for all users, including search engines.

What Is Alt Text?

Alt text—short for alternative text—is the text you add in HTML to describe an image. It looks something like this:

<img src="pancakes.jpg" alt="Pancakes" />

This little string of text has a few big jobs:

It shows up if an image doesn’t load.
It tells screen readers what the image is for users who can’t see it.
It can help with SEO if written well—but that’s not its main job.

Alt text is usually short and direct. Think “Chocolate cake on a plate” or “Man typing on laptop.” It’s added when you upload images to your website, blog, or CMS.

But here’s the catch: alt text can be too short. It doesn’t always provide enough detail, especially if you’re trying to convey mood, emotion, or complex ideas.

That’s where image descriptions come in.

What Are Image Descriptions?

An image description is a fuller explanation of what an image shows. It’s like telling a story with words instead of just naming what’s in the picture.

Here’s an example:

Alt Text: “Pancakes”

Image Description: “A tall stack of fluffy pancakes covered in golden syrup, powdered sugar, and slices of fresh strawberries and bananas on a white ceramic plate.”

See the difference?

Image descriptions give blind or visually impaired users a more complete picture of what everyone else sees. They may appear near the image in the caption, in surrounding content, or even inside ARIA labels for complex visuals like graphs or maps.

In short: alt text gives a label. Image descriptions give life.

Alt Tags vs. Image Descriptions: Key Differences

Let’s break this down side by side:

Alt Tags	Image Descriptions
Short, a few words	Full sentences
Placed in code (`alt=""`)	In visible content or metadata
Helps screen readers	Helps screen readers and gives more context
SEO-friendly	SEO-friendly
Often auto-generated	Often auto-generated

Think of alt tags as headlines. Image descriptions? They’re the full story.

How Image Descriptions Support Both Accessibility and SEO

Here’s the good news: you don’t have to choose between helping people and helping search engines. Done right, an image description does both.

Let’s say you’re a restaurant. Here’s an example of an image description could look:

“A stack of pancakes from Alexa’s Pancake House, topped with maple syrup, whipped cream, and sliced strawberries.”

This gives a full visual for screen reader users and includes relevant keywords (like your business name) in a natural way.

No stuffing. No tricks. Just useful, clear, descriptive writing.

Tips

Keep your writing simple and honest.
Use your keyword (like image description) naturally—don’t overdo it.
Don’t sacrifice clarity for search performance. Do both.

SEO Pitfalls That Undermine Accessibility

Now let’s talk about what not to do.

Some people think alt text is a great place to dump keywords. That’s a big accessibility mistake. Imagine using a screen reader and hearing:

“Pizza, best pizza, NYC pizza, cheap pizza, pizza restaurant.”

Helpful? Nope. Just frustrating.

Here’s What to Avoid

Keyword packing in alt attributes.
Using phrases that don’t describe the actual image.
Ignoring image descriptions altogether.

A Better Approach

Use short, honest alt text.
Add rich image descriptions nearby for complex images.
Use filenames, captions, and surrounding text to support SEO goals.

Why Accessibility Must Come First

Yes, SEO matters. But accessibility should always come first.

Why?

Because someone who is blind, low-vision, or has a cognitive disability deserves to understand your content just like everyone else. Accessibility means inclusion. It also means better design for all users—including those with slow connections, temporary impairments, or different learning needs.

And let’s not forget: choosing accessibility shows what your brand stands for.

It’s not just for websites either. Platforms like Instagram, Pinterest, and TikTok are full of visuals. People with disabilities use them every day. They deserve full, rich image descriptions too.

Best Practices for Writing Accessible Image Descriptions

Here’s how to get it right:

Keep It Clear and Concise: Avoid long, rambling sentences. Use plain language.
Be Contextual: What’s the purpose of the image? What matters in this moment?
Use Natural Language: Don’t write like a robot. Imagine you’re explaining the image to a friend who can’t see it.
Use Both When Needed: For things like infographics or charts, use a short alt tag and include a detailed image description nearby.
Test with Screen Readers: Listen to how your image description sounds aloud. Would someone understand it without seeing the image?

The Role of Content Creators, Developers, and Marketers

Creating accessible content is a team effort.

Writers and Content Creators: Should know how to write clear image descriptions that include important context.
Developers and Designers: Need to code alt attributes properly and make sure screen readers work well on their platforms.
Marketers and SEO Pros: Can drive results while still being inclusive. Collaboration with accessibility experts is key.

A Better Internet Starts with Better Habits

Here’s the takeaway: You can do both. But accessibility has to come first.

At 216digital, we believe digital accessibility isn’t optional—it’s part of building a better internet. Every well-written image description, every thoughtfully placed alt tag, every small decision adds up.

Not sure if your site is truly accessible? Wondering what your legal obligations are under the ADA?

We can help. Schedule an ADA Accessibility Briefing with our team. It’s your first step toward a more inclusive, compliant, and trustworthy online presence. Let’s build something better—together.

Greg McNeil

April 3, 2025

How-to Guides

Accessibility, Alt text, image description, SEO, WCAG, Web Accessibility

Accordion Accessibility: Common Issues & Fixes
Organizing content effectively on the web is about more than just layout—it’s about usability and inclusivity. When users are forced to scroll through long pages of uninterrupted text, the experience becomes inefficient and frustrating.

Enter accordion components: interactive UI elements that allow content sections to be expanded or collapsed. When implemented correctly, accordion accessibility streamlines navigation and improves content organization. However, if accessibility is overlooked, these helpful components can quickly become barriers.

This guide explores how to design accessible accordion components that enhance the user experience and meet all users’ needs—regardless of their abilities. We’ll cover best practices for structure, semantics, ARIA attributes, keyboard support, and implementation strategies to help you build inclusive, user-friendly interfaces.

Why Accordion Accessibility Matters

Accordions are essential: they reduce visual clutter and allow users to interact with content on their terms. Whether it’s an FAQ page, a product feature breakdown, or technical documentation, accordions help surface only the content that matters at the moment.

However, it’s crucial to remember that not all users interact with content similarly. Screen reader users, keyboard-only users, and others with varying access needs must be able to operate accordions just as easily as those using a mouse or touchscreen. Accessible design isn’t just a nice-to-have—it’s an essential component of responsible development.

The Building Blocks of an Accordion Accessibility-Friendly Component

1. Structure: Header and Panel

Every accordion should be composed of two core parts:

Header (Trigger)

A clickable element (typically a <button>) that users activate to show or hide content. It usually includes a descriptive label and may feature visual indicators like arrows or plus/minus icons.

Panel (Content)

The content is associated with the header. It should be hidden from view and keyboard focus when collapsed and fully accessible when expanded.

For effective accordion accessibility, each header must be clearly linked to its corresponding panel—visually for sighted users and programmatically for assistive technologies.

2. Keyboard Navigation

One of the most common accessibility pitfalls with accordion components is insufficient keyboard support. If users can’t operate your interface without a mouse, it’s not accessible.

Your accordion must support the following interactions:
- Tab / Shift + Tab: Move between focusable elements, including accordion headers.
- Enter or Space: Expand or collapse the currently focused header.
- Arrow Up / Arrow Down: Navigate between accordion headers.
- Home / End: Jump to the first or last header within the accordion group.
By supporting these interactions, you ensure that keyboard users have the same level of control as mouse users.

3. Use Semantic HTML

Semantic HTML provides the backbone of accessibility. It ensures assistive technologies can understand the structure and function of your content without additional cues.

Best Practices for Accordion Accessibility
- Use heading elements (<h3>, <h4>, etc.) to maintain the document outline.
- Place a <button> inside the heading to toggle visibility.
- Wrap panel content in a <div> that follows its associated button.
Why <button> and not <div> or <a>?

Buttons are keyboard-focusable by default, accessible to screen readers, and support interactions like Enter and Space. Enter and Space. If you rely on <div> or <a> for toggling, you’ll need extra code to achieve the same level of accordion accessibility.

4. Implementing ARIA Attributes

ARIA (Accessible Rich Internet Applications) attributes enhance accessibility when native HTML doesn’t fully express an element’s role or state. In custom accordions, these attributes help communicate dynamic behavior to assistive technologies.

ARIA Attributes for Accordion Accessibility
- aria-expanded: Indicates the panel’s expanded (true) or collapsed (false) state. Applied to the button.
- aria-controls: Points to the id of the panel controlled by the button.
- aria-labelledby: Applied to the panel, this links it back to its header button for context.
- aria-hidden:Use decorative icons or non-informative content to prevent screen readers from announcing them.
These attributes ensure that screen reader users receive clear, relevant information about the accordion’s behavior and structure.

Implementation Examples

Option 1: Native HTML with <details> and <summary>

For a semantic-first approach, HTML offers a native accordion-like behavior:
```
<details>
  <summary>Shipping Information</summary>
  <div>
    <p>We offer free shipping on orders over $50...</p>
  </div>
</details>
```
Pros
- Minimal code
- Built-in keyboard support
- Accessible by default in modern browsers
Cons
- Styling can be limited
- Inconsistent support across all assistive technologies
This is a great lightweight option for simple use cases but may fall short in more complex interfaces.

Option 2: Custom JavaScript Accordion with ARIA

If you need more control, a custom accordion allows full styling and behavior management—just be sure to handle accordion accessibility properly.

HTML Structure
```
<h3>
  <button aria-expanded="false" aria-controls="panel1" id="accordion1">
    Shipping Info
  </button>
</h3>
<div id="panel1" role="region" aria-labelledby="accordion1" hidden>
  <p>We offer free shipping on orders over $50...</p>
</div>
```
JavaScript snippet
```
const buttons = document.querySelectorAll('button[aria-expanded]'); buttons.forEach((button) => { const toggleAccordion = () => { const expanded = button.getAttribute('aria-expanded') === 'true'; button.setAttribute('aria-expanded', String(!expanded)); const panel = document.getElementById(button.getAttribute('aria-controls')); panel.hidden = expanded; }; button.addEventListener('click', toggleAccordion); button.addEventListener('keydown', (event) => { if (event.key === 'Enter') { toggleAccordion(); } }); });
```
This implementation not only handles basic interaction but also improves navigation for keyboard users. Combined with semantic structure and ARIA, it creates a robust and inclusive experience.

Best Practices to Keep in Mind
- Use Clear Labels: Avoid generic labels like “Section 1.” Use descriptive headers that make sense out of context.
- Provide Visual Cues: Arrows or plus/minus icons help users understand that a section is expandable. Consider animations that reinforce open/close behavior.
- Maintain Focus Indicators: Never remove focus outlines unless you’re replacing them with custom indicators that are just as visible.
- Be Selective with Accordions: Don’t hide critical content. It should be visible by default if the information is essential (e.g., pricing, legal disclaimers).
Testing Accessibility

Even well-intended implementations can miss the mark without testing. Include accessibility testing as part of your development workflow:
- Keyboard-Only Testing: Navigate the accordion entirely by keyboard.
- Screen Reader Testing: Use tools like NVDA, JAWS, or VoiceOver to check for correct announcements.
- Automated Tools: Run your component through tools like WAVE, or Lighthouse to identify missing attributes or ARIA misuse.
- Manual Code Review: Double-check that all attributes, labels, and roles are properly implemented.
Final Thoughts

Accessible accordions do more than organize content—they foster a better, more inclusive web. By prioritizing structure, semantics, ARIA roles, and thoughtful interaction design, you empower all users to engage with your content meaningfully.

If you’re unsure where to start or want to ensure your components meet accessibility standards, consider working with an experienced accessibility partner like 216digital. We specialize in helping teams build digital experiences that work for everyone—by default, and with accordion accessibility baked in.
Greg McNeil

March 27, 2025

How-to Guides

Accessibility, accordion, accordion accessibility, How-to, web developers, web development, 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
How to Make Your Marketing More Accessible

You know how important marketing is already. But the real question is: Who’s not getting your message?

It’s easy to assume your carefully crafted campaigns are reaching everyone—but are they? What about someone using a screen reader? Or someone experiencing cognitive overload from flashing images or cluttered layouts?

You’re already working with engagement rates, algorithms, and design trends if you’re a marketer or content creator. So why do you need to worry about accessibility, too? Because accessible marketing is not optional—it’s necessary if you want to reach more, protect your brand, and build more trust.

Let’s parse out the ways that accessibility intersects with marketing now—and how it actually puts you ahead in terms of competition.

Why Accessibility Matters in Marketing

Grow Your Audience—Organically

Consider this: nearly 16% of people globally possess a disability that affects how they use the internet. If your content or site isn’t accessible, you’re missing out on a significant portion of your audience. Adding accessible marketing helps those individuals, but it also has the effect of simplifying and enhancing the experience for all, making your brand more desirable and accessible.

Improve Your Brand’s Credibility

Audiences today notice—and appreciate—brands that are concerned with being inclusive. Brands like Microsoft and Apple have established trust by being considerate and inclusive behaviors. By adopting accessible marketing, you’re broadcasting a message loud and clear: you genuinely care about your audience. That sincerity boosts customer loyalty and turns customers into brand ambassadors.

Get a Natural SEO Boost

Here’s a practical advantage: accessible marketing tends to coincide with SEO best practices. Descriptive text and clear, well-structured content help search engines and assistive technologies comprehend your content better. By making your site more accessible, you’ll not only enhance user experience but also perhaps enhance your search result visibility.

Stay Compliant and Reduce Risk

You’re probably familiar with accessibility laws like the Americans with Disabilities Act (ADA) and guidelines such as Web Content Accessibility Guidelines (WCAG). Ignoring these standards can lead to serious legal consequences—something no brand wants to face. By integrating accessible marketing into your strategies, you proactively avoid these risks, protecting your business and its reputation.

Website Accessibility Tips

Make Your Content Easy to Navigate

Attempt to use only the Tab key to navigate through your site. Is it easy and self-evident? Good usage of headings (H1, H2, H3) isn’t all about design appearance—it helps users navigate without hindrance, especially those who rely on assistive technologies.

Always Add Alt Text to Images

Alt text is a short description of an image. Screen readers use this text to describe the image aloud for people who can’t see it. For example, if you have a photo of a smiling person holding a dog, your alt text could say, “A woman holding a small brown dog and laughing.”

When writing alt text, be clear and concise. Provide enough information so someone can imagine the picture if they can’t see it. This step takes only a few seconds per image, but it goes a long way in making sure everyone can follow along.

Use Clear Language and Short Sentences

Plain language is your friend. It cuts out fluff and makes your message easier to understand. Not everyone enjoys reading long paragraphs loaded with big words. Simple wording often performs better because people grasp the idea quickly. Then, they can respond, share, or buy without confusion.

Try to limit long sentences. If a sentence feels like it’s going on forever, break it into two. This helps your audience read faster and makes screen readers work better.

Check Keyboard Navigation and Focus Indicators

Not everybody is a mouse user. Well-designed visible keyboard focus indicators make it easy for users with keyboard navigation or assistive device users to access your site with ease.

Be Careful With Animated Content

Animated or blinking content can be distracting or even harmful to some users. When you use animations, always provide an easy way to pause or disable them.

Social Media Accessibility Best Practices

Alt Text Isn’t Just for Websites

Image descriptions (alt text) are supported by most social media platforms these days. Make it a habit—you’re taking a simple step toward accessible marketing.

Format Hashtags Clearly

Hashtags like #MarketingTips2023 (all capitals) are more screen-reader friendly than all-lowercase counterparts, increasing accessibility right away.

Limit Emoji Usage

Emojis are great, but they should be used only sparingly. Excessive emoji usage will provide messy audio experiences for screen reader users.

Tag Your Links with Care

“Click Here” is useless. Descriptive words like “Find our latest products” will all inform users properly of the intent of the link.

Multimedia Accessibility Strategies

Use Captions and Transcripts

Video marketing is a big part of many brands’ strategies. But some viewers are deaf or hard of hearing. Others can’t use sound at certain times, like when they’re in a library or a busy coffee shop. Closed captions let them follow the video’s message without hearing the audio.

A transcript is also helpful. It’s a written version of all the spoken words and important sounds in a video. Transcripts help search engines pick up on your keywords. This gives an added SEO boost.

Add Audio Descriptions

Audio descriptions explain to visually impaired viewers what they are missing. This action unequivocally demonstrates your brand’s commitment to accessible marketing.

Making Accessibility a Habit

Make Accessibility Part of Your Workflow

Accessibility need not be a burden. Incorporate it into your regular content creation processes—train personnel, prep checklists, and add accessibility into every campaign plan. Accessible marketing will be second nature in no time.

Regularly Improve

Accessibility is not set-and-forget. Regular testing with tools like WAVE or Lighthouse and feedback from real-life assistive tech users ensures that your marketing remains effective and inclusive.

Closing the Conversion Gap

Marketing is all about creating a connection—and that connection isn’t whole if parts of your audience are left behind. By committing to accessible marketing, you’re committing to better communication, more active relationships, and more relevant experiences for each and every individual who comes into contact with your brand.

So, how do you begin? Take what you already do so well and add accessibility to it. Utilize it to inform the way you design, write, and present content. And when you need advice, we at 216digital can keep everything in rhythm, accessible to everyone, and effective.

Great marketing is not just something that is seen or heard – it’s something that’s felt by everyone.

Greg McNeil

March 24, 2025

How-to Guides, The Benefits of Web Accessibility, Web Accessibility Training

Accessibility, Digital Marketing, Marketing, Web Accessibility, Website Accessibility

What Are Disclosure and Accordion Widgets?

Disclosure Widgets: Simple, Native, and Often Overlooked

Accordion Widgets: More Complex, More Control

Accessibility Considerations Developers Must Prioritize

Keyboard Navigation That Works for Everyone

Use Semantic Elements—Always

Add ARIA Where Needed, Not Everywhere

Common Accessibility Mistakes (and How to Fix Them)

Best Practices for Developers

Start with Progressive Enhancement

Prioritize Focus Visibility

Avoid Overengineering with ARIA

Test Like a User

Real-World Application: From Good to Great

Wrapping It Up

Meet the Guidelines: WCAG 3.3.1 to 3.3.4

Labeling: The First Step Toward Clarity

Inline Error Messaging: Real-Time Feedback That Actually Helps

Don’t Skip aria-describedby

About Placeholders: Don’t Rely on Them Alone

Smart Form Validation

Crafting Helpful, Accessible Error Messages

Test It Like You Mean It

Keep Moving Toward More Accessible Forms

Invisible Obstacles: Why Documents Trip People Up

1. Missing or Misused Headings

2. When PDFs Are Just Pictures

3. Color Contrast That’s Too Subtle

4. Vague Link Text

5. Images Without Alt Text

6. Tables That Don’t Translate

7. Lists That Don’t Act Like Lists

8. Use Clear Language and Layout

9. Choose the Right Export Settings

10. Provide Alternative Formats

Beyond the Basics: Keep Creating Accessible Documents

Make Your Documents Work for Everyone

Unpacking aria-describedby

Why It’s Important

When Should You Use aria-describedby?

When Not to Use It

Code Walkthroughs: Real-World Examples

Form Fields

Password Requirements

Error Messages

Multiple Descriptions

Buttons

Destructive Action Explanation

Dialogs and Modals

Accessible Dialog

Tooltips and Live Regions

Accessible Tooltip

Status Messages

Common Mistakes to Avoid

Best Practices for Effective Implementation

Beyond the Code: Organizational Tips

Accessible Descriptions, Better UX

Relying on Color Alone

Poor Contrast Between Text and Background

Hover-Only Interactions

Hiding or Removing Focus Styles

Icon-Only Buttons Without Labels

Vague Link Text

Layouts That Fall Apart When Text Is Resized

Skipping Alt Text on Images

Hard-Coded Font Sizes

Overly Complex Navigation

Where Good Design Meets Real-World Impact

Why Accessibility Matters in E-Commerce

Making Your Shopping Cart Work for Everyone

Add Clear Labels (Yes, Even for Buttons)

Let People Update Cart Items Without Guesswork

Show Helpful Feedback When Things Go Wrong

Shipping Forms That Are Easy to Use (and Easy to Navigate)

Use Straightforward, Consistent Labels

Make Sure Users Can Tab Through Fields Logically

Show Errors Clearly and Offer Suggestions

Designing a Payment Flow That’s Smooth and Inclusive

Offer More Than One Way to Pay

If You Use CAPTCHAs, Make Them Accessible

Don’t Skip `aria-describedby`

Why `<button>` and not `<div>` or `<a>`?

Option 1: Native HTML with `<details>` and `<summary>`