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

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
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
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
The Hidden Accessibility Barriers in Popular Plugins

Plugins offer an easy way for blogs or e-commerce websites to add helpful functionality like newsletter signups, product filters, or bundles to their website without paying costly development fees. But while these popular plugins promise seamless user experiences, many hide serious accessibility barriers that can exclude people with disabilities from entirely using your site.

Even if you follow accessibility guidelines and best practices throughout your site, plugin vendors may not do the same, which causes your website to become non-conformant despite your excellent work. Understanding how plugins can impact web accessibility is essential to maintaining an accessible website, even if you install them to accomplish simple tasks.

Let’s explore the common accessibility pitfalls of plugins and what you can do to avoid introducing accessibility errors on your website when utilizing them.

What Are Plugins, and Why Do They Matter for Accessibility?

Plugins are pre-built software modules you can add to your website to perform specific tasks. Whether improving SEO, adding an image slider, or embedding a social media feed, plugins extend your website’s features without needing custom development.

However, plugins don’t always come with accessibility in mind. Many developers focus on functionality and design, overlooking essential elements that make their plugins usable for all, especially people with disabilities who use assistive technology.

Plugins become a problem when they introduce barriers that prevent users from navigating or interacting with your site. Even if the rest of your website is built according to accessibility standards, a plugin can break that accessibility with one update or feature.

Common Accessibility Barriers in Popular Plugins

So, what does an inaccessible plugin look like? These issues can be subtle and not immediately apparent to someone without accessibility experience. Here are a few common barriers often found in popular plugins:

1. Poor Keyboard Navigation

Many users with mobility impairments or visual disabilities rely on a keyboard to navigate a website. A plugin that lacks proper keyboard navigation can make it impossible for these users to interact with your site. For example, sliders, pop-up forms, or dropdown menus in some plugins may trap keyboard users, preventing them from moving between page elements using the Tab key.

One primary culprit is the “tabindex” attribute, which allows developers to control the order in which interactive elements are focused. Some plugins misuse this attribute, causing the focus to jump around illogically, making navigation difficult or impossible.

2. Lack of ARIA Landmarks and Roles

ARIA (Accessible Rich Internet Applications) roles and landmarks are essential for users who navigate using screen readers. These assistive technologies rely on ARIA to communicate the structure and purpose of elements on the page. When plugins don’t correctly implement ARIA roles—such as mislabeling buttons or failing to designate headings—it becomes harder for users to understand the content.

For instance, a popular image gallery plugin may not correctly assign ARIA roles to buttons for navigating between photos. To a screen reader user, those buttons may be entirely invisible, making the gallery feature inaccessible.

3. Inconsistent Focus Indicators

Focus indicators are visual cues that help users see which element on the page is currently selected, such as a glowing outline around a button. These indicators are crucial for keyboard users, but many plugins either remove or don’t include focus indicators at all, leaving users stranded without knowing where they are on the page.

A typical example is sliders that fail to highlight which slide is active or forms where the submit button doesn’t show any visual indication of focus.

4. Non-Semantic HTML and Improper Heading Structure

Semantic HTML, which uses elements like <nav>, <article>, and proper headings (<h1>, <h2>), helps assistive technologies interpret content. Unfortunately, some plugins rely on non-semantic HTML—like using <div> or <span> elements for interactive content or headings—which screen readers may not understand as intended.

For example, a form plugin that uses <div> for form fields instead of <label> elements makes it difficult for screen readers to identify the label of each field, leading to confusion for the user.

5. Missing or Incorrect Alt Text

Images used in plugins, especially image-heavy ones like sliders or galleries, often lack alternative text. Alt text is essential for visually impaired users who rely on screen readers to describe the content of images. Without it, users are left in the dark about the purpose of the images in the plugin.

Some plugins automatically generate alt text, but they may do so incorrectly—using file names or generic labels like “image123,” which provide no meaningful information to users.

WCAG Guidelines: How Plugins Often Fall Short

The Web Content Accessibility Guidelines (WCAG) are the gold standard when it comes to web accessibility, but many plugins fail to meet these guidelines. Here’s how:

Perceivable

Plugins often fail to provide text alternatives for non-text content, like images and icons. This makes it impossible for screen readers to convey the content to users who are blind or have low vision.

