WCAG Archives /Tag - 216digital

POURing Effort into Web Accessibility
Creating an inclusive digital world isn’t just a nice-to-have—it’s a necessity. For many people, accessing information online isn’t as simple as opening a website and scrolling through content. Visual impairments, mobility challenges, cognitive disabilities, and other barriers can make navigating the internet difficult without proper accommodations. That’s where the Web Content Accessibility Guidelines (WCAG) come in.

WCAG provides a roadmap for making web content accessible to all users, regardless of their abilities. Central to these guidelines are four foundational principles known by the acronym POUR: Perceivable, Operable, Understandable, and Robust. In this article, we’ll explore what POUR means, why it’s important, and how you can apply these principles to create a more accessible user experience.

What Is POUR?

At the heart of WCAG are the four foundational principles known as POUR: Perceivable, Operable, Understandable, and Robust. These principles serve as the pillars of accessible design, guiding developers and designers to create web experiences that accommodate a wide range of abilities and preferences.

POUR ensures that digital content is not only accessible but also functional and user-friendly. Adhering to these principles helps remove barriers and allows everyone—regardless of physical, sensory, or cognitive abilities—to engage with web content fully and independently.

In the following sections, we’ll take a closer look at each of the POUR principles, their practical applications, and how they make web content more inclusive.

Perceivable: Making Content Accessible to the Senses

The principle of perceivability focuses on ensuring that all users can access and process the information presented on a website. This means content must be adaptable to a variety of sensory modalities, such as vision, hearing, or touch. Without perceivable content, users with sensory disabilities may be completely excluded from accessing critical information.

What Does Perceivable Mean in Practice?
1. Text Alternatives for Non-Text Content: Every image, icon, and multimedia element must include a text equivalent, such as alt text for images or transcripts for audio content. For example, if a website features a graph, it should include a detailed description of the data for visually impaired users.
2. Captions and Audio Descriptions: Videos should have captions for users who are deaf or hard of hearing and audio descriptions for users who are blind, ensuring everyone can understand the content.
3. Readable Text Content: Font size, color contrast, and spacing should make text readable for users with visual impairments or dyslexia. For instance, using a high-contrast color scheme helps users with low vision differentiate between text and background.
Common Mistakes That Violate Perceivable Standards
- Using images without alt text or vague descriptions like “image123.jpg.”
- Not adding captions to video content makes it difficult for people with hearing impairments to follow along.
- Designing web content that relies heavily on color to convey information can be problematic for color-blind users.
Operable: Ensuring Users Can Navigate and Interact

Operability is about giving users the ability to interact with and navigate a website effectively. Websites should cater to diverse input methods, including keyboards, mice, touchscreens, and assistive technologies like screen readers or sip-and-puff devices.

What Does Operable Mean in Practice?
1. Keyboard Accessibility: All interactive elements—such as buttons, forms, and menus—must be usable via a keyboard. For example, users should be able to navigate a website using the Tab key to move between elements and the Enter key to select options.
2. Adjustable Time Limits: Users must be given enough time to complete tasks like filling out forms. If a time limit is necessary, users should have the option to extend it or pause the timer.
3. Avoiding Traps: Design interactive elements like pop-ups or carousels to ensure users don’t become “trapped.” For example, make it easy for keyboard users to close a pop-up.
Common Mistakes That Violate Operable Standards
- Creating drop-down menus or interactive elements that are difficult to navigate with a keyboard.
- Designing forms that reset if not completed within a set time frustrates users who may need extra time.
- Using auto-scrolling content that cannot be paused or stopped.
Understandable: Keeping Content Clear and Predictable

The principle of understandability ensures that users can easily comprehend both the information and the functionality of a website. Content should be presented in a logical, consistent, and intuitive manner.

What Does Understandable Mean in Practice?
1. Plain Language: Avoid jargon and use simple, clear language. For example, instead of saying, “Click here to access the comprehensive compendium of resources,” simply say, “Click here to access the resource guide.”
2. Predictable Interactions: Elements like navigation menus and buttons should behave consistently throughout the site. For example, a menu that expands when clicked should work the same way on every page.
3. Error Feedback and Recovery: Forms and other interactive elements should provide clear feedback when users make errors. For instance, if a user forgets to fill out a required field in a form, the website should provide an error message that explains what’s missing and how to correct it.
Common Mistakes That Violate Understandable Standards
- Using complicated words or phrases without explanations makes it hard for users to comprehend the content.
- Having links or buttons that perform unexpected actions confuses the user.
- Need to highlight input errors clearly or explain how to fix them.
Robust: Ensuring Compatibility with Current and Future Technologies

Robustness focuses on ensuring that websites are compatible with a wide range of technologies, including assistive devices. This principle ensures content remains accessible even as technology evolves.

What Does Robust Mean in Practice?
1. Standards-Compliant Code: Using clean, valid HTML and CSS ensures that web content is compatible with different browsers and assistive technologies. For example, screen readers can more easily interpret properly coded content.
2. Accessible ARIA Attributes: ARIA (Accessible Rich Internet Applications) roles and properties enhance dynamic content and make it usable for assistive technologies. For example, adding aria-live attributes to alerts ensures screen readers announce changes in real time.
3. Cross-Device Testing: Websites should be tested on various devices, operating systems, and browsers to ensure compatibility.
Common Mistakes That Violate Robust Standards
- Using outdated or non-standard HTML code can break some browsers or assistive technologies.
- Labeling form elements properly makes it easier for screen readers to convey relevant information to the user.
Bringing POUR Principles Together

While each POUR principle addresses a specific aspect of accessibility, they work together to create a seamless and inclusive user experience. Let’s look at an example of how all four principles might be applied:

Example: An E-Commerce Website
1. Perceivable: Images of products include descriptive alt text, and videos showcasing features have captions and audio descriptions.
2. Operable: Users can navigate the site with a keyboard and use the Tab key to add items to their cart.
3. Understandable: The checkout process uses plain language and provides clear instructions for completing forms.
4. Robust: The site is tested with assistive technologies like screen readers and works smoothly on mobile devices.
By aligning with all four POUR principles, the website ensures that users of all abilities can browse, shop, and complete their purchases effortlessly.

Putting POUR into Practice

Applying the POUR principles isn’t just about avoiding mistakes; it’s about creating a truly inclusive web experience. Here’s how you can start:
1. Audit Your Site: Conduct an accessibility review to identify areas where your site falls short of POUR.
2. Incorporate accessibility from the Start: Build POUR into your web development and design process rather than trying to retrofit accessibility later.
3. Test with Real Users: Engage users with disabilities to test your site and provide feedback.
By focusing on POUR, you not only improve accessibility but also enhance usability for all visitors, creating a better overall user experience.

POURing Effort into Accessibility

The four principles of WCAG—Perceivable, Operable, Understandable, and Robust—offer a solid foundation for building an accessible web. These principles are not just guidelines; they represent a commitment to inclusivity and respect for all users.

Accessibility isn’t a one-time task—it’s an ongoing effort to create a web that works for everyone. By applying POUR to your digital content, you’re taking meaningful steps toward a more inclusive future. Start today by reviewing your site, learning from accessibility experts, and embracing WCAG principles to make a difference in the lives of your users.

If you’re ready to take the next step toward making your website ADA-compliant and ensuring accessibility for all, schedule an ADA briefing with 216digital. Our team of experts will guide you through the process, answer your questions, and help you create a web experience that’s inclusive, compliant, and user-friendly. Don’t wait—start building a more accessible digital presence today.
Greg McNeil

November 18, 2024

WCAG Compliance

Accessibility, WCAG, WCAG conformance, Website Accessibility
WCAG Conformance Levels: How High Should You Aim?
When you’re building a website, it’s easy to get caught up in the details of design, functionality, and making everything look just right. But what about accessibility? That’s where the Web Content Accessibility Guidelines (WCAG) come in. Think of WCAG as your go-to checklist for making sure your website is open and usable for everyone, including people with disabilities.

Accessibility isn’t just a “nice-to-have” anymore—it’s essential. Whether you’re trying to avoid lawsuits, comply with laws like the ADA, or make your site more welcoming, understanding WCAG conformance levels can help you figure out how high you should aim. Let’s break down the basics, explore the three levels—A, AA, and AAA—and help you find the sweet spot for your website.

What is WCAG?

WCAG stands for Web Content Accessibility Guidelines, but don’t let the formal name intimidate you. These guidelines are basically a roadmap for making websites, apps, and digital content work for everyone—whether someone has a disability or not. Developed by the World Wide Web Consortium (W3C), WCAG focuses on four key principles: making content perceivable, operable, understandable, and robust (POUR). Think of it as a checklist to ensure your site is usable for as many people as possible.

