216digital.
Web Accessibility

ADA Risk Mitigation
Prevent and Respond to ADA Lawsuits


WCAG & Section 508
Conform with Local and International Requirements


a11y.Radar
Ongoing Monitoring and Maintenance


Consultation & Training

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

Web Design & Development

Marketing

PPC Management
Google & Social Media Ads


Professional SEO
Increase Organic Search Strength

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

About

Blog

Contact Us
  • Class Is in Session for Digital Accessibility

    Class Is in Session for Digital Accessibility

    In the first week of school, a parent tried to submit a health form from her phone. The fields weren’t labeled, the keyboard focus jumped, and the “Submit” button never announced itself to her screen reader. Ten minutes later, she gave up—and the nurse never received the update. Small details in the interface had big, human consequences. This is why digital accessibility belongs on the same list as notebooks, logins, and bell schedules.

    Accessibility on campus isn’t only ramps and elevators. The real campus now includes the learning management system, the student information system, online forms, classroom apps, digital textbooks, videos, and PDFs uploaded by teachers. When these touchpoints aren’t designed for everyone, the barriers are invisible but very real. Students miss assignments. Parents miss announcements. Teachers spend late nights wrestling with tools instead of teaching. Administrators field complaints they didn’t anticipate.

    When School Technology Leaves Learners Behind

    For ninth-grader using a screen reader doesn’t just see an untagged PDF as a small annoyance—it’s a wall. When a teacher is posting materials after hours, clear headings and alt text can be the difference between “done” and another late night reformatting. And for families juggling multiple jobs, captions and plain language turn school updates into something everyone can follow on the first read.

    Digital accessibility gives every learner a fair start and lets ability—not the interface—decide the outcome. When a student can tab through an assignment form, a parent can complete it by voice on a phone, and a teacher’s resources read cleanly in NVDA or VoiceOver, learning gets easier for everyone.

    What Digital Accessibility Looks Like in a School Context

    Good accessibility is concrete and testable in the tools schools use every day:

    • Structure and navigation. Pages use semantic headings, lists, and landmarks so assistive tech can move through the outline—not just the visuals. Menus are reachable with a keyboard and the focus is always visible.
    • Forms that behave. Labels are programmatically tied to inputs, errors are described in plain language, and status messages are announced to screen readers.
    • Accessible media. Videos include accurate captions; long recordings offer transcripts. Audio descriptions are available for essential visuals.
    • Documents that travel well. PDFs are tagged with a correct reading order, real headings (not just bigger fonts), and alt text for images; exported DOCX/Slides preserve structure.
    • Consistent components. Buttons act the same across the district site and the LMS; modals trap focus appropriately; alerts are announced.
    • Language that teaches. Instructions avoid jargon, and content is written so a student or caregiver can follow it without specialized knowledge.

    These are the details that turn “a student can technically reach the page” into “a student can actually complete the task.”

    The Power of Accessibility Audits for Schools

    If you want the honest state of your district site or campus platforms, start with an accessibility audit. A strong school-focused audit runs three complementary passes:

    1. Automated scans to surface quick signals—contrast issues, unlabeled buttons, missing form labels, heading misuse.
    2. Expert reviews with real assistive tech (e.g., NVDA/JAWS on Windows, VoiceOver on iOS and macOS) and keyboard-only navigation, mirroring how students and parents actually use the tools.
    3. Task-based flows tied to school outcomes: enroll a student, submit a health form, find an IEP meeting notice, complete a quiz, download a worksheet and read it in a screen reader.

    Automated tools catch a subset of problems; many of the blockers we see in schools—focus traps in portals, ambiguous link text like “Click here,” modals that don’t announce, inaccessible math or charts—require human judgment. The output of a good audit is practical: a ranked list of fixes tied to user impact, so IT and curriculum teams know what to tackle first, what can wait, and how to validate before the next release.

    VPATs and ACRs: What Procurement Really Needs

    After you address material issues, you’ll often need to document where your product or campus tool stands. That’s the role of a Voluntary Product Accessibility Template (VPAT®) and the resulting Accessibility Conformance Report (ACR)—structured reports that map conformance to standards such as WCAG 2.1 and, where applicable, Section 508.

    For districts and universities, this is a procurement gate. Many will not move forward with an ed-tech vendor unless a current VPAT/ACR is provided and reviewed. A useful report is specific about what conforms and candid about gaps, with timelines and workarounds for instruction. That transparency earns more trust than vague “compliant” claims and helps committees compare solutions on equal footing.

    Treat the audit as the truth-finding step and the VPAT/ACR as the communication layer. One improves the product students touch; the other explains to procurement and digital accessibility coordinators where it stands today.

    Why Audits and VPATs Are Stronger Together (in Education)

    Sequence matters:

    1. Audit first. Identify barriers through expert and task-based testing aligned to real school workflows.
    2. Remediate and retest. Fix code, refine content, update components, re-export documents correctly, and verify behavior with assistive tech.
    3. Document with a VPAT/ACR. Communicate conformance clearly, including known gaps and planned remediation.

    Reversing that order tempts over-promising and erodes credibility with accessibility coordinators, legal counsel, and curriculum leaders. Done in sequence, you earn trust and set a cadence your team can sustain throughout the year.

    Build Digital Accessibility Into the School Year (Without Adding Endless Meetings)

    Lasting progress comes from folding accessibility into normal practice:

    1) Start With High-impact Fixes

     Address keyboard navigation, focus order, alternative text, captions, contrast, and form labels across the district site and LMS. These unblock core tasks quickly.

    2) Equip Every Role.

    • Teachers: short checklists for posting accessible materials (headings, alt text, captioning options, accessible templates).
    • Content specialists: guidance for writing in plain language and structuring documents for export.
    • Developers/IT: patterns in your design system for buttons, modals, alerts, and form components with accessible defaults.
    • Administrators: a simple rubric to evaluate ed-tech tools before adoption.

    3) Bake Testing Into Releases

    Before shipping portal updates or new templates, run a brief keyboard pass, a screen reader pass on key pages, and a contrast check on new UI. Keep it lightweight and repeatable—fifteen minutes can prevent weeks of support tickets.

    4) Treat PDFs and Slides as Instructions, Not Attachments

    Tag reading order, add bookmarks, write alt text, ensure exported files preserve structure, and prefer HTML or native formats when possible. If a document matters for learning, its accessibility matters.

    5) Monitor and Iterate

    School tech evolves constantly. Schedule periodic audits (e.g., pre-semester and mid-year), track accessibility issues like any other quality defect, and update your VPAT/ACR when material changes land.

    Why This Matters for Teaching and Learning

    Accessible technology doesn’t only prevent complaints—it improves learning:

    • A captioned science video helps a deaf student follow along and helps a tired parent review content after a late shift.
    • Clear headings in a history reading help a student with ADHD navigate and return to key sections.
    • A well-labeled quiz with announced status messages reduces anxiety for students using screen readers.
    • Plain-language instructions in the LMS lower the cognitive load for everyone, including multilingual families.

    When digital accessibility is present, students get through important moments without roadblocks, teachers spend more time on pedagogy than troubleshooting, and families feel genuinely included in school life.

    A Long-Term Strategy for Inclusive Schools

    Digital accessibility is strategic infrastructure for education. Districts and campuses that invest in it reach more learners, reduce friction for families, and build trust across classrooms, offices, and board rooms. New terms begin all the time—new semesters, new platforms, new cohorts. Build them to include the people you intend to serve.

    Ready for a concrete plan tailored to your school or district? Schedule an ADA briefing with 216digital. We’ll review your tech stack, content workflow, and procurement goals, then leave you with a prioritized roadmap and clear next steps your team can ship this term.

    Greg McNeil

    September 9, 2025
    Legal Compliance
    Accessibility, How-to, VPAT, WCAG, Web Accessibility, Website Accessibility
  • Shift Happens—But Not On Focus

    Shift Happens—But Not On Focus

    You press Tab into the first field of a form, and suddenly the page submits. Or you click into a dropdown and, without warning, a new window pops up. Frustrating, right? Now imagine how much more disruptive that is for someone who relies on a screen reader or uses only a keyboard. Sudden shifts don’t just annoy—they break concentration, cause errors, and force users to start over.

    That’s the purpose of WCAG’s Success Criterion 3.2.1 On Focus. It makes sure that receiving focus doesn’t trigger unexpected changes. In short: don’t move the user, reload a page, or submit a form just because something got focus. Users should always stay in control.

    In this article, we’ll unpack SC 3.2.1, look at common pitfalls, explore best practices, and share testing strategies so your site feels consistent, trustworthy, and usable.

    Understanding Success Criterion 3.2.1 – On Focus

    The official wording says: When any user interface component receives focus, it does not initiate a change of context.

    What this really means is that putting focus on an element—whether by tabbing, shift-tabbing, or clicking—should not be treated as an automatic “go” button.

    A change of context includes things like:

    • Submitting a form when a field receives focus
    • Opening a modal or new window on focus
    • Navigating to a new page when a menu item gains focus
    • Programmatically moving focus somewhere else the moment you land on an element

    This rule is designed to stop those surprises. Changes should only happen when users take action—pressing Enter, clicking a button, or making a choice—not just by landing on something.

     Why On Focus Matters

    Predictable focus builds trust. Users know where they are, what’s happening, and how to move forward without being thrown off track.

    For users with cognitive or visual disabilities, avoiding sudden shifts prevents confusion. For those navigating with a keyboard, a smooth and logical tab order makes it possible to move efficiently through content. Screen readers also benefit from a stable focus path, since consistency allows the technology to announce content clearly. And people with motor impairments are spared the frustration of accidentally triggering submissions or navigations they didn’t intend.

    But accessibility isn’t just about a specific group. Predictability benefits everyone. Consistent behavior builds trust and lowers friction, making your site feel polished and respectful of users’ time and effort.

    Common Pitfalls (and Why They Break On Focus)

    Despite the clear intent of SC 3.2.1, developers often run into familiar traps. A few of the most common include:

    • Auto actions on focus: Submitting a form, opening a modal, or swapping pages the instant an input or link gets focus.
    • Focus jumps: Using scripts that automatically call element.focus() on load or on focus, dragging the user to an unexpected spot.
    • Navigation on focus: Menus that redirect as soon as an item is focused, rather than waiting for activation.
    • Broken tab order: Overuse of tabindex—especially with values greater than 0—can create confusing and illogical navigation paths.
    • Inconsistent patterns: Mixing models, where some elements act on focus while others require activation, leads to unnecessary confusion.

    All of these problems do the same thing: they break user flow, create confusion, and increase errors.

    How to Achieve Compliance (and Design a Better Experience)

    Preventing these issues comes down to designing focus behavior intentionally and sticking to a few reliable practices.

    From there, keep a few best practices in mind:

    • Be thoughtful with focus management. If you use element.focus(), do it to genuinely help the user (for example, moving focus into an opened dialog) and respect lifecycle rules.
    • Preserve the natural tab order whenever possible. Use tabindex="0" only when necessary to include custom controls, and avoid positive values.
    • Be cautious with ARIA. Roles like menu, menuitem, tab, and dialog come with built-in interaction expectations. If you implement them, follow the complete pattern—or stick with native controls.
    • Keep patterns consistent. Buttons should submit, links should navigate, and tabs should switch panels only when activated. Uniformity across components builds confidence.

    Small details make a big difference. For example, always include a “Skip to main content” link that becomes visible on focus, and ensure it works correctly by pointing to a landmark or an element with tabindex="-1". Likewise, don’t rely on hover or color changes alone to signal interactivity; provide clear focus styles that work for both keyboard and touch users.

    Testing Strategies for On Focus

    Testing is where theory meets practice. A few methods will quickly reveal whether your site is compliant:

    Manual testing

    • Tab through every interactive element. Nothing should submit, navigate, or open on focus alone.
    • Shift+Tab backward to confirm the reverse path is just as stable.
    • Use Enter or Space to activate controls—only then should real actions occur.
    • In DevTools, run document.querySelector('#el').focus() and verify that no context change happens.

    Assistive Technology Testing

    Screen readers like NVDA (Windows) and VoiceOver (macOS/iOS) are essential. Navigate with Tab, rotor, and quick keys to check that focus remains predictable. On mobile, connect an external keyboard and confirm the behavior is consistent with desktop experiences.

    Automated Checks

    Tools such as Google Lighthouse or WAVE can flag tabindex issues, missing roles, or poor focus order. Automation won’t catch the “surprise factor.” Always back it up with manual and assistive tech testing.

    Bad vs. Good: Concrete Examples

    Bad: Form Submits on Focus

    <form action="/submit" method="post">
      <label for="name">Name:</label>
      <input id="name" type="text" onfocus="this.form.submit()">
    </form>

    Issue: The form submits as soon as the field gains focus—a clear violation.

    Good: Form Submits Only on Activation

    <form action="/submit" method="post">
      <label for="name">Name:</label>
      <input id="name" type="text">
      <button type="submit">Submit</button>
    </form>

    Fix: The form submits only when the user explicitly activates the button.


    Bad: Navigation on Focus

    <nav>
      <a href="/pricing" onfocus="window.location=this.href">Pricing</a>
    </nav>

    Good: Navigation Only on Activation

    <nav>
      <a href="/pricing">Pricing</a>
    </nav>

    Tip: It’s fine to expand a menu on focus for discoverability, but don’t redirect until activation.


    Good Example: Custom Control with Predictable Focus

    <button aria-expanded="false" aria-controls="filters" id="filterToggle">
      Filters
    </button>
    <div id="filters" hidden>
      <!-- filter options -->
    </div>

    This pattern ensures that nothing happens on focus. Activation (click, Enter, or Space) toggles the state, while ARIA reflects the change.

    Frequently Asked Questions

    What’s the primary goal of SC 3.2.1 On Focus?
    To make sure that receiving focus doesn’t cause unexpected context changes. Users, not scripts, decide when to act.

    Is onfocus always forbidden?
    Not necessarily. You can use it for subtle cues like highlighting an element. Just don’t trigger navigation, submissions, or new windows.

    Can focus ever be moved programmatically?
    Yes—if it matches user expectations. For example, moving focus into a modal when it opens, or pointing to an inline error message after a failed form submission, are acceptable.

    How should I handle dynamic components like tabs or accordions?
    Stick to activation-based behavior. Use arrow keys to move between tabs, but only switch panels when a tab is activated, following WAI-ARIA Authoring Practices.

    Build Predictable Experiences (and Trust)

    At its core, SC 3.2.1 is about respect. Focus should never feel like a trap door. By preventing context changes on focus, you protect users from confusion, reduce errors, and make your interface feel stable and reliable.

    Accessible design isn’t just about checking a box—it builds trust. Predictable interactions show users that their time and attention are valued, whether they’re navigating with a screen reader, a keyboard, or a mouse. And when people can move through your site without fear of surprises, they’re more likely to stay, engage, and return.

    If you’re unsure whether your site meets this success criterion—or you’d like expert guidance on weaving accessibility into everyday development—schedule an ADA briefing with 216digital. We’ll review your patterns, coach your team, and help you create consistent, user-friendly experiences that people can rely on.

    Greg McNeil

    September 8, 2025
    How-to Guides, Testing & Remediation
    Accessibility, digital accessibility, How-to, keyboard accessibility, On Focus, Web Accessibility, web developers, web development, Website Accessibility
  • AI-powered Checks for Accessible PDF: Are They Enough?

    AI-powered Checks for Accessible PDF: Are They Enough?

    Your team ships PDFs every week—policies, forms, reports. They look polished. But if a screen reader hits the footer before the body, the file isn’t usable. That’s the gap an accessible PDF is meant to close. Laws like Section 508 and WCAG don’t treat PDFs as special exceptions; if a document lives on your site, people should be able to move through it as easily as a web page. AI helps with the basics and saves time. The real question: how far can you trust it on its own?

    Before we dig into tools, here’s how the standards actually fit together.

    What An Accessible PDF is—And Why the Law Cares

    Two complementary standards govern PDF accessibility. PDF/UA (ISO 14289) defines how a PDF’s internals must be constructed so assistive technologies can reliably parse and convey the content. The Web Content Accessibility Guidelines (WCAG) governs outcomes when that PDF is published on the web—what users must be able to perceive, operate, understand, and rely on.

    PDF/UA (ISO 14289): Technical Conformance

    PDF/UA requires a correct structure tree with semantically appropriate tags (headings, lists, tables, figures), accurate role mapping, and a logical reading order. It expects:

    • Properly associated table headers and scopes.
    • Descriptions for non-text content; decorative material marked as artifacts.
    • Form fields (AcroForms) with programmatically associated labels, names, and instructions.
    • Declared document language and consistent language shifts where needed.
    • Links, bookmarks, and metadata that reflect actual structure.
    • The goal is consistent exposure of semantics to accessibility APIs so screen readers announce content as intended.

    WCAG for PDFs: Publication Context and User Outcomes

    When a PDF is part of web content, WCAG success criteria apply (e.g., 1.3.1 Info and Relationships, 1.3.2 Meaningful Sequence, 2.4.6 Headings and Labels, 3.1.1 Language of Page). WCAG focuses on the experience: users must navigate by headings, traverse content in a meaningful sequence, operate everything via keyboard, and understand relationships in tables, lists, forms, and links.

    How They Fit Together

    Think of PDF/UA as the engineering spec (how the file is built) and WCAG as the published experience (what users can actually do). Meeting one without the other leaves gaps—either structurally sound but unusable in context, or polished in presentation but unreliable under the hood.

    Operational Definition of “Compliant”

    In practice, compliance means a screen-reader user can:

    • Move by headings in a sensible hierarchy;
    • Traverse content in sequence;
    • Complete forms with announced labels and instructions;
    • Understand tables with correctly exposed headers;
    • Access links and landmarks without detours.

    With the standards context set, let’s look at why many PDFs still miss—and where automation helps versus where expert review remains essential.

    Why PDFs Are So Often Non-compliant

    Most teams don’t author in PDF first; they export—and that’s where trouble starts. Typical failures include missing or incorrect tags, reading orders that jump around, scanned pages without OCR, and forms or tables whose structure isn’t exposed to assistive tech. A quick snapshot:

    • No tags or the wrong tags → a screen reader announces “graphic, graphic, graphic” through a one-page flyer.
    • Reading order off → Footnotes should be read before the body copy.
    • Scanned pages with no OCR → 12 images, zero searchable text.
    • Mis-structured forms/tables → required fields can’t be reached; headers don’t announce.

    At scale—monthly statements, board packets, downloadable reports—small mistakes multiply. The volume is exactly why many teams turn to automation to keep pace and to move each file closer to an accessible PDF without starting from scratch.

    What AI-powered Accessibility Tools Do Well (Today)

    Give an AI checker a clean annual report and it can often spot headings, set a reasonable reading order, and propose alt text you can refine. That alone can cut remediation time significantly. Modern tools handle a few tasks particularly well:

    • Recognizing layout blocks (headings, paragraphs, lists)
    • Running OCR on scanned content to restore real text
    • Drafting tags for simpler figures (e.g., charts vs. logos)
    • Flagging obvious misses (untagged images, empty titles, missing language metadata)

    They’re fast, consistent, and tireless. Most importantly, they reduce the grunt work so specialists can spend time where judgment matters. What they can’t do is confirm that structure equals meaning—or guarantee that the end result behaves like an accessible PDF for every user scenario.

    Where AI Still Falls Short—and Why People Still Matter

    Some documents ask more than a model can answer. Two common gotchas:

    • Nested tables and forms. A claims form with merged cells can look “tagged” but read like alphabet soup.
    • Meaning vs. style. A bold sentence in a paragraph isn’t a heading; many models tag it that way.

    Tools also struggle with language switches mid-document, disclaimers that must tie to the right section, and reading orders that look logical to software but feel disorienting in a screen reader. A file may “pass” an automated check yet remain frustrating to use. That gap is not just usability—it’s risk. A defensible review still needs a human to ask: Does this read like an accessible PDF for someone relying on assistive tech?

    The Hybrid model for Accessible PDF Compliance

    Start with the tool, finish with a person.

    • AI first pass: establish the skeleton, set reading order, surface missing text alternatives, and catch obvious metadata gaps.
    • Human pass: repair tables, confirm form flow, check headings/links, and test a few pages with NVDA or VoiceOver.
    • Evidence trail: keep a short log of what changed and who checked it; if questions come later, you have the paper trail.

    This model balances speed with judgment. It scales because automation removes repetition while reviewers focus on the parts that shape the experience and, ultimately, compliance for an accessible PDF in the real world.

    AI is Powerful, But Not a Solo Act

    AI can accelerate the work, but it can’t replace judgment. If you’re balancing risk with reality, a two-pass workflow (tool, then human) is the path that holds up. The payoff is practical: fewer errors, faster cycles, clearer records, and a more reliable accessible PDF experience for your audience.

    If you want a second set of eyes—or a process your team can pick up and run—216digital can help. Schedule an ADA briefing with 216digital, and we’ll map a workflow that fits your documents, your deadlines, and your compliance goals.

    Greg McNeil

    August 26, 2025
    Legal Compliance
    Accessibility, accessible PDF, Ai and Overlay Widgets, AI-driven accessibility, PDF, PDF/UA (ISO 14289), WCAG, Web Accessibility, Website Accessibility
  • Web Accessibility Checklist for CA Businesses

    Web Accessibility Checklist for CA Businesses

    California sets the tone for digital accessibility—and businesses can’t afford to ignore it. Between strict state laws, federal regulations, and an active litigation environment, accessibility isn’t just a best practice; it’s a requirement.

    This guide breaks down what compliance means in California and gives you a step-by-step web accessibility checklist you can actually use. Think of it as a roadmap that not only lowers legal risk but also creates a better experience for every visitor on your site.

    Why Accessibility Matters in California

    California is one of the most aggressive states when it comes to enforcing web accessibility. Both federal and state laws apply, creating more risk for businesses with an online presence.

    A few things you should know:

    • ADA (Americans with Disabilities Act): Courts in California have ruled that websites and apps connected to physical businesses must be accessible. Cases like Robles v. Domino’s made that crystal clear.
    • Unruh Civil Rights Act: Unique to California, this law ties into the ADA but adds monetary damages—starting at $4,000 per violation. Multiple issues can multiply costs quickly.
    • CPRA (California Privacy Rights Act): Privacy notices, opt-outs, and user controls must also be accessible to people with disabilities.
    • AB 434 (Public Agencies): Requires California government websites to meet WCAG 2.0 AA.
    • Section 508 (for federal contractors): Applies if you do business with federal or state-funded entities.
    • AB 1757 (Pending): Would make WCAG 2.1 AA mandatory for all California websites and allow individuals to sue directly.

    Your California Web Accessibility Checklist

    Think of this web accessibility checklist as an ongoing process—not a one-time project. Accessibility isn’t something you can “fix” and walk away from. Each new feature, design tweak, or plugin you add can introduce fresh challenges, so it’s best to weave accessibility into your regular site reviews and updates.

    1. Know Your Legal Landscape

    Before you start making changes, pause and figure out which laws apply to your organization. A private company, a public agency, and a government contractor each face different sets of rules—and knowing where you fall will shape your strategy.

    Begin by asking a few simple questions:

    • Is your business based in California, or do you simply serve California residents?
    • Which laws apply to you? That could mean the ADA, the Unruh Civil Rights Act, CCPA/CPRA, Section 508, AB 434 for public sector sites, and potentially AB 1757 once it takes effect.
    • Who in your organization should own accessibility? Whether it’s your legal lead, a developer, or someone on the marketing team, make sure accountability is clear—and involve design, development, content, and legal voices early.

    2. Identify Your Accessibility Gaps with a Web Accessibility Checklist

    Once you know your obligations, it’s time to take an honest look at your website. Where might someone hit a barrier?

    Start with an automated scan like Google Lighthouse, or WAVE. Tools like these are great for catching obvious issues—missing alt text, weak color contrast—but they only scratch the surface. The real insights come from manual testing. Try navigating your site using just a keyboard, or fire up a screen reader. Can you move through forms, menus, and checkout without a mouse? Does everything make sense when spoken aloud?

    Keep careful notes as you go. Screenshots, detailed observations, and a running log of issues will help guide your fixes. Just as importantly, they also show good-faith effort if your compliance is ever questioned. Using a web accessibility checklist here helps you capture both the technical and usability gaps

    3. Fix Barriers and Align with WCAG 2.2 Level AA

    Now comes the hands-on work: fixing the barriers you’ve found. The most reliable standard to aim for is WCAG 2.2 Level AA, since courts and regulators often look to it as the baseline. WCAG breaks accessibility into four guiding principles—Perceivable, Operable, Understandable, and Robust (POUR). Here’s what that means in practice:

    Perceivable

    • Add alt text to all meaningful images
    • Make sure text can be resized up to 200% without breaking layouts
    • Provide captions, transcripts, and audio descriptions for multimedia
    • Avoid relying solely on color to communicate information
    • Keep text-to-background contrast strong
    • Indicate language changes in your site’s code

    Operable

    • Make sure every function works via keyboard
    • Add a “Skip to Content” link so users don’t have to tab endlessly
    • Keep buttons, icons, and menus predictable
    • Prevent content from shifting unexpectedly when users interact with it
    • Let users pause or stop auto-play and extend time limits on forms
    • Support both portrait and landscape orientations

    Understandable

    • Use clear, descriptive headings and labels
    • Write page titles that actually reflect what’s on the page
    • Make sure error messages are easy to spot and explain how to fix them

    Robust

    • Test your site across different devices and screen sizes
    • Ensure functionality for users with limited mobility
    • Use semantic, well-structured HTML so assistive tech works correctly
    • Keep content usable even when text spacing is adjusted

    4. Don’t Forget Privacy and Legal Disclosures

    Accessibility doesn’t stop at your homepage or checkout process. In California, your privacy notices, cookie banners, and consent forms are just as important.

    That means every checkbox, toggle, and opt-out option should be easy to reach with a keyboard and clear to a screen reader. Focus states should stand out, and every label should be tied programmatically to its control. When it comes to policies, avoid dense blocks of text. Instead, break them into sections with clear headings and write in plain, straightforward language. And whenever you link to something, make the link text meaningful—skip the vague “click here.” Regulators will expect these areas to meet the same accessibility standards as the rest of your site. A web accessibility checklist can serve as a reminder to evaluate these areas, which often get overlooked.

    5. Plan for Ongoing Compliance

    The last step is about staying consistent. Accessibility isn’t a box you check off—it’s a practice you build into your regular workflow.

    Set up a review schedule: quarterly audits for the full site, plus monthly spot checks for high-traffic pages. Fold accessibility into your design reviews, pull requests, and release cycles so issues get caught early.

    Be especially careful with third-party tools. Chat widgets, plugins, and embedded media can easily create barriers if they aren’t coded properly. Vet them before adding them to your site.

    And finally, keep your team sharp. Train designers, developers, and content creators regularly so accessibility remains second nature. Maintain a log of issues you’ve found and fixed—this not only helps with continuity but also shows your ongoing commitment if anyone ever challenges your efforts. 

    Accessibility: Not a Project, a Practice

    California businesses operate in one of the most demanding accessibility environments in the country. By treating accessibility as part of your ongoing website maintenance, you protect yourself from lawsuits, reduce customer frustration, and build trust with every visitor.

    The important part isn’t achieving perfection immediately—it’s showing steady progress and a willingness to keep improving.

    Need Help Making Sense of It All?

    If you’re unsure where to begin—or how to scale this web accessibility checklist across your team—216digital can help. We specialize in accessibility audits, practical remediation planning, and ongoing support for businesses serving California consumers.

    Schedule a free ADA briefing today and gain clarity on what compliance means for your website in California. Together, we’ll prioritize the fixes that reduce your risk and deliver a better digital experience for everyone.

    Greg McNeil

    August 22, 2025
    Legal Compliance
    Accessibility, California Consumer Privacy Act, California Web Accessibility Laws, Legal compliance, WCAG, Web Accessibility, Website Accessibility
  • Boost Summer Sales with E-Commerce Accessibility

    Boost Summer Sales with E-Commerce Accessibility

    Four days. Over $24 billion spent online. More than half of those purchases made on phones. That was July—not November—which shows just how much summer now acts like a peak shopping season. For eCommerce leaders, the takeaway is straightforward: every second of your mobile experience either builds revenue or lets it slip away.

    Design and performance are important, but they don’t go far enough if parts of your site are still hard to use. E-commerce accessibility is what turns casual browsing into completed orders. Small improvements—better contrast on banners, alt text on product images, tap-friendly buttons, or checkout flows that support wallet payments—can make the difference between an abandoned cart and a sale. What follows is a clear plan to help you prepare for summer’s surge in a way that’s practical, manageable, and built to deliver results.

    Why Summer’s Surge Matters

    The way people shop has shifted. Purchases aren’t tied to desktops or long browsing sessions anymore—they happen in small windows throughout the day. Whether it’s scrolling on the train, tapping through a checkout line, or quickly buying something after dinner, mobile has become the primary storefront.

    Industry data backs this up. Mobile commerce is expected to generate over $2.5 trillion in sales globally this year, accounting for more than 60 percent of all e-commerce. For businesses, that means mobile optimization isn’t optional. Without it, brands risk losing customers to competitors who offer a more seamless experience. And when mobile readiness is paired with e-commerce accessibility, the benefits go even further, ensuring that every shopper—not just most—can complete their purchase with ease.

    Why e-commerce Accessibility Builds Trust and Loyalty

    One in four adults in the U.S. lives with a disability, representing trillions in global spending power. Yet many e-commerce sites still have barriers: low-contrast text, missing alt text, or forms that don’t work with screen readers.

    These aren’t small mistakes—they’re lost sales. Nearly 9 out of 10 shoppers won’t return after a poor experience. By contrast, removing accessibility barriers improves the journey for all customers:

    • Clearer navigation benefits busy parents shopping on the go.
    • Higher contrast helps people outdoors in bright sun.
    • Streamlined forms cut friction across the board.

    Accessibility isn’t just compliance—it’s customer experience.

    A Checklist for Seasonal Optimization

    You don’t need to overhaul your entire site to make it work better for summer shoppers. The biggest wins usually come from tightening up a few areas that directly affect how fast someone can find what they want and check out. Here’s where to focus:

    Mobile Performance

    Most summer shoppers are on their phones, sometimes with less-than-perfect service. Test your site on real devices, not just a desktop simulator. Keep images lean, make pages load in under three seconds, and check how it performs on a basic cellular connection. Those small speed gains often decide whether a cart gets completed.

    Navigation That Works on Small Screens

    Clear menus, a visible search bar, and buttons that are easy to tap matter more than you think. If someone has to pinch and zoom just to click, you’ll lose them. Adding digital wallets like Apple Pay or Google Pay also trims precious seconds off checkout.

    e-commerce Accessibility Essentials

     Take a fresh look at contrast, alt text, and forms. Can a product photo be understood without seeing it? Does your promo banner stand out when read aloud by a screen reader? Can someone tab through the entire checkout with a keyboard? These quick checks reveal where shoppers might be getting stuck.

    Promotions People Can Actually Use

    Discounts only drive revenue when customers can interact with them. Design banners that stay legible in bright light, code calls-to-action correctly, and build offers so customers can always redeem them.

    Seasonal Discovery

     Social platforms push more traffic than ever, and many customers will jump straight from TikTok or Instagram to checkout. Captions and clear descriptions help that content perform better while also making it accessible. On your site, think seasonally—customers searching “grill” or “beach” should land on relevant results.

    Checkout Without Friction

    Cart abandonment still costs retailers billions. Keep it short, show customers where they are in the process, and let them check out without creating an account. Adding trust signals—like secure payment icons—can make a big difference in whether they finish the purchase.

    Real-time Feedback

    Don’t wait until after a sale is over to see what went wrong. Track cart abandonment, page load times, and accessibility errors as they happen. That way, you can make fixes while the promotion is still live.

    Seasonal Updates

    Fresh visuals help keep the store feeling current, but clarity matters most. Summer-themed banners, bright colors, or back-to-school imagery should still meet accessibility standards so that promotions are visible to everyone.

    From Sizzle to Sale: Why Accessibility Pays

    You don’t need a massive redesign to be ready for summer. What you need is to clear away the small obstacles that quietly cost sales. Make promotions easy to see and interact with. Keep navigation simple, even on a phone. Let customers check out the way they already prefer. And make sure each step—search, product view, add-to-cart, and checkout—works smoothly for every shopper, including those using assistive technology. That’s how e-commerce accessibility drives real business results: more orders completed, fewer abandoned carts, and happier customers who come back.
    Think of it as preparing for today and investing in tomorrow. The improvements you make now to support summer sales will keep paying off during back-to-school, holiday, and every seasonal promotion that follows. If you’d like a clear picture of where your site is strong and where quick wins are waiting, 216digital offers ADA briefings designed to be straightforward and actionable.

    Greg McNeil

    August 18, 2025
    The Benefits of Web Accessibility
    2025, Accessibility, Benefits of Web Accessibility, Website Accessibility
  • How to Meet California Web Accessibility Laws in 2025

    How to Meet California Web Accessibility Laws in 2025

    If your website serves Californians, you’re stepping into one of the most lawsuit-heavy digital environments in the country. California leads the nation in web accessibility lawsuits—and the pace isn’t slowing in 2025.

    That reality can feel overwhelming. The headlines make it seem like one slip could land you in court. The rules aren’t always easy to interpret, and the stakes feel high. But here’s the thing: you’re not powerless. With the right understanding and a proactive plan, you can protect your business, meet California’s requirements, and even turn accessibility into an advantage.

    This guide will break down California’s web accessibility laws, recent legal updates, and practical steps you can take right now to stay ahead. Let’s walk the landscape—and give you a clear path forward.

    Web Accessibility in California Isn’t Optional Anymore

    California, New York, and Florida consistently account for the majority of ADA-related website lawsuits nationwide. What makes California different is the mix: federal law, state law, and a culture of active enforcement all rolled together.

    And here’s the kicker: you don’t need a physical storefront in California to be pulled into this mix. If you sell online to Californians, your website is within reach of these laws.

    Bottom line: if your digital presence isn’t accessible, you’re at risk. Fixing it early is always easier—and far less expensive—than scrambling after a lawsuit.

    Why California’s Web Accessibility Laws Are Tougher

    California has always been out in front on consumer protections and civil rights, and that leadership shows up online. Courts and lawmakers here push harder for accessibility and hold organizations accountable when they fall short.

    The result? Higher expectations, more lawsuits, and often bigger settlements compared to other states. Planning for accessibility in California isn’t just good practice—it’s basic risk management.

    Multiple Legal Layers to Consider

    California’s legal framework is layered and powerful. Here’s how the pieces fit:

    Federal Law: Americans with Disabilities Act (ADA)

    The ADA doesn’t name websites directly, but courts—including those in California—have repeatedly ruled that business websites and mobile apps count as “public accommodations” under Title III. Translation: if you sell or serve online, your site must be accessible.

    State Law: Unruh Civil Rights Act

    The Unruh Act takes the ADA and makes it California law—with teeth. Plaintiffs can seek damages of at least $4,000 per violation, plus attorney’s fees. Add in emotional-distress claims, and those numbers climb fast. This law is one of the most common tools used in web accessibility lawsuits, and it applies to out-of-state businesses, too.

    State Government Codes

    California has written accessibility directly into law for public agencies. Three key sections work together:

    • 11545.7 : Requires state agencies to post a compliance certificate on their websites every two years, confirming alignment with WCAG 2.0 AA.
    • 7405 : Reinforces Section 508 of the Rehabilitation Act, requiring agencies to keep electronic and information technology accessible.
    • 11135 : Extends protections to all state-funded or state-run programs, prohibiting discrimination in digital systems.

    Public Sector Rule: AB 434

    Since 2019, agencies must meet WCAG 2.0 AA and post a signed compliance certificate on their homepages. While this applies to government entities, it signals where the state is headed: higher standards and stronger accountability.

    Taken together, these laws make California one of the most proactive states when it comes to digital inclusion—and a place where compliance isn’t optional, it’s enforceable.

    What’s New (and What’s Coming) in 2025

    California’s accessibility environment doesn’t sit still. Here’s what to keep your eye on this year:

    CCPA and CPRA Accessibility Requirements

    California’s data privacy laws now go hand in hand with accessibility. Under the California Consumer Privacy Act (CCPA) and California Privacy Rights Act (CPRA), privacy notices, consent forms, and opt-out mechanisms must all be accessible. If you’re collecting data from Californians, accessibility is officially part of your privacy compliance checklist.

    AB 1757: A Bill with Big Implications

    Introduced in 2024, AB 1757 could become law in 2025. If passed, it would:

    • Require WCAG 2.1 AA compliance for all websites and apps offering goods or services in California.
    • Create a private right of action, letting individuals sue directly without waiting for state enforcement.
    • Extend liability to third-party developers and vendors, not just the businesses they build for.

    If this bill becomes law, lawsuits will expand—and fast. Preparing now is far less costly than reacting later.

    How Courts Are Using WCAG

    Even though WCAG isn’t named in every law, California courts lean on WCAG 2.1 AA when ruling on cases. Decisions like Robles v. Domino’s Pizza and Thurston v. Midvale Corp. make it clear: businesses are expected to meet these standards.

    In short: WCAG 2.1 AA is your strongest legal defense and your most practical roadmap.

    What WCAG 2.1 AA Covers

    The guidelines are built around four principles:

    • Perceivable: Content can be seen or heard (e.g., alt text, video captions).
    • Operable: Users can navigate (e.g., keyboard-friendly, logical tab order).
    • Understandable: Information and navigation are predictable (e.g., consistent menus, clear error handling).
    • Robust : Works across today’s and tomorrow’s assistive technologies.

    Think labeled forms, color contrast that passes, error messages that actually help, and no features that rely on hover alone. That’s where legal risk starts to drop.

    What Businesses Should Do Now

    Here’s how to get started without stalling:

    Start with a Self-Audit

    You don’t need a full professional audit to take the first step. Try this:

    • Run free tools like WAVE or Google Lighthouse.
    • Test with a screen reader (NVDA, VoiceOver on Mac).
    • Use a color contrast checker.

    These quick wins surface obvious barriers and get your team thinking about accessibility in action.

    Focus on WCAG 2.1 AA

    This is the benchmark California courts already use—and AB 1757 may make it law.

    • Review templates, navigation, and interactive elements.
    • Test checkout flows and account portals from start to finish.
    • Check both desktop and mobile.

    Proactive compliance costs less than defending a lawsuit. It also puts you ahead when regulations tighten.

    Think Beyond Compliance

    Yes, accessibility reduces risk. But it also grows your audience. More than 61 million Americans live with a disability. Making your site inclusive builds loyalty, improves SEO, and strengthens your brand. Following California’s web accessibility laws isn’t just about defense—it’s about long-term growth.

    Don’t Wait for the Lawsuit

    California’s web accessibility laws are tightening, and enforcement is active. Waiting for a complaint is a gamble—and an expensive one.

    Act now. Align with WCAG 2.1 AA. Bake accessibility into your website strategy. You’ll reduce legal risk, expand your reach, and strengthen your reputation.

    At 216digital, we help businesses tackle accessibility with practical solutions that reduce legal exposure and build better customer experiences.

    Our ADA Briefing is a no-pressure way to:

    • Understand how California’s laws apply to your site.
    • Identify your biggest areas of risk.
    • Walk away with a clear, actionable plan.

    Don’t wait for a lawsuit to force your hand. Protect your business now—and build a digital experience that truly includes everyone.

    Schedule your ADA Briefing with 216digital

    Greg McNeil

    August 15, 2025
    Legal Compliance
    Accessibility, accessibility laws, California Web Accessibility Laws, state accessibility laws, Web Accessibility, Website Accessibility
  • How to Implement Truly Accessible SVG Graphics

    How to Implement Truly Accessible SVG Graphics

    SVGs are everywhere—icons, logos, data visualizations, animated illustrations. They’re crisp on any screen, tiny in file size, and easy to style. But here’s the catch: an SVG is only as accessible as you make it. If you don’t give it a name, if you rely on color alone, or if you forget keyboard support, your “perfect” vector can become a roadblock.

    This guide gives developers and designers practical steps to build accessible SVG graphics that meet WCAG, work with assistive tech, and still look great.

    Understanding SVG Accessibility Fundamentals

    SVG (Scalable Vector Graphics) is an XML-based format. Because it’s text-based, you can label it semantically, control it with CSS and JavaScript, and scale it cleanly for magnifiers and high-DPI displays. The benefit? You can transform a standard image into an accessible SVG that supports users with low vision, screen readers, or alternative input devices.

    Why SVGs Can Be Great for Accessibility

    • Scales cleanly: No blur when a user zooms to 200%+.
    • Semantic hooks: You can add <title>, <desc>, and ARIA attributes.
    • Keyboard-friendly: With the correct markup, interactive SVGs can be fully operable.

    But none of that happens by default. You need to choose the correct pattern and add the right attributes. That’s how you turn a scalable vector into an accessible SVG.

    Decorative vs. Informative SVGs: Know the Difference

    Decorative SVGs

    Remove these visual flourishes (background shapes, dividers) from the accessibility tree so screen readers don’t announce them.

    <svg aria-hidden="true" focusable="false" width="200" height="50" viewBox="0 0 200 50">
      <!-- purely decorative -->
    </svg>
    • aria-hidden= "true" hides it from assistive tech.
    • focusable= "false" helps older browsers avoid focusing it.

    Informative SVGs

    These convey meaning (icons that label actions, logos that identify brands, charts that show data). They must have an accessible name and sometimes a longer description.

    Common mistakes to avoid:

    • No accessible name (the icon is silent to screen readers).
    • Meaning conveyed by color only (fails WCAG 1.4.1).
    • Interactive graphics that aren’t keyboard operable.

    Choosing the Right Pattern: Inline vs. External

    Inline SVG (Best for Control and Accessibility)

    Inline SVG gives you full control: you can add <title>, <desc>, role, and tie everything together with aria-labelledby.

    When to use it: Complex icons, logos with text equivalents, charts, or anything interactive.

    <svg role="img" aria-labelledby="downloadTitle downloadDesc" viewBox="0 0 24 24">
      <title id="downloadTitle">Download</title>
      <desc id="downloadDesc">Arrow pointing into a tray indicating a download action</desc>
      <!-- paths go here -->
    </svg>

    Tip: aria-labelledby lets you explicitly control the accessible name. Screen readers will read the title and then the description when useful.

    External SVG via <img src="...">

    Use it for simple, non-interactive icons and reusable logos.

    <img src="/icons/lock.svg" alt="Locked">
    • Use meaningful alt text.
    • If you need a long description (e.g., describing a complex chart), place that adjacent in the DOM and reference it in the surrounding text. You can also wrap the image in a <figure> with a <figcaption> for richer context.

    Note: If you rely on <title>/<desc> inside the SVG file itself, those must be authored in the file, not the HTML. You can’t inject them from outside.

    Best Practices for Accessible SVGs

    Add Accessible Text

    • Short label? Use <title> (or alt if using <img>).
    • Extra context? Use <desc>, or point to adjacent text with aria-describedby.
    <figure>
      <svg role="img" aria-labelledby="logoTitle" viewBox="0 0 100 24">
        <title id="logoTitle">Acme Tools logo</title>
        <!-- logo paths -->
      </svg>
      <figcaption class="sr-only">Acme Tools, established 1984</figcaption>
    </figure>

    A common pattern for longer descriptions is to reference hidden explanatory text:

    <p id="chartLongDesc" class="sr-only">
      2025 sales by quarter: Q1 1.2M, Q2 1.5M, Q3 1.4M, Q4 1.8M—Q4 is highest.
    </p>
    <svg role="img" aria-labelledby="chartTitle" viewBox="0 0 600 400">
      <title id="chartTitle">2025 Sales by Quarter (Bar Chart)</title>
      <!-- bars -->
    </svg>

    Screen reader–only utility:

    .sr-only {
      position:absolute !important;
      width:1px;height:1px;
      padding:0;margin:-1px;
      overflow:hidden;clip:rect(0,0,0,0);
      white-space:nowrap;border:0;
    }

    Contrast & Readability

    Text inside SVGs follows WCAG text contrast:

    • Normal text: 4.5:1 minimum
    • Large text (18pt/24px regular or 14pt/18.66px bold): 3:1
    • Non-text elements (lines, icons, bars): 3:1 (WCAG 1.4.11).
    • Keep text readable at zoom levels users commonly use. Consider vector-effect= "non-scaling-stroke" if thin strokes get too thin when scaled.

    Don’t Use Color Alone

    Color-only encodings (e.g., red vs. green) aren’t enough. Add:

    • Patterns or textures on bars/lines.
    • Labels or icons with different shapes.
    • Legends with clear text.
    <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="8" height="8">
      <path d="M0,8 l8,-8 M-2,2 l4,-4 M6,10 l4,-4" stroke="currentColor" stroke-width="1"/>
    </pattern>
    <rect x="10" y="10" width="50" height="200" fill="url(#diagonalHatch)"/>

    Focus and Keyboard Navigation

    • Non-interactive SVGs should not be focusable: tabindex= "-1" and/or focusable= "false".
    • Interactive controls should use native HTML elements for the focus/keyboard model. Wrap the SVG in a <button> or <a> rather than adding click handlers to the <svg> itself.
    <button type="button" aria-pressed="false">
      <svg aria-hidden="true" focusable="false" width="20" height="20">
        <!-- icon paths -->
      </svg>
      <span class="sr-only">Mute audio</span>
    </button>

    Provide visible focus styles for WCAG 2.4.7 (e.g., clear outline around the button).

    Use ARIA Thoughtfully

    • Favor semantics you already get from HTML (<button>, <a>, <figure>, <img>).
    • When you do label an inline <svg> as an image, role= "img" plus an accessible name (via <title> or aria-labelledby) is usually enough.
    • Avoid piling on roles like graphics-document unless you know the support landscape you’re targeting and have tested it. Over-ARIA can confuse screen readers.

    Inherit Color Responsively

    For icons that should match text color and adapt to themes, use currentColor:

    <svg role="img" aria-labelledby="checkTitle" width="20" height="20">
      <title id="checkTitle">Success</title>
      <path d="..." fill="currentColor"/>
    </svg>
    

    Now your icon inherits color from CSS—great for dark mode.

    Sprite Systems (<use>) and Symbols

    When using a sprite:

    <svg class="icon" role="img" aria-labelledby="searchTitle">
      <title id="searchTitle">Search</title>
      <use href="#icon-search"></use>
    </svg>

    Important: Don’t rely on titles inside <symbol>—screen readers often skip them when you reference them with <use>. Add the label at the point of use or wrap the icon in a labeled control.

    Testing SVG Accessibility: Don’t Skip This Step

    Quick Checklist

    • Does the SVG have a clear, accessible name?
    • Is extra context available via <desc> or aria-describedby if needed?
    • Are decorative elements hidden?
    • If interactive: Is it reachable by keyboard? Operable with Enter/Space?
    • Is the tab order logical?
    • Do text and key shapes meet contrast requirements?
    • Do animations honor prefers-reduced-motion?

    Tools & Methods

    • Screen readers: VoiceOver (macOS/iOS), NVDA or JAWS (Windows), TalkBack (Android).
    • Keyboard only: Tab, Shift+Tab, Enter, Space, Arrow keys.
    • Zoom to 200% and 400% to check readability and hit target sizes.

    Common Pitfalls (and Easy Fixes)

    Using SVG as a CSS Background for Meaningful Content

    Background images can’t have alt text. If it conveys meaning, embed it inline or with <img> and provide an accessible name.

    Forgetting to Label Icons

    A lock icon without a label is silent. Add <title> to the <svg> or use <img alt= "Locked">.

    Overwriting Contrast With Themes

    Dark mode CSS might drop your contrast below 3:1 for shapes or 4.5:1 for text—Re-test after theme changes.

    Unlabeled Charts

    A beautiful chart that’s unlabeled is unusable. Provide a title, a short summary, and a link or reference to the underlying data table.

    Interactive SVG Shapes Without Semantics

    Don’t attach click handlers to <path> or <g> and call it done. Wrap the icon in a <button> or <a> and use proper ARIA (e.g., aria-pressed) where appropriate.

    Practical Patterns You Can Copy

    Informative Standalone Icon (Inline SVG)

    <svg role="img" aria-labelledby="infoTitle infoDesc" viewBox="0 0 24 24">
      <title id="infoTitle">Information</title>
      <desc id="infoDesc">Circle with a lowercase “i” inside</desc>
      <!-- paths -->
    </svg>

    Decorative Icon Inside a Button (Button Provides the Name)

    <button type="button">
      <svg aria-hidden="true" focusable="false" width="20" height="20"><!-- icon --></svg>
      Save
    </button>

    Chart With Long Description and Data Table

    <figure>
      <p id="salesDesc" class="sr-only">
        Bar chart showing quarterly sales for 2025: Q1 1.2M, Q2 1.5M, Q3 1.4M, Q4 1.8M.
      </p>
      <svg role="img" aria-labelledby="salesTitle" viewBox="0 0 640 400">
        <title id="salesTitle">2025 Quarterly Sales</title>
        <!-- bars -->
      </svg>
      <figcaption>Summary of 2025 sales; see table below for details.</figcaption>
    </figure>
    <table>
      <caption class="sr-only">Detailed sales data for 2025</caption>
    <thead><tr><th>Quarter</th><th>Sales</th></tr></thead>
      <tbody>
        <tr><td>Q1</td><td>$1.2M</td></tr>
        <tr><td>Q2</td><td>$1.5M</td></tr>
        <tr><td>Q3</td><td>$1.4M</td></tr>
        <tr><td>Q4</td><td>$1.8M</td></tr>
      </tbody>
    </table>

    Accessibility for Motion and States

    If your SVGs animate, respect user preferences:

    @media (prefers-reduced-motion: reduce) {
      svg .spin { animation: none; }
    }

    For toggles (like mute/unmute), update both the visual state (icon changes) and the accessible state (aria-pressed, live text updates).

    Accessible Design is Intentional Design

    Accessible SVGs aren’t just about tags and attributes—they’re about clear communication. When you provide an accessible name, avoid color-only meaning, ensure keyboard operation, and include descriptions where needed, you open your visuals to many more people—without sacrificing design or performance.

    Start small and build the habit:

    • Label every meaningful icon.
    • Hide true decoration.
    • Test with a screen reader and the keyboard.
    • Re-check contrast after style changes.

    Accessibility is a practice, not a checkbox. The pay-off is real: better UX, fewer support issues, and stronger compliance.

    Need a Second Set of Eyes?

    If you want help reviewing your site’s SVGs, charts, and icon systems, schedule an ADA briefing with 216digital. We’ll give you actionable feedback, prioritize fixes, and help you ship accessible SVG patterns that scale across your design system.

    Greg McNeil

    August 14, 2025
    How-to Guides
    Accessibility, accessible code, How-to, SVG, Web Accessibility, web developers, web development, Website Accessibility
  • Accessibility for Websites: Why One Version Is Enough

    Accessibility for Websites: Why One Version Is Enough

    You may have heard this before—or even thought it yourself: “If our main site is too complex, we’ll just build a simple, text-only version for people who use assistive technology.”

    On the surface, that seems like a smart fix. If making your main site accessible feels overwhelming, why not create a separate version that looks simpler and easier to use? For years, many businesses believed this was the shortcut to meeting ADA requirements without reworking their entire website.

    But here’s the problem: a separate “accessible site” is not the best answer—legally, ethically, or practically. Real accessibility for websites means making your main site usable for everyone, not sending people to a stripped-down side door.

    Why the “Separate Accessible Site” Myth Lives On

    So why do people still think a second site is a good idea? One reason is that it feels easier. Making changes to an existing site can seem complicated and costly, while building a quick, text-only version looks faster and cheaper.

    There’s also the idea that people who are blind or have low vision “just need text.” That thinking misses the bigger picture. Accessibility for websites covers much more than plain text—it’s about making sure every feature, tool, and piece of content can be used by everyone, no matter their ability.

    Why It Fails: Standards and Legal Risk

    This is where the shortcut starts to unravel. The Web Content Accessibility Guidelines (WCAG) apply to all web content, not just simplified versions. Nowhere do the guidelines suggest that a simplified, alternate version of a site fulfills compliance.

    Take color contrast, for example. WCAG requires a minimum contrast between text and background across every page. Even if you create a plain version, your main site still has to meet those standards.

    The U.S. Department of Justice agrees. In April 2024, new rules made it clear that public entities can’t offer inaccessible main sites with “alternate” accessible versions, except in rare situations where no other option is possible. Courts have backed this up, too. In one case, DOT vs. SAS, an airline was fined $200,000 after trying to meet accessibility rules with a separate assistive site. In the end, they still had to fix their main site.

    In short, accessibility for websites isn’t about offering an alternate route. It’s about making sure the front door works for everyone.

    The Real Problems With Dual-Site Strategies

    Even if the legal side didn’t matter, the practical downsides are hard to ignore.

    Keeping two sites in sync is a constant challenge. Every blog post, product update, or policy change must be added to both. It’s all too easy for the “accessible” version to fall behind, leaving users with outdated or incomplete information.

    Then there’s the user experience itself. Imagine being told you can’t use the same website as everyone else—that you have to go through a different door. That separation feels unwelcoming, even insulting. Most users don’t want fewer features; they want the same experience, just built in a way they can use.

    And here’s another snag: text-only sites often cut out interactive tools, forms, or multimedia. For someone who needs keyboard-friendly navigation, that’s not helpful—it’s limiting. In trying to fix one barrier, you end up creating new ones.

    Finally, a dual-site setup complicates your own operations. Analytics, personalization, and user tracking get split in two, which makes it harder to understand how people interact with your brand online.

    Why Building Accessibility Into the Main Site Works Better

    When you build accessibility into your main site, everyone benefits.

    Captions help people who are deaf or hard of hearing, but they also help anyone watching a video in a noisy environment. Alt text helps people using screen readers, but it also boosts your site’s SEO. Clear navigation supports users with motor disabilities, but it also makes the site faster for power users who prefer keyboard shortcuts.

    Accessibility for websites also saves money in the long run. Many fixes—like adding alt text, adjusting headings, or improving color contrast—are low-cost and sometimes even free. Building accessibility into your normal workflow prevents expensive, large-scale repairs later.

    Most importantly, an accessible main site builds trust. It shows customers that your brand is modern, inclusive, and committed to fairness.

    Are There Times a Separate Version Is Okay?

    Only in rare situations. If you’re using a third-party tool that can’t be fixed right away, a temporary alternate version may help. But it should be:

    • Clearly linked and easy to find
    • Fully equal in content and function
    • Phased out as soon as your main site is fixed

    Think of it like a patch, not a permanent solution. The goal should always be accessibility for websites built directly into the primary site.

    Building an Accessibility-First Mindset

    So what should you do instead? Shift your thinking from “quick fix” to “accessibility-first.”

    Start by auditing your current site against WCAG. Find the biggest barriers and prioritize fixing those. Build new features with progressive enhancement so they’re usable by everyone from the start. Test with real users, not just automated tools—especially people with disabilities whose feedback will reveal issues you can’t see yourself.

    And most importantly, make accessibility part of your normal workflow. Fold it into design reviews, QA testing, and content updates. Keep users in the loop by being transparent about your efforts. Progress is valuable, and users will notice your commitment.

    Conclusion: One Site, For Everyone

    The idea of a “separate accessible version” might look like an easy answer, but in practice, it creates more problems than it solves. It’s harder to maintain, sends the wrong message, and leaves users without the features they need.

    True accessibility for websites means one site that includes everyone. It’s about designing digital spaces where people don’t need a back door—they walk through the same front door as everyone else.

    If you’re ready to leave alternate versions behind and move toward an accessibility-first strategy, consider scheduling an ADA briefing with 216digital. We’ll show you how WCAG works in real-world practice, point out your greatest opportunities, and help you make your main site truly accessible—for everyone.

    Greg McNeil

    August 13, 2025
    Legal Compliance
    Accessibility, ADA Compliance, ADA Web Accessibility, WCAG Compliance, WCAG conformance, Web Accessibility, Website Accessibility
  • Email Accessibility: Make Every Click Count

    Email Accessibility: Make Every Click Count

    You spend hours testing subject lines, analyzing open rates, and crafting the perfect call to action. But if your emails are not accessible, you may be unintentionally excluding millions of potential readers. More than one billion people around the world live with some form of disability, and many rely on assistive technologies such as screen readers, magnifiers, or keyboard navigation to interact with digital content. This is why email accessibility should be at the center of every campaign you send.

    This is where email accessibility makes a difference. Accessible emails do not only support people with disabilities; they also improve reach, engagement, and usability for everyone. You can think of accessibility as a safety net during your quality assurance process, one that helps make sure your hard work actually reaches its audience. The encouraging part is that small and thoughtful changes can create a big impact.

    Structure and Layout: Design for Navigation, Not Just Aesthetics

    Attractive design may catch the eye, but structure is what allows readers to move through your message with ease. Using semantic heading tags such as <h1>, <h2>, and <h3> helps organize your content in a way that screen reader users can understand. Headings should flow in a logical order without skipping levels. Relying on bold text or font size alone to show importance does not provide the same clarity.

    Tables are another common issue. They should be avoided for layout purposes whenever possible because screen readers can misinterpret them. If a table must be used for structure, adding role="presentation" tells assistive technology that it is decorative rather than data.

    It is also important to test your emails using only the Tab key. If you cannot reach every link, button, and input field by tabbing through the message, your subscribers will face the same problem.

    Image Accessibility: More Than Just Pretty Pictures

    Images are powerful in marketing emails, but without the right preparation, they can create barriers. Every image should include descriptive alt text that explains its purpose. If the image is decorative and does not add meaning, use empty alt text so that screen readers can skip it.

    Critical information, such as discount codes or calls to action, should never exist only within an image. Live text ensures that the message still appears even if images are turned off in the inbox. A good test is to disable images and see whether the email still conveys your intended message.

    Animations also require care. Flashing or strobing content can cause serious discomfort or even seizures for some readers. Autoplaying GIFs may distract from your main message. Whenever possible, give users the ability to pause or stop moving elements.

    Links and Calls to Action: Clear, Clickable, Inclusive

    Calls to action are where engagement happens, and they must be designed with clarity in mind. Instead of vague text such as “Click here,” choose phrases like “Read the full guide” or “Shop the new collection.” Screen reader users often move through an email by jumping between links, so each one needs to make sense on its own.

    Links should always be visually distinct. Underlining them is the best practice since relying on color alone is not effective for people with color blindness. Buttons and links should also be large enough to tap easily on a mobile device. A minimum size of about 44 by 44 pixels provides enough room for users with limited dexterity. Spacing links apart reduces the chance of misclicks. These adjustments not only improve email accessibility but also increase click-through rates by making the experience smoother for everyone.

    Copywriting and Readability: Make Every Word Count

    Email accessibility applies to words as much as to code or design. Short and direct sentences help readers understand quickly. Breaking your content into smaller paragraphs with clear subheadings makes the email less overwhelming.

    Avoid heavy jargon or insider language that may confuse people. Simple words in everyday language travel further and faster. Writing in an active voice also helps keep your copy engaging.

    Do not forget the basics of text styling. Font sizes should be at least 14 points, which is especially important for people with low vision or anyone reading on a small screen. Text should be left-aligned only, since centered or justified alignment slows down reading speed and can reduce comprehension.

    Multimedia Content: Do Not Skip the Captions

    Many email campaigns now include video, audio, or GIFs. These can make content more dynamic, but they bring accessibility challenges that need attention. Any video or audio clip should come with captions or transcripts. Captions are essential for people who are deaf or hard of hearing, but they also help people who are in noisy environments or those who are somewhere quiet and cannot turn on the sound.

    Animated GIFs should avoid flashing sequences or rapid loops. If movement is key to your message, include a description of it in the email copy or offer a static fallback image. Multimedia can be powerful, but it should never come at the expense of accessibility.

    A Pre-Send Accessibility Checklist

    Before you hit send, it helps to run through a quick accessibility check. Try navigating the email with only your keyboard. Make sure every image includes descriptive alt text or an empty alt attribute if it is decorative. Look at your link text and ask if it clearly describes the action or destination. Turn images off and check if the message still makes sense. Confirm that your color contrast is strong enough to read comfortably. Review your animations to see if they are subtle and under control. Lastly, read the text on both desktop and mobile screens to confirm that the font size is easy to read.

    These checks only take a moment, but they can prevent frustration and lost engagement.

    Accessibility Is a Long Game, but Every Email Helps

    No email will ever be perfectly accessible. The goal is not perfection but progress. Each improvement you make expands your reach, improves engagement, and builds trust with your audience.

    Email accessibility is not only about legal compliance. It is also about creating meaningful connections. By removing barriers, you ensure that your message reaches as many people as possible and resonates more deeply with them. Making email accessibility part of your long-term strategy strengthens both your brand reputation and the experience of every subscriber.

    The next time you prepare a campaign, add accessibility to your checklist. Treat it as part of your workflow, not an extra chore. An inaccessible email is never as effective as it could be.

    If you need a clear plan for accessible digital communication, schedule an ADA briefing with 216digital. We will walk you through practical steps to make your email campaigns and your digital presence more inclusive, more effective, and better prepared for the future.

    Greg McNeil

    August 12, 2025
    How-to Guides, Legal Compliance
    Accessibility, email accessibility, WCAG, WCAG Compliance, Website Accessibility
  • How WCAG Applies to AI-Generated Content

    How WCAG Applies to AI-Generated Content

    AI is changing the way we create. From blog posts and product descriptions to social media graphics, work that once took hours can now be done in seconds. This speed is powerful—but it also carries risk. In the rush to publish, it’s easy to miss a crucial question: Is this content accessible?

    The Web Content Accessibility Guidelines (WCAG) apply to everything online—whether written by a person, coded by a developer, or created by an AI tool. That means AI-generated content is not exempt. If you’re using AI to scale your digital strategy, accessibility must remain part of the foundation.

    This guide explains how WCAG applies to AI-driven workflows and offers a simple checklist to help you review AI-written text, visuals, and layouts. The goal: to help you publish faster without leaving inclusion behind.

    Why AI-Generated Content Creates Accessibility Risks

    AI tools can be incredible productivity boosters. But they are not accessibility tools. A common mistake is assuming that if something looks polished, it must be usable for everyone. In reality, accessibility requires more.

    AI-generated content often misses the real-world needs of diverse users. For example, it might:

    • Write vague alt text like “image of a person” instead of describing the purpose.
    • Suggest design elements with poor color contrast.
    • Use bold text instead of proper heading tags like <h2> or <h3>.

    If left unchecked, these issues can shut people out, frustrate customers, and even create legal risk. The takeaway is simple: AI-generated content is not automatically compliant with WCAG. It needs human oversight.

    WCAG Still Applies—No Matter Who (or What) Creates the Content

    WCAG, developed by the W3C, is the global standard for digital accessibility. It’s built around four principles:

    • Perceivable: Users must be able to perceive the information (like adding alt text for images).
    • Operable: Content should be easy to navigate and interact with (keyboard accessibility matters).
    • Understandable: Information should be clear and predictable.
    • Robust: Content must work with assistive technologies now and in the future.

    These rules apply equally to all content, whether it’s human-created or AI-generated content. In the United States, the Americans with Disabilities Act (ADA) has fueled thousands of lawsuits over inaccessible websites and apps. Courts often turn to WCAG as the standard for compliance—and they aren’t alone. Many countries, including those in the European Union and Canada, also rely on WCAG as the foundation of their digital accessibility laws.

    That means WCAG isn’t just a best practice—it’s often the measuring stick for legal compliance. Regardless of whether content was written by a human or generated by AI, if it excludes people with disabilities, it can be litigated upon. The risk is real: inaccessible content can damage your brand, frustrate customers, and create costly legal battles.

    The AI Accessibility Checklist

    This checklist will help you review AI-generated content before publishing. Each step ties directly to WCAG principles, making accessibility practical and manageable.

    For AI-Written Text

    • Use clear language: Choose plain, everyday words instead of jargon or long, complex phrasing.
    • Ensure proper headings: Use semantic HTML like <h2> and <h3> so screen readers and assistive tech can navigate. Avoid using bold text as a replacement.
    • Write descriptive links: Swap vague text like “click here” for something meaningful, such as “Download our accessibility guide.”
    • Keep a consistent flow: Break up large blocks of text into shorter paragraphs, bullets, or numbered lists so readers can follow easily.
    • Format for scanning: People often skim. Use headings, bullets, and white space to make sure they can still understand the main points at a glance.

    For AI-Generated Images and Visuals

    • Provide meaningful alt text: Describe the purpose of the image, not just what it looks like. For example, instead of “photo of a person,” write “Customer smiling while using our product.”
    • Avoid text inside images: Important words should always appear as live text so they can be read by screen readers and resized.
    • Check contrast: Make sure text and background colors meet at least a 4.5:1 ratio so words are readable by people with low vision.
    • Don’t rely on color alone: Use shapes, labels, or patterns in addition to color to communicate meaning. This helps users who are colorblind.

    For AI-Generated Multimedia

    • Add synchronized captions for videos: Captions must match the audio in both timing and content.
    • Provide transcripts for audio files: A text version allows people who can’t hear—or who prefer to read—to still access the information.
    • Include audio descriptions: When visuals add meaning that isn’t spoken, narrate those details so blind users don’t miss them.

    For AI-Generated Layouts, Code, or Documents

    • Ensure keyboard accessibility: Test navigation using only Tab, Shift+Tab, and Enter keys. All interactive elements should be reachable.
    • Create accessible PDFs: Include proper headings, a logical reading order, alt text for images, and searchable text.
    • Support text resizing: Content should still work when zoomed to 200% without breaking the layout.
    • Apply ARIA correctly: ARIA landmarks and roles can help when HTML alone isn’t enough, but they should never replace semantic tags.

    Testing Your Output

    • Manual review: Always look at the content yourself. Automated tools can’t replace human judgment.
    • Assistive tech testing: Try screen readers, keyboard-only navigation, or voice input tools to see how real users will experience it.
    • Automated scans: Use tools like WAVE, or Lighthouse to quickly flag common issues, then verify the results manually.

    Running through this checklist regularly will catch most accessibility gaps before content reaches your audience.

    Building Accessibility Into Your AI Workflow

    The best way to make accessibility stick is to build it into the workflow, not tack it on at the end. Here are some ways to do that:

    • Use accessible prompts: When you ask AI to create content, guide it with instructions like “Write at an 8th-grade level with clear headings and descriptive link text.” This increases the chance that the draft will already meet accessibility standards.
    • Start with strong templates: Use page layouts, design systems, or document templates that are already set up with accessibility in mind. This reduces the risk of introducing barriers later.
    • Assign responsibility: Make accessibility review part of someone’s role in the publishing process so it doesn’t get skipped.
    • Iterate with feedback: If you notice that AI keeps generating inaccessible elements—like vague alt text or poor contrast—update your prompts or workflow so those issues don’t repeat.
    • Set clear standards: Document rules for headings, alt text, link labels, color use, and formatting. Apply these rules consistently so everyone on your team is aligned.

    By treating accessibility as a normal part of the process, AI-generated content becomes an asset to inclusion instead of a risk factor.

    Accessibility Isn’t Optional—Even with AI

    AI may be changing how quickly we create, but accessibility is what ensures that work actually connects with people. WCAG provides the framework, but it’s people—teams like yours—who make sure the digital world is usable for everyone.

    The risks of overlooking accessibility are real, from frustrated customers to lawsuits. But the rewards are greater: trust, inclusivity, and a digital presence that welcomes all. The good news is you don’t need to slow down to get it right. With the right checklist and habits built into your workflow, accessibility becomes part of how you publish—not an afterthought.

    At 216digital, we help businesses bring accessibility into every stage of content creation—including AI-generated content. If you’re unsure where you stand, consider scheduling a personalized ADA briefing with our team.

    It’s a practical next step toward a digital experience that truly works for everyone.

    Greg McNeil

    August 11, 2025
    Legal Compliance
    Accessibility, AI-driven accessibility, AI-generated content, WCAG Compliance, Web Accessibility, Website Accessibility
Previous Page
1 2 3 4 … 22
Next Page
216digital Scanning Tool

Audit Your Website for Free

Find Out if Your Website is WCAG & ADA Compliant













    216digital Logo

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

    216 Digital, Inc. BBB Business Review

    Get in Touch

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

    Support

    Support Desk
    Acceptable Use Policy
    Accessibility Policy
    Privacy Policy

    Web Accessibility

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

    Development & Marketing

    eCommerce Development
    PPC Marketing
    Professional SEO

    About

    About Us
    Contact

    Copyright 2024 216digital. All Rights Reserved.