216digital.
Web Accessibility

Phase 1
Web Remediation for Lawsuit Settlement & Prevention


Phase 2
Real-World Accessibility


a11y.Radar
Ongoing Monitoring and Maintenance


Consultation & Training

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

Web Design & Development

Marketing

PPC Management
Google & Social Media Ads


Professional SEO
Increase Organic Search Strength

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

About

Blog

Contact Us
  • 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 TagsImage Descriptions
    Short, a few wordsFull sentences
    Placed in code (alt="")In visible content or metadata
    Helps screen readersHelps screen readers and gives more context
    SEO-friendlySEO-friendly
    Often auto-generatedOften 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:

    1. Keep It Clear and Concise: Avoid long, rambling sentences. Use plain language.
    2. Be Contextual: What’s the purpose of the image? What matters in this moment?
    3. Use Natural Language: Don’t write like a robot. Imagine you’re explaining the image to a friend who can’t see it.
    4. Use Both When Needed: For things like infographics or charts, use a short alt tag and include a detailed image description nearby.
    5. 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
  • AI Accessibility Platform or Just an Overlay?

    The digital accessibility space is flooded with promises. Some companies advertise sleek, one-click solutions to fix web accessibility issues overnight. They now call themselves an “AI accessibility platform” rather than what they truly are: overlays.

    It sounds good. Who wouldn’t want artificial intelligence to solve complex compliance problems automatically? But here’s the catch: most of these so-called AI accessibility platforms are just rebranded overlays—front-end widgets that apply a visual layer over a website to appear accessible. They rarely address the root issues. Even worse, they can give businesses a false sense of compliance and leave disabled users frustrated.

    What Is an Overlay, Really?

    A web accessibility overlay is a third-party tool that’s added to a site through a snippet of JavaScript. It tries to modify the user experience dynamically. Common features include contrast toggles, font size adjustments, keyboard navigation enhancements, and screen reader fixes.

    These overlays are easy to install and often marketed as a quick path to ADA or WCAG compliance. Some now claim to use AI to identify and fix accessibility issues in real-time. But while the buzzword changed, the fundamental technology hasn’t.

    The AI Smokescreen

    Labeling a product as an “AI accessibility platform” gives it an air of sophistication. But in many cases, artificial intelligence plays a minimal role—or none at all. Even when developers use AI to detect accessibility issues, it still can’t replace expert human review or hands-on code-level remediation.

    Here’s why that matters:

    • AI can miss context. It may detect that an image lacks alt text but can’t determine if the description is meaningful.
    • AI can’t restructure content. Accessibility isn’t just about fixing what’s visible—it’s also about semantic structure, logical flow, and proper HTML.
    • AI can’t interpret intent. True accessibility requires understanding the purpose of design and interaction elements. That takes human judgment.

    In short, AI might help flag issues, but it can’t fix them at scale with the nuance needed for real-world usability.

    The Real Risks of Relying on Overlays

    Many businesses adopt AI accessibility platform, believing they’re safe from lawsuits. They’re not. In fact, overlays are now being cited in accessibility lawsuits. Plaintiffs and advocacy groups argue that these tools are ineffective and even obstructive.

    The risks include:

    • Legal exposure. Courts have increasingly ruled that overlays do not ensure ADA compliance. Plaintiffs with disabilities have successfully sued companies using these tools.
    • Bad UX for disabled users. Overlays can conflict with screen readers, override user settings, or interfere with native assistive tech.
    • False security. Businesses relying on accessibility widgets might mistakenly believe they’re protected, overlooking critical accessibility issues that thorough audits and remediation would easily identify. In fact, in 2024 alone, 1,023 companies using accessibility widgets on their websites faced lawsuits.

    What Real Accessibility Looks Like

    True digital accessibility is not a checkbox or a plugin. It’s a commitment to inclusivity that starts in your codebase. That means:

    • Semantic HTML structure
    • Meaningful alt text
    • Keyboard navigability
    • Proper ARIA roles
    • Logical content order
    • Form labels and error identification

    These elements can’t be patched with JavaScript after the fact. They have to be built into the foundation of your site.

    Expert-Led Accessibility Works

    This is where companies like 216digital come in. Unlike overlay vendors, 216digital doesn’t promise overnight compliance. Instead, they deliver code-based accessibility services rooted in real expertise.

    Their process includes:

    • Manual audits by accessibility professionals
    • Comprehensive WCAG testing across devices and assistive technologies
    • Remediation services that fix issues in your site’s actual code
    • Ongoing support to maintain compliance over time

    This approach not only improves accessibility for users with disabilities but also strengthens your brand, SEO, and legal compliance.

    Don’t Fall for AI Accessibility Platform

    Rebranding overlays as “AI accessibility platforms” is a clever marketing move. But it doesn’t make them more effective. Businesses need to look past the buzzwords and focus on what truly matters: building accessible websites that work for real people.

    Overlays offer a temporary illusion of compliance. But for lasting accessibility, legal protection, and a genuinely inclusive user experience, expert-led, code-based solutions are the only path forward.


    If you’re serious about accessibility, skip the overlay. Choose real remediation. Choose a partner like 216digital who understands that accessibility isn’t just a feature—it’s a foundation.

    Start by filling out the contact form below to schedule your complimentary ADA briefing with 216digital today.

    Greg McNeil

    April 2, 2025
    Legal Compliance
    Accessibility, Ai and Overlay Widgets, AI-driven accessibility, Overlay, WCAG, Web Accessibility, Widgets
  • Everything on Accessibility for Ontarians with Disabilities Act (AODA)

    Did you know that one in five Ontarians has a disability? This means that a large segment of the population faces barriers many of us rarely consider—especially when going online. For businesses and website owners, ignoring accessibility can shut out customers who want your products or services but can’t navigate your site with ease. Creating an accessible experience isn’t just good practice; in Ontario, it’s also the law.

    Ontario’s Accessibility for Ontarians with Disabilities Act (AODA) was introduced in 2005 to help reduce and remove barriers for people with disabilities. Many businesses still fall short of meeting AODA requirements, even though compliance is mandatory. This article will clarify key regulations under the AODA, explain why it matters, and offer actionable steps to ensure your website is accessible. By the end, you’ll feel more confident in your ability to meet these legal and ethical obligations.

    A Quick Overview: What Is the AODA?

    The Accessibility for Ontarians with Disabilities Act (AODA) is a landmark law passed in 2005. It sets out rules to make everyday life better for people with disabilities in Ontario. While the AODA covers physical spaces, such as ensuring ramps and wide aisles, it also applies to digital properties. In other words, your website, apps, and online documents fall under its scope.

    By focusing on technology as well as brick-and-mortar locations, the AODA aims to provide equal access to everyone—whether they’re using a wheelchair, a screen reader, or any other assistive device.

    Why was the AODA Needed?

    Before the AODA became law, the Ontarians with Disabilities Act (ODA) tried to address similar issues. Passed in 2001, the ODA mainly targeted government agencies. Because it lacked strong enforcement tools, it didn’t do enough to break down barriers in the private and non-profit sectors.

    Recognizing these gaps, lawmakers introduced the AODA. Unlike the ODA, the AODA has clear enforcement measures that can include significant penalties for organizations that fail to comply. By building on the lessons from the ODA, the AODA established a more forward-looking system. This system continues to evolve, raising expectations for businesses to be fully inclusive in both physical and virtual environments.

    The 5 Standards of the AODA

    The AODA is made up of five key standards. Each standard focuses on a different area of daily life, ensuring organizations take a broad approach to accessibility.

    Customer Service

    This standard ensures that people with disabilities can interact with businesses as smoothly as anyone else. Examples include providing sign language interpreters for events and making store aisles wide enough for wheelchairs or walkers.

    Information and Communications

    Under this standard, organizations must offer information in accessible formats—like braille, large print, or audio. Websites also need to be designed in ways that people with disabilities can use, which includes ensuring screen readers and other assistive tech can read the content correctly.

    Employment

    Employers must create equitable hiring and workplace practices. They might offer flexible work hours or specialized equipment to employees with disabilities. The goal is to remove barriers that keep talented individuals from fully contributing at work.

    Transportation

    Public transit, taxis, and specialized transport services must meet the needs of individuals with mobility, vision, or hearing challenges. This standard helps people with disabilities stay mobile, independent, and connected to their communities.

    Design of Public Spaces

    This part of the AODA deals with the built environment. It covers things like ramps, tactile guiding surfaces, and other physical accessibility features in newly constructed or renovated public spaces.

    AODA and Web Accessibility Requirements

    One of the most impactful parts of the AODA is its focus on web accessibility. Under the law, most public and private organizations in Ontario must make their websites comply with the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA. WCAG sets international standards for how to make online content accessible to people with various disabilities. The guidelines come in three levels: A, AA, and AAA. A is the most basic level, while AAA is the most strict. The AODA currently targets Level AA, striking a balance between practicality and inclusivity.

    Core Elements of Compliance

    • Keyboard-Only Navigation: Making sure users can move through a site without a mouse.
    • Alt Text for Images: Providing descriptive text that screen readers can read aloud.
    • Sufficient Color Contrast: Text and background colors need enough contrast for people with low vision to read easily.
    • Resizable Text: Allowing users to enlarge text without losing important features.
    • Assistive Technology Compatibility: Ensuring your site works well with screen readers, voice recognition, and other tools.

    If your organization is in Ontario—be it a private company, non-profit, or government body—chances are you need to follow AODA web standards. Companies with 50 or more employees must also file accessibility reports, but even smaller companies should prioritize compliance to serve all customers properly.

    AODA Enforcement and Penalties: What’s at Stake?

    The Accessibility Directorate of Ontario is in charge of making sure the AODA is followed. If they find you in violation, they can issue warnings and fines. The amount depends on several things:

    • How severe the violation is
    • Whether it’s a first-time or repeat offense
    • Whether it’s an individual or a corporation in violation

    Fines can range from a few hundred dollars to $100,000 per day. Beyond the financial risk, non-compliance can harm your reputation. Consumers today expect brands to show responsibility and compassion. Failing to meet AODA requirements may lead potential customers to shop elsewhere.

    How to Know if Your Website Is AODA-Compliant

    Checking your website against AODA standards can be done in several ways. Automated tools can scan your pages for some basic issues, like missing alt text or poor color contrast. However, these tools only catch part of the problem. A manual audit done by professionals offers deeper insight, finding subtle issues that automated scans often miss—like improper link descriptions or confusing page layouts.

    The best approach is usually a mix of both:

    • Automated Checks: Quick and helpful for spotting coding errors and missing tags.
    • Human Review: Experts test your site with screen readers and other assistive technologies, ensuring a more complete analysis.

    Steps to Remediate Accessibility Issues

    Achieving AODA compliance is a journey rather than a one-time fix. Here are key steps to help your organization move forward:

    Learn WCAG Standards

    Study the WCAG 2.0 Level AA requirements. Focus on text contrast, alt text, keyboard navigation, and other essentials.

    Run an Accessibility Audit

    Use online tools or consult with 216digital for a thorough website review. A professional audit can uncover issues that might go unnoticed with basic scans.

    Fix Identified Issues

    Some problems can be solved with simple changes like adding alt text or adjusting font sizes. Others might need deeper code updates or rethinking your site’s design.

    Train Your Team

    If your staff isn’t aware of accessibility best practices, problems will keep popping up. Educate content writers, graphic designers, and developers about inclusive design.

    Stay Up to Date

    WCAG guidelines and AODA regulations can evolve over time. Keep checking official sources or partner with an accessibility-focused service provider.

    Implement Ongoing Monitoring

    Tools like 216digital’s a11y.Radar can help you spot and fix new issues before they become major obstacles for users with disabilities.

    Conclusion

    Meeting the requirements of the AODA isn’t just about avoiding fines—it’s about treating all people with fairness and respect. By making your website accessible, you open your virtual doors to a larger audience, improve your public image, and stay on the right side of the law. More than that, you make a real difference in the lives of those who rely on accessible websites to work, shop, learn, and connect.

    If you’re not sure where to begin, start by assessing your site for AODA compliance through an automated and manual audit. From there, put together a plan to fix errors, train staff, and keep up with any changes in the rules. If you need extra support, reach out to specialists like 216digital for expert guidance—whether you want help running an audit or need hands-on assistance to resolve complex issues.

    Remember, accessibility isn’t a box you check once; it’s an ongoing commitment that benefits everyone. By embracing the AODA and focusing on web accessibility, you’re doing more than following the law—you’re building a better future for all Ontario residents and online visitors alike.

    Greg McNeil

    April 1, 2025
    Legal Compliance
    Accessibility, Accessibility for Ontarians with Disabilities Act, accessibility laws, AODA, International Accessibility Laws, Website Accessibility
  • How to Improve UX for Cognitive Disabilities

    Cognitive disabilities can significantly influence how people explore and interpret online information. In many cases, individuals struggle to process, remember, or make sense of digital content unless it is designed with clarity in mind. For example, someone on the autism spectrum might need a consistent and distraction-free interface, while a person with dyslexia could have trouble reading dense paragraphs of text.

    Thinking about these needs right from the start of the design process can make your website more inclusive for everyone. Improving usability for people with cognitive disabilities is not only the right thing to do—it also helps you meet legal requirements like the Americans with Disabilities Act (ADA). Plus, it can boost your business by opening your site to a broader audience, leading to higher user satisfaction and stronger customer loyalty.

    Our goal in this article is to outline practical tips that help web designers, developers, and content creators build better experiences for users with cognitive disabilities. Let’s begin by exploring the challenges these users often face.

    What Are Cognitive Disabilities, and Who Do They Affect?

    Cognitive disabilities are conditions that affect how a person processes, remembers, or understands information. They can take many different forms, from difficulties in reading and language comprehension to struggles with focus, memory, or problem-solving. Although each individual experiences these conditions differently, thoughtful design can make a significant difference in how they interact with digital platforms.

    Conditions to Keep in Mind

    • Autism Spectrum Disorder (ASD): Sensitive to sensory overload, prefers predictable layouts and calm environments.
    • Dyslexia: Trouble reading and decoding words—clear fonts and layouts help a lot.
    • ADHD: Easily distracted, especially on cluttered or busy websites.
    • Dyscalculia: Difficulty working with numbers and completing financial tasks.
    • Low Literacy: Struggles with reading complex or technical language.
    • Short-Term Memory Issues: Finds it hard to follow long, multi-step instructions.

    What Makes the Web Difficult to Use?

    People with cognitive disabilities often face challenges when using digital content. Here are a few examples:

    • Too Much Information: Crowded pages with lots of text or flashing images can feel overwhelming.
    • Hard-to-Read Language: Long words or technical terms may confuse readers.
    • Unclear Instructions: Vague directions can stop someone from completing a task.
    • Tricky Navigation: Menus that change often or aren’t labeled well can make it hard to move around.
    • Time Limits: People with cognitive disabilities may need more time to think or read.

    By understanding these barriers, we can start designing websites that work better for everyone.

    Design That Works: Simple Ways to Improve the Experience

    You don’t need to be an expert to make a difference. Here are some easy ways to help users with cognitive disabilities feel more supported and confident online:

    Clear and Simple Design Helps Users with Cognitive Disabilities

    • Use Descriptive Labels: Clearly label buttons, links, and forms to reduce confusion.
    • Maintain Consistency: Use consistent colors, fonts, and layouts to make your site predictable.
    • Give Control to Users: Avoid auto-playing videos or endless scrolling; let users control animations.
    • Provide Clear Instructions: Highlight required fields and clearly state what’s expected.
    • Avoid Unnecessary Time Limits: Allow users with cognitive disabilities extra time or options to extend limits.
    • Reduce Memory Demands: Enable copy-pasting for information like verification codes.
    • Include Easy Help Options: Offer visible help buttons or live chat support.

    Use Friendly and Simple Language

    • Simplify Your Language: Use short sentences and avoid technical jargon to support users with cognitive disabilities.
    • Write Short, Clear Sentences: Bullet points, short paragraphs, and lists make content easier to understand.
    • Add Visual Aids: Icons, images, and short videos can explain content better.
    • Offer Clear Error Messages: Clearly explain errors and solutions.
    • Keep Terminology Consistent: Use the same words consistently to avoid confusion.
    • Optimize Headings and Links: Use descriptive headings and link texts like “Learn more about cognitive disabilities.”

    Create a Helpful Layout

    • Break Down Tasks: Use steps and progress indicators for complex tasks.
    • Use Clear Headings: Properly tag headings to organize content logically.
    • Include Visual Cues: Highlight important information with bold text or icons, ensuring good color contrast.
    • Use White Space: Space out text and visuals to prevent cognitive overload.
    • Allow Customization: Enable users to adjust font sizes and hide unnecessary content.

    Web Accessibility Testing for Cognitive Disabilities

    Automated Tools Aren’t Enough

    Automated tools are useful for catching technical errors but fall short when it comes to evaluating cognitive accessibility. They often miss confusing content or overwhelming layouts. Still, they’re a great place to start.

    Tools like Google Lighthouse or  WAVE by WebAIM can scan your site for issues such as inconsistent headings, missing form labels, and poor color contrast—factors that contribute to cognitive overload.

    Prioritize User Testing

    Real user feedback is crucial. Invite individuals with various cognitive disabilities to test your website. Use moderated sessions or remote tools like UserZoom, PlaybookUX, or Lookback to gather feedback. Watching how users interact with your site in real time offers insights that no automated scan can provide.

    Commit to Continuous Improvement

    Accessibility is not a one-time task—it requires regular attention and maintenance. Revisit your site routinely and re-test after updates to stay aligned with evolving standards. While automated scanners help flag issues, pairing them with ongoing human review ensures a more complete understanding of your site’s accessibility.

    For long-term support, consider using an accessibility monitoring platform. A service like 216digital’s a11y.radar can help track accessibility over time, spot recurring problems, and support timely updates. Monitoring also provides valuable data to guide improvements and measure progress.

    Keep It Simple, Keep It Kind

    Designing with these challenges in mind is both a moral responsibility and a way to broaden your reach. By reducing cognitive load, simplifying language, and maintaining a well-organized layout, you can create a website that is easier to use and welcoming for people who face challenges with concentration, memory, or reading comprehension.

    Remember that web accessibility is not just a one-time fix but an ongoing journey. Through regular testing, user feedback, and updates, you can keep your site aligned with modern accessibility standards and user expectations.

    For businesses seeking expert guidance on making their digital experiences more accessible, 216digital offers tailored solutions that enhance usability and ensure compliance. By prioritizing users with cognitive disabilities, we foster an online world where everyone feels capable, respected, and included.

    Every small step you take toward making your site more inclusive counts. By learning about best practices, applying user feedback, and reaching out for expert help when needed, you can build platforms that truly welcome and support all people—including those with cognitive disabilities.

    Greg McNeil

    March 31, 2025
    The Benefits of Web Accessibility
    Accessibility, cognitive disabilities, WCAG, Website Accessibility
  • Alt Text: Why Marketing Copy Hurts Accessibility

    Have you ever hovered over an image on a webpage and noticed a small snippet of text appear? That text is called “alt text,” and it plays a powerful role in how people experience your site—especially those who rely on screen readers. Yet it often remains an afterthought. That’s a problem. When handled correctly, it not only helps visually impaired users understand your images, but it can also support your SEO goals. On the other hand, stuffing alt text with keywords or using it as hidden ad space can frustrate visitors and hurt your search rankings.

    In this article, you’ll learn why alternative text matters, how it benefits both accessibility and SEO, and how to write it in a clear, concise, and helpful way rather than a spammy or sales-focused one. Whether you’re a solo entrepreneur, a web developer, or part of a digital marketing team, these principles will help you craft alt text that meets user needs without alienating search engines—or your audience.

    Why Alt Text Matters

    Imagine you’re shopping for a laptop case online, and you can’t see the product images. Screen reader users rely on alt text to “hear” what’s happening in each image, from color to texture. If it is nothing more than “Get the best laptop case here,” that user is left with zero details about the product. They might simply leave for a site that offers the information they need. When you write alt text that clearly states “Black leather laptop case with a zipper and handle,” you empower all customers, including those with visual impairments, to make informed decisions.

    SEO Wins

    Search engines analyze alt text to better understand what each image represents. This can give your site a leg up in search rankings for relevant queries. However, algorithms have grown smart enough to recognize keyword-stuffed or spammy text. If your alt text reads like a desperate attempt to shoehorn “laptop case” 10 times, you might do more harm than good. Concise, descriptive text helps Google and other search engines match your site with the people who genuinely want to find your products.

    Common Alt Text Pitfalls

    Keyword Overuse

    It can be tempting to sneak in extra keywords to boost SEO. But endless repetition—like “car seat protector, seat protector for cars, vinyl seat protector”—makes the text clunky and unhelpful. Search algorithms can detect spammy patterns, and users who rely on screen readers will find the repetition tedious or confusing.

    Marketing Copy Disguised as Descriptions

    Some site owners treat alt text fields as free ad space, writing something like:

    “Our top-selling leather laptop case, now 20% off! Don’t miss this exclusive deal—buy today!“

    While it may read like a catchy tagline, it doesn’t describe the image. A screen reader user learns nothing about color, texture, or design. Plus, Google doesn’t benefit from vague promotional language and might even flag your page as low-quality.

    Empty or Missing Alt Text

    Perhaps the biggest mistake is neglecting alt text entirely. In that case, a screen reader user hears nothing—just empty space—making it impossible to engage with or understand the image. If a product image is critical to your sales, that’s a huge missed opportunity.

    Repeating “Image of”

    Screen readers already announce that an element is an image. If your alt text says “Image of a black laptop case,” it’s redundant. Jump straight to the essential details: “Black leather laptop case with a zipper and handle.”

    Writing Alt Text the Right Way

    Focus on Real Descriptions

    The primary function of alt text is to describe the image so someone can visualize it through words. For a black vinyl car seat protector, a simple yet complete phrase might be:

    “Black vinyl seat protector on the driver’s seat with a zippered pocket.”

    This gives useful details while remaining concise—no filler like “best seat protector,” no repeated keywords, and no promotional language.

    Keep It Concise Yet Informative

    Alt text generally doesn’t need to be more than one or two short sentences. Offer key details without overwhelming the user. For a laptop case, mentioning the color, material, and whether it has a handle or zipper is usually enough. Screen reader users just need the essentials to identify or comprehend the image.

    Context Is Important

    If the image has a functional role—like a button or a link—clarify that. For instance, if users click an image to add a product to their cart:

    “Add to cart button for black vinyl seat protector”

    This way, a screen reader announces the function, not just the object in the image.

    Skip Redundant Phrases

    Screen readers typically announce that an element is an image, so writing “Image of” or “Graphic showing” is unnecessary. Go straight into the description. It keeps your text short and saves valuable time for the user.

    The Real-World Impact of Bad Alt Text

    Frustrating Users

    When alt text is stuffed with marketing copy or random keywords, it becomes meaningless for users with visual impairments. They hear a repetitive sales pitch instead of valuable information. This frustration often leads them to abandon your site, which hurts your brand image—and your bottom line.

    Possible Legal Ramifications

    In an era of heightened focus on digital accessibility, businesses risk legal consequences by not meeting basic standards. Some organizations have faced lawsuits for failing to include alt text. While legal outcomes vary by location and industry, it’s best to be proactive.

    Lower Search Engine Rankings

    Search engines want to display content that offers value. If your alt text is obviously spammy or unhelpful, algorithms may penalize your pages or push them further down the results. A high bounce rate—where users leave quickly due to poor user experience—also signals to Google that your site isn’t meeting visitor needs.

    Practical Steps to Improve Your Alt Text

    Conduct an Alt Text Audit

    Start by reviewing your site for missing or poor-quality alt text. Tools like the WAVE Web Accessibility Evaluation Tool highlight potential issues. Many SEO platforms also include site audits that can reveal duplicated alternative text text or keyword stuffing.

    Leverage AI Judiciously

    AI can be a lifesaver if you have thousands of product images. Tools like Google Vision offer automated descriptions, but they’re not always accurate. AI might misidentify colors or add superfluous words, so always review automatically generated alt text for accuracy and clarity.

    Follow Recognized Guidelines

    The Web Content Accessibility Guidelines (WCAG) provide standardized advice on writing effective alternative. Aim to:

    • Describe the image’s important details.
    • Keep it concise.
    • Skip filler words like “picture of.”
    • Use empty alt text (alt=" ") for purely decorative images that don’t add information.

    Test with Real Users

    Whenever possible, invite screen reader users to test your site. No automated tool can replace real feedback from people who use assistive technology daily. They’ll quickly tell you if your alt text is too vague, too repetitive, or missing crucial details. Their firsthand insights can highlight any confusion or gaps.

    Best Practices at a Glance

    • Prioritize clarity: Let users know exactly what they’re “seeing” through your words.
    • Stick to relevant details: Think color, material, function, or context—not ad slogans.
    • Limit keywords: A single, well-placed keyword can assist SEO. Overuse can sabotage it.
    • Adapt to the image: Product angles differ, so describe each image’s unique perspective.
    • Check surrounding text: If “black laptop case” appears in the product name next to the image, you may not need to repeat it in the alt text.

    Conclusion

    In today’s competitive online environment, you can’t afford to overlook the importance of alt text. A single line of well-chosen words can be the difference between an inclusive, intuitive user experience and a site that feels incomplete to a significant segment of your audience. By writing concise, descriptive alt text—free from keyword stuffing and promotional fluff—you create a more welcoming website and help search engines better understand your content.

    If you’re ready to enhance your site’s accessibility while protecting its SEO standing, consider partnering with 216digital. We’ll help you fine-tune your alt text (and the rest of your site) so that every visitor, whether they see your images or hear them described, gets the information they need. Embracing accessibility and clarity isn’t just the right thing to do—it’s also a savvy move for your online presence.

    Greg McNeil

    March 28, 2025
    The Benefits of Web Accessibility
    Accessibility, Alt text, How-to, Image Alt Text, Marketing, SEO, WCAG, Website 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
  • How WCAG 1.3.1 Supports Cognitive Disabilities

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

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

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

    What Is WCAG Success Criterion 1.3.1?

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

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

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

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

    How WCAG 1.3.1 Supports Individuals with Cognitive Disabilities

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

    ADHD (Attention Deficit Hyperactivity Disorder)

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

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

    Autism Spectrum Disorder (ASD)

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

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

    Dyslexia

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

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

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

    Best Practices to Implement WCAG 1.3.1

    Use Proper HTML Markup

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

    Make Labels and Associations Meaningful

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

    Keep a Logical Reading Order

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

    Allow Alternative Navigation Methods

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

    Common Mistakes to Watch Out For

    Depending on Style Instead of Structure

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

    Overloading with Unstructured Content

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

    Skipping Testing

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

    Better Structure Means Better Accessibility

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

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

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

    Greg McNeil

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

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

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

    What Is Audio Description?

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

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

    How Is Audio Description Created?

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

    Writing the Script

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

    Voicing the Description

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

    How Is Audio Description Published?

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

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

    Benefits of Audio Description

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

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

    Alternative to Audio Description

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

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

    Why Audio Description Is Worth Prioritizing

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

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

    Greg McNeil

    March 25, 2025
    How-to Guides, WCAG Compliance
    audio description, captions, videos and audio content, WCAG, WCAG conformance
  • How to Make 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
  • When Is a Skip Link Needed?

    We’ve all been on websites that greet us with massive headers, menu bars crammed full of links, or flashy ads stretching across the top. With a mouse, you can scroll or click straight to the section you care about. But if you rely on a keyboard, you’re stuck tabbing through every link and button in that menu before you reach the main story. It can feel like trudging through a maze when you just want to dive into the content.

    A skip link offers a simple shortcut: it lets keyboard users jump over that repeated stuff and land exactly where they need to be. In this article, we’ll explore how skip links fit into the Web Content Accessibility Guidelines (WCAG), why they matter for anyone who doesn’t browse with a mouse, and how they can make a site more enjoyable for all visitors—even the ones who love to scroll.

    What Is WCAG’s Bypass Blocks Rule?

    WCAG’s Success Criterion 2.4.1, known as “Bypass Blocks,” focuses on letting users skip past content that appears on every page, such as headers, navigation menus, and sidebars. These areas can become barriers for people who rely on keyboard navigation or use screen readers, since they have to listen to or Tab through every link each time they land on a new page.

    Mouse users can ignore repeated elements by moving their cursor directly to the main section of the page. But if you are using a keyboard only, you have to press the Tab key multiple times to get beyond the menu or header. This extra effort can be frustrating. By contrast, a skip link makes it possible to jump straight to the main content with a single press of the Tab key and an Enter or Space to activate it. Cutting down on keystrokes is a big boost to usability and can remove physical strain for users with motor disabilities.

    Do Landmarks and Headings Count as Bypass Tools?

    Some people think that WCAG’s requirements force you to include a skip link no matter what. However, WCAG does not specifically demand that you place a “Skip to Main Content” link on your pages in every scenario. If you use proper HTML5 sectioning elements like <main> or set up ARIA landmarks with role= "main", you can fulfill the technical requirement.

    When you use clear heading structures (<h1>, <h2>, etc.) and assign landmarks (role= "navigation", role= "banner") to your layout, many screen readers allow users to jump from one landmark or heading to another. This means they can skip large chunks of repeated content. However, there is a key drawback: these landmark shortcuts are tied to assistive technology. Keyboard-only users without a screen reader do not benefit from these features, because landmarks are not accessible through simple keystrokes like Tab. That is where a skip link proves especially helpful, providing an obvious and direct way to move focus into the main content.

    Why a Skip Link Is Still Best Practice

    Even if you are technically compliant with WCAG, many experts still recommend a skip link. Here’s why:

    1. Keyboard-Only Users: Landmarks may help screen reader users, but they are not available to someone who only has a keyboard. A skip link is the only direct and reliable way to jump over repetitive elements.
    2. Users with Motor Disabilities: Each extra keystroke can cause strain. Reducing the need to press Tab repeatedly makes it easier for people with limited mobility to explore your site.
    3. Users with Cognitive Disabilities: Repeated menus and banners can be visually overwhelming and distracting. A skip link streamlines the experience by letting users focus on the main content faster.

    Other Tools That Help With Page Navigation

    • Provide a Skip Link: A short text-based link such as “Skip to Main Content” at the top of the page is a universal solution.
    • Use HTML Sectioning Elements: Properly labeling <header>, <main>, and <footer> can help screen reader users identify page sections.
    • Implement a Logical Heading Structure: When headings form a clear outline, it is easier for people to scan or jump to key areas, especially when assistive technology is involved.

    Alternative Navigation Aids

    While a skip link is vital, it’s not the only accessibility tool you can use. ARIA landmarks, for example, let you define elements like role= "navigation", role= "banner", or role= "main". Screen readers can use these roles to move focus to each region. Another strategy is to include access keys, which assign keyboard shortcuts to major parts of your site. Yet, these approaches are typically helpful only to those who know how to use them and have compatible assistive technology. For most keyboard users, a skip link remains the clearest and simplest tool.

    How to Add a Skip Link the Right Way

    A skip link should do more than just jump down the page; it needs to work with the keyboard in a smooth way. Here’s how:

    Position the Link as the First Focusable Element

    The best practice is to place the skip link at the very top of your page. This ensures it is the first element that gets focus when someone tabs through the page. A common method is to link to the main content area, marked by an ID like id= "main-content".

    Ensure Proper Keyboard Functionality

    When users activate the skip link, focus should land right on the main content area. For this to happen, that target element must be focusable. If <main> or the first heading is not normally focusable, you can add tabindex= "-1" to make it work. This step also helps users who use screen magnifiers, because the focus moves right to the main section visually.

    Example:

    <a href="#main-content">Skip to Main Content</a>
    <!-- Header, Navigation, and other repeated content -->
    
    <main id="main-content" tabindex="-1">
        <!-- Main content -->
    </main>
    Or, if you want to move focus to the first heading:
    <a href="#first-heading">Skip to Main Content</a>
    <!-- Header, Navigation, and other repeated content -->
    
    <h1 id="first-heading" tabindex="-1">Welcome to Our Site</h1>
    <!-- Main content -->

    Ensure the Skip Link Is Visible When Focused

    Many designers hide the skip link until it gains focus. While this can keep the page looking tidy, it’s important that the link is fully visible and noticeable the moment someone tabs onto it. This visibility ensures that keyboard users know there is a helpful tool available. In some designs, leaving the skip link in plain sight all the time may be the best approach.

    Mistakes to Avoid With Skip Links

    Even if you add a skip link, a few errors can stop it from working as intended:

    • Improper Hiding Techniques: If you use display: none; or visibility: hidden;, screen readers will not detect the link at all. Instead, use off-screen positioning so it remains accessible.
    • Non-Focusable Targets: Forgetting to add tabindex= "-1" to the target means the user might land near the content but not actually focus on it. This can confuse people using screen readers or screen magnifiers.
    • Skipping Too Much Content: Your skip link should jump over repeated menus, but it should not force users to skip crucial information, like an important heading that explains the page’s purpose.

    Check That Your Skip Link Actually Works

    Testing makes sure your skip link works well:

    1. Keyboard Testing: Turn off your mouse and try to navigate the site by tapping through. Watch for the link to show up, and check that it drops you into the main area.
    2. Assistive Technology Testing: Use a screen reader to confirm that your skip link is announced and that it moves focus correctly.
    3. Cross-Browser Compatibility: Test in different browsers (Chrome, Firefox, Safari, Edge) to confirm that the skip link behaves the same everywhere.

    Make Navigation Easy for Everyone with 216digital

    Including semantic elements and ARIA landmarks can make your site meet the minimum requirements of WCAG, but offering a dedicated skip link goes a step further by improving usability for keyboard-only users, people with motor disabilities, and users who may become overwhelmed by repeated menus. Rather than viewing accessibility as a set of rules to follow, think of it as a way to create a smoother, more welcoming experience for all.

    If you want a site that not only checks the compliance box but also feels inclusive to every visitor, consider working with a partner who understands the importance of thoughtful navigation. At 216digital, we specialize in designing web experiences that work for everyone. A skip link may seem like a small touch, but it can make a world of difference for those who need it. Let’s make the web more inclusive together.

    Greg McNeil

    March 21, 2025
    How-to Guides
    skip link, WCAG, WCAG conformance, web developers, web development
Previous Page
1 2 3 4 5 … 31
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.