And it’s not just for developers! WCAG applies to everyone involved in building a website—from designers to writers—because accessibility goes beyond code. Whether it’s adding captions to videos, ensuring color contrast, or simplifying navigation, these small changes can make a huge difference in how people experience your site. At its core, WCAG is about creating a better internet for everyone.

Why Should You Care About WCAG Conformance?

So, why should WCAG be on your radar? For starters, it’s about reaching more people. Accessibility isn’t just for those with disabilities—it benefits everyone. Captions help folks watching a video on mute, high contrast is great for users in bright sunlight, and clear navigation makes life easier for anyone trying to find what they need. In other words, an accessible website is just a better website.

Then there’s the legal side of things. If you’re in the U.S., laws like the Americans with Disabilities Act (ADA) expect your site to meet certain accessibility standards, and WCAG is the go-to guide for that. Ignoring these guidelines could land you in hot water with lawsuits or fines—and let’s face it, no one wants that kind of stress.

But it’s not just about avoiding trouble. Prioritizing accessibility can actually boost your brand, build trust, and improve your site’s performance overall. Making your website accessible shows your users you care, and that can set you apart in a big way.

Breaking Down the WCAG Conformance Levels

WCAG isn’t a one-size-fits-all situation. It’s divided into three levels—A, AA, and AAA—each with its own set of requirements. Here’s what you need to know about each one:

Level A: Covering the Basics

Level A is like the starter pack for accessibility. It focuses on the most basic barriers that prevent people from accessing your site. For example:
- Adding alternative text (alt text) to images.
- Making sure everything can be used with just a keyboard.
- Avoiding flashing content that could trigger seizures.
If your website meets Level A, you’re covering the bare minimum. But let’s be real—it’s not enough to provide a great experience for most users. Think of Level A as the foundation you build on, not the end goal.

Level AA: The Sweet Spot

Level AA is where things start to get serious. It’s the most widely recommended level and is often what the law requires. With Level AA, you’re tackling more detailed issues like:
- Make sure the text has enough contrast with the background so it’s easy to read.
- Ensuring your navigation is consistent and clear.
- Providing captions for videos so they’re accessible to people with hearing impairments.
For most websites, Level AA hits the perfect balance—it’s achievable, practical, and covers a wide range of accessibility needs. If you’re wondering how high to aim, this is probably your answer.

Level AAA: The Extra Mile

Level AAA is like the platinum package. It’s the highest level of accessibility, but it’s also the hardest to achieve. Some of the requirements include:
- Offering sign language interpretation for video content.
- Make sure your site works well even under very specific conditions, like extreme contrast ratios.
While Level AAA is an amazing goal, it’s not realistic for every website. Even the W3C acknowledges that hitting this level for all content isn’t always possible. Instead, focus on what’s achievable for your site and audience, and aim for AAA features where you can.

How High Should You Aim?

So, where should you set your sights? For most organizations, Level AA is the way to go. It’s the legal standard in many places, including the U.S., and it covers most accessibility needs without overcomplicating things.

However, your target might depend on your audience and industry. For example:
- Government Websites: Usually aim for Level AA or higher since they serve a broad, diverse audience.
- Online Stores: Need to make sure people can easily browse and buy products, so Level AA is essential.
- Educational Platforms: Sometimes, we need to go beyond Level AA to ensure equitable access to learning materials.
If you’re running a small business or personal site, don’t stress about hitting Level AAA. Instead, focus on meeting Level AA and improving over time. Remember, accessibility is a journey, not a one-and-done task.

What Makes Level AAA So Hard?

Achieving Level AAA isn’t just difficult—it often forces you to make compromises that can impact your site’s usability and aesthetics. For example, meeting AAA contrast requirements might mean overhauling your brand’s carefully chosen color scheme. Or you might have to simplify complex content so much that it loses its original value or appeal.

It’s a delicate balancing act. On one hand, you want your site to be as accessible as possible. On the other hand, you need to ensure it remains engaging, functional, and true to your brand. For most organizations, focusing on Level AA strikes the best balance, ensuring broad accessibility without requiring sacrifices that could alienate other users or disrupt the site’s purpose.

That said, Level AAA isn’t all or nothing. While it may not be practical to achieve across the board, incorporating some AAA features—like avoiding overly complicated language or providing additional customization options—can still enhance your site and make it more inclusive. The key is to aim high without losing sight of what works best for your audience and goals.

Keeping Your Website WCAG Compliant

Meeting WCAG standards isn’t a one-time thing. Websites evolve, and so do accessibility needs. Here’s how you can stay on top of it:

Regularly Audit Your Site

Run accessibility audits often to catch issues early. Tools like Google Lighthouse or WAVE are a great start, but don’t stop there—getting feedback from actual users with disabilities can give you insights you won’t find anywhere else.

Train Your Team

Accessibility isn’t just for developers. Designers, content creators, and even marketers should understand the basics of WCAG. The more your team knows, the easier it’ll be to stay compliant.

Make Accessibility Part of Your Process

Don’t wait until the end of a project to think about accessibility. Include it in every step—from planning and design to testing and deployment.

Use Accessibility Tools

Tools like screen readers and color contrast analyzers can help you spot problems before they become major issues. These tools are easy to use and can make a big difference.

Stay Up-to-Date

WCAG updates from time to time to reflect new technology and user needs. Keep an eye on these changes and adjust your strategy as needed.

Achieve WCAG Conformance with 216digital

When it comes to WCAG conformance, aiming for Level AA is usually the smart move. It’s realistic, effective, and ensures you’re meeting the needs of most users. If you can, sprinkle in some Level AAA features to go the extra mile.

Making your website accessible isn’t just about ticking off a checklist—it’s about creating a welcoming space for everyone. With regular updates, audits, and a commitment to accessibility, you’ll not only meet the standards but also build a site people love to use.

If you’re unsure where to begin or want to check your progress, 216digital is here to help. Schedule an ADA briefing with our team to learn how we can help you achieve WCAG conformance, lower your legal risks, and create a better experience for all your users.

Take the first step today—because accessibility isn’t just a requirement, it’s an opportunity to make your website better for everyone.
Greg McNeil

November 15, 2024

WCAG Compliance

Accessibility, WCAG, WCAG conformance, Website Accessibility
Is Your Website ADA-Compliant?
Ever wonder if your website is truly welcoming to all visitors? It’s easy to think, “My site looks great. It works smoothly—why worry?” But here’s the catch: a good-looking, functional site isn’t always an accessible one. And if your website isn’t ADA compliant, you could be unintentionally shutting the door on a massive group of potential visitors and customers—people with disabilities.

Let’s put it this way: imagine if a brick-and-mortar store had narrow, cluttered aisles or no ramps. Customers with mobility challenges would struggle to get in or move around. Now, think of your website as that store. If it isn’t built with accessibility in mind, visitors with disabilities may find it impossible to navigate, use, or even understand what you’re offering.

So, is your website ADA-compliant? If you’re not sure or have never checked, this guide is for you. We’ll break down what ADA compliance means, why it matters, the standards to follow, and how you can ensure your site is welcoming to all. Ready to see if your online space meets the mark? Let’s dive in.

Why ADA Compliance Matters

Making sure your website is ADA-compliant isn’t just a box to check off—it’s a vital part of running a business that’s inclusive and future-proof. An accessible website means everyone, regardless of ability, can navigate, engage with, and enjoy your content. This approach not only helps build trust and loyalty but can also increase your audience and improve user satisfaction. And let’s not forget, it comes with important legal and business benefits.

Legal Implications

The Americans with Disabilities Act (ADA) requires that businesses—including their websites—be accessible to everyone. If your site isn’t ADA-compliant, you could be in for a rough ride. The number of ADA-related lawsuits has been rising fast. In 2023, for instance, over 4,500 web accessibility lawsuits were filed in the U.S., which was a 15% increase from the year before, according to UsableNet.

Courts have been clear that digital spaces are covered by the ADA, even though it was created before the internet as we know it existed. And it’s not just big businesses being targeted—small and medium-sized businesses have also found themselves in legal hot water over inaccessible sites. Legal fees, settlements, and potential damage to your reputation can add up quickly, costing far more than making your website compliant in the first place. By focusing on accessibility, you’re not just protecting your business; you’re showing that inclusivity is a priority.

Expanding Your Audience

Making your site ADA-compliant isn’t just about sidestepping legal issues—it’s also about reaching more people. The World Health Organization (WHO) reports that over 1 billion people globally live with some form of disability. In the U.S., the Centers for Disease Control and Prevention (CDC) says that 26% of adults have some kind of disability. This includes a wide range of challenges, from visual and hearing impairments to mobility and cognitive issues.

Think about it: if your website is easier to use for people with disabilities, you’re opening your doors to a vast number of potential customers who might have otherwise struggled with your site. In fact, a study in the U.K. found that 71% of users with disabilities will leave a site that’s hard to use, and 82% of them are willing to spend more on a site that’s accessible. That’s a lot of potential revenue and customer loyalty that can be yours just by making your site more inclusive.

Understanding Web Accessibility Standards

To create an accessible website, it’s essential to understand key standards, particularly the Web Content Accessibility Guidelines (WCAG). These guidelines, developed by the World Wide Web Consortium (W3C), provide a roadmap for making web content more accessible to people with disabilities.

Key Principles of WCAG

The WCAG outlines four fundamental principles, often remembered by the acronym POUR:
1. Perceivable: Information must be presented in ways that users can perceive. This means providing text alternatives for images, using captions for videos, and ensuring sufficient contrast between text and background colors.
2. Operable: Users should be able to navigate the site using various methods. This includes keyboard navigation and the ability to pause or stop animations.
3. Understandable: Content and navigation must be easy to understand. This includes using clear language, consistent navigation, and proper labeling of forms.
4. Robust: Content should be compatible with various technologies, including assistive technologies like screen readers. This means writing clean, semantic HTML.
By adhering to these principles, you’ll be well on your way to creating a more accessible website.

Common Barriers to Web Accessibility

Even with the best intentions, many websites still have barriers that prevent people with disabilities from accessing their content. Here are a few common issues:

Images Without Alt Text

Images can be a significant barrier if they don’t have descriptive alt text. Alt text is essential for users who rely on screen readers, as it provides context about the image.

Poor Color Contrast

If the contrast between your text and background is too low, it can be challenging for individuals with visual impairments to read your content. Aim for a contrast ratio of at least 4.5:1 for normal text.

Inaccessible Forms

Forms are often problematic. If they lack labels or instructions, users with disabilities may find it challenging to fill them out. Always ensure that forms are correctly labeled and provide clear instructions.

Lack of Keyboard Navigation

Many users with disabilities rely on keyboard navigation rather than a mouse. If your website doesn’t support this, it can create significant barriers.

Testing Your Website for Accessibility

Now that you understand the importance of ADA compliance and common barriers, how do you ensure your website is accessible? Here are some methods for testing your site:

Manual Checks

Begin with manual checks of your website. Go through your site using only the keyboard. Can you navigate easily? Test your forms to see if they’re usable without a mouse. This basic level of testing can reveal a lot about your site’s accessibility.

Automated Tools

Automated accessibility testing tools can help identify many common issues quickly. Here are a few popular options:
- WAVE: This browser extension evaluates accessibility and highlights issues on your page.
- Lighthouse: Built into Chrome’s developer tools, Lighthouse provides audits of various web aspects, including accessibility.
While these tools are helpful, they don’t catch everything. They should be used in conjunction with manual checks to ensure a truly ADA-compliant website.

User Testing with Assistive Technologies

The best way to understand how ADA-compliant your site truly is is to test it with real users who have disabilities.
- Screen Readers: Ask users to navigate your site using popular screen readers like JAWS or NVDA.
- Keyboard Navigation: Observe how users interact with your site using only a keyboard.
Getting feedback from users with disabilities will give you insights that automated tools might miss.

Practical Steps to Improve Accessibility

Once you’ve identified accessibility issues on your site, what should you do next? Here are some practical steps you can take:
- Start with an Accessibility Audit: Before making any changes, conduct a comprehensive audit of your website. Use both automated tools and manual checks to identify barriers.
- Prioritize Quick Wins: Addressing some accessibility issues can take time, but there are many “quick wins” you can tackle right away.
- Implement Staff Training and Awareness: Accessibility is not just a one-person job. Ensure your content creators, developers, and designers are trained on best practices for maintaining and improving web accessibility.
- Monitor Accessibility Consistently: Regular audits are essential, but ongoing monitoring ensures that new updates don’t introduce issues. Services like 216digital’s a11y.Radar can help by continuously checking for compliance and alerting you to new challenges.
Conclusion

Making sure your website is ADA-compliant is more than just checking a legal box—it’s about creating a space where everyone feels welcome. Prioritizing accessibility can open your business to a wider audience, boost user satisfaction, and even shield you from potential legal issues. But let’s be honest: navigating the ins and outs of accessibility can feel overwhelming.

That’s where we come in. At 216digital, we’re here to make it simple. Schedule an ADA briefing with us to find out if your website is at risk and how we can help make it more inclusive. Don’t wait until there’s a problem; get ahead of it and show your commitment to accessibility today. Your future customers (and your peace of mind) will thank you!
Greg McNeil

October 30, 2024

Legal Compliance

Accessibility testing, ADA Compliance, ADA Lawsuit, WCAG, Web Accessibility
How Semantic HTML Improves Your Accessibility & SEO
When creating a website, it’s easy to get caught up in how it looks and how it functions. But have you ever paused to think about how your website is structured behind the scenes? If you’re simply filling your code with <div> and <span> tags, you might be missing an opportunity to make your site better—not just for search engines, but for users, too.

Semantic HTML is more than just good coding practice; it’s a way to make your website more accessible and easier for search engines to understand. This isn’t just about technicalities—it’s about creating a smoother, more meaningful experience for your visitors. Whether you’re a seasoned developer or just starting out, understanding and implementing semantic HTML can make a real difference in how people interact with your site, especially those using assistive technologies.

In this article, we’ll explore what semantic HTML is, why it matters, and how it can improve both accessibility and SEO. We’ll also touch on practical tips, common mistakes to avoid, and how semantic HTML aligns with Web Content Accessibility Guidelines (WCAG) to make your site more inclusive.

What is Semantic HTML?

Let’s start with the basics. Semantic HTML refers to using HTML tags that have a specific meaning or role within the webpage. These elements are not just for visual structure; they provide information about the type of content within them, helping browsers and assistive technologies (like screen readers) better understand your webpage’s layout and content.

Here are some common semantic HTML tags:
- <header>: Represents the introductory content, often containing the website’s logo or navigation links.
- <nav>: Defines a set of navigation links that help users explore your site.
- <article>: Used for standalone content that could be reused or distributed, such as blog posts.
- <section>: Groups related content together thematically, often with its own heading.
By contrast, non-semantic elements like <div> and <span> don’t convey any meaning other than being containers. While they still have their place, relying solely on them can make your website harder to navigate for both users and search engines.

Why Semantic HTML is Critical for Accessibility

When we talk about accessibility, we’re referring to making sure that your website can be used by everyone, including people with disabilities. Many users rely on assistive technologies like screen readers, which read the content of a webpage out loud. Screen readers depend on the proper use of semantic HTML to interpret the structure of a page.

For example, a screen reader can easily understand what a <header> or <nav> tag is, allowing users to navigate your website more efficiently. If you use a <div> for everything, the screen reader has no idea whether it’s a section of text, a navigation menu, or a footer. This makes the browsing experience confusing and frustrating for users with disabilities.

Helping Screen Readers Navigate Your Website

One of the primary ways semantic HTML improves accessibility is by helping screen readers announce different sections of your website. For example, if you have a blog post wrapped in an <article> tag, the screen reader can announce to the user that they’re about to read an article.

Let’s compare:

Non-Semantic Example:
```
<div class="blog-post">My First Blog Post</div>
```
Semantic Example:
```
<article>My First Blog Post</article>
```
The second example clearly defines that the content is an article. Assistive technologies will pick up on this and offer better navigation and context for the user.

Structured Navigation for All Users

Another advantage of using semantic HTML is structured navigation. Tags like <nav>, <header>, and <footer> help screen readers understand the hierarchy of the page. When users rely on a screen reader to navigate, they can quickly jump to important sections like the navigation bar or the main content by skipping through these well-defined landmarks.

Imagine navigating a website by ear, trying to figure out where the navigation menu ends and where the main content begins—without semantic HTML, it’s a guessing game.

How Semantic HTML Improves SEO

The benefits of semantic HTML don’t stop at accessibility—it also plays a key role in your site’s search engine optimization (SEO). Google and other search engines rely on web crawlers to analyze your site, and these crawlers can better understand the context and structure of your content when you use semantic HTML.

Better Crawling and Indexing

Search engines are smart, but they can’t interpret your content as humans do. Using semantic HTML helps them figure out what each part of your page represents. For instance, wrapping your blog posts in <article> tags signals to search engines that this content is an article, making it easier for them to understand and categorize.

This is how semantic HTML can help with SEO:
- Improved Indexing: Using proper semantic tags can lead to better indexing, as search engines can more easily understand the structure of your content.
- Rich Snippets: Semantic HTML can improve the likelihood of your site showing up with rich snippets in search results, such as a featured article or recipe, depending on the content.
- Enhanced SEO Ranking: Google prioritizes websites that offer a good user experience. Since semantic HTML improves navigation for all users, including those using assistive technologies, your site is more likely to be seen as user-friendly, boosting your SEO.
Best Practices for Using Semantic HTML

Ready to start using semantic HTML? Here are some best practices to keep in mind:

Use the Right Tag for the Right Purpose

Each semantic HTML tag has a specific use, and you should apply them where they belong. For example:
- Use <header> for the top section of your page that contains headings or introductory content.
- Use <nav> for navigation links, not just random lists of links.
- Use <article> for blog posts or other standalone content.
- Use <section> to group related content, and <footer> for the bottom of your page.
Avoid Overusing <div> and <span>

While <div> and <span> are useful for general-purpose containers, overusing them can result in a loss of meaning in your page structure. Whenever possible, replace them with more descriptive elements like <section>, <aside>, or <figure>.

Combine Semantic HTML with ARIA Roles

In some cases, ARIA (Accessible Rich Internet Applications) roles can complement semantic HTML by providing additional context. For example, adding role="navigation" to a <nav> element makes it even clearer that the content is meant for navigation. Just be careful not to rely on ARIA roles as a substitute for semantic HTML—they should be used to enhance, not replace.

Align with WCAG Guidelines

WCAG offer clear recommendations on how to make your content accessible. One of their core principles is ensuring that content is perceivable and navigable by assistive technologies, which is where semantic HTML shines.
- WCAG 1.3.1 (Info and Relationships): This guideline emphasizes the importance of using semantic elements so that content can be understood by assistive technologies.
- WCAG 2.4.1 (Bypass Blocks): Using semantic HTML makes it easier for users with disabilities to bypass repetitive content and jump straight to the main sections, such as navigation menus or headers.
Common Mistakes to Avoid

While semantic HTML is straightforward, there are a few common mistakes that developers often make. Avoid these pitfalls to ensure your content is both accessible and SEO-friendly:
- Overuse of <div> and <span>: These tags should be used sparingly and only when no other semantic element fits. Overloading your page with <div> tags makes it hard for search engines and screen readers to understand your content.
- Forgetting to Add Alt Text: While it’s not directly related to semantic HTML, always remember to add alt attributes to your images. This ensures that screen readers can describe your images to visually impaired users, further enhancing accessibility.
- Misusing ARIA: ARIA attributes are great when used correctly, but they should only be applied when there’s no semantic HTML option available. Overusing or misapplying ARIA can lead to confusion and even reduce accessibility.
Examples of Effective and Ineffective Link Text

Semantic HTML also plays a role in creating meaningful link text, which is crucial for both accessibility and SEO. Here are some examples:

Ineffective Link Text
```
<a href="https://example.com">Click here</a>
```
This link doesn’t tell the user what they’re clicking on, which is confusing for screen readers and doesn’t provide context for search engines.

Effective Link Text
```
<a href="https://example.com">Read our guide on semantic HTML</a>
```
This example clearly indicates the content of the linked page, which is helpful for screen readers and improves SEO.

Conclusion

Semantic HTML isn’t just a coding technique—it’s a way to make the web more understandable, usable, and welcoming for everyone. By using the right tags, you’re not just making your site easier to navigate for search engines; you’re improving the experience for people who rely on assistive technologies. The impact goes beyond lines of code—it’s about making the web a better place for all users.

If you’re looking to enhance your site’s accessibility or simply want a clearer path to SEO success, start by rethinking your HTML structure. It’s a small change that can make a big difference. And if you’re unsure where to begin, 216digital can help. Schedule an ADA briefing with us to see how better accessibility can turn into a real opportunity for your business.
Greg McNeil

October 18, 2024

How-to Guides

How-to, HTML, semantic HTML, WCAG, Web Accessibility, web development
Shifting the Mindset Around Website Accessibility
When you think of “website accessibility,” what immediately comes to mind? For many, it may sound like a checkbox to mark off. But what if we transformed that mindset from an obligation to a valuable opportunity? Let’s delve into how shifting our perspective on accessibility can lead to enhanced experiences for all and generate significant value for businesses.

The Current Mindset Around Website Accessibility

Many website owners and content creators now think of web accessibility as something they “have to do.” It’s often seen as a set of rules to follow—like ensuring websites meet legal requirements or comply with the Americans with Disabilities Act (ADA). While meeting these standards is important, viewing accessibility solely as a legal obligation misses the bigger picture.

Accessibility isn’t just about rules; it’s about making digital spaces welcoming for all. This includes people with disabilities who may use screen readers or other assistive technologies. When we think of it this way, we can start to see how accessibility can enhance the overall user experience, benefiting everyone—not just those with disabilities.

The Value of Accessibility for All Users

Imagine visiting a website that’s easy to navigate, with clear text and helpful features. Sounds great, right? That’s what accessibility brings—it makes online experiences better for everyone. When websites are designed with accessibility in mind, they become more user-friendly. This means people of all ages and abilities can find what they need quickly and easily.

Think about a busy parent holding a baby in one arm and trying to use your site with one hand. Designs that make it easier to navigate with a keyboard or have larger buttons help them, just like they help users with motor difficulties.

By embracing accessibility, you’re improving the experience for everyone. This leads to happier users, longer visits to your site, and more people doing what you hope they will—like making a purchase or signing up for a newsletter. When customers find your website easy to use, they’re more likely to come back and tell others about it.

So, accessibility isn’t just about helping people with disabilities; it’s about enhancing the experience for everyone who visits your site.

Accessibility as a Business Opportunity

Now, let’s talk business. Making your website accessible isn’t just the right thing to do; it’s also a smart move. When you make your site easy for everyone to use, you show that your brand cares about inclusivity. This can boost your reputation and attract more customers.

Market Potential

Consider the market potential. People with disabilities have significant spending power. In the United States alone, they have an estimated $490 billion to spend. Globally, when you include their friends and families, this amount rises to an astounding $8 trillion, according to the Return on Disability Group. By making your website accessible, you’re reaching a market that’s often overlooked.

Search Engine Optimization

Accessibility also helps with search engine optimization (SEO), meaning your site can rank higher in search results. Many accessibility best practices—like using alt text for images, clear link texts, and well-structured content—also make your site easier for search engines to understand. This can lead to more people visiting your site, which can turn into increased sales and sign-ups.

Mitigate Legal Risk

Lawsuits related to web accessibility are on the rise. In the U.S., the number of ADA Title III lawsuits filed in federal court increased by over 100% from 2018 to 2023, according to Useablenet. By proactively addressing accessibility, you not only avoid potential legal costs but also demonstrate corporate responsibility, appealing to a broader audience and opening doors to new partnerships.

Accessibility, Innovation, and Creativity for Problem Solving

When we focus on accessibility, we often think about making things easier for people with disabilities. But what if we turned that around? Working on accessibility can spark new ideas and creativity within your team. This can lead to solutions that help all users and make your brand stand out.

Some of today’s most popular technologies, like voice assistants and text messaging, were first developed to help people with disabilities but are now used by everyone. Designing with accessibility in mind encourages teams to think outside the box. For example, adding captions to videos not only helps those with hearing impairments but also makes your content more engaging and improves SEO.

In a competitive market, new ideas are crucial to staying ahead. Accessibility challenges your team to consider different perspectives and needs. This can lead to fresh ideas and solutions that set your business apart.

Connecting Accessibility with Corporate Social Responsibility

Today’s consumers care about more than just the products they buy—they also care about the impact companies have on society. By focusing on web accessibility, you can strengthen your company’s commitment to social responsibility. It shows that you value diversity and inclusion, which can connect with customers who want to support businesses that share their values.

A study by Cone Communications found that 87% of consumers would buy from a company that supports an issue they care about, and 76% would stop buying if they found out a brand acted against their beliefs. By making accessibility a priority, you’re showing a commitment to inclusion, which resonates with values-driven consumers.

Accessibility isn’t just the right thing to do; it’s an important part of modern business ethics. It sends a message that your company wants to make a positive difference.

From “Why” to “How”: Putting Website Accessibility into Action

Changing how we view accessibility—from a duty to an opportunity—requires a new approach. By prioritizing web accessibility, your business can create better digital experiences for everyone while boosting your reputation and expanding your reach.

So, how do you begin? Start small but think big:
- Share Real-Life Stories: Use videos or testimonials that show how people with disabilities interact with digital content. Real stories have a way of making abstract concepts tangible. Seeing the difference their work makes can inspire your team to think creatively about building more accessible features.
- Foster Cross-Department Collaboration: Accessibility should be a shared responsibility. Bring together designers, developers, marketers, and content creators to ensure accessibility is part of every stage of a project. This holistic approach helps create a seamless, inclusive experience for users.
- Integrate Accessibility Into Your Core Strategy: Make accessibility a crucial part of your business strategy and product development. Don’t treat it as an add-on or afterthought. Prioritize accessibility from the beginning of your planning process—whether it’s for a website redesign, a new product launch, or a marketing campaign.
- Keep Accessibility Up to Date: Accessibility isn’t a one-time effort. Schedule regular audits to review your website, apps, and other digital content. Stay informed about changing accessibility standards and emerging best practices to make sure you’re continually improving.
Ready to take the next step? Schedule an ADA briefing with 216digital today. Our experts will walk you through the essentials of web accessibility, help identify gaps, and show you how it can become a key driver of growth for your business. Let’s turn this obligation into a lasting opportunity!
Greg McNeil

October 17, 2024

The Benefits of Web Accessibility

Accessibility, ADA Compliance, SEO, UX, WCAG, Website Accessibility
Retail Accessibility: Avoiding Common Pitfalls
The internet is overflowing with retail opportunities, but one crucial element often gets overlooked: accessibility. For online retailers, making your website accessible isn’t just about complying with legal requirements—it’s about expanding your customer base and delivering a better shopping experience for everyone. So, how can you ensure your online store is open to all shoppers and avoid common accessibility pitfalls? Let’s dive into the essentials.

Why Accessibility Matters for Online Retailers

Web accessibility means making sure everyone, including people with disabilities, can easily use and navigate your site. In the world., about 15% of the population lives with some form of disability. By ensuring your website is accessible, you’re tapping into a market with immense buying power—people with disabilities control over $6 trillion in spending globally!

But beyond opening your business to a broader audience, accessibility is also about staying compliant with laws like the Americans with Disabilities Act (ADA). In 2023, 82% of ADA lawsuits were related to web accessibility issues in the retail industry, affecting both large and small businesses alike. If your website isn’t accessible, you’re not just missing out on customers—you could also be facing legal risks.

The Web Accessibility Guidelines

The Web Content Accessibility Guidelines (WCAG) are the foundation for creating an accessible website. These guidelines revolve around four main principles, often referred to as POUR:
- Perceivable: Content must be presented in a way that all users can perceive, whether visually or audibly.
- Operable: Your site should be fully navigable, whether users are using a mouse, keyboard, or assistive technologies.
- Understandable: Your content should be easy to comprehend and navigate.
- Robust: Your website should work well with a variety of assistive tools, like screen readers.
For retailers, aiming for WCAG 2.1 Level AA compliance is a great starting point, and it’s the level referenced by most legal frameworks for web accessibility.

Steps for Online Retailers to Improve Accessibility Right Now

Improving your website’s accessibility might sound like a big task, but it’s more manageable than you think. Here are some quick and effective steps to make your site web accessible:

Auditing Retail Sites for Accessibility Issues

The first step is knowing where your site stands. Start with automated tools like Lighthouse or WAVE to flag common issues, such as missing image descriptions or poor color contrast. Then, dive deeper with manual testing, working with accessibility experts to uncover more subtle barriers, like challenges with forms or navigation.

Make Visual Content Accessible

People with visual impairments rely on alt text to understand images, so be sure to include detailed alt descriptions for all meaningful visuals. For example, instead of a vague description like “product,” use something more specific like “Blue ceramic coffee mug with a handle.” This simple change helps users with screen readers understand what’s being shown.

Don’t forget about video content! WCAG guidelines require captions for pre-recorded audio in videos. Ensure that auto-generated captions, like those from YouTube, are accurate, and provide transcripts for podcasts to make all media accessible.
```
<img src="coffee-mug.jpg" alt="Blue ceramic coffee mug with a handle">
<video controls>
  <track kind="captions" src="captions_en.vtt" srclang="en" label="English">
</video>
```
Optimize Website Navigation and Structure

Some users navigate your site without a mouse, relying solely on their keyboard. Make sure your site can be fully navigated using just a keyboard, with elements like menus, buttons, and forms accessible through “tab” key navigation. Also, ensure every interactive element has a visible focus indicator, like a border around buttons or links, so users can easily see where they are on the page.
```
button:focus, a:focus {
  outline: 2px solid #ffcc00; /* Provides a visible focus indicator */
}
```
Improve Form Accessibility

Checkout forms can be a stumbling block for accessibility, especially if they aren’t screen reader-friendly. Make sure all form fields have clear labels and that error messages don’t rely solely on color. For example, instead of just using a red outline to indicate a required field, include a text message like “This field is required” to make the error clear for all users.
```
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <span class="error" role="alert">This field is required</span>
</form>
```
The Retail Shopping and Checkout Process

Imagine trying to check out but not knowing where you are in the process—frustrating, right? Break your checkout process into clear, labeled steps and ensure it’s compatible with assistive technologies. Also, consider adding alternative payment methods like PayPal, Google Pay, or Apple Pay to improve usability for all customers.

To meet WCAG SC 2.4.4 standards, you can use visual breadcrumbs or progress indicators to let users know where they are in the checkout process.
```
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/cart">Cart</a></li>
    <li><a href="/shipping">Shipping</a></li>
    <li aria-current="page">Payment</li>
  </ol>
</nav>
```
Implement ARIA Landmarks and Roles

ARIA (Accessible Rich Internet Applications) landmarks and roles help assistive technologies identify key sections of your page. For instance, wrapping your site’s header in a role="banner" helps screen readers identify it as the main header, making it easier for users to navigate through your site.
```
<header role="banner">
  <nav role="navigation">
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/products">Products</a></li>
    </ul>
  </nav>
</header>
```
Testing and Ongoing Monitoring for Retailers

Web accessibility isn’t a one-time fix—it’s an ongoing process. Retail websites are constantly changing. Regular testing and monitoring are essential to ensuring that those updates or changes to your site don’t introduce new accessibility barriers. Tools like 216digital’s a11y.Radar can help you stay on top of accessibility issues with automated scans and detailed reports, making it easier to maintain a compliant and user-friendly website as new content is added.

Partnering with Accessibility Experts

If all of this sounds overwhelming, you don’t have to go it alone. Partnering with accessibility experts can fast-track your progress. Whether you need a thorough audit, code remediation, or ongoing support, companies like 216digital specialize in helping retail sites meet web accessibility standards. They can ensure your site is not only compliant but also delivers a seamless, enjoyable shopping experience for all users.

Accessibility Overlays: A Quick Fix or a Long-Term Solution?

You might have heard about accessibility overlays—tools that promise a quick fix for all your accessibility needs. While these overlays might sound tempting, they often fall short. Overlays can miss deeper, underlying issues with your website’s code and design, leaving you vulnerable to ADA lawsuits. In fact, 933 companies were sued last year after installing overlay solutions and many accessibility experts caution against relying on them as a long-term solution.

Instead, focus on making meaningful changes to your website’s design and functionality. Overlays might be a temporary patch, but they shouldn’t replace a full accessibility strategy.

Check Accessibility Off Your Shopping List

By making your website accessible, you’ll not only increase your customer base but also create a better shopping experience for everyone. Accessibility is a journey, and it’s one worth taking. Follow the steps outlined above, test your site regularly, and don’t hesitate to partner with experts to ensure your site stays compliant and user-friendly.

To help you get started on the right path, consider scheduling an ADA briefing with 216digital. Our team of experts can walk you through the latest accessibility guidelines, provide actionable insights, and show you how to ensure your site complies with ADA standards.

Online shopping should be for everyone, so let’s make it happen together!
Greg McNeil

October 16, 2024

How-to Guides, Legal Compliance, WCAG Compliance

Accessibility, ADA Compliance, ADA Website Compliance, ecommerce website, Retail, WCAG
The Dos and Don’ts of Using Tabindex
Running a website, whether for an online store or a blog, means thinking about your users—including making your site accessible to everyone. You want as many people as possible to engage with your site, and that includes those who rely on keyboard navigation or assistive technologies.

One minor but powerful way to improve web accessibility is by using the tabindex attribute. Let’s take a closer look at the tabindex attribute, how it works, and why it’s essential for making your website more user-friendly and accessible.

What Is the Tabindex Attribute?

The tabindex attribute is an HTML attribute that helps control the order in which users can move between interactive elements—like links, buttons, and form fields—using just the keyboard. For users who either can’t or prefer not to use a mouse, the ability to navigate a site using the “Tab” key is essential. This group includes people with motor disabilities, vision impairments, or even people using devices where a mouse isn’t an option.

When you press the Tab key, your focus (i.e., where your keyboard inputs go) jumps to the next interactive element on the page. By default, browsers follow a logical order based on the structure of the page’s HTML, starting from the top of the page and moving down. But sometimes, you’ll want to fine-tune that order, and this is where the tabindex attribute comes into play.

How Does Tabindex Work?

There are a few different values you can assign to the tabindex attribute, each of which affects how elements are navigated:
- tabindex= "0": This means the element will follow the natural tab order as defined by the document’s structure, but it ensures that the element is focusable.
- tabindex= "-1": This removes an element from the tab order, making it not focusable via the keyboard, but it can still be focused by other methods (like using JavaScript). This is useful for things like modal windows, which you only want to be accessible in specific scenarios.
- Positive tabindex values (e.g., tabindex= "1" ): Using positive values lets you create a custom tab order. Only use positive tabindex values if you know what you’re doing!
Best Practices for Using Tabindex

If you’re new to using the tabindex attribute, it might seem simple at first glance, but there are a few essential best practices to follow. These will help you avoid common pitfalls and ensure your site remains accessible and easy to navigate.

Stick to tabindex= "0" for Most Cases

When you want to make an element focusable, it’s almost always best to use tabindex= "0". This keeps the element in the natural tab order, ensuring users can move through the page logically. Using higher positive values to create a custom order can confuse users, especially those using assistive technologies like screen readers.

Here’s an example of how to use tabindex= “0”:
```
<div role="button" tabindex="0">Submit</div>
<a tabindex="0">Learn more</a>
```
Use tabindex= "-1" for Hidden or Conditional Elements

Some elements shouldn’t be part of the regular tab order until they’re needed. For example, if you have a modal that opens up after a button is clicked, it doesn’t make sense for a modal to be focusable before it’s visible. This is where tabindex= "-1" is useful.

Here’s how you might use it for a modal:
```
<div id="myModal" tabindex="-1">
  <p>This is a modal window.</p>
  <button>Close</button>
</div>
```
When the modal is triggered (through JavaScript), you can set focus to it programmatically:
```
document.getElementById('myModal').focus();
```
This ensures the modal is accessible when needed without cluttering the tab order when it’s not.

Test Your Website with Keyboard-Only Navigation

A simple but effective way to check if your tabindex usage is on point is to navigate your site using only the keyboard. Press the Tab key to move forward through the interactive elements, and use Shift+Tab to go backward. Does everything flow smoothly? If you find yourself jumping around the page or missing critical elements, it might be time to revisit your tab order.

Common Mistakes to Avoid

While the tabindex attribute is incredibly useful, it’s also easy to misuse. Here are some common mistakes you’ll want to steer clear of:

Overusing Positive Tabindex Values

It might be tempting to assign custom tab orders everywhere, but overdoing it can lead to a confusing and inconsistent experience. Stick with the natural tab order unless you have a compelling reason to change it.

Skipping Interactive Elements

Make sure that all essential interactive elements—like buttons, form fields, and links—are keyboard-focusable. You don’t want users who rely on keyboard navigation to miss important parts of your site because they’ve been removed from the tab order.

Using Tabindex Instead of Proper HTML

It’s always best to use semantic HTML first. Instead of creating a clickable div with a tabindex= "0", use an actual <button> or <a> element. Not only does this help with accessibility, but it also provides better browser support and consistency across devices.

How Does Tabindex Relate to Web Accessibility Guidelines?

You’ve probably heard of the Web Content Accessibility Guidelines (WCAG) if you’ve been reading up on accessibility. These guidelines are designed to make web content more accessible to people with disabilities, and they’re the foundation of legal requirements like the Americans with Disabilities Act (ADA).

When it comes to keyboard navigation, WCAG has some specific guidelines that tabindex helps address:
- WCAG 2.1.1 Keyboard: All site functionality should be operable through a keyboard interface.
- WCAG 2.4.3 Focus Order: Navigating through content should follow a logical order that doesn’t confuse the user.
Using tabindex correctly is a step toward ensuring that your website meets these standards, helping you create a more inclusive and legally compliant experience.

Tabbing It All Together

The tabindex attribute is a powerful yet often overlooked tool in web accessibility. When used correctly, it not only aids users with visual or motor impairments but also enhances the overall user experience for everyone navigating your site. Ensuring that your website is accessible isn’t just about compliance with standards like WCAG and ADA—it’s about making your content reachable and usable for all.

Ready to make your website more inclusive and user-friendly? Schedule an ADA briefing with 216digital today. Our team of experts will guide you through the nuances of web accessibility, helping you implement best practices like proper tabindex usage. Let us help you create a more inclusive and legally compliant digital space.
Bobby

October 15, 2024

How-to Guides

Accessibility, ADA Compliance, How-to, tabindex, WCAG, web development
Why ‘Click Here’ Hurts Your Website’s Accessibility
If you’ve spent any time browsing the web, you’ve probably come across links like “click here” or “read more.” While these phrases seem simple enough, they can actually be confusing or even frustrating—especially for people using screen readers to navigate a site. That’s where descriptive link text comes in. It’s essential for making websites more accessible to everyone, including those with disabilities. So, let’s dive into why using meaningful link text is so important and how you can write it to improve both web accessibility and overall user experience.

What is Descriptive Link Text?

Descriptive link text is just what it sounds like—clickable text that clearly explains what the link is for. Instead of generic phrases like “click here” or “read more,” a good descriptive link gives enough context so users know exactly where the link will take them. This is a win for all users but especially important for people with disabilities who rely on screen readers to navigate the web.

Imagine trying to navigate a website where every link says “click here.” For someone using a screen reader, that’s a frustrating experience because they have no clue where any of those links will lead. Descriptive link text fixes that by making sure all users, no matter how they access the web, have a clear, easy-to-understand experience.

Why “Click Here” and “Read More” Are Problematic

Using generic phrases like “click here” or “read more” might seem harmless, but they can actually create confusion. When someone using a screen reader encounters a page full of links that all say “click here,” they’re left with no context about where the links go or what they do. It’s like being handed a bunch of blank signposts with no labels.

Let’s take a look at an example:
- Bad Link: Click here to read more.
- Better Link: Learn more about our services.
In the second example, the user knows exactly what they’re clicking on, which makes the experience more apparent and more helpful, especially for people using screen readers.

Empty Links and Their Impact on Accessibility

Another issue when it comes to web accessibility is empty links. An empty link is one that has no text or meaningful content for a screen reader to announce. For people using screen readers, these links are useless—they navigate to them but get no information about what they do. And for those using keyboard navigation, empty links can be frustrating roadblocks.

To avoid this, always make sure your links contain text, or if you’re using an image as a link, ensure there’s alternative text (alt text) that clearly describes what the link does.

How Descriptive Link Text Boosts Accessibility

One of the best things about the web is its potential to be accessible to everyone. But if we don’t put some thought into how we design and label things like links, we end up excluding a lot of people. Descriptive link text makes websites more accessible and improves the overall user experience in a few key ways:
- Clarity for Screen Reader Users: Screen readers read links out loud. If the link text is too vague, it isn’t very clear. Descriptive text helps users know exactly what to expect before they click.
- Better Navigation: Clear, simple language helps everyone, especially users with cognitive disabilities or learning differences, by reducing the mental effort needed to figure out what a link does.
- Faster Browsing: Descriptive links let users quickly scan a page and understand where each link will take them. This makes it easier for everyone to find what they’re looking for without guessing.
WCAG Guidelines for Descriptive Links

The Web Content Accessibility Guidelines (WCAG) provide a set of best practices for making the web usable by everyone. According to WCAG SC 2.4.4 Link Purpose, each link should make its purpose clear, either from the link text itself or from its surrounding context.

Here are a few essential tips from WCAG on how to write compelling link text:
- Be Concise and Relevant: Your link text should be short but informative. Don’t go overboard, but include enough detail so users know where they’re headed.
  - Example: Instead of “click here for more,” try “Learn more about accessible landmarks.“
- Skip the Redundancies: You don’t need to add words like “link” or “website” to your link text. Screen readers already announce that it’s a link, so saying “click here to visit the website” is unnecessary. Just say, “Visit our website.“
- Avoid Empty Links: Every link should have meaningful content. Empty links are confusing and serve no functional purpose for users navigating with keyboards or screen readers.
Examples of Effective and Ineffective Link Text
- Ineffective Link Text:
  - Click here
  - Read more
  - Learn more
  - Here
- Effective Link Text:
  - Download the 2024 Annual Report
  - Explore our upcoming events.
  - Read more about creating accessible web links.
In these examples, the goal is to make it crystal clear where the link will take the user, leaving no room for confusion.

Best Practices for Writing Descriptive Link Text
- Think About Context: Consider what the user needs to know about the link’s destination. This is especially important for screen reader users who may jump between links without reading the surrounding text. Make sure the link text alone provides enough information.
- Keep It Short and Sweet: Your link text should be informative but not too long. For example, “Contact Us for Support” is much clearer than “Click here if you need to get in touch with our support team.“
- Use Natural Phrasing: Don’t feel like you always need to add a “click here” to your sentence. Sometimes, the best link text is already part of your content. For instance, instead of “click here to learn more about our programs,” use the “learn more about our programs” link.
- Avoid URLs as Links: Long URLs are difficult for screen readers to interpret, especially if they contain numbers and special characters. Instead of linking a URL directly, use descriptive text like “Visit 216digital’s a11y.Radar Monitoring Page.”
- Alt Text for Image Links: If an image serves as a link, make sure the alt text conveys the purpose of the link. For example, if a shopping cart icon leads to the cart page, use alt text like “View Cart” rather than just “Cart.”
Linking It All Together

Incorporating descriptive link text is a small change that can have a significant impact on your website’s web accessibility. By ditching generic phrases, using clear and concise language, and following WCAG guidelines, you’ll make your site more navigable for everyone—especially users who rely on screen readers.

Creating an inclusive web experience doesn’t have to be complicated, but it does take attention to detail. If you’re unsure whether your website’s accessibility measures, including your link text, are up to standard, it might be time to seek expert advice. At 216digital, we offer ADA briefings that help you identify areas for improvement and ensure your site meets accessibility requirements.

Take the next step towards a more accessible web presence and schedule a complimentary ADA briefing with 216digital today. We’re here to guide you through the process and help you create a site that’s welcoming and usable for everyone.
Greg McNeil

October 14, 2024

How-to Guides, Legal Compliance, WCAG Compliance

Accessibility, Alt text, descriptive link text, WCAG, WCAG Compliance, Web Accessibility
Debunking Common WCAG Myths
When it comes to digital accessibility, misconceptions can lead businesses astray, leaving them vulnerable to compliance issues and missed opportunities. From believing that automated tools can handle everything to thinking that accessibility compromises design, these myths often create unnecessary hurdles. The truth? Achieving web accessibility is not only possible but it can also be seamlessly integrated into your existing processes.

Let’s debunk some of the most common myths about the Web Content Accessibility Guidelines (WCAG) so your business can take the right steps toward an accessible and inclusive online experience.

Myth 1: Conformance with WCAG = Compliance with Accessibility Laws

One of the most prevalent misconceptions is that adhering to WCAG automatically means compliance with all accessibility laws. While WCAG is widely recognized and often used as a benchmark for accessibility, it is important to note that WCAG conformance is not the same as legal compliance.

The Reality

Different countries have varying legal standards for accessibility, and while WCAG is used as a framework, laws such as the Americans with Disabilities Act (ADA) in the U.S. or the European Accessibility Act (EAA) in Europe may have their interpretations and requirements. For example, the ADA doesn’t explicitly mention WCAG, but U.S. courts frequently use WCAG as the gold standard for determining accessibility in lawsuits.

Therefore, WCAG conformance is essential to achieving legal compliance, but it’s not the only factor. Businesses must stay informed about relevant accessibility laws in their jurisdiction to ensure full compliance.

Myth 2: Automated Tools are All I Need to Conform with WCAG Guidelines

Many organizations believe that using automated tools is enough to ensure compliance with WCAG. Automated testing can catch many accessibility issues, but relying solely on these tools is a mistake.

The Reality

Automated tools are a valuable first step in identifying accessibility issues, such as missing alt text or incorrect HTML elements. However, they cannot fully capture the complexity of human interactions with a website. Accessibility involves factors such as the ability to navigate a site using a keyboard, how intuitive the content is, and whether assistive technologies like screen readers can interpret the content correctly. These are challenges that require manual testing by actual users with disabilities.

Automated testing, manual audits, and user testing with people who rely on assistive technologies are essential to achieving WCAG compliance.

Myth 3: WCAG is a ”One-and-Done”Checklist

Some businesses think that WCAG is a static checklist that, once completed, guarantees permanent accessibility.

The Reality

Digital accessibility is an ongoing process. Websites are living entities that change over time—content updates, new features, or design overhauls. Each change presents the possibility of new accessibility barriers. Furthermore, the WCAG evolves, with updates to reflect new technologies and user needs (e.g., the transition from WCAG 2.0 to WCAG 2.2 with WCAG 3.0 in development).

To maintain compliance, businesses must regularly audit their digital products and ensure that any updates meet the latest WCAG standards. Accessibility should be baked into your organization’s development workflow and continuously revisited.

Myth 4: Only Businesses Who Serve the Disability Community Need to Follow WCAG

A common misconception is that only organizations that cater specifically to people with disabilities need to worry about WCAG compliance.

The Reality

Every business with an online presence should ensure digital accessibility. Over 1 billion people worldwide have some form of disability, which means that nearly every industry has potential customers who need accessible digital experiences. Additionally, in many jurisdictions, accessibility laws apply to many businesses, not just those explicitly serving the disability community.

Web accessibility also benefits a broader audience. For instance, captions on videos can help non-native speakers and accessible forms can improve the experience for all users, regardless of ability.

Myth 5: WCAG Guidelines Will Decrease My Site’s Visual Appeal

There’s a lingering belief that making a website accessible according to WCAG guidelines will compromise its design and visual appeal.

The Reality

Accessibility and good design go hand in hand. WCAG guidelines promote clarity, simplicity, and ease of use—principles that enhance a website’s user experience. Accessible design doesn’t mean dull or unattractive; it means that the site is intuitive and easy to navigate for all users.

Elements like sufficient color contrast, straightforward typography, and intuitive navigation are central to accessibility and aesthetics. Many visually stunning websites are entirely WCAG compliant by incorporating a design that benefits all users without sacrificing creativity or brand identity.

Myth 6: Implementing WCAG Guidelines is Expensive, Time-Consuming, and Resource-Intensive

Some businesses fear that conforming to WCAG guidelines will be a costly, laborious process that demands a complete overhaul of their digital properties.

The Reality

While achieving compliance requires time and resources, it can mean something other than a complete redesign or massive financial outlay. Many accessibility fixes—like adding alt text to images or improving color contrast—are relatively straightforward and inexpensive. Additionally, non-compliance costs, such as legal fees, lost customers, and reputational damage, far outweigh the costs of becoming compliant.

Moreover, integrating accessibility into your development process early on can make future compliance more accessible and cost-effective. Accessibility becomes much more expensive when treated as an afterthought or an add-on rather than part of the core design and development strategy.

How to Make Accessibility Achievable for Every Business

Debunking these myths is essential to understanding that WCAG compliance and digital accessibility are achievable for businesses of all sizes. Here are a few practical ways to approach accessibility:
1. Start Small, Scale Up: If you’re overwhelmed by the scope of WCAG guidelines, start with the most critical aspects and gradually expand your efforts. Begin by addressing the most common accessibility barriers, such as text alternatives and keyboard navigation.
2. Leverage External Expertise: Consider partnering with a digital accessibility expert. External accessibility consultants like 216digital bring specialized knowledge of WCAG guidelines and accessibility testing methods. They can help identify issues, prioritize fixes, and provide ongoing monitoring to ensure your site remains accessible.
3. Use a Hybrid Testing Approach: Combine automated tools with manual and user testing by people with disabilities. Automated tools can handle repetitive checks, but manual testing is vital for uncovering issues that require human judgment and assistive technology testing.
4. Plan for Accessibility from the Start: Integrate accessibility into your design and development process early on. This proactive approach reduces the time and cost of retrofitting accessibility into a live product.
5. Commit to Continuous Improvement: Remember, digital accessibility isn’t a one-time project—it’s an ongoing commitment. Regular audits, training for your team, and staying informed about the latest WCAG updates will ensure you remain compliant over time.
Accessibility is Within Reach

Understanding these common misconceptions about WCAG and digital accessibility is just the beginning. The path to compliance and creating a truly accessible digital experience requires a tailored, proactive approach. At 216digital, we help businesses not only meet WCAG standards but also navigate the complexities of accessibility laws to protect themselves from costly litigation and better serve all users.

Ready to take the next step? Schedule an ADA briefing with our team to ensure your digital presence is compliant, inclusive, and future-proof. Together, we can make accessibility achievable for your business.
Greg McNeil

October 11, 2024

WCAG Compliance

ADA Compliance, WCAG, WCAG Compliance, Web Accessibility, Website Accessibility
Web Accessibility Tips for Restaurants in 2024
As a restaurant owner, creating an accessible and welcoming environment doesn’t just apply to your physical space—it’s equally important online. In 2024, web accessibility is no longer optional. With more diners relying on digital services like online menus and reservation systems, it’s crucial that everyone, regardless of ability, can easily navigate and interact with your website. This guide will walk you through some key ways to make your restaurant’s digital experience accessible for all, including compliance with the latest Web Content Accessibility Guidelines (WCAG).

What is Web Accessibility?

Web accessibility is the practice of creating digital content that can be easily used by individuals with disabilities. This means ensuring that people with visual, auditory, motor, or cognitive disabilities can easily access and interact with your content.

For restaurants, this means making sure that your digital menu and reservation systems are easy to use for everyone, whether they navigate with a mouse, keyboard, or screen reader. But making your website accessible isn’t just about being inclusive—it also helps you meet legal requirements like the Americans with Disabilities Act (ADA).

WCAG Guidelines for Restaurants

WCAG is the global standard for web accessibility. To ensure your restaurant’s website is accessible, you should aim for compliance with WCAG 2.1 at Level AA. Some of the key WCAG principles to keep in mind include:
- Perceivable: Users must be able to experience content, whether through text, images, or other formats like captions.
- Operable: Users should be able to navigate the site with a mouse, keyboard, or voice commands.
- Understandable: The site’s information and operations should be clear and easy to use.
- Robust: The site should work with current and future assistive technologies.
Let’s break down how these principles apply to specific elements of your restaurant’s website, such as menus and reservation systems.

How to Share Your Menu Accessibly

Your menu is the core of your restaurant’s website, and making it accessible can open up your business to more customers. Start by ensuring that your menu is coded properly so that all users can access it. Avoid using PDF formats, which can be difficult for screen readers to interpret.

Use Semantic HTML

Semantic HTML is the building blocks for an accessible website. By using proper HTML tags, you provide structure and meaning to your content, making it easier for users to understand the structure of your content. For a menu, you can use <div> to separate menu items and <span> or <p> for the item’s name, price, and description.

Here’s a sample code snippet for a restaurant menu using semantic HTML:
```
<div class="menu-item-text">
   <h3 class="menu-item-heading">
      <span class="menu-item-name">Bruschetta</span>
      <span class="menu-item-price">$12.90</span>
   </h3>
   <p class= "menu-item-desc">Crispy toasted bread topped with fresh tomatoes, garlic, basil, and a drizzle of balsamic glaze.
   </p>
</div>
```
Provide Text Alternatives for Images

If your menu includes images of dishes, be sure to include alternative text (alt attributes) to describe them. Screen readers use this alt text to inform users what is in the image.

For example:
```
<img src= "grilled-salmon.jpg" alt= "Grilled salmon with mashed potatoes and steamed vegetables"/>
```
Alt text should describe the content of the image in a way that makes sense contextually. In this case, it’s about what the dish looks like and what ingredients are included.

How to Describe Your Menu Items

When writing descriptions for menu items, keep in mind that clear, concise descriptions benefit everyone, especially people with cognitive disabilities. Use simple language and avoid jargon or overly complex phrases. If you have menu items that cater to specific dietary restrictions (e.g., gluten-free or vegan options), make sure these are clearly labeled.

You could add a label like this:
```
<p><strong>Gluten-Free:</strong> Yes</p>
<p><strong>Vegan:</strong> No</p>
```
By making your menu easy to read and accessible, you’re not only helping users with disabilities but also improving the overall user experience.

How to Improve Reservation Booking Accessibility

Online reservations are convenient for both customers and restaurants, but it’s important to make sure your booking system is accessible to all users. Whether you’re using a third-party booking platform or a custom-built system, accessibility should be a top priority.

Use Accessible Form Controls

Forms are a key part of most reservation systems, and making sure these are accessible is essential. First, ensure that every form element has an associated <label> tag. This allows screen readers to correctly identify form fields.

Here’s an example:
```
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
```
Also, be sure that all form controls can be navigated using only a keyboard. According to WCAG, all interactive elements should be operable through keyboard commands alone. This is important for people with mobility impairments who may not use a mouse.

ARIA Roles and Live Regions

Accessible Rich Internet Applications (ARIA) roles help make dynamic content more accessible. For example, you can use ARIA attributes to alert users of changes in the reservation system, such as confirming their booking.

Here’s an example of using ARIA for a live region that confirms a reservation:
```
<div aria-live="polite" id="confirmation-message">
  Your reservation has been confirmed.
</div>
```
The aria-live= “polite” attribute ensures that screen readers announce updates to the user without disrupting the current interaction.

Timeouts and Error Handling

When implementing a reservation system, make sure that users are given enough time to complete their forms. WCAG 2.1 guidelines recommend providing a way to extend time limits if necessary.

Additionally, clear and helpful error messages should be provided when users make mistakes while filling out forms. Use ARIA to ensure that these messages are communicated to users with assistive technology:
```
<div aria-live="assertive" class="error-message">
  Please enter a valid phone number.
</div>
```
By following these steps, you make it easier for all customers to book a table at your restaurant, ensuring they have a positive experience.

Keyboard Navigation

Make sure that all interactive elements, like buttons and links, can be accessed using a keyboard. This is crucial for people with mobility issues. A logical tab order should guide users through your site efficiently, moving from the main content areas to interactive elements like forms and buttons.

To test this, try navigating your site using only the “Tab” key and see if you can access all functions.

Accessible Calendar Widgets

If your reservation system includes a date picker, make sure it is keyboard-accessible. Some date pickers are difficult to navigate with a keyboard or screen reader, so consider providing users with an accessible alternative, like allowing manual date entry in addition to the calendar.

Here’s an example of a keyboard-friendly date input:
```
<input type="date" id="reservation-date" name="reservation-date">
```
Going Beyond Compliance: User Experience Matters

Meeting WCAG standards is important, but don’t stop there. Think about the overall user experience. For instance, ensuring text contrast is high enough for readability, using large touch targets for buttons, and testing your website on multiple devices can significantly improve accessibility.

An accessible website isn’t just for compliance—it’s a way to expand your customer base and create a better experience for everyone.

A Taste of Accessibility

Web accessibility is the secret ingredient to running a successful restaurant in 2024. By aligning your website with WCAG guidelines, you can ensure that everyone—from loyal customers to new diners—enjoys a smooth and inclusive experience, whether they’re browsing your menu or making a reservation. Beyond just compliance, an accessible site reflects your commitment to every guest, enhancing your reputation and widening your customer base.

At 216digital, we can help you navigate the world of web accessibility, from ADA compliance to optimizing your user experience. Schedule a free ADA briefing with us today and discover how your restaurant’s website can cater to every customer, no matter their abilities. Let’s make your digital presence as inviting as your dining room!
Greg McNeil

October 9, 2024

How-to Guides

ADA Website Compliance, How-to, Restaurants, WCAG, WCAG Compliance, web development, Website Accessibility

What Is POUR?

Perceivable: Making Content Accessible to the Senses

What Does Perceivable Mean in Practice?

Common Mistakes That Violate Perceivable Standards

Operable: Ensuring Users Can Navigate and Interact

What Does Operable Mean in Practice?

Common Mistakes That Violate Operable Standards

Understandable: Keeping Content Clear and Predictable

What Does Understandable Mean in Practice?

Common Mistakes That Violate Understandable Standards

Robust: Ensuring Compatibility with Current and Future Technologies

What Does Robust Mean in Practice?

Common Mistakes That Violate Robust Standards

Bringing POUR Principles Together

Example: An E-Commerce Website

Putting POUR into Practice

POURing Effort into Accessibility

What is WCAG?

Why Should You Care About WCAG Conformance?

Breaking Down the WCAG Conformance Levels

Level A: Covering the Basics

Level AA: The Sweet Spot

Level AAA: The Extra Mile

How High Should You Aim?

What Makes Level AAA So Hard?

Keeping Your Website WCAG Compliant

Regularly Audit Your Site

Train Your Team

Make Accessibility Part of Your Process

Use Accessibility Tools

Stay Up-to-Date

Achieve WCAG Conformance with 216digital

Why ADA Compliance Matters

Legal Implications

Expanding Your Audience

Understanding Web Accessibility Standards

Key Principles of WCAG

Common Barriers to Web Accessibility

Images Without Alt Text

Poor Color Contrast

Inaccessible Forms

Lack of Keyboard Navigation

Testing Your Website for Accessibility

Manual Checks

Automated Tools

User Testing with Assistive Technologies

Practical Steps to Improve Accessibility

Conclusion

What is Semantic HTML?

Why Semantic HTML is Critical for Accessibility

Helping Screen Readers Navigate Your Website

Structured Navigation for All Users

How Semantic HTML Improves SEO

Better Crawling and Indexing

Best Practices for Using Semantic HTML

Use the Right Tag for the Right Purpose

Avoid Overusing <div> and <span>

Combine Semantic HTML with ARIA Roles

Align with WCAG Guidelines

Common Mistakes to Avoid

Examples of Effective and Ineffective Link Text

Ineffective Link Text

Effective Link Text

Conclusion

The Current Mindset Around Website Accessibility

The Value of Accessibility for All Users

Accessibility as a Business Opportunity

Market Potential

Search Engine Optimization

Mitigate Legal Risk

Accessibility, Innovation, and Creativity for Problem Solving

Connecting Accessibility with Corporate Social Responsibility

From “Why” to “How”: Putting Website Accessibility into Action

Why Accessibility Matters for Online Retailers

The Web Accessibility Guidelines

Steps for Online Retailers to Improve Accessibility Right Now

Auditing Retail Sites for Accessibility Issues

Make Visual Content Accessible

Optimize Website Navigation and Structure

Improve Form Accessibility

Avoid Overusing `<div>` and `<span>`

Stick to `tabindex= "0"` for Most Cases

Use `tabindex= "-1"` for Hidden or Conditional Elements