How-to Archives - Page 5 of 5/Tag

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 Make Your Website’s Pop-Ups Accessible
Pop-ups are often used on websites to capture leads, promote special offers, or guide users through certain actions. However, while they can be powerful tools for engagement, they can also be a nightmare for users, especially those with disabilities. An inaccessible pop-up can frustrate users, prevent them from completing tasks, or even drive them away from your site.

To ensure your pop-ups enhance the user experience for everyone, including those using assistive technology, it’s essential to focus on accessibility. Let’s dive into the challenges of pop-ups and explore actionable steps and coding techniques to make them accessible.

Challenges of Website Pop-Ups for Accessibility

Hard to Close or Dismiss

One of the most common complaints about pop-ups is how difficult they can be to close. Whether it’s a tiny “X” button or a disappearing background overlay, some pop-ups seem almost impossible to dismiss without frustration. For users with mobility impairments, small targets like these can be especially problematic. Additionally, people who rely on keyboards or screen readers may not be able to easily navigate to the close button.

Improperly Labeled Pop-Ups

Screen reader users rely heavily on clear labels and descriptions to understand the content on a page. When a pop-up appears without proper labeling, it can be incredibly confusing. If there’s no clear announcement of what the pop-up is for or if the content isn’t properly described, these users may struggle to engage with the pop-up at all.

Focus Trap

A “focus trap” happens when a user is unable to move out of the pop-up window using their keyboard. This can cause frustration and make it difficult, if not impossible, to return to the main content. For users who rely on keyboard navigation, a focus trap can completely halt their browsing experience.

Disruption of Browsing Experience

A poorly timed or intrusive pop-up can disrupt the browsing experience for all users, but it’s especially challenging for people with disabilities. Imagine navigating a website with a screen reader, and a pop-up interrupts your flow. If the pop-up isn’t well integrated or easy to dismiss, it can leave users feeling lost or overwhelmed.

Now that we’ve identified the challenges, let’s explore how to address these issues and ensure your pop-ups are accessible to everyone.

Best Practices for Accessible Pop-Ups

Make Sure Pop-Ups Are Easy to Close

One of the easiest ways to make your pop-ups more user-friendly is to ensure they’re easy to close. Provide a large, clearly visible close button, and place it in a predictable spot, like the top-right corner of the pop-up. Avoid small, hard-to-click targets, especially for users with mobility issues.

Code Tip: Include a Keyboard Shortcut

Make sure the pop-up can be dismissed using the Esc key. Adding this functionality allows keyboard users to close the pop-up quickly, without needing to navigate to a specific button.
```
document.addEventListener('keydown', function(event) {
  if (event.key === "Escape") {
    closePopup();
  }
});
```
In this example, the Esc key is programmed to trigger the closePopup() function, providing an easy way to dismiss the pop-up.

Properly Label the Pop-Up for Screen Readers

When a pop-up appears, it should be immediately announced to users who rely on screen readers. This helps provide context so they can understand what’s happening on the page. You can do this by using ARIA (Accessible Rich Internet Applications) attributes.

Code Tip: Use ARIA Attributes for Accessibility
```
<div role="dialog" aria-labelledby="popupTitle" aria-describedby="popupDescription">
 <h2 id="popupTitle">Special Offer</h2>
  <p id="popupDescription">Get 20% off your next purchase when you sign up for our newsletter.</p>
</div>
```
In this code, the role="dialog” attribute lets screen readers know that a pop-up window (dialog box) has appeared. The aria-labelledby and aria-describedby attributes provide titles and descriptions that help users understand what the pop-up is about.

Prevent Focus Trapping

A common accessibility mistake with pop-ups is trapping focus within the pop-up window, which prevents keyboard users from returning to the main content. To avoid this, ensure that users can freely navigate between the pop-up and the rest of the page.

Code Tip: Manage Focus Correctly

When the pop-up opens, move the user’s focus to the first interactive element (like a form field or close button). When the pop-up closes, return focus to the element that triggered it, allowing users to continue where they left off.
```
const popup = document.getElementById("popup");
const triggerButton = document.getElementById("triggerPopup");
triggerButton.addEventListener('click', function() {
  popup.style.display = "block";
  popup.querySelector('input').focus(); // Move focus to the first element in the popup
});
function closePopup() {
  popup.style.display = "none";
  triggerButton.focus(); // Return focus to the triggering element
}
```
Avoid Disrupting the Browsing Experience

Pop-ups should never interrupt the user’s browsing experience unexpectedly. It’s important to trigger pop-ups at the right time and make them easy to interact with.
- Don’t use pop-ups on page load – This can be jarring for users, especially those using screen readers. Instead, trigger pop-ups based on user action, like clicking a button or scrolling to a specific section of the page.
- Use overlays carefully – Ensure that any background overlay that appears when a pop-up opens doesn’t obscure important content or make it difficult for users to navigate.
- Provide Accessible Text for Pop-Up Links and Buttons
You should clearly label and make the buttons and links in your pop-up easy to understand.Avoid generic text like “Click Here” or “Submit.” Instead, use descriptive text that explains the action.

Example:
- Good: “Sign Up for Our Newsletter”
- Bad: “Submit”
This helps all users, including those using screen readers, understand exactly what will happen when they click on a button.

Keep the Design Simple and Clear

Simplicity is key when it comes to accessible pop-ups. Avoid cluttering the pop-up with too much information or distracting animations. Use high-contrast colors and large, readable fonts to make the content easy to digest.

Test with Real Users and Assistive Technologies

The best way to ensure your pop-ups are truly accessible is to test them with real users, especially those who rely on assistive technologies. Tools like screen readers, voice commands, and keyboard-only navigation can help you understand how users will interact with your pop-up.

Tools for Testing Pop-Up Accessibility:
- Screen readers: Test your pop-up with screen readers like NVDA (NonVisual Desktop Access) or JAWS (Job Access With Speech).
- Keyboard navigation: Make sure all interactive elements in the pop-up can be accessed using only a keyboard.
- Accessibility checkers: Use automated tools like WAVE or Axe to scan your site for accessibility issues.
Make a Pop with 216digital

Making sure your website’s pop-ups are accessible isn’t just about ticking boxes—it’s about making sure everyone has a great experience on your site. Simple steps like ensuring your pop-ups are easy to close, clearly labeled, and don’t trap users can make a big difference in how people interact with your content.

Whether you’re a website owner, developer, or content creator, making your pop-ups accessible means more people can engage with what you have to offer. It also shows that you care about creating a web experience that everyone can enjoy.

To take your pop-ups from good to great, consider scheduling an ADA briefing with 216digital. We’ll help you make thoughtful adjustments and test your pop-ups with assistive technologies to ensure they enhance, rather than hinder, the user experience. Let’s work together to make sure your pop-ups are welcoming and accessible to all your visitors!
Greg McNeil

September 13, 2024

How-to Guides

digital accessibility, How-to, pop-ups, Web Accessibility, web development
WCAG: Web Accessible Coding 101
Creating an inclusive online experience is more important than ever in today’s digital world. Accessible coding isn’t just a nice-to-have; it’s a must-have. But what does accessible coding mean, and why should you care? In this article, we’ll dive into the basics of accessible coding, explore seven fundamental principles with examples, and explain why following these guidelines benefits everyone.

What is Web Accessibility?

Web accessibility means making websites usable by everyone, including people who rely on assistive technologies like screen readers, people who can’t use a mouse, or those with visual or cognitive impairments. The Web Content Accessibility Guidelines (WCAG) offer a framework for creating accessible content. Adhering to WCAG helps ensure that your site is user-friendly for all.

Why Accessible Coding is Important

Accessible coding is crucial for a variety of reasons:
- Wider Audience Reach: By making your site accessible, you expand your audience and enhance user experience for everyone.
- SEO Benefits: Accessibility often overlaps with good SEO practices, boosting your website’s visibility.
- Legal Requirements: Laws like the ADA in the U.S. require websites to be accessible, protecting you from potential legal issues.
Now let’s dive into seven core principles of accessible coding and see how you can implement them in your website’s code.

1.Provide Alt Text for Non-Text Components

Alt text (short for “alternative text”) is one of the most basic, yet essential, components of web accessibility. According to WCAG 2.1 SC 1.1.1 (Non-text Content), it serves as a textual description for images and non-text content, enabling users who rely on screen readers to understand what the visual content represents.

Why Alt Text is Important:
- Screen Reader Accessibility: People with visual impairments use screen readers that read aloud the alt text. If an image lacks alt text, the user will miss out on important information.
- SEO Benefits: Alt text improves SEO by giving search engines more information about the content of your images. Search engines can’t “see” images, but they can index alt text, helping your site rank better in image search results.
Best Practices for Writing Alt Text:
- Be Descriptive and Specific: Describe the content and purpose of the image. For example, instead of just saying “image of a tree,” say, “A large oak tree in a park during autumn.”
- Keep it Concise: Alt text should typically be no longer than 125 characters. This keeps the description brief while still conveying necessary information.
- Use Empty Alt Attributes for Decorative Images: For images that serve a purely decorative purpose (i.e., they don’t convey information or serve a functional purpose), use an empty alt attribute (alt=””). This prevents screen readers from wasting time on irrelevant content.
Example:
```
<img src="award-ceremony.jpg" alt="CEO receiving the 'Best Company Award' at the 2024 Business Awards" />
```
In this example, the alt text describes the image in a way that conveys its significance. This provides context for users who cannot see the image and helps them understand its role on the page.

For purely decorative images that don’t add meaning, you would use an empty alt attribute:
```
<img src="border-decoration.png" alt="" />
```
For more information about Alt text for images, check out our article Understanding Image Alt Text Descriptions.

2. No Keyboard Traps

Keyboard accessibility is critical for users who cannot use a mouse and instead rely on keyboard navigation. “Keyboard traps” occur when users get stuck in a particular interactive element (such as a form field or a modal window) and can’t navigate out using the keyboard alone.

According to WCAG SC 2.1.1 Keyboard, websites need to be fully navigable using just a keyboard. This means that all buttons, links, and forms should be reachable and usable without a mouse. If a site doesn’t meet this standard, it can exclude many users and make it less accessible.

How to Prevent Keyboard Traps:
- Ensure All Interactive Elements Are Focusable: Elements like buttons, form fields, and links must be easily accessible via the keyboard’s “Tab” key.
- Provide a Clear Way to Escape Modals: If using pop-ups or modal windows, ensure that users can exit using keyboard controls, typically the “Escape” key.
Example:
```
<a href="submit.html" id="submit-btn" tabindex="0">Submit</a>
```
This code ensures that the “Submit” button can be accessed via keyboard. The tabindex="0" attribute allows it to be included in the natural tab order of the page.

3. Allow Users to Resize Text

People with visual impairments often need to increase the text size on websites. Accessible websites allow users to resize text up to 200% without breaking the page layout or losing content.

How to Implement Text Resizing:
- Use Relative Font Sizes: Avoid using fixed units like px for font size. Instead, use relative units such as em or percentages (%). This ensures that text can scale properly.
- Test Text Scaling: After implementing relative font sizes, test your site by increasing text size to 200% in different browsers to ensure the content remains legible and the layout doesn’t break.
Example:
```
body {
font-size: 100%; /* Base font size that scales */
}
h1 {
    font-size: 2em; /* 200% of the body text size */
}
```
In this example, the body text is set at a flexible 100%, and the headings use a relative size (2em) that will scale based on the user’s settings.

4. Avoid Seizure Triggers

Flashing elements or rapid changes in brightness can trigger seizures in people with photosensitive epilepsy. The WCAG SC 2.3.1 recommends that content should not flash more than three times per second.

How to Prevent Seizure Triggers:
- Avoid Fast Animations: If you need animations, make sure they don’t flash rapidly or use extreme changes in brightness.
- Limit Flashing to Below 3 Hz: Ensure that any flashing or blinking elements do not exceed three flashes per second.
Example:
```
/* Safe animation with no rapid flashing */
@keyframes safe-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.flash-warning {
    animation: safe-flash 2s infinite;
}
```
This animation fades in and out at a safe pace, avoiding any rapid flashing that could trigger seizures.

5. Follow a Logical Reading and Code Order

Users who rely on screen readers navigate websites based on the underlying HTML code order, which means the structure of your code must match the logical flow of the content.

According to WCAG Success Criterion 2.4.3, websites should be designed to allow users to navigate easily using links, headings, and other navigation tools. This means your website should allow users to effortlessly find what they’re looking for without feeling lost.

How to Implement a Logical Code Order:
- Use Semantic HTML Elements: Elements like <header>, <nav>, <main>, and <footer> create a well-structured HTML document that is easy for screen readers to understand.
- Organize Content in a Meaningful Way: Ensure that headings, paragraphs, and sections appear in the correct order in your code, as this will directly impact the reading experience for users with assistive technology.
Example:

Here, the content is organized in a logical structure, making it easier for screen readers to understand and navigate.
```
  <header>
    <h1>Welcome to Our Store</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#shop">Shop</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </nav>
</header>
<main>
    <section id="shop">
        <h2>Shop Our Latest Collection</h2>
        <p>Browse our new products for this season.</p>
    </section>
</main>
<footer>
    <p>&copy; 2024 Our Store</p>
</footer>
```
6. Use Headings Appropriately

Headings are critical for organizing content and allowing users to quickly scan and understand the page structure. Screen readers rely on headings to navigate through content, making proper heading hierarchy essential.

Best Practices for Headings:

WCAG SC 1.3.1 Info and Relationships requires that content structure and relationships be programmatically determined or available in text. Proper use of headings and a clear content structure ensure that users can navigate and understand the content more easily.
- Use Headings to Structure Content: Use <h1> for the main title of the page, <h2> for section titles, and so on. Don’t skip heading levels (i.e., don’t jump from <h1> to <h3>).
- Avoid Using Headings Solely for Styling: Headings should not be used just to make text look bigger or bolder. Use them to represent the content hierarchy.
Example:
```
<h1>Guide to Accessible Coding</h1>
<h2>Why Accessibility Matters</h2>
<h3>Legal Requirements</h3>
<h3>Improved User Experience</h3>
```
In this example, the headings follow a logical order, making the content easy to navigate for users with screen readers.

7. Use HTML Tags That Make Websites Accessible

HTML provides several built-in tags that make websites more accessible. Using these elements correctly ensures that assistive technologies can understand and interact with the content.

Key Accessible HTML Elements:
- <label>: Associates a form field with a text description, making it easier for screen readers to understand.
- <button>: Creates a clickable button that is accessible via keyboard and screen readers.
- ARIA Attributes: These attributes, such as aria-label and aria-required, provide additional context for assistive technologies.
Example:
```
<form>
    <label for="email">Email Address:</label>
    <input type="email" id="email" name="email" aria-required="true">
</form>
```
In this example, the <label> tag clearly associates the input field with its description, while the aria-required="true" attribute informs screen readers that the field is mandatory.

Don’t Just Code—Create a Welcome Mat for the Web

Creating accessible websites isn’t just about meeting guidelines—it’s about making sure everyone has equal access to information and services online. Accessible coding improves user experience for everyone and can even boost your site’s search engine ranking. Plus, it shows that you care about all your users.

By following these principles and using the resources provided, you can build websites that are welcoming and usable for everyone. Keep these guidelines in mind as you code, and your website will be a better place for all its visitors!

For more information on web accessibility and coding best practices, you can visit the WCAG website.
Greg McNeil

September 10, 2024

How-to Guides

digital accessibility, How-to, WCAG, WCAG Compliance, Web Accessibility, web development
How to Implement ARIA Landmarks and Roles for Better Accessibility
For users of assistive technologies, accessing and interacting with websites can be difficult if the proper structure and cues aren’t in place. This is where ARIA (Accessible Rich Internet Applications) landmarks and roles come in handy. Implementing ARIA landmarks and roles can significantly improve your website’s accessibility, helping users navigate more easily and interact with web elements effectively. If you’re new to ARIA, don’t worry! This guide will walk you through ARIA landmarks and roles, why they matter, and how to implement them step-by-step.

What Is ARIA and Why Is It Important?

ARIA is a set of HTML attributes intended to make webpages easier to navigate for people who rely on assistive technology, such as screen reading software. These attributes help bridge gaps in standard HTML that might not convey sufficient meaning to people with disabilities.

By using ARIA, developers can label, describe, and define the functionality of elements in ways that ensure everyone has a better user experience. Regarding web accessibility, ARIA attributes are recommended in some cases by the Web Content Accessibility Guidelines (WCAG), which provide standards to help websites comply with accessibility requirements.

ARIA landmarks and roles are two essential aspects of making sure your website content is accessible for all users to understand and interact with.

ARIA Landmarks: What Are They?

ARIA landmarks are unique markers you can add to different sections of your webpage to make navigation easier for users with disabilities. These landmarks help people who use screen readers understand the structure of a webpage and quickly jump to different sections. Think of them as signposts, making it clear where key sections—like the header, main content, navigation, and footer—are located.

The major ARIA landmarks include:
- <header>: Identifies the top section of the webpage.
- <main>: Indicates the main content of the page.
- <nav>: Points to the area that contains navigational links.
- <footer>: The bottom section of the webpage.
Why Are ARIA Landmarks Important?

ARIA landmarks are invaluable for users with visual or motor impairments who use the keyboard or screen reader to navigate the web. They allow users to skip repetitive elements (like navigation bars) and jump directly to the content they’re looking for. Without these landmarks, a user would have to listen to every single line of the page to figure out where the main content starts or how to get to the footer. Using ARIA landmarks ensures that your website is easy to navigate for everyone.

How to Implement ARIA Landmarks Step-by-Step

Now that you understand the importance of ARIA landmarks let’s look at how to implement them in your website’s code. The good news? Adding ARIA landmarks is simple and can be done using standard HTML elements.

Adding the Header Landmark

The <header> element is used to define the global top section of your page, which typically contains things like the website logo, title, or main navigation links. Here’s an example of the correct usage of the HTML5 <header> region:

<header>
```
<h1>My Cool Website</h1>
<h1>My Cool Website</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/products">Products</a></li>
    </ul>
  </nav>
</header>
```
The Main Landmark

The <main> element is crucial because it defines the primary content of the page. The <main> element, along with a skip link, can allow users of assistive technology to skip past repetitive content such as the navigation:
```
<main role="main">
  <h2>Main Content</h2>
  <p>This is the most important part of the page.</p>
</main>
```
By using role=”main”, you’re ensuring that screen readers can quickly identify and jump to the core content of your page. Only one main landmark should be used per page.

Using the Navigation Landmark

The navigation area of your website should be easy to identify and skip if necessary. You can use the <nav> element or the ARIA role, but you do not need to use both:
```
<nav>
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
  </ul>
</nav>
<div role="navigation">
  <ul>
    <li><a href="/products">Products</a></li>
    <li><a href="/about">About Us</a></li>
  </ul>
</div>
```
With the navigation region, you’re clearly marking the section of the page that contains links for navigating to other parts of the site.

Adding the Footer Landmark

Finally, the <footer> element typically contains secondary content, such as copyright information or additional links. Adding a landmark here helps screen reader users know when they’ve reached the end of the page:
```
<footer role="contentinfo">
  <p>&copy; 2024 Your Company</p>
</footer>
```
In this case, role= "contentinfo" tells screen readers that this section provides supplementary information about the website.

ARIA Roles: What Are They?

ARIA roles go beyond marking sections of the page—they describe the functionality of specific elements. By using ARIA roles, you’re defining how an element should behave or be interacted with, especially when using assistive technologies.

Some commonly used ARIA roles include:
- “button”: Makes non-biased elements like <div> behave like a button.
- “dialog”: Defines a pop-up dialog window.
- “alert”: Marks an element as an important alert that needs immediate attention.
Why Are ARIA Roles Important?

ARIA roles give more meaning to non-standard HTML elements. For example, if you create a custom button using a <div> instead of the traditional <button> element, a screen reader might not recognize it as a button. By assigning it an ARIA role, you ensure it’s interpreted correctly, making the interaction more intuitive and accessible.

How to Implement ARIA Roles Step-by-Step

Let’s check out some examples of proper ARIA implementation.

Creating a Custom Button

If you have a custom button element (like a <div> styled as a button), you can add the role="button" to make sure it’s recognized as an interactive button by screen readers:
```
<div role="button" tabindex="0" onclick="submitForm()">Submit</div>
```
The ARIA role “button” tells assistive technology to announce this element as a button, and the “tabindex” attribute makes the element focusable via the keyboard. However, it’s always best to use the correct semantic HTML5 <button> tag whenever possible.

Adding a Dialog Role

For models or pop-up windows, you can use the role= "dialog" to make them accessible:
```
<div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDescription">
  <h2 id="dialogTitle">Confirmation</h2>
  <p id="dialogDescription">Are you sure you want to delete this file?</p>
  <button onclick="closeDialog()">Cancel</button>
</div>
```
The aria-labelledby and aria-describedby attributes help give context to the dialog box for users relying on assistive technologies.

Creating an Alert

If you need to display important, time-sensitive information—like an error message or form feedback—you can use the role= "alert":
```
<div role="alert">
  <p>Error: The "password" field is required.</p>
</div>
```
This role makes sure that screen readers announce the alert immediately, ensuring the user doesn’t miss critical information.

Going Beyond ARIA: Continue Your Accessibility Journey

The HTML markup of your website is far more critical than just defining the visual style of the site. It is used by screen reading software, assistive technologies, and keyboard navigation to ensure users have easy access to content. SEO crawlers also use it to determine the accuracy and relevance of your content.

By adding landmarks like header, main, navigation, and footer, and using roles like button, dialog, and alert, you’ll not only meet the accessibility standards outlined by WCAG, but you’ll also create a more user-friendly website for everyone.However, this is just one piece of the web accessibility puzzle.

Team Up with 216digital

At 216digital, we understand that keeping up with ADA compliance and accessibility best practices can be challenging. That’s why we’re here to help. We specialize in helping businesses achieve and maintain ADA compliance with expert guidance and actionable strategies. Schedule an ADA briefing with our experts today to learn more about how we can guide you through the complexities of accessibility, ensuring your website meets legal standards and delivers a great experience for all users.

Let’s make the web more accessible, together—book your ADA briefing today!
Bobby

September 6, 2024

How-to Guides

Accessibility, ADA Compliance, ARIA, How-to, WCAG, Web Accessibility, web development
How to Make Your Blog Accessible to All Readers

Creating a blog that’s accessible to everyone isn’t just good for your readers—it’s also a win for your website’s success. When we talk about web accessibility, we mean making sure that people of all abilities can access and understand your content. This includes individuals with disabilities who may use assistive technologies like screen readers. And there’s an added bonus: making your blog accessible can also improve your SEO (Search Engine Optimization), boosting your site’s visibility in search engines.

In this guide, we’ll explore several steps to ensure your blog is accessible to everyone, with a focus on improving usability and optimizing it for search engines. Whether you’re a website owner, developer, or content creator, these practical tips will help you reach a wider audience and provide a better experience for all users.

How Accessible Content Helps SEO

Let’s start with the big question: How does making your blog accessible help with SEO? Search engines, like Google, favor websites that provide a better user experience, and accessibility plays a big role in this.

When your blog is accessible, it’s easier for search engines to understand the content. Things like descriptive image alt text, structured headings, and meaningful links all give search engines more information about what’s on your page. This helps your content rank higher in search results. And since more people (including those with disabilities) can interact with your site, you’ll have a broader audience—another positive signal for SEO.

By making your blog accessible, you’ll not only help people who rely on assistive technology, but you’ll also make your content easier to find for everyone. It’s a win-win!

Use Headings to Convey Meaning and Structure

One of the easiest ways to make your blog more accessible is by using headings properly. Headings help break up your content and make it easier to follow. But they’re more than just big, bold text—they’re essential for screen readers to understand the structure of a page (per WCAG 1.3.1).

When you use headings (H1, H2, H3, etc.), you’re telling both readers and search engines what’s important on the page. Your main title should be an H1, and any subtopics should be in descending order of importance using H2s and H3s. For example, in this article, “Use Headings to Convey Meaning and Structure” is an H2 because it’s a main section, while smaller points could be H3s.

Headings allow users to skim your blog and quickly find the information they’re looking for. This is especially helpful for readers using assistive technology, as screen readers rely on heading tags to navigate a webpage.

Keep Content Clear and Concise

Nobody likes wading through long, complicated paragraphs. Most people scan online content rather than reading it word-for-word. That’s why it’s important to keep your writing clear, concise, and easy to digest (per WCAG 3.1.5).

Simple, straightforward language isn’t just good for accessibility—it’s good for your readers in general. If someone lands on your blog and can quickly understand the point you’re making, they’re more likely to stick around.

This is especially true for people with cognitive disabilities who may have difficulty processing complex information. Break up your text into short paragraphs, use bullet points or numbered lists where appropriate, and avoid using jargon unless absolutely necessary.

Remember: the clearer your content, the more accessible it is to everyone.

Describe Your Images

Images add visual interest to your blog posts, but they can create barriers if not handled properly. For people who are blind or have low vision, images need to be described in a way that makes sense with the content (per WCAG 1.1.1).

That’s where alt text comes in. Alt text is a short description of an image that is read aloud by screen readers. It should be clear and concise, describing the image’s purpose in the context of your blog post. For example, if you have a picture of a dog in a blog about pet care, your alt text might say “Golden retriever lying on grass” rather than just “dog.”

Good alt text is essential for both accessibility and SEO. Search engines can’t “see” images, but they can read alt text. By describing your images accurately, you’re helping both users and search engines understand your content better.

Make Link Text Meaningful

“Click here” is a common phrase you’ll see in blogs, but it’s not very helpful for accessibility or SEO. Instead, make your link text descriptive and relevant to the page it’s pointing to (per WCAG 2.4.4).

For instance, instead of writing “Click here for more information,” you could write “Learn more about web accessibility.” This is more meaningful for readers and screen readers alike because it gives them an idea of what they’ll find when they click the link.

Meaningful link text also helps with SEO because it gives search engines more context about the linked content. It’s another small tweak that can make a big difference in accessibility and search visibility.

Check the Comment Form—Is It Labeled Properly?

If you allow comments on your blog, it’s important to make sure your comment form is accessible. Many standard comment forms aren’t labeled properly, which can be a problem for people using screen readers (per WCAG 1.3.1).

Check that each field (like “Name,” “Email,” and “Comment”) has a label that screen readers can read aloud. This will make it easier for everyone to interact with your blog, and it shows that you care about your entire audience’s experience.

If you’re using a popular blogging platform like WordPress, there are plugins that can help ensure your forms are accessible. But it’s always a good idea to double-check that everything is labeled correctly.

Use Flexible Font Sizes

Another way to make your blog accessible is by using flexible font sizes. Not everyone has perfect vision, and some users may need to increase the font size to read your content comfortably (per WCAG 1.4.4).

Make sure your blog’s text can be resized without breaking the layout or making the page hard to navigate. You can do this by using relative units like “em” or percentages instead of fixed pixel sizes. This way, readers can adjust the font size according to their preferences.

In addition, choose fonts that are easy to read. Avoid overly decorative fonts and make sure there’s enough contrast between your text and background.

Put Your Blogroll on the Right-Hand Side

Placing your blogroll or navigation bar on the right-hand side of the page can improve accessibility. Many users with screen readers or keyboard navigation tools scan content from left to right. By placing the most important content (your actual blog post) on the left side and your blogroll or other navigation elements on the right, you make it easier for people to access what they came for (per WCAG 2.4.3).

It’s a small change, but it can significantly enhance the usability of your blog for people using assistive technology.

Conclusion

Making your blog accessible isn’t just about being inclusive—it also helps with SEO and makes your site easier to use. By using clear headings, adding alt text to images, writing simply, and making sure your site is easy to navigate, you’ll make your blog better for everyone.

Accessibility can be simple. With a few easy updates, you can make your blog a welcoming place for everyone, including people with disabilities. Not only will this improve your SEO and grow your audience, but it will also make your site more user-friendly.

If you’re unsure where to start or want to make sure you’re on the right track, schedule an ADA briefing with 216digital. We’re here to help you make your blog accessible and successful!

Greg McNeil

September 5, 2024

How-to Guides

Content Writing, digital accessibility, How-to, SEO, Web Accessibility
Why Your Navigation Menu Needs Accessibility
When you visit a website, one of the first things you probably notice is the navigation menu. It’s usually at the top or on the side of the page, guiding you to different parts of the site. Think of it as the roadmap to all the good stuff a website has to offer. But what happens if that roadmap isn’t clear? This is where accessible navigation menus come into play.

Let’s dive into what a web navigation menu is, common accessibility challenges, why they matter, and how you can make yours more accessible!

What is a Website Navigation Menu & Structure?

A navigation menu is a list of links or buttons usually found at the top or side of a website. These links guide users to different sections of the site, like the homepage, about page, blog, or contact page. Think of it as a roadmap that helps visitors get where they want to go without wandering aimlessly.

The structure of a navigation menu can vary from simple to complex, depending on the size and type of website. Most websites use one or more of these types of menus:
- Horizontal Menus: Commonly found at the top of a webpage.
- Vertical Menus: Often located on the left or right side of a webpage.
- Dropdown Menus: This appears when you hover over or click a menu item.
- Hamburger Menus: Those three stacked lines you see on mobile websites or apps.
The structure needs to be clear and intuitive so users can find what they’re looking for quickly and easily. For example, if you’re on an online store’s website, you’d expect to find “Products” in the main menu, not buried under “About Us.”

When the navigation is well-organized, visitors can explore your site and enjoy their experience. But if it’s confusing or hard to use, people might leave — and that’s not good for any website.

Common Accessibility Challenges with Navigation Menus

Creating a navigation menu might seem simple, but there are a few common accessibility challenges that can make it tricky for some users to navigate. Here are a few examples:
- Keyboard Navigation: Not everyone uses a mouse. Some people rely on a keyboard or other assistive devices to move around a website. If your menu isn’t keyboard-friendly, it can be impossible for these users to access parts of your site.
- Screen Readers: Screen readers are tools that help people with visual impairments by reading the text on the screen out loud. If your menu isn’t designed with screen readers in mind, it might not make sense to the user.
- Color Contrast: If the text in your menu doesn’t have enough contrast with the background, it can be hard for people with visual impairments to read. For example, light gray text on a white background might look sleek, but it’s not easy for everyone to see.
- Dropdown Menus: Dropdown menus are those extra links that appear when you hover over a main menu item. They can be challenging for screen readers and keyboard users if not properly coded.
Why Are Accessible Navigation Menus Important?

Accessible navigation menus aren’t just about being kind or doing the right thing—they’re also good for business. When your site is accessible, it’s usable by everyone, including people with disabilities. This means you’re not excluding potential customers or visitors, which can lead to a better return on investment (ROI).

Additionally, accessibility is a legal requirement under the Americans with Disabilities Act (ADA) in the United States. Websites that don’t comply with these guidelines can face lawsuits, which can be costly and damage your brand’s reputation.

Simply put, investing in web accessibility isn’t just good ethics—it’s good business.

Features of an Accessible Navigation Menu

To make sure your navigation menu is accessible, you should include several features. These features align with Web Content Accessibility Guidelines (WCAG), the go-to standards for web accessibility.

1. Keyboard Accessibility (WCAG 2.1.1 – Keyboard Accessible):

Keyboard accessibility is one of the most critical aspects of web accessibility. Some users may not be able to use a mouse due to motor disabilities, repetitive strain injuries, or personal preference. For these users, navigating a website entirely via the keyboard is essential. Here’s how you can make your navigation menu keyboard-friendly:
- Tab Order: Ensure that users can navigate through all menu items using the Tab key. The order should be logical and follow the visual flow of the website.
- Enter and Arrow Keys: When a menu item has a dropdown, users should be able to expand or collapse it using the Enter or Arrow keys. Once expanded, users should be able to navigate through the submenu items using the Arrow keys.
- Focus Management: Users should always know where they are on the page. Make sure that when a user opens a dropdown, the focus shifts to the first item in that dropdown.
Here’s an example of how you can make a simple navigation menu keyboard accessible:
```
<nav>
  <ul>
    <li><a href="#home" tabindex="0">Home</a></li>
    <li><a href="#about" tabindex="0">About</a></li>
    <li><a href="#services" tabindex="0">Services</a></li>
    <li><a href="#contact" tabindex="0">Contact</a></li>
  </ul>
</nav>
```
2. Visible Focus Indicator (WCAG 2.4.7 – Focus Visible):

Focus indicators show users where they are on a webpage when they navigate using a keyboard. Without a visible focus indicator, users can get lost, particularly if they are relying solely on the keyboard. The WCAG guidelines require that the focus indicator be clearly visible when users navigate through menu items.

Styling Focus Indicators

Customize the default focus style to make it more visible. You can use CSS to create a more prominent outline or make a background change. For example:
```
a:focus {
  outline: 3px solid #ff9800; /* Orange border for focused links */
  background-color: #f0f0f0; /* Light gray background for contrast */
}
```
Accessible Color Choices

Ensure that the color of the focus indicator has enough contrast with the background to be easily noticeable.

3. ARIA Roles and Attributes (WCAG 4.1.2 – Name, Role, Value):

ARIA (Accessible Rich Internet Applications) roles and attributes provide extra information to assistive technologies like screen readers, helping users understand the purpose and state of navigation elements. This is especially important for menus that have complex structures, such as dropdowns.

ARIA Roles

Use roles like role= “navigation” to indicate the navigation region and role= “menu” or role= “menuitem” to define menus and items within them. For example:
```
<nav role="navigation" aria-label="Main Navigation">
  <ul role="menubar">
    <li role="none"><a href="#home" role="menuitem">Home</a></li>
    <li role="none"><a href="#about" role="menuitem">About</a></li>
    
  </ul>
</nav>
```
ARIA Attributes for State

Use aria-expanded to indicate if a dropdown is expanded or collapsed. This helps users who rely on screen readers understand whether they can interact further with the menu item.
```
<button aria-expanded="false" aria-controls="submenu">Services</button>
<ul id="submenu" role="menu">
  <li role="none"><a href="#design" role="menuitem">Design</a></li>
  <li role="none"><a href="#development" role="menuitem">Development</a></li>
</ul>
```
When the button is clicked to expand the menu, JavaScript should change aria-expanded= “true”.

4. Color Contrast (WCAG 1.4.3 – Contrast (Minimum)):

Ensuring sufficient color contrast is vital for users with visual impairments, including color blindness. The contrast ratio between the text and its background should be at least 4.5:1 for normal text and 3:1 for large text.
- Choosing Accessible Colors: Use online tools like the WebAIM Contrast Checker to ensure your menu items meet the WCAG color contrast standards.
- Avoid Low-Contrast Hover States: While hover effects can be helpful, make sure they don’t reduce the text’s visibility. For example, avoid light text on light backgrounds.
5. Responsive and Mobile-Friendly Design (WCAG 1.4.10 – Reflow):

Navigation menus must be accessible across different devices and screen sizes. This is especially important given the widespread use of mobile devices.
- Responsive Design Techniques: Ensure that the menu collapses into a mobile-friendly version, like a hamburger menu, without losing accessibility features.
- Mobile Screen Readers: Make sure mobile screen readers can read and navigate the menu. Test with VoiceOver on iOS and TalkBack on Android to ensure compatibility.
6. Skip Navigation Links (WCAG 2.4.1 – Bypass Blocks):

A “Skip to Content” link allows users to bypass repetitive navigation links and go straight to the main content. This is crucial for users who rely on keyboard navigation.

<a href=”#maincontent” class=”skip-link”>Skip to Content</a>

When the page loads, users can press Tab to immediately focus on this link, skipping the menu altogether.

7. Clear and Descriptive Labels (WCAG 3.3.2 – Labels or Instructions):

Menu items should be labeled clearly to describe what users can expect when they click on them. This reduces confusion and ensures all users, including those with cognitive disabilities, can easily navigate the site.
- Avoid Vague Labels: Instead of “Explore,” use something like “Our Services” to make it clearer what users will find.
Tips for Creating an Effective Accessibility Navigation Menu

Creating an accessible navigation menu isn’t just about meeting the guidelines—it’s about creating a better experience for everyone. Here are some tips to help:
1. Keep it Simple: A clear and straightforward menu structure is easier for all users to navigate.
2. Use Clear Labels: Avoid jargon and use common terms. For example, instead of “Explore Our Solutions,” just use “Services.”
3. Include Skip Links: A “Skip to content” link allows keyboard users to skip repetitive navigation links.
4. Test with Real Users: Get feedback from people with different disabilities to understand how accessible your menu really is.
5. Provide Descriptive Anchor Text: Use anchor text that tells users where they’re going. For example, use “About Us” instead of “Click Here.”
Testing for an Accessible Menu

Once you’ve built your navigation menu, you need to test it for accessibility. Here are a few ways to do that:
- Keyboard Navigation: Try navigating your site using only the keyboard. Can you access all the menu items? Are dropdowns easy to use?
- Screen Readers: Use a screen reader like NVDA (NonVisual Desktop Access) or JAWS (Job Access With Speech) to navigate your site. Does the menu make sense when read aloud?
- Color Contrast Tools: Use color contrast checkers to make sure your text stands out against the background.
- Real User Testing: Consider asking users with disabilities to test your site and provide feedback on the navigation menu. This real-world input can be invaluable.
Conclusion

Creating a web-accessible navigation menu isn’t just about checking a box; it’s about making your website easy for everyone to use. When you improve accessibility, you also boost user experience and even your ROI. By learning about the best practices and challenges of accessible navigation menus, you can make your website more welcoming to all visitors.

Remember, accessibility is not a one-time fix. It’s important to regularly test and update your navigation menu to keep it user-friendly. If you want to take the next step in making your website more inclusive, consider scheduling an ADA compliance briefing with 216digital. Our team can help you ensure your site is accessible to everyone.
Greg McNeil

August 30, 2024

How-to Guides

digital accessibility, How-to, navigation menu, Web Accessibility, web development

Closed Captions for Online Video Content

What Are Closed Captions?

Who Benefits From Closed Captions?

Closed Captions vs. Subtitles: What’s the Difference?

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

What Are the Legal Obligations for Closed Captioning?

The ADA’s Requirements for Closed Captions

FCC Requirements for Closed Captions

What Are the Benefits of Using Closed Captioning?

Best Practices for Closed Captioning

How to Add Captions to Videos

What If My Video Service Doesn’t Support Closed Captions?

Conclusion

How to Make Your Website’s Pop-Ups Accessible

Challenges of Website Pop-Ups for Accessibility

Hard to Close or Dismiss

Improperly Labeled Pop-Ups

Focus Trap

Disruption of Browsing Experience

Best Practices for Accessible Pop-Ups

Make Sure Pop-Ups Are Easy to Close

Code Tip: Include a Keyboard Shortcut

Properly Label the Pop-Up for Screen Readers

Code Tip: Use ARIA Attributes for Accessibility

Prevent Focus Trapping

Code Tip: Manage Focus Correctly

Avoid Disrupting the Browsing Experience

Example:

Keep the Design Simple and Clear

Test with Real Users and Assistive Technologies

Tools for Testing Pop-Up Accessibility:

Make a Pop with 216digital

WCAG: Web Accessible Coding 101

What is Web Accessibility?

Why Accessible Coding is Important

1.Provide Alt Text for Non-Text Components

Why Alt Text is Important:

Best Practices for Writing Alt Text:

Example:

2. No Keyboard Traps

How to Prevent Keyboard Traps:

Example:

3. Allow Users to Resize Text

How to Implement Text Resizing:

Example:

4. Avoid Seizure Triggers

How to Prevent Seizure Triggers:

Example:

5. Follow a Logical Reading and Code Order

How to Implement a Logical Code Order:

Example:

6. Use Headings Appropriately

Best Practices for Headings:

Example:

7. Use HTML Tags That Make Websites Accessible

Key Accessible HTML Elements:

Example:

Don’t Just Code—Create a Welcome Mat for the Web

How to Implement ARIA Landmarks and Roles for Better Accessibility

What Is ARIA and Why Is It Important?

ARIA Landmarks: What Are They?

Why Are ARIA Landmarks Important?

How to Implement ARIA Landmarks Step-by-Step

Adding the Header Landmark

The Main Landmark

Using the Navigation Landmark

Adding the Footer Landmark

ARIA Roles: What Are They?

Why Are ARIA Roles Important?

How to Implement ARIA Roles Step-by-Step

Creating a Custom Button

Adding a Dialog Role

Creating an Alert

Going Beyond ARIA: Continue Your Accessibility Journey

Team Up with 216digital

How to Make Your Blog Accessible to All Readers

How Accessible Content Helps SEO

Use Headings to Convey Meaning and Structure

Keep Content Clear and Concise

Describe Your Images