Operable

As mentioned, poor keyboard navigation is a major issue with plugins. Any plugin that doesn’t allow users to operate all of its functions via keyboard alone falls short of this WCAG principle.

Understandable

Plugins that misuse ARIA roles or use non-semantic HTML can create confusion for users of assistive technology, making the content harder to understand.

Robust

Many plugins don’t integrate well with assistive technologies. A plugin that only works in one browser or on certain screen readers is not robust enough to be considered accessible.

How to Handle Inaccessible Plugins

So, what should you do if you suspect that a plugin on your site is inaccessible? Here are a few practical tips:

1. Evaluate the Plugin for Accessibility Barriers

First, you’ll want to check to see if the plugin vendor has any posted policies or guidance regarding web accessibility. After that, you can install the plugin in a test environment and use standard evaluation tools such as WAVE or Google Lighthouse to determine if any issues appear.

2. Consider Replacing the Plugin with an Accessible Alternative

If you find that a plugin is inaccessible, consider replacing it with a more accessible competitor. For example, there are many form, slider, and gallery plugins designed with accessibility in mind. These often prioritize compliance with WCAG guidelines, making it easier for your site to remain accessible.

3. Reach Out to Plugin Developers

If you’re committed to a specific plugin that has accessibility issues, don’t hesitate to reach out to the developer. Politely inform them of the barriers their plugin creates and ask if they have plans to address accessibility in future updates. Many developers are open to feedback and may not be aware of the issues until they are brought to their attention.

4. Use ARIA Landmarks and Roles to Improve Plugin Accessibility

If you have some technical knowledge, you can manually add ARIA roles or improve the HTML structure of the plugin elements. While this is a more advanced solution, it can be effective in making a plugin more accessible.

5. Test Regularly with Accessibility Tools

Tools like WAVE or Lighthouse can help you assess the accessibility of your entire site, including any plugins you’ve added. Regular testing can ensure that your site remains accessible as plugins update and evolve over time.

Plugins Are Powerful—But Watch Out for Hidden Barriers

Plugins are a fantastic way to improve your website’s functionality, but they can also introduce hidden accessibility barriers if you’re not careful. As a website owner or developer, it’s your responsibility to ensure that every part of your site, including third-party plugins, is accessible to all users.

By being proactive—whether through testing, replacing, or communicating with developers—you can avoid the common pitfalls of inaccessible plugins and keep your site welcoming and functional for everyone. Remember, it’s not just about compliance; it’s about creating an inclusive experience that ensures all users can access and interact with your content.

So, next time you’re about to install that flashy new plugin, pause for a second and ask yourself: Is this accessible?

Ready to get started? Schedule a personalized ADA briefing with 216digital and get expert guidance tailored to your needs.

Bobby

October 7, 2024

How-to Guides, Legal Compliance

ADA Compliance, plugins, Web Accessibility, web development, website plugins
What is Keyboard Navigation?
Have you ever tried navigating a website without a mouse, using only your keyboard? If not, it’s an eye-opening experience. For many users with disabilities, keyboard navigation isn’t just an option—it’s essential. Keyboard accessibility ensures that users who rely on keyboards can interact with your website effectively. Let’s dive into what keyboard accessibility is, why it matters, and how you can implement it on your website.

What is Keyboard Navigation?

Keyboard navigation allows users to interact with a website without the need for a mouse. Instead of pointing and clicking, users rely on keyboard keys—like the Tab, Enter, and arrow keys—to move through web content. This form of navigation is vital for individuals with mobility impairments, vision impairments, or anyone who cannot use a mouse due to injury or physical limitations.

For example, users can move from one link or button to the next using the Tab key and activate the selected item with Enter or Space. Think of it as a roadmap through your website, where each interactive element is a stop along the way. If your site isn’t set up for proper keyboard navigation, some users may get lost or, worse, be unable to use your site altogether.

Why Keyboard Accessibility is Important

Keyboard accessibility plays a crucial role in web usability, particularly for people with disabilities. Here’s why:
1. For Users with Disabilities: Many individuals rely on assistive technologies, like screen readers or alternative input devices, to access websites. These technologies are often keyboard-based. Without proper keyboard navigation, these users may be blocked from interacting with your site.
2. WCAG Guidelines: The Web Content Accessibility Guidelines (WCAG), which serve as the global standard for web accessibility, emphasize the need for keyboard accessibility. WCAG 2.1, for example, highlights explicitly that all functionality should be operable through a keyboard interface (SC 2.1.1 – Keyboard).
3. Compliance with Laws: In the U.S., legal frameworks like the Americans with Disabilities Act (ADA) can hold websites accountable for not being accessible to people with disabilities. Making your site accessible isn’t just good for your users—it can also help you avoid legal trouble.
Implementing Proper Keyboard Navigation

Keyboard navigation isn’t just about letting users “tab” through your site. It’s about ensuring a smooth, logical, and functional user experience. Let’s look at some key steps to making your site keyboard-friendly.

Make All Interactive Elements Accessible

Every element that a user can interact with—like buttons, links, forms, and dropdown menus—should be accessible by the keyboard. This means ensuring that as a user “tabs” through the page, they can reach these elements and activate them without needing a mouse.

Here are a few ways to achieve this:
- Use semantic HTML: Elements like <button>, <a>, and <input> are inherently keyboard-accessible. If you create custom interactive elements with <div> or <span>, ensure they are accessible by adding tabindex= "0" and using JavaScript to handle key events like pressing “Enter” or “Space” to activate them.
- Avoid tabindex misuse: While tabindex= "0” ensures elements are focusable in the tab order, using tabindex values other than 0 can cause issues with navigation. Elements should appear in the tab order based on their natural position in the document flow.
Example:
```

<button>Submit</button>
<a href="contact.html">Contact Us</a>

<div role="button" tabindex="0" onclick="alert('Button clicked')">Click me</div>
```
Ensure Logical Tab Order

When users navigate your website using the Tab key, they should move through the content in a logical order. If the tab order is confusing, users can miss important information or interactive elements. The order should generally follow the visual structure of the page, moving left to right and top to bottom.

Best Practices for Logical Tab Order:
- Check the natural tab order: Test your site by navigating with the Tab key. Does it follow the expected order? Are there elements that seem out of place or skipped entirely?
- Avoid skipping key elements: Ensure that every interactive element is included in the tab order. Hidden or inactive elements should not be focusable until they are visible or active.
Use Clear Focus Indicators

When a user navigates with their keyboard, they rely on focus indicators to know where they are on the page. Without a clear visual indicator, users may become lost.

What’s a Focus Indicator?

The focus indicator is a visible outline or highlight that shows which element is currently selected. For example, by default, most browsers add a visible outline to buttons, links, and form fields when they are focused.

Best Practices for Focus Indicators:
- Don’t disable default focus outlines: Some designers remove these outlines for aesthetic reasons, but this is a big no-no for accessibility.
- Customize focus styles: If the default outline doesn’t fit your design, you can customize it. Just make sure the indicator is clear and easy to see.
Example:
```
/* Customize focus outline */
button: focus, a: focus {
    outline: 2px solid #007BFF; /* High contrast color */
}
```
Avoid Keyboard Traps

A keyboard trap occurs when a user navigates into a section of the page but can’t get out using the keyboard. This can happen if a dialog box or modal window doesn’t allow the user to tab away or close it using keyboard commands.

Best Practices to Avoid Keyboard Traps:
- Ensure users can tab away: If a modal or popup appears, users should be able to close it or continue navigating the rest of the site with the Tab key.
- Provide a clear way to exit: Offer an accessible “Close” button or an “Esc” key option to dismiss popups.
Example:
```

<div role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description">
    <h2 id="modal-title">Modal Title</h2>
    <p id= "modal-description">This is a description of the modal.</p>
    <button onclick="closeModal()">Close</button>
</div>
```
Referencing WCAG Guidelines

To meet web accessibility standards, your site should align with the WCAG guidelines, particularly the following:
- WCAG 2.1.1 – Keyboard: Ensure all content and functionality can be accessed using a keyboard.
- WCAG 2.4.3 – Focus Order: Make sure users can navigate through the page in a logical sequence.
- WCAG 2.4.7 – Focus Visible: Provide a clear indicator of focus when keyboard navigation is used.
These guidelines are vital for ensuring that your site is accessible to all users, including those who depend on keyboard navigation.

Making Your Website Accessible for All

Keyboard navigation is not just about compliance—it’s about ensuring that every visitor can use your site, regardless of their physical abilities. By focusing on proper keyboard navigation, logical tab order, clear focus indicators, and avoiding keyboard traps, you’re creating an inclusive experience that benefits all users. Whether it’s improving the experience for users with disabilities or meeting the legal requirements of the ADA, the rewards of accessibility are significant.

Implementing these changes might feel overwhelming, but you don’t have to go it alone. 216digital specializes in making websites accessible, ensuring they meet WCAG standards and ADA compliance. Our human-centered approach focuses on both the user experience and reducing legal risks.

Ready to make your site accessible? Schedule an ADA compliance briefing with 216digital today, and let us guide you through the process of creating a website that’s usable for everyone.
Greg McNeil

October 4, 2024

How-to Guides

Accessibility, How-to, Keyboard Navigation, WCAG, WCAG Compliance, Web Accessibility, web development
Closed Captions for Online Video Content
With online video content becoming a cornerstone of business, marketing, and education, ensuring your videos are accessible to everyone is essential. One of the most effective ways to ensure your videos reach the widest audience possible is through closed captioning. But what exactly are closed captions? How do they work, and what actions must you take as a business or website owner? Let’s dive into everything you need to know about closed captions.

What Are Closed Captions?

Closed captions are text alternatives for words spoken in video or information conveyed through visual actions, designed to help people who are deaf or hard of hearing understand the content. Captions appear at the bottom of the frame and include the spoken dialogue and describe sound effects, music, or other audio cues critical to understanding the video. Closed captions can be toggled on and off by the video player, giving them control over how they experience the content.

Who Benefits From Closed Captions?

You might think closed captions are just for people with hearing impairments, but they benefit a much broader audience. Closed captions can help:
- Deaf and hard-of-hearing individuals: This is the primary group that closed captions serve, allowing them to access video content on an equal footing with hearing viewers.
- Non-native language speakers: Captions help people learning English or other languages follow along with the dialogue.
- People in noisy environments: Imagine watching a video in a busy coffee shop or on public transportation—captions make it possible to follow along even if you can’t hear the audio.
- People in quiet environments: Maybe you’re watching a video while a baby sleeps in the next room. With captions, you can follow the content without turning up the volume.
Closed Captions vs. Subtitles: What’s the Difference?

Though often used interchangeably, closed captions and subtitles aren’t quite the same. Subtitles are a text representation of the spoken words in a video. They benefit individuals with hearing impairments or people who can’t understand the spoken language but can otherwise visually perceive the content. For instance, subtitles often appear in foreign films. They don’t include sound effects or non-dialogue audio, which makes them less accessible for people who are deaf or hard of hearing.

On the other hand, closed captions include not just the dialogue but also sound effects and other crucial audio information, making them more comprehensive.

What are the Differences Between “Closed Captions” and “Open Captions”?

You’ve likely heard about “closed captions” and “open captions.” The critical difference between the two is control. Closed captions can be toggled on or off by the viewer, while open captions are always on—they’re embedded into the video file and cannot be turned off. While open captions may seem convenient, they don’t provide viewers the choice to disable them, which can sometimes detract from the viewing experience for those who don’t need them.

What Are the Legal Obligations for Closed Captioning?

As a website owner, business owner, or content creator, you must understand your legal obligations regarding closed captions. In the U.S., several laws and regulations address digital accessibility, including captioning for video content.

The ADA’s Requirements for Closed Captions

The Americans with Disabilities Act (ADA) states that businesses and organizations make their services accessible to people with disabilities. While the ADA doesn’t specifically mention closed captions, it requires that public-facing businesses and websites provide equal access to their services, which can include providing captions for video content.

The Department of Justice has provided guidance that websites should be accessible to everyone, and providing captions for videos is an integral part of ensuring your content meets the Web Content Accessibility Guidelines (WCAG), which help businesses comply with the ADA.

FCC Requirements for Closed Captions

For online video content that has aired on TV in the U.S., the Federal Communications Commission (FCC) requires closed captions. This regulation was expanded in 2012 with the introduction of the Twenty-First Century Communications and Video Accessibility Act (CVAA), which requires that any video programming aired on television with captions must include captions when distributed online.

This act means that if your business uses TV ads or commercials and also posts them online, they must be captioned. Even if your content hasn’t aired on TV, following FCC rules for captioning is a good best practice.

What Are the Benefits of Using Closed Captioning?

Adding closed captions to your videos isn’t just about legal compliance—it can offer significant benefits to your business:
- Expanded audience: Captioning your videos makes them accessible to more people, including those with hearing impairments, non-native speakers, and people in noisy or quiet environments.
- Improved SEO: Search engines can’t watch videos but can read captions. By adding captions, you give search engines more context to the relevance of your content, which can improve your rankings in search results.
- Better engagement: Captions can help viewers stay engaged with your content. Studies have shown that videos with captions have higher engagement compared to those without.
- Increased social media reach: Many social media platforms autoplay videos without sound. Captions can ensure your message gets across, even if the audio isn’t playing.
Best Practices for Closed Captioning

Here are some best practices for closed captioning video content:
- Ensure the captions are accurate: Inaccurate captions can confuse viewers or misrepresent your content. Invest in high-quality captioning services or use tools that offer high accuracy.
- Include non-dialogue audio: Remember that closed captions provide a complete audio experience for viewers who can’t hear. Include descriptions of music, sound effects, and other audio cues that are important to understanding the content.
- Use appropriate timing: Ensure that captions appear on-screen at the same time as dialogue or actions.
- Keep the text readable: Ensure the text is easy to read by using a legible font, high contrast between the text and background, and large enough size to be legible.
How to Add Captions to Videos

There are several ways to add captions to your videos, depending on the platform and your budget:
1. Automated captioning tools: Platforms like YouTube and Facebook offer automatic captioning, though these tools often require manual review to ensure accuracy.
2. Manual captioning: You can create captions manually if you have the resources. Many video editing tools allow you to add captions by entering the text.
3. Professional captioning services: You should invest in a professional service specializing in closed captioning for high-quality, accurate captions. These services usually charge based on the length of the video.
What If My Video Service Doesn’t Support Closed Captions?

If your platform doesn’t support closed captions, consider switching to one that does. Most popular video hosting services, including YouTube, Vimeo, and Wistia, provide captioning options. If switching platforms isn’t feasible, you can include a transcript of the video as an alternative. However, this is not a perfect substitute for closed captions, as transcripts don’t provide the real-time viewing experience that captions do.

Conclusion

Closed captions are a great way to make online video content accessible to everyone, and they offer many benefits, from legal compliance to better engagement and SEO. As a business or website owner, adding captions to your videos can broaden your audience, improve your content’s reach, and ensure you’re providing a digital experience that’s inclusive to everyone.

Remember to follow the ADA, FCC, and WCAG guidelines, and always aim for accuracy and readability when adding captions to your videos. If you’re unsure if your video content is leaving you vulnerable to expensive litigation or causing you to miss out on revenue, reach out to 216digital for a courtesy evaluation.
Bobby

September 24, 2024

How-to Guides, Legal Compliance, The Benefits of Web Accessibility

ADA Compliance, Closed caption, digital accessibility, How-to, WCAG, Web Accessibility, web development
How to Build Accessible Slideshows and Carousels
Slideshows and carousels can add style and organization to a website, but they often pose accessibility challenges. If not designed with care, they can be difficult for people with disabilities—especially those who use screen readers or rely on keyboard navigation—to interact with. The good news is that by following a few key practices, you can make sure your slideshows and carousels are accessible for everyone, enhancing user experience and making your site more inclusive. Let’s break it down step by step.

Why Accessibility Matters for Slideshows and Carousels

Before we dive into the “how,” let’s talk about the “why.” Making sure your slideshows are accessible isn’t just the right thing to do; it’s essential. Accessibility is about making sure everyone can use your website, and it helps you comply with important standards like the Web Content Accessibility Guidelines (WCAG).

If you skip over accessibility, you could end up frustrating visitors, losing potential customers, or even dealing with legal trouble. Plus, accessible content doesn’t just help those with disabilities—it actually improves the experience for all users and makes your site more welcoming.

Key Considerations for Accessible Slideshows

So, how do you make your slideshows and carousels accessible? Here are a few key things to keep in mind:

Keyboard Navigation

Not everyone uses a mouse to navigate a website—some people rely entirely on their keyboard. This means your slideshow should be easy to move through using just the keyboard without users getting stuck or confused.

Best Practices:
- Tab Key Navigation (WCAG SC 2.1.1): Make sure users can use the Tab key to move forward through the slides and Shift + Tab to move backward.
- Arrow Key Control (WCAG SC 2.1.2): Allow users to switch slides with the left and right arrow keys so they can navigate without getting lost.
- Visible Focus(WCAG SC 2.4.7): Ensure that buttons and interactive elements like arrows have visible focus indicators so keyboard users can easily see what they’re interacting with.
Descriptive Labels and Alt Text

For people using screen readers, descriptive labels and alt text are super important. Without them, the screen reader can’t tell the user what a button or slide is for.

Best Practices:
- Alt Text for Images (WCAG SC 1.1.1): Every image in your slideshow should have alt text that describes what’s in the image. For example, if one slide shows a chart about “Website Accessibility,” the alt text should explain the key points of the chart.
- ARIA Labels: Use an aria-label attribute to give a text label to an object, such as a “Next” and “Previous” buttons. When a screen reader encounters an object, the aria-label text is read aloud to inform the user about what it is. So, instead of a generic label like “Button,” make it something like “Next slide: About Us” so users know exactly where they’re headed.
Pause/Play Buttons

Automatic slideshows that move on their own can be frustrating—especially for people with cognitive or motor disabilities. Always give users control over the slideshow with pause and play options.

Best Practices:
- Pause/Play Button (WCAG SC 2.2.2): Make sure there’s a clearly labeled button to pause or play the slideshow and that it’s easy to use with both the mouse and keyboard.
- Adjustable Timing (WCAG SC 2.2.1): For each slide transition, users should be able to turn off, adjust, or extend the time before the slide changes. This ensures that users have enough time to read and understand the content before the next slide appears.
Using ARIA Roles for Screen Reader Compatibility

ARIA roles help screen readers understand the structure and behavior of a slideshow. They provide extra information about how it’s organized and how users can interact with it.

Best Practices:
- Role Assignment: Use ARIA roles like role= "region" to define different parts of the slideshow so that screen readers can identify them quickly.
- Live Regions: Use aria-live= "polite" to let screen readers know when a new slide has appeared, keeping users in the loop without disrupting their experience.
- Hide Inactive Slides: Only show one slide at a time to screen readers. You can do this by adding aria-hidden= "true" to the slides that aren’t currently visible.
Poor Color Contrast

Even with the best intentions, it’s easy to fall into some design traps that can hurt accessibility. If the text on your slides blends into the background, users with low vision will have a hard time reading it.

Best Practices:
- High Contrast Text(WCAG SC 1.4.3): Make sure there’s plenty of contrast between the text and background. For example, white text on a dark background or black text on a light background works well. Aim for a contrast ratio of at least 4.5:1 for standard text and 3:1 for larger text, as recommended by WCAG. You can use color contrast checkers to make sure your text stands out against the background.
Testing for Accessibility

Once you’ve added accessibility features, testing is critical to making sure everything works as it should. There are a few easy ways to test your slideshows:

Ways to Test:
- Use a Screen Reader: Try out your slideshow with popular screen readers like NVDA (NonVisual Desktop Access) or JAWS (Job Access With Speech) to see if everything is being read in the correct order and labeled correctly.
- Keyboard Navigation: Go through your slideshow using only your keyboard to make sure you can interact with all the buttons and slides.
- Automated Tools: Use tools like WAVE or the Google Lighthouse browser feature to check for common accessibility issues like missing alt text or incorrect ARIA roles.
Final Thoughts

Making your slideshows and carousels accessible might take a little extra effort, but it’s totally worth it. Not only will it make your site more inclusive, but it’ll also create a smoother experience for all your users. From ensuring easy keyboard navigation to adding meaningful labels and controlling autoplay features, each step brings you closer to a more accessible website.

So, the next time you’re adding a slideshow to your site, remember—accessibility isn’t just a nice-to-have; it’s a must-have! With a bit of planning and regular testing, you can create slideshows that everyone can enjoy.

Are you ready to make sure your website is accessible? Then, schedule an ADA Strategy Briefing with the web accessibility experts at 216digital.
Greg McNeil

September 23, 2024

How-to Guides

Accessibility, ADA Compliance, Carousels, digital accessibility, Slideshowes, WCAG, Web Accessibility, web development
Web Accessibility: What to Ask Your Digital Agency
When choosing a digital agency to build or maintain your website, one of the most crucial factors to consider is accessibility. Digital Accessibility ensures that your website is usable by everyone, including people with disabilities. But how do you know if your agency partner understands web accessibility and can meet your needs? Asking the right questions can make all the difference.

Why It’s Important to Ensure Your Agency Understands Digital Accessibility

Web accessibility isn’t just about checking a box; it’s about making your website available to all users, regardless of their abilities. In the United States, over 70 million adults live with a disability. If your website isn’t designed with accessibility in mind, you could miss out on a large audience. Beyond that, failing to meet accessibility standards can expose your business to legal risks, including lawsuits under the Americans with Disabilities Act (ADA).

Moreover, accessible websites provide a better overall user experience, which can lead to increased engagement and customer satisfaction. If a website is easy to navigate for individuals with disabilities, it’s also likely more intuitive for everyone. That’s why it’s vital to ensure your digital agency understands and prioritizes web accessibility.

When Is the Best Time to Ask Your Agency About Accessibility?

The short answer? As early as possible.

Accessibility should be baked into the foundation of your website, not an afterthought. Whether you’re designing a new website or revamping an existing one, accessibility discussions should start in the planning phase.

If you’re already working with a digital agency, it’s never too late to ask about accessibility. It’s better to make improvements now than to wait until you’re facing a lawsuit or losing customers. By prioritizing accessibility from the start, you ensure your site meets legal requirements and offers a smooth, inclusive experience for all users.

Key Web Accessibility Questions to Ask Your Digital Agency

What Is the Current State of Web Accessibility on Our Website?

Before diving into solutions, it’s essential to assess where your website currently stands in terms of accessibility. Your digital agency should conduct an accessibility audit to identify any existing issues. Here are a few questions you can ask:
- Do you offer an initial accessibility audit?
- Can you provide examples of accessibility issues that have been flagged?
- What tools or methods do you use to test for accessibility?
A comprehensive audit should highlight potential barriers on your site, like empty headers, missing alt text for images, or lack of keyboard navigation. Starting with an audit gives you a clear picture of where improvements are needed.

What Is Your Approach to Web Accessibility?

Every digital agency has a process for implementing accessibility. You’ll want to understand how your agency handles it from start to finish. Ask them about their approach and experience:

How well do you know WCAG 2.1 guidelines?

The Web Content Accessibility Guidelines (WCAG) 2.1 are the industry standard for web accessibility. Your agency should be familiar with these guidelines and know how to apply them to your website.

Do you integrate accessibility into every stage of development?

Accessibility isn’t just a one-time fix. You should implement steps during the design, development, and content creation phases. Ask your agency if they have a process for embedding accessibility throughout the entire project.

Do you use both automated and manual testing methods?

Automated tools can catch many accessibility issues, but manual testing is essential for uncovering complex problems. Your agency should combine both methods for a thorough approach.

How Will You Ensure Accessibility Is Maintained?

Accessibility is an ongoing commitment. Websites change over time as content is updated and features are added. It’s important to ask how your agency plans to maintain accessibility once the site is live:

Do you offer ongoing accessibility monitoring?

Regular monitoring can help you stay compliant as web standards evolve and your website grows. Ask your agency if they provide services like continuous testing or accessibility check-ups.

Can you train our team to maintain accessibility?

If your website content is managed internally, your team should know how to keep it accessible. Some agencies offer training for content creators and developers to ensure new additions meet accessibility standards.

What is your process for updating the site to stay compliant with new regulations?

Digital accessibility laws are constantly evolving, and you need to ensure your website stays compliant. Your agency should have a plan for keeping your site up-to-date with the latest guidelines and legal requirements.

How Do You Prioritize Web Accessibility Issues?

Accessibility issues vary in severity. Some barriers, like missing alt text, are easier to fix, while others may require significant changes to your website’s structure. Ask your agency how they prioritize accessibility fixes:

How do you determine which issues need immediate attention?

Critical issues that block users from accessing content should be resolved first. Make sure your agency knows how to prioritize fixes to address the most pressing concerns first.

How long will it take to resolve accessibility issues?

Accessibility improvements should be made in a timely manner. Understanding the expected timeline helps you plan your next steps and set realistic expectations.

What’s Your Experience with Similar Projects?

Experience is vital when it comes to accessibility. You want to work with a digital agency that has a proven track record of making websites accessible:

Have you worked with other companies in our industry?

Different industries have unique accessibility challenges. For example, e-commerce sites may need to focus on accessible forms and shopping carts, while media companies may prioritize video captions and transcripts.

Can you show us examples of websites you’ve made accessible?

Case studies or portfolio examples can give you an idea of the agency’s capabilities. Look for examples that demonstrate a deep understanding of accessibility best practices.

Prioritize Accessibility from the Start

Web accessibility isn’t just a legal requirement – it’s a business imperative. By asking your digital agency the right questions, you can ensure your website is accessible to all users while avoiding the risk of legal issues.

Remember, accessibility should be an ongoing effort. Choose a digital agency that understands the importance of maintaining compliance and improving your website over time. By doing so, you’ll create an inclusive online experience that benefits both your users and your business.

Contact 216digital for Your Accessibility Needs

If you’re unsure where to start, 216digital can help. Our team specializes in ADA remediation and web accessibility, and we’re here to guide you every step of the way.

Schedule an ADA briefing with 216digital today to learn more about how we can help you maintain a compliant and accessible website. Let’s work together to make your site welcoming to everyone while keeping your business protected from legal risks.

Don’t wait—make accessibility a priority from the start!
Greg McNeil

September 19, 2024

How-to Guides, Legal Compliance

ADA Compliance, ADA Web Accessibility, digital accessibility, digital agency, Web Accessibility

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

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

The Retail Shopping and Checkout Process

Implement ARIA Landmarks and Roles

Testing and Ongoing Monitoring for Retailers

Partnering with Accessibility Experts

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

Check Accessibility Off Your Shopping List

What Is the Tabindex Attribute?

How Does Tabindex Work?

Best Practices for Using Tabindex

Stick to tabindex= "0" for Most Cases

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

Test Your Website with Keyboard-Only Navigation

Common Mistakes to Avoid

Overusing Positive Tabindex Values

Skipping Interactive Elements

Using Tabindex Instead of Proper HTML

How Does Tabindex Relate to Web Accessibility Guidelines?

Tabbing It All Together

What is Descriptive Link Text?

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

Empty Links and Their Impact on Accessibility

How Descriptive Link Text Boosts Accessibility

WCAG Guidelines for Descriptive Links

Examples of Effective and Ineffective Link Text

Best Practices for Writing Descriptive Link Text

Linking It All Together

What is Web Accessibility?

WCAG Guidelines for Restaurants

How to Share Your Menu Accessibly

Use Semantic HTML

Provide Text Alternatives for Images

How to Describe Your Menu Items

How to Improve Reservation Booking Accessibility

Use Accessible Form Controls

ARIA Roles and Live Regions

Timeouts and Error Handling

Keyboard Navigation

Accessible Calendar Widgets

Going Beyond Compliance: User Experience Matters

A Taste of Accessibility

What Are Plugins, and Why Do They Matter for Accessibility?

Common Accessibility Barriers in Popular Plugins

1. Poor Keyboard Navigation

2. Lack of ARIA Landmarks and Roles

3. Inconsistent Focus Indicators

4. Non-Semantic HTML and Improper Heading Structure

5. Missing or Incorrect Alt Text

WCAG Guidelines: How Plugins Often Fall Short

Perceivable

Operable

Understandable

Robust

How to Handle Inaccessible Plugins

1. Evaluate the Plugin for Accessibility Barriers

2. Consider Replacing the Plugin with an Accessible Alternative

3. Reach Out to Plugin Developers

4. Use ARIA Landmarks and Roles to Improve Plugin Accessibility

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

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

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