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

Accessibility Checklist: Your Guide to Compliance
Creating an accessible website goes beyond just checking a few boxes—it’s about enabling everyone, including people with disabilities, to engage with your content smoothly. A well-structured accessibility checklist can help you address common barriers, test thoroughly, prioritize fixes, and ensure ongoing compliance with accessibility standards.

Here’s a comprehensive web accessibility checklist to guide you through essential steps:

Understand and Set Your Accessibility Goals

Define accessibility goals based on WCAG (Web Content Accessibility Guidelines) standards.

Before diving into specific changes, remember that your accessibility improvements should align with recognized standards, particularly WCAG 2.1 A/AA levels. Setting these goals from the start ensures your site meets both legal requirements (like ADA compliance in the U.S.) and the diverse needs of your users. Following an accessibility checklist can help ensure each goal is met.

Audit Your Website for Accessibility Gaps

Conduct an initial audit to identify accessibility issues.

An audit gives a clear view of your website’s current accessibility status, spotlighting areas that need attention. Use tools like automated scanners, manual audits, and assistive technologies (AT) such as screen readers to uncover common barriers. An accessibility checklist is helpful here to document each area tested, including:
- Keyboard Navigation: Verify that users can navigate your site without a mouse, using keyboard commands only.
- Color Contrast: Use a contrast checker to ensure text is readable for people with low vision.
- Alt Text for Images: Check that all images have descriptive alt attributes, making content accessible for visually impaired users.
Ensure Keyboard Navigation is Intuitive

Ensure users can navigate your site fully with a keyboard.

Keyboard navigation is essential for users who don’t use a mouse. This includes making sure all interactive elements like buttons, forms, and links are accessible with the “Tab” and “Enter” keys.
- Focus States: Make sure focus states (visual indicators for keyboard users) are visible and defined.
- Logical Order: Verify that the tab order follows a logical sequence, mirroring the visual layout.
To learn more about keyboard navigation, check out our article, “What is Keyboard Navigation?”

Implement Proper Use of Alt Text for Images

Add descriptive alt text to all informative images.

Alt text serves as an alternative to images, allowing screen readers to describe visuals to visually impaired users.
- Functional vs. Decorative: Use alt text for images conveying essential information. Use alt=”” for decorative images to prevent screen readers from reading unnecessary details.
- Descriptive Text: Avoid vague descriptions like “image” and offer concise, informative details to convey the image’s purpose.
For additional information about alt text, read our article “Understanding Image Alt Text Descriptions.”

Ensure Sufficient Color Contrast

Check and adjust color contrast to meet accessibility standards.

Adequate contrast between text and background ensures readability, especially for users with visual impairments. WCAG recommends a minimum contrast ratio of 4.5:1 for regular text and 3:1 for larger text.
- Tools: Use WebAIM’s Contrast Checker to verify compliance.
- Avoid Color-Only Cues: Avoid relying solely on color to convey important information, as colorblind users might miss these cues. Pair colors with other indicators, like icons or text labels.
Use Semantic HTML Structure

Build a well-structured HTML hierarchy for better accessibility.

A clear HTML structure is essential for screen readers and other assistive devices. Proper tags help convey the structure and purpose of your content.
- Headings: Use heading tags (<h1>, <h2>, etc.) in a logical order, guiding users through content.
- Landmarks: Include ARIA landmarks like role= “navigation” and role= “main” for easier page navigation.
- Lists and Tables: Use HTML lists for lists and tables for data, not layout purposes.
Check out our articles, “How Semantic HTML Improves Your Accessibility & SEO?” or “How to Implement ARIA Landmarks and Roles for Better Accessibility” for a deeper dive into semantic HTML and ARIA landmarks.

Test with Assistive Technologies

Test your website with various assistive technologies.

Testing with AT tools like screen readers, voice recognition, and magnification provides insights into your site’s accessibility. Common screen readers include JAWS, NVDA, and VoiceOver.
- Screen Reader Testing: Check that all text, buttons, and links are accessible with screen readers.
- Voice Navigation: Confirm that users can navigate all interactive elements using voice commands.
- Magnification Tools: Ensure that the design remains usable when zoomed to 200%.
Incorporate Accessible Forms

Design forms with clear labels and error messages.

Accessible forms enable users to enter information accurately and with ease.
- Labels and Instructions: Each form field should have a visible label. Use placeholder text sparingly.
- Error Handling: Provide clear error messages when input is invalid. Describe what went wrong and how to fix it.
- Field Focus: Ensure that after submission, the keyboard focus moves to the first field needing correction.
Conduct Remediation Based on Prioritized Issues

Address identified accessibility issues based on their impact.

After auditing, prioritize fixes by severity and frequency. Address critical issues first, especially those that affect navigation and content comprehension.

Implement Continuous Monitoring with Tools Like a11y.Radar

Set up ongoing accessibility monitoring to maintain compliance.

Web accessibility is a continuous effort. New content or design changes can create new barriers, so ongoing monitoring tools like a11y.Radar can be part of your accessibility checklist, alerting you to real-time issues.
- Real-Time Alerts: Get notifications for new issues, allowing for prompt fixes.
- Automated Reports: Schedule regular accessibility reports to stay aware of your compliance status.
Conduct Routine Manual and Automated Testing

Schedule consistent accessibility testing intervals.

Automated tools are helpful for common issues, but manual testing finds more complex accessibility gaps. A mix of both ensures a thorough evaluation.
- Automated Testing: Use tools like Google Lighthouse or WAVE for quick assessments.
- Manual Testing: Focus on custom components that automated tools may not fully catch.
Keep Up-to-Date with WCAG Guidelines

Stay current on WCAG updates and best practices.

Accessibility standards evolve to meet new needs. KRegularly updating your accessibility checklist ensures compliance with the latest WCAG guidelines, like WCAG 2.2 or 3.0.
- Review WCAG Changes: Familiarize yourself with new criteria.
- Align with a11y.Radar: Ensure your monitoring tools adapt to updates, maintaining continuous compliance.
Take the First Step Towards Accessibility

Creating an accessible website is essential not only for compliance but for providing a truly inclusive experience for all users. By following a structured approach to accessibility—setting goals, auditing your site, prioritizing fixes, and maintaining continuous monitoring—you’re laying a solid foundation for an accessible, user-friendly site.

If you’re ready to make accessibility a priority but need guidance on how to navigate ADA compliance, consider scheduling an ADA briefing with 216digital. Our team can help you navigate accessibility standards, pinpoint key areas for improvement, and develop a checklist tailored to your site’s needs. Take the first step toward making your website accessible to all—schedule your ADA briefing with 216digital today and ensure your digital presence is compliant, inclusive, and welcoming.
Greg McNeil

November 12, 2024

How-to Guides

Accessibility, accessible checklist, How-to, Website Accessibility
Why Touch Targets Impacts Accessibility
Imagine this: a customer visits your website, excited to snag a deal on their holiday shopping list. They’re scrolling through your page on their phone, ready to click “add to cart,”—but then they hit a roadblock. The buttons are too small, links are crowded together, and navigating your site becomes a frustrating game of “tap and hope.” Now imagine if that customer has limited dexterity or relies on assistive technology. For them, those tiny buttons and cramped links aren’t just an inconvenience; they’re a barrier.

Accessibility issues like these don’t just affect your users’ experience—they impact your bottom line and even your legal compliance. Making sure your site’s touch targets are easy to interact with is one of the simplest yet most impactful changes you can make. In this guide, we’ll cover why large, accessible touch targets matter, how they boost usability for everyone, and what steps you can take to ensure your site is welcoming to all.

What Are Touch Targets and Why Are They Important?

Touch targets are interactive elements—such as buttons, links, and form controls—that users engage with as they navigate your website. The size and spacing of these elements can make or break the experience, especially for users on mobile devices or those with physical limitations. If touch targets are too small or closely spaced, users may struggle to click or tap accurately, leading to frustration and a poor experience. This can be particularly challenging for older adults and individuals with limited dexterity.

Making touch targets sufficiently large and spaced out allows everyone to navigate and interact with your site more easily, enhancing both usability and inclusivity. This is a foundational aspect of web accessibility that ensures your website works well for all.

WCAG Guidelines: Key Standards for Touch Target Size

To provide clear guidance on accessible touch target sizes, the Web Content Accessibility Guidelines (WCAG) have established several success criteria. WCAG 2.1 and the updated WCAG 2.2 outline standards to help developers make online content accessible, mainly through adequately sized touch targets.

Success Criterion 2.5.5 (Target Size)

In WCAG 2.1, Criterion 2.5.5 specifies that interactive elements should meet a minimum touch target size of 44×44 pixels, making it easier for users with limited motor skills or assistive technology to select the right element.

Success Criterion 2.5.8 (Target Size – Enhanced)

WCAG 2.2 expands on this with Criterion 2.5.8, recommending even larger touch targets when interactive elements are positioned close together. This helps users avoid accidentally tapping the wrong element, especially on mobile devices or when using screen readers.

These guidelines establish a foundation for accessible design, giving developers clear targets to create user-friendly, inclusive sites that reduce errors and improve the overall user experience.

Best Practices for Designing Accessible Touch Targets

With WCAG standards in mind, you can take steps to create touch targets that enhance usability. Here are some essential practices for implementing accessible interactive elements:

Use Adequate Padding and Margin

Padding and margins around buttons and links help ensure they meet minimum size requirements while maintaining a clean visual layout. For example:
```
button {
  padding: 12px 20px; /* Increases padding for larger touch target */
  font-size: 16px;
}
```
Ensure Minimum Width and Height

Using min-width and min-height properties guarantees that buttons and other elements stay at least 44×44 pixels, even when the element content is smaller. This maintains accessibility across different screen sizes.
```
button {
  min-width: 44px;
  min-height: 44px;
}
```
Space Out Interactive Elements

Placing enough space between buttons and links prevents mis-taps and ensures usability for all users, especially those on mobile devices or using assistive technologies.
```
button, a {
  margin: 10px;
}
```
Add ARIA Attributes for Enhanced Accessibility

ARIA attributes (Accessible Rich Internet Applications) add context to interactive elements for users relying on assistive devices. For instance, using aria-expanded or aria-haspopup on a menu button helps screen reader users understand its function.
```
<button aria-expanded="false" aria-haspopup="true">Menu</button>
```
Responsive Design: Ensure Touch Target Size Across Devices

Since many users rely on mobile devices for browsing, it’s essential to make touch targets easily accessible on smaller screens. Using responsive CSS ensures that touch targets adapt to various screen sizes:
```
@media (max-width: 600px) {
  button {
    padding: 15px 25px; /* Larger padding on smaller screens */
  }
}
```
Testing Touch Target Accessibility

Once you’ve optimized your touch targets, testing is essential to ensure they’re functional and accessible. Here are a few testing strategies to confirm usability:
- Manual Testing: Test your site on various devices (desktop, tablet, mobile) to ensure touch targets are easy to access and use.
- Accessibility Tools: Tools like Google Lighthouse or WAVE can check WCAG compliance, including touch target sizes.
- User Testing: Feedback from real users, particularly those with disabilities, is invaluable for assessing how accessible and user-friendly your touch targets are.
Wrapping Up

Improving touch target accessibility is just one of many steps toward making your website genuinely inclusive and user-friendly. By focusing on accessible design, you not only enhance the experience for users with mobility challenges and those using assistive technologies but also build a site that’s welcoming and intuitive for everyone. Following WCAG guidelines, using best coding practices, and regular testing are essential—but navigating these standards alone can be overwhelming.

If you’re ready to take accessibility seriously and want to ensure your site is fully ADA-compliant, consider scheduling an ADA briefing with 216digital. Our team of accessibility experts can help you identify potential compliance issues, create actionable solutions, and guide you through the process of building a more accessible and inclusive website. Reach out today to learn how we can help safeguard your site and open new opportunities with ADA compliance.
Greg McNeil

November 8, 2024

How-to Guides

Accessibility, How-to, touch targets, web developers, web development, Website Accessibility
How to Build Accessible React Applications
Building an accessible React application means designing a site that everyone, including people with disabilities, can use and enjoy. Accessibility in web apps isn’t just a legal or ethical responsibility—it’s also a best practice that improves user experience for everyone. React, with its dynamic and component-based nature, offers much flexibility, but without careful planning, accessibility can fall through the cracks. This guide will walk you through critical practices to build a more accessible React app, covering essential tools, effective HTML and ARIA usage, keyboard accessibility, and screen reader management.

Why Accessibility in React Matters

An accessible React app does not create obstacles for people who rely on assistive technology like screen readers, keyboards, or other devices. According to Web Content Accessibility Guidelines (WCAG), making web content accessible means people of all abilities can navigate, understand, and interact with your content. With tools and techniques tailored for React, you can ensure that users with disabilities get the best experience possible.

Setting Up an Accessibility-Friendly Development Environment

Setting up your React environment to catch accessibility issues early is a powerful way to build accessible applications. A highly recommended tool for React is eslint-plugin-jsx-a11y, which catches JSX-specific accessibility issues directly in your code editor.

Installing eslint-plugin-jsx-a11y

Install the plugin:
```
npm install eslint-plugin-jsx-a11y --save-dev
```
Configure ESLint: Add the plugin to your ESLint configuration file.
```
{
  "plugins": ["jsx-a11y"],
  "extends": [
    "eslint:recommended",
    "plugin:jsx-a11y/recommended"
  ]
}
```
This plugin identifies accessibility issues in JSX, such as missing ARIA roles, empty <alt> attributes on images, and improper keyboard handling.

The Power of Semantic HTML in React

When it comes to accessibility, semantic HTML is your best friend. Semantic elements like <button>, <header>, and <nav> are designed to convey meaning and functionality to both browsers and screen readers. This minimizes the need for ARIA roles and additional attributes, as semantic HTML elements come with built-in keyboard accessibility and screen reader support.

Examples of Semantic HTML in React

Using semantic elements directly in React makes components accessible by default. For example:
```
import React from 'react';
function AppHeader() {
  return (
    <header>
      <h1>Welcome to My Store</h1>
      <nav>
        <a href="#home">Home</a>
        <a href="#products">Products</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
  );
}
export default AppHeader;
```
Avoid Using <div> and <span> for Interactive Elements

Avoid using generic elements like <div> and <span> to create buttons or links, as these don’t include native keyboard or accessibility functionality. Instead, use <button> and <a> elements to ensure proper accessibility and functionality. For example:
```
function IconButton() {
  return <button aria-label="Open settings" onClick={() => alert('Settings')}>⚙️</button>;
}
```
Enhancing Accessibility with ARIA Roles (But Use Them Wisely)

ARIA (Accessible Rich Internet Applications) can make custom elements accessible when there’s no HTML equivalent. However, it’s essential to use ARIA roles to enhance existing semantic elements rather than replace them.

Using aria-label for Accessibility

Sometimes, buttons or icons need additional context for screen readers. The aria-label attribute provides descriptive text to communicate functionality.
```
function IconButton() {
  return <button aria-label="Open settings" onClick={() => alert('Settings')}>⚙️</button>;
}
```
Dynamic Updates with aria-live

React apps often have dynamic content. Use aria-live regions to notify screen readers about important changes.
```
function AlertMessage({ message }) {
  return (
    <div aria-live="assertive">
      {message}
    </div>
  );
}
```
Keyboard Accessibility and Focus Management

Keyboard accessibility ensures users can navigate your app without a mouse, which is crucial for many assistive technology users. In React, managing keyboard focus is straightforward with hooks like useRef and useEffect.

Setting Focus with useRef and useEffect

You can use useRef to target an element and useEffect to set focus when a component mounts. This is useful for elements like modals, which should receive focus when they appear.
```
import React, { useRef, useEffect } from 'react';
function Modal({ isOpen, onClose }) {
  const closeButtonRef = useRef(null);
  useEffect(() => {
    if (isOpen) {
      closeButtonRef.current.focus();
    }
  }, [isOpen]);
  return (
    isOpen && (
      <div role="dialog" aria-modal="true">
        <p>Modal content here</p>
        <button ref={closeButtonRef} onClick={onClose}>Close</button>
      </div>
    )
  );
}
```
In this example, the close button gains focus when the modal opens, making navigation intuitive for keyboard users.

Avoiding Focus Traps

Focus traps occur when users get “stuck” within an element, such as a modal, and can’t return to the main content. Ensure that focus can move freely between interactive elements and provide a way to close modals with the Escape key.

Best Practices for Accessible Interactive Elements

When building custom components, pay attention to how they’ll be used with a keyboard:

Provide Clear Labels for Inputs

Forms are essential in any application, and labeling form controls is critical for accessibility. Use labels effectively with inputs, either through <label> elements or aria-label attributes.
```
function NameInput() {
  return (
    <label htmlFor="name">
      Name:
      <input type="text" id="name" aria-required="true" />
    </label>
  );
}
```
Accessible Modals

For custom modal components, set the role= "dialog" and aria-modal= "true" attributes, which inform assistive technology that the content is a modal.

Testing Focus

After adding interactive elements, test that each one can be reached and activated using only the Tab, Enter, and Escape keys. This ensures full keyboard accessibility.

Managing Screen Reader Navigation in SPAs

Single Page Applications (SPAs) often update content dynamically without full page reloads, which can make it difficult for screen reader users to keep track of changes. When the main content area updates, shift focus to the new content or provide a way for screen readers to be alerted about the change.

Example: Setting Focus on Page Updates
```
import React, { useEffect, useRef } from 'react';
function ContentArea({ content }) {
  const contentRef = useRef();
  useEffect(() => {
    contentRef.current.focus();
  }, [content]);
  return (
    <main tabIndex="-1" ref={contentRef}>
      {content}
    </main>
  );
}
```
Here, the main content area receives focus after each update, helping screen reader users navigate SPAs more easily.

Testing Your React App for Accessibility

Testing is crucial to ensure your React application meets accessibility standards. Here are some testing methods and tools:
1. Manual Testing: Use keyboard-only navigation to interact with your app, checking that all elements are accessible and usable. Verify that custom elements respond to the Tab, Enter, and Escape keys.
2. Screen Readers: Test with a screen reader like NVDA (for Windows) or VoiceOver (for macOS). Experience the app as a screen reader user to see how well content updates and ARIA roles are conveyed.
3. Automated Tools: Tools like Google Lighthouse or WAVE identify many accessibility issues. They’re helpful for quickly checking common problems, although they don’t replace manual testing.
Conclusion

Building accessible React applications takes effort but is entirely achievable with the right techniques and tools. Start by setting up your development environment with eslint-plugin-jsx-a11y to catch common issues, and always prioritize semantic HTML elements for inherent accessibility. ARIA roles are powerful but should be used to enhance—not replace—standard HTML.

Ensuring keyboard accessibility, managing focus in SPAs, and regularly testing for accessibility can make a world of difference for users. By following these practices, you’re not only meeting WCAG standards but also creating a better user experience for everyone.

Need help? Reach out to 216digital using the contact form below for a complimentary ADA briefing.
Bobby

November 6, 2024

How-to Guides

ARIA, How-to, React, web developers, web development
Using NVDA to Test Web Accessibility
Making your website accessible isn’t just a checkbox to tick—it’s about creating a space where everyone feels welcome. Imagine trying to browse a site only to hit wall after wall because it wasn’t designed with all users in mind—that’s the reality for millions of people with disabilities. One of the most effective ways to understand and improve your site’s accessibility is by testing it with tools like NVDA (NonVisual Desktop Access). NVDA is a free, open-source screen reader for Windows that provides audio feedback, enabling users who are blind or visually impaired to explore and interact with digital content.

If you’re a developer or designer aiming to make your website user-friendly for everyone, testing with NVDA can be a real eye-opener. This guide will walk you through everything you need to get started—from setting up NVDA to identifying common accessibility barriers. We’ll also compare NVDA with other screen readers and share tips on integrating accessibility checks into your workflow.

Why Testing with a Screen Reader Matters

Testing with a screen reader is crucial for building websites that everyone can use and enjoy. Did you know that over 8 million people in the United States have a visual disability? Worldwide, an estimated 2.2 billion people are affected by some form of visual impairment. That’s a considerable number of users who rely on screen readers like NVDA to navigate the web. Yet, despite this need, studies show that 95.9% of the world’s top million homepages still have detectable accessibility issues, many of which directly impact screen reader users.

Common Accessibility Barriers

While standards like the Web Content Accessibility Guidelines (WCAG) exist to help ensure content is accessible, there’s still a gap between ticking the compliance boxes and actual usability. Some common accessibility barriers impacting screen reader users include:
- Missing or Incorrect Alt Text: Without alt text, images lack context, making it hard for users to understand what’s on the page.
- Improper Heading Structure: Jumping from an H1 to an H3 heading (and skipping H2) can make navigating a page disorienting.
- Inadequate Link Descriptions: Using link text like “Click here” doesn’t tell users where the link will take them.
- Lack of Keyboard Navigation: If elements aren’t reachable by the keyboard, users may not be able to navigate away from certain sections.
By testing your site with a screen reader like NVDA, you can spot and fix these barriers directly, ensuring your content is genuinely usable—not just technically accessible. This step is vital for engaging a wide audience, including customers who rely on screen readers for equal access.

Plus, by prioritizing screen reader accessibility, you’re not just meeting legal requirements; you’re showing that your brand values inclusivity, which can resonate with customers and build loyalty.

Getting Started with NVDA

Ready to dive in? First, you’ll need to install NVDA on a Windows computer. Just head over to its official website and follow the straightforward instructions. Once it’s installed, take a few minutes to explore the settings. NVDA lets you adjust things like speed, voice pitch, and how much information it reads out loud. Tweaking these settings can make your screen reader testing smoother and help you catch all the essential details without getting distracted.

Understanding the Basics of NVDA

At first glance, NVDA might seem a bit overwhelming, but don’t worry—once you get the hang of a few essential controls, you’ll be navigating like a pro. The main control is the Insert key, which you use along with other keys to execute commands. For example, pressing Insert + Spacebar toggles between browse and focus modes, showing how users move between different sections and interact with elements on your site.

Key Shortcuts to Know
- Tab: Move through interactive elements like buttons and links.
- Shift + Tab: Go back through items, helping you check the flow of navigation.
- H: Navigate through headings in sequence (Shift + H moves backward), which is crucial for accessibility.
- K for links or G for graphics: Jump to specific content, helping you quickly assess if important items are accessible.
Testing for Accessibility Barriers with NVDA

Once you’re comfortable with NVDA, it’s time to put your website to the test. The goal is to see how easy (or difficult) it is for a screen reader user to find and understand information on your site.

Check Your Navigation Structure

Screen reader users rely heavily on clear navigation. Headings should be marked in a logical order, and the Tab key should move through items sensibly. As you use NVDA, please pay close attention to how it announces headings, links, and interactive elements. For instance, links labeled “Read More” can be confusing, while “Learn More About Our Services” is much more straightforward. Descriptive link text is vital to helping screen reader users navigate confidently.

Confirm Image Descriptions

Proper alt text is a must for images. Use the G key to move through images and listen to the descriptions NVDA reads aloud. The alt text doesn’t need to be lengthy—just informative enough to give users an idea of the image’s purpose.

For additional information about alt text, read our article “Understanding Image Alt Text Descriptions.”

Test Interactive Elements Like Forms

Forms can be tricky for screen reader users if they’re not labeled well. As you move through form fields, listen to the labels NVDA reads. Each field should have a clear label, and error messages should be accessible, too. Testing with NVDA can reveal unlabeled fields or hidden error messages that might make filling out forms difficult.

Common Accessibility Barriers to Watch For

Using NVDA can help you spot common barriers that affect accessibility:
- Keyboard Traps: These occur when users get stuck in one part of the page. Use the Tab and Shift + Tab keys to move around; if you find yourself stuck, it’s likely a keyboard trap.
- Focus Indicators: Screen reader users (and keyboard users in general) need a visible marker to show where they are on the page. Test this by tabbing through your site to see if each interactive element has a clear indicator.
- Content Flow: Listen to your site in linear order, from top to bottom. Does it make sense as you go? Unclear structure or skipped headings can confuse users trying to navigate the content in a meaningful order.
Documenting What You Find

As you test, it’s helpful to document any issues you come across. Be specific: note where each issue happens, what the problem is, and why it’s an accessibility issue. For example, if a button lacks a label, describe which button it is, where it’s located, and how this impacts screen reader users. Including step-by-step details on how you tested (like key sequences or what NVDA readout) can also help your team quickly recreate and fix the issue.

Trying Out Other Screen Readers

While NVDA is a fantastic tool, remember that users rely on different screen readers like JAWS or VoiceOver on Apple devices. Testing with more than one screen reader can uncover accessibility issues that one tool might miss. NVDA is particularly good with dynamic content and ARIA (Accessible Rich Internet Applications) attributes. So, if you can, try testing with multiple screen readers to get a fuller picture of your site’s accessibility.

Making Accessibility Part of Your Process

Accessibility testing with NVDA shouldn’t be a one-time thing—it works best when it’s part of your development process from the start. By catching issues early, you’ll avoid significant fixes later and create a better experience for everyone. During design, consider accessibility-friendly patterns like high-contrast colors and adjustable font sizes. During development, use NVDA to test as you go and do a final check once your site is live.

And if possible, getting feedback from users with disabilities can be incredibly valuable. While NVDA can help you simulate a screen reader experience, real users bring real-world insights that can highlight usability issues you might not think of.

Wrapping Up

Using NVDA to test your website’s accessibility is a powerful step toward creating a more inclusive online experience, but there’s so much more to accessibility than just technical adjustments—it’s about making your site welcoming to everyone, including customers who rely on assistive technology.

To help you navigate the broader world of ADA compliance and web accessibility, consider scheduling a briefing with 216digital. Our team can walk you through key accessibility requirements, share insights into your site’s current compliance level, and guide you on building a sustainable, accessible web presence. Let’s work together to make your website an inclusive, welcoming space for all users. Schedule your ADA briefing with 216digital today, and take the next step toward true digital accessibility.
Kayla Laganiere

November 5, 2024

How-to Guides

Accessibility, Accessibility testing, ADA Compliance, NVDA, web developers, Website Accessibility
The Importance of Keyboard Accessibility & Why ARIA Widgets Don’t Work
Keyboard accessibility is a fundamental part of creating an accessible web experience. For many people, including those with motor impairments, the ability to navigate a website using only a keyboard is essential. Unfortunately, not all website interactive elements are designed with keyboard users in mind. This is where ARIA (Accessible Rich Internet Applications) widgets often come into play—intended to improve accessibility but frequently falling short when misused.

Understanding the principles of keyboard accessibility and the limitations of ARIA widgets can help website owners, developers, and content creators deliver a more inclusive user experience. Let’s explore the most common keyboard accessibility issues, why ARIA widgets often miss the mark, and how you can design your website to meet Web Content Accessibility Guidelines (WCAG) standards.

Why Keyboard Accessibility Matters

Keyboard accessibility ensures that all interactive elements on a website—like buttons, forms, links, and menus—are reachable and usable without needing a mouse. Many users, such as those with motor disabilities or vision impairments, rely on keyboards, screen readers, or other assistive devices to navigate web content.

Without keyboard accessibility, people using assistive technology can encounter significant barriers, preventing them from completing tasks or navigating the site. For instance, a checkout form that only allows interaction through mouse clicks will stop a keyboard user in their tracks, impacting their ability to purchase a product or service.

Common Barriers to Keyboard Accessibility

Some of the most common obstacles that keyboard users face on websites include:

Lack of Focus Indicators
- Problem: Without visible focus indicators, keyboard users may not know where they are on the page. This becomes particularly frustrating when navigating forms or interactive menus.
- Solution: Use CSS to style focus indicators and make them highly visible, such as by changing the border color, background, or outline. Here’s an example:
```
button:focus, a:focus {
	outline: 3px solid #005fcc;
	background-color: #f0f8ff;
}
```
Improper Tab Order
- Problem: Elements on a page need to logically match the visual layout. Without a logical tab order, users may be taken through an erratic sequence, which can lead to confusion and missed information.
- Solution: Arrange your elements in HTML to follow the intended visual order and limit use of the tabindex attribute. By default, elements will follow the document’s source order, so it’s best to organize your code this way.
Focus Traps
- Problem: Focus traps occur when users can’t tab away from a particular element, like a popup or modal. Once they’re stuck, the rest of the page becomes inaccessible until they can close the focus-trapped section.
- Solution: Ensure focus returns to the main content once the user dismisses the popup or modal, using JavaScript if necessary:
```
// Example of returning focus after modal close
document.getElementById("closeModalButton").addEventListener("click", function() {
  document.getElementById("mainContent").focus();
});
```
ARIA Widgets and Their Challenges

ARIA (Accessible Rich Internet Applications) is a set of attributes that help improve the accessibility of web applications, particularly for screen readers. However, ARIA widgets—such as dropdowns, sliders, and modals—often don’t work as expected for keyboard users if not implemented carefully. ARIA can enhance accessibility, but it can’t “fix” poor coding practices or make non-native elements fully functional on its own.

Why ARIA Widgets Often Fail

ARIA widgets can be highly effective but only if they’re properly coded, tested, and consistently used with accessibility in mind. Here are some common pitfalls:

Reliance on ARIA Without Semantic HTML

ARIA is not a replacement for HTML5 elements; it’s meant to enhance them. Using ARIA on elements that don’t support native keyboard interactions (like <div> for a button) means the widget might lack inherent keyboard functionality.

For example, instead of creating a clickable div with ARIA, use a <button> tag. Buttons come with native keyboard functionality and don’t require extra scripting or attributes to work as expected.

Overuse of role and tabindex Attributes

Misusing role attributes can disrupt how screen readers interact with elements. For instance, assigning a role= "button" to a div won’t make it work the same way as a real button.

Similarly, improper use of tabindex can cause elements to jump around in an illogical order. Stick to the natural flow of the DOM, using tabindex= "0" only when absolutely necessary to keep the order in sync.

JavaScript-Dependent Behavior

ARIA widgets often rely on JavaScript to replicate native interactions, but these scripts must be meticulously coded and tested. A JavaScript error could render an entire widget inaccessible.

Testing your scripts thoroughly with keyboard-only navigation is essential, especially for ARIA widgets. Missing key events like “Enter” or “Escape” can trap users in a widget or make it difficult to interact with.

Best Practices for Creating Keyboard-Accessible Interactive Elements

To avoid these pitfalls and ensure that your site is truly keyboard accessible, follow these best practices:

Prioritize Native HTML Elements

Whenever possible, use native HTML elements for interactivity (like <button>, <a>, <input>, and <select>). They come with built-in accessibility and keyboard support, reducing the need for complex ARIA attributes or custom JavaScript.

Use ARIA Judiciously

Use ARIA only when there’s no HTML equivalent, like custom dropdowns or sliders. And if you do need ARIA attributes, implement them carefully with an understanding of their purpose. For example, use aria-expanded to indicate the open or closed state of a dropdown menu:
```
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id= "menu" hidden>
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
</ul>
```
Enable Logical Focus Management

Ensure that interactive elements maintain a logical and intuitive focus order. When creating modals or popups, use JavaScript to trap focus within the modal until it’s closed and then return focus to the last element interacted with:
```
const modal = document.getElementById("modal");
const lastFocus = document.activeElement;
// Trap focus within modal
modal.addEventListener("keydown", (e) => {
  if (e.key === "Tab") {
    // Logic to keep focus within modal
  }
});
// Restore focus after modal close
modal.addEventListener("close", () => {
  lastFocus.focus();
});
```
Include Skip Links

Skip links are simple yet effective. They allow keyboard users to jump directly to the main content, bypassing repetitive navigation menus. Add a skip link that appears when focused, like this:
```
<a href="#mainContent" class="skip-link">Skip to main content</a>
<main id="mainContent">
  
</main>
```
The Importance of Testing for Keyboard Accessibility

Testing is critical to achieving real keyboard accessibility. Use keyboard-only navigation to interact with your site, ensuring that each element responds to the Tab, Enter, and Escape keys appropriately. Here are a few tips for testing:
1. Turn Off Your Mouse: Try navigating your site using only the keyboard. See if you can reach every interactive element and complete all tasks.
2. Use Assistive Technology Simulators: There are free screen readers (such as NVDA or VoiceOver) that let you experience your website as a keyboard-only user would.
3. Run Accessibility Audits: Automated tools like Google Lighthouse or WAVE can catch many keyboard accessibility issues, but a manual review is still necessary.
Conclusion

Keyboard accessibility is a must for ensuring inclusivity on your website. By avoiding ARIA misuse and sticking to native HTML elements where possible, you’ll reduce barriers for keyboard users and create a smoother experience. Remember, ARIA attributes can enhance interactivity, but they aren’t a substitute for accessible design principles.

Testing with keyboard-only navigation will confirm that your site meets WCAG standards and shows your commitment to creating a web experience that everyone can enjoy—just in time for all your visitors to get the most out of your content and promotions. Reach out to 216digital using the contact form below if you’re unsure if your website is keyboard navigable.
Bobby

October 29, 2024

How-to Guides

ARIA, How-to, keyboard accessibility, web developers, web development
Accessibility Tips for Post-Remediation Success
Hey, content creators! Now that you’ve made great strides in remediating your website for accessibility, it’s time to consider how to keep that momentum going. Creating accessible content isn’t just a one-time effort—it’s an ongoing process. Let’s dive into some best practices that will help your team consistently produce accessible content and ensure your website is welcoming to everyone.

Why Accessibility Matters

Let’s take a moment to understand why digital accessibility is so important. Accessibility means making your content usable for people with disabilities. This can include those who are blind, deaf, or have mobility challenges. When you prioritize accessibility, you’re not just meeting legal requirements but also reaching a wider audience and showing that you care about all your users. This can lead to increased engagement, better SEO, and a positive brand image.

Training Your Team

The first step in creating accessible content is training your team. Everyone involved in content creation needs to understand the basics of accessibility. Consider hosting regular workshops or training sessions to cover key topics. Here are some essential areas to focus on:

Writing Alternative Text

Alternative text, or alt text, is a crucial part of accessibility. It describes images for people who can’t see them. When creating content, ensure your team knows how to write compelling alt text. Here are some tips:
- Be Descriptive: Alt text should describe the image accurately. Instead of saying, “A dog,” say, “A golden retriever is playing fetch in the park.”
- Keep It Concise: Aim for around 125 characters. Be descriptive, but don’t overwhelm the reader.
- Skip Decorative Images: If an image is purely decorative and doesn’t add value to the content, it’s best to leave the alt text blank.
Ensuring Proper Heading Structures

Proper heading structures not only help with readability but are also vital for screen readers. When creating web content, remind your team to use headings hierarchically. Here’s how:
- Use H1 for Titles: The main title of your page should always be an H1 tag.
- H2 for Subheadings: Use H2 tags for major sections and H3 tags for subsections. This creates a clear outline for users and helps them navigate your content.
- Avoid Skipping Headings: Don’t jump from H1 to H4 without using H2 and H3. This can confuse users and screen readers.
Creating Accessible Documents

When creating downloadable content like PDFs or Word documents, keep accessibility in mind as well. Here are some tips:
- Use Headings and Styles: Just like web content, use headings in documents to help structure the information.
- Add Descriptive Links: Ensure that links are descriptive. Instead of saying “click here,” use phrases like “read our accessibility guide.”
- Check Reading Order: In PDFs, the reading order matters. Use accessibility features in your document software to ensure the content reads logically.
Ongoing Review and Feedback

Creating accessible content doesn’t stop once you’ve trained your team. It’s essential to implement an ongoing review process. Here’s how to keep improving:
- Peer Reviews
  - Encourage team members to review each other’s content for accessibility. A fresh set of eyes can catch mistakes that might have been missed. Create a checklist for peer reviews that includes items like alt text, heading structure, and color contrast.
- Feedback from Users
  - If possible, seek feedback from users with disabilities. Their insights can help you identify areas for improvement that you might have yet to consider.
- Stay Updated
  - Digital accessibility guidelines can evolve, so it’s essential to stay informed about best practices. Consider subscribing to accessibility blogs or joining professional organizations that focus on digital accessibility.
Wrapping Up

Accessibility isn’t a one-and-done task—it’s an ongoing commitment that helps you maintain a more inclusive and user-friendly website for everyone. Keeping your content accessible means continually refining your approach, training your team, and staying proactive with the latest best practices. But don’t worry, you don’t have to do it alone! Tools like a11y.Radar make it easier to stay on top of accessibility long after your initial remediation. With real-time monitoring, you can catch issues as they arise, ensuring your website remains compliant and welcoming to all users. So, keep the momentum going and know that you’re building not just a compliant site, but a better experience for every visitor.
Greg McNeil

October 24, 2024

How-to Guides, Web Accessibility Monitoring

a11y.Radar, Accessibility, Accessibility monitoring, Accessibility Remediation, Web Accessibility Remediation
ADA Compliance: What You Can and Can’t Control

Let’s be honest—navigating ADA compliance can feel like a lot, especially when you’re managing a busy website. But the good news? There are plenty of things you can control that will make your site more accessible to everyone. By taking a few simple steps, you’ll create a better experience for users, expand your audience, and avoid potential legal issues.

In this guide, we’ll break down what ADA compliance is, explore some actionable steps you can take, and cover ways to handle the parts that might be out of your control. So, let’s roll up our sleeves and dive in!

What is ADA Compliance?

ADA compliance refers to following the guidelines set by the Americans with Disabilities Act (ADA), which was established to protect the rights of individuals with disabilities. While the ADA initially focused on physical spaces, it now extends to digital spaces like websites.

In simple terms, ADA compliance ensures that your website is usable for everyone—including people with visual, auditory, physical, or cognitive disabilities. The ADA works hand-in-hand with the Web Content Accessibility Guidelines (WCAG), which outline best practices for creating accessible digital content. Meeting these guidelines is not just about following the law; it’s about making your website open and welcoming to all users.

Website Design and Development

Making your website accessible starts with thoughtful design and smart development choices. Here’s how you can set the stage:

Use Semantic HTML

Think of HTML as your website’s blueprint. When it’s organized logically, it makes it easier for assistive technologies (like screen readers) to guide users through your site. Use clear headings, lists, and tags like <h1> for main headings and <h2> for subheadings. This way, your content isn’t just well-organized—it’s also easy for everyone to navigate.

Enable Keyboard Navigation

Not everyone uses a mouse to get around online, so make sure users can tab through your site smoothly. All interactive elements—buttons, forms, menus—should be accessible via keyboard alone. To test this, try navigating your site using only your keyboard. If you hit a dead end, that’s a sign something needs fixing.

Ensure Sufficient Color Contrast

Nobody wants to squint to read your content, especially users with visual impairments. Use strong color contrast between text and background, so everything is easy to read. The minimum recommended contrast ratio is 4.5:1 for regular text and 3:1 for larger text. Not sure if your colors are cutting it? Tools like WebAIM’s Contrast Checker can help you out.

Provide Descriptive Alt Text for Images

Images are great for grabbing attention, but if they’re not described properly, they can be a barrier for screen reader users. Make sure every image has alt text that explains what’s in the picture and why it’s there. Be descriptive—something like “Red winter coat with a 30% off discount tag” tells a much more straightforward story than just a “sale image.”

Ongoing Monitoring and Testing

Getting your website accessible isn’t a “set it and forget it” deal. It’s more of an ongoing process that keeps your site up to standard:

Conduct Regular Accessibility Audits

Use tools like WAVE or Lighthouse to scan your site regularly for potential accessibility issues. These tools are like your website’s personal trainers—they’ll point out areas that need improvement, like missing alt text or insufficient color contrast.

Engage in User Testing

Automated tools are great, but there’s no substitute for feedback from real users—especially those with disabilities. Invite them to test your site and pay close attention to what they say. Their insights can reveal accessibility gaps that you might not have noticed.

Content Management and Regular Updates

Content is a big part of ADA compliance. Here’s how to keep it accessible and user-friendly:

Provide Content in Accessible Formats

PDFs and Word files are common on websites, but they’re not always easy for assistive technologies to read. Try converting documents to HTML or using accessible PDF tools to ensure everyone can engage with your content.

Keep Content Updated

Just like fashion, accessibility standards change over time. Make a habit of revisiting older content—blog posts, documents, even videos—to ensure they still meet current accessibility standards.

Avoiding Overlays

It can be tempting to install a quick-fix accessibility overlay, especially if you’re short on time. But here’s the thing: overlays often don’t solve the real issues. In fact, they can create more problems for users who rely on assistive technology. The better approach? Make direct changes to your website’s code, design, and structure for more meaningful accessibility improvements.

What You Can’t Control: Third-Party Content and Vendors

Even if you make your website as accessible as possible, certain elements are out of your direct control. But don’t worry—there are still ways to manage these challenges:

Third-Party Plugins and Widgets

Plugins and widgets can boost your site’s functionality, but they can also introduce accessibility barriers. Before installing any third-party tools, check their accessibility features and look for compliance documentation.

Content Management Systems (CMS)

Depending on the CMS you’re using—like WordPress, Shopify, or Squarespace—you might run into accessibility limitations. Whenever possible, choose accessible themes and templates, and use plugins that enhance rather than hinder site accessibility.

Outsourced Web Development and Content Creation

If you hire developers or content creators, make sure ADA compliance is part of your project requirements. Set clear expectations and conduct follow-up audits to ensure everything meets accessibility standards.

User-Generated Content

Comments, reviews, and user-generated content are valuable for your site but can pose accessibility challenges. Moderate content when possible and encourage users to follow basic accessibility guidelines, like adding alt text to images they post.

Strategies for Managing What You Can’t Control

While some aspects are beyond your control, there are ways to work around them:

Vetting and Selecting Accessible Vendors

When choosing third-party vendors or services, go with those that have a reputation for accessibility. Look for vendors that provide compliance documentation and are willing to help with accessibility support.

Adding Disclaimers and Providing Alternatives

If you have third-party content that might not be fully accessible, consider adding a disclaimer to inform users. Offer alternatives, like accessible document formats or a contact method for users who need assistance.

Foster Communication and Collaboration

ADA compliance works best when everyone’s on the same page. Encourage open dialogue about accessibility with your team, developers, and third-party partners. When everyone understands its importance, it’s easier to make your site truly inclusive.

Conclusion

Making your website accessible doesn’t have to be intimidating. By focusing on what you can control and actively managing third-party elements, you can create a site that’s welcoming to everyone. Plus, it’s not just about avoiding legal risks—it’s about building a better experience for all your users.

So, take it one step at a time. As you make improvements, you’ll reach a wider audience and create a more inclusive online space. And if you’re unsure about where your site stands, don’t hesitate to reach out to experts like 216digital for a free accessibility review. You’ve got this!

Greg McNeil

October 23, 2024

How-to Guides, Testing & Remediation

Accessibility, ADA Compliance, ADA Website Compliance, Website Accessibility
5 Accessibility Mistakes to Dodge This Holiday Season
Many eCommerce businesses make most of their income during the holiday shopping season, so your website must perform to the best of its ability during the Black Friday and Cyber Monday promotions. Web Accessibility is probably the last thing on your mind when you’re already in a frenzy to ensure you’re maximizing every visit to your website. However, you may be leaving money on the table or making yourself vulnerable to expensive litigation if you don’t stay diligent with your digital inclusivity.

For many customers—especially those with disabilities—shopping online is their primary option. If your website isn’t accessible, you’re alienating a significant portion of your audience (up to 20%) and potentially violating the Americans with Disabilities Act (ADA).

To help you prepare for the holiday rush, let’s go over five common web accessibility mistakes businesses make during holiday promotions and how you can avoid them.

Insufficient Alt Text for Images

Holiday promotions often rely on eye-catching images, banners, and product displays. However, if those images lack appropriate alt text, customers using screen readers won’t be able to understand their content. Alt text (short for alternative text) provides a textual description of an image that’s accessible to screen reader users.

Why It Matters

Alt text is essential for individuals with visual impairments. If a visually impaired customer is browsing your site and encounters an image without a proper description, they’ll have no idea what’s being displayed. Imagine running a huge Black Friday sale, but your best deals are hidden from a portion of your audience simply because your images aren’t described.

How to Fix It

As you add promotional banners and products to the website, always make sure you’re adding alt text to the images. Here’s an example:
```
<img src=" winter-sale-banner.jpg" alt=" Banner for Winter Sale - Up to 50% off jackets and coats">
```
Do not use image file names or vague text such as “sale-img” or “Sale Image”. Make sure the alt text contains enough information that the user understands the purpose of the image and contains any words that appear on the image.

Poor Color Contrast

With holiday promotions comes festive design—bright colors, eye-catching buttons, and themed decorations. While these designs may look great, they often fail color contrast standards. Having adequate color contrast is not only good for color-blind users, but it also makes the website easier for everyone to navigate.

Why It Matters

According to WCAG, the minimum contrast ratio between text and background should be at least 4.5:1 for normal text and 3:1 for larger text. When the contrast is too low, customers with low vision or color blindness may struggle to read important information, such as product details or discount codes.

How to Fix It

Use tools like the WebAIM Contrast Checker to ensure your color choices meet the WCAG contrast ratio guidelines. For example, a light gray text on a white background will likely fail the contrast test, but switching to a darker gray or black can make a big difference.

Here’s an example of a common mistake and how to correct it:
```

<p style="color: #cccccc; background-color: #ffffff;">50% off all products!</p>

<p style="color: #000000; background-color: #ffffff;">50% off all products!</p>
```
Pay attention to your text color, button colors, and even the contrast of smaller elements like icons.

InaccessibleNavigation and Controls

Most store owners don’t consider that some users do not navigate their website with a mouse. Even some users without disabilities prefer to use other input methods to quickly navigate some sections of your website.

Why It Matters

Blind and motor-impaired users rely on the keyboard, gestures, or voice commands to navigate your website. If your navigation, contact forms, category filters, and product pages are not properly coded to support these input methods, these users will be denied equal access to the website and may not be able to make a purchase with you at all, losing you a valuable customer and potentially damaging your reputation.

How to Fix It

Regularly test the functional portions of your website with a keyboard. Attempt to start at the homepage, navigate to a category page, use the category filters, add/remove product quantities, and select product options without your mouse. If you encounter a problem with an element, it’s likely not coded using the correct element. You can force an element to receive keyboard focus using the tabindex attribute. The role="button" attribute will help users navigating with assistive technology better understand the purpose of the control:
```
<span class="swatch-button" tabindex="0" role="button">Beige</span>
```
Better yet, use the correct semantic HTML tag to accomplish this:
```
<button class="swatch-button">Beige</button>
```
Semantic HTML helps users relying on assistive technology understand the purpose of controls and also helps Google better understand the structure of your website:
```
<nav>
	<a href="/products">All products</a>
	<a href="/products/sale">Sale products</a>
	<a href="/contact">Contact Us</a>
</nav>
```
Missing Captions on Promotional Videos

Videos are an excellent way to showcase products, promote deals, or explain services during the holiday season. However, many businesses forget to include captions, making the content inaccessible to users who are deaf or hard of hearing.

Why It Matters

Videos contain a lot of important information in the form of spoken words and visual cues. Both blind and deaf users rely on accessible closed captions (not just subtitles) to understand the content of the video. Also, some users may be in noisy environments and are unable to hear the video.

How to Fix It

Most popular video platforms have auto-captioning features, but these tend to just subtitle the video rather than create truly accessible closed captions. There are many cheap and easy closed captioning services, such as Rev.com, that have quick turnarounds.

Here’s how you implement closed captions from an external service:
```
 <video controls>
  <source src="promo-video.mp4" type="video/mp4">
  <track kind="captions" src="captions_en.vtt" srclang="en" label="English">
  Your browser does not support the video tag.
</video>
```
Always test the captions to make sure they sync properly with the video and cover both spoken dialogue and important sound effects.

Over-reliance on Automated Accessibility Overlays

It might seem tempting to use automated accessibility overlays, especially during the hectic holiday season. These are often marketed as one-click solutions to make your website accessible. The Department of Justice has issued clear guidance that these solutions are inadequate in addressing web accessibility, and they may get you targeted with litigation.

Why It Matters

Automated accessibility overlays claim to fix all accessibility issues on a website, but they usually fail to address the root problems. Blind users are outspoken that they dislike these solutions as they tend to interfere with the assistive technologies they’re already comfortable with. We’ve also seen these solutions specifically called out in lawsuits as a reason for being targeted.

How to Fix It

The best way to ensure your site is accessible is by addressing the core issues in your code and design. Automated tools can help identify problems, but manual reviews and fixes are essential. Invest in manual audits and focus on meeting the WCAG guidelines through thoughtful design and coding practices.

Here’s an example of using a reliable method instead of relying on an
```

<img src= "holiday-product.jpg" alt= "Red winter coat with a 30% off discount tag">
```
Automated tools tend to use AI to label images and controls and often misrepresent content on the website, leading to a potentially overtly harmful experience.

Conclusion

As you gear up for holiday promotions, make sure accessibility is at the top of your checklist. By avoiding these common mistakes—insufficient alt text, poor color contrast, inaccessible navigation, missing captions, and over-reliance on automated tools—you’ll ensure that your website is welcoming and easy to use for everyone.

Not only does improving web accessibility help you reach a wider audience, but it also protects your business from legal risks and ensures compliance with WCAG and ADA standards. Taking the time to implement these changes now will pay off during the holiday rush and beyond.

If you’re unsure about the accessibility of your site, reach out to 216digital using the contact form below for a free evaluation.
Bobby

October 21, 2024

How-to Guides, Legal Compliance

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

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

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

What is Semantic HTML?

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

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

Why Semantic HTML is Critical for Accessibility

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

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

Helping Screen Readers Navigate Your Website

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

Let’s compare:

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

Structured Navigation for All Users

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

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

How Semantic HTML Improves SEO

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

Better Crawling and Indexing

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

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

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

Use the Right Tag for the Right Purpose

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

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

Combine Semantic HTML with ARIA Roles

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

Align with WCAG Guidelines

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

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

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

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

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

Conclusion

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

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

October 18, 2024

How-to Guides

How-to, HTML, semantic HTML, WCAG, Web Accessibility, web development
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

Understand and Set Your Accessibility Goals

Audit Your Website for Accessibility Gaps

Ensure Keyboard Navigation is Intuitive

Implement Proper Use of Alt Text for Images

Ensure Sufficient Color Contrast

Use Semantic HTML Structure

Test with Assistive Technologies

Incorporate Accessible Forms

Conduct Remediation Based on Prioritized Issues

Implement Continuous Monitoring with Tools Like a11y.Radar

Conduct Routine Manual and Automated Testing

Keep Up-to-Date with WCAG Guidelines

Take the First Step Towards Accessibility

What Are Touch Targets and Why Are They Important?

WCAG Guidelines: Key Standards for Touch Target Size

Success Criterion 2.5.5 (Target Size)

Success Criterion 2.5.8 (Target Size – Enhanced)

Best Practices for Designing Accessible Touch Targets

Use Adequate Padding and Margin

Ensure Minimum Width and Height

Space Out Interactive Elements

Add ARIA Attributes for Enhanced Accessibility

Responsive Design: Ensure Touch Target Size Across Devices

Testing Touch Target Accessibility

Wrapping Up

Why Accessibility in React Matters

Setting Up an Accessibility-Friendly Development Environment

Installing eslint-plugin-jsx-a11y

The Power of Semantic HTML in React

Examples of Semantic HTML in React

Avoid Using <div> and <span> for Interactive Elements

Enhancing Accessibility with ARIA Roles (But Use Them Wisely)

Using aria-label for Accessibility

Dynamic Updates with aria-live

Keyboard Accessibility and Focus Management

Setting Focus with useRef and useEffect

Avoiding Focus Traps

Best Practices for Accessible Interactive Elements

Provide Clear Labels for Inputs

Accessible Modals

Testing Focus

Managing Screen Reader Navigation in SPAs

Example: Setting Focus on Page Updates

Testing Your React App for Accessibility

Conclusion

Why Testing with a Screen Reader Matters

Common Accessibility Barriers

Getting Started with NVDA

Understanding the Basics of NVDA

Key Shortcuts to Know

Testing for Accessibility Barriers with NVDA

Check Your Navigation Structure

Confirm Image Descriptions

Test Interactive Elements Like Forms

Common Accessibility Barriers to Watch For

Documenting What You Find

Trying Out Other Screen Readers

Making Accessibility Part of Your Process

Wrapping Up

Why Keyboard Accessibility Matters

Common Barriers to Keyboard Accessibility

Lack of Focus Indicators

Improper Tab Order

Focus Traps

ARIA Widgets and Their Challenges

Why ARIA Widgets Often Fail

Reliance on ARIA Without Semantic HTML

Overuse of role and tabindex Attributes

JavaScript-Dependent Behavior

Best Practices for Creating Keyboard-Accessible Interactive Elements

Prioritize Native HTML Elements

Use ARIA Judiciously

Enable Logical Focus Management

Include Skip Links

The Importance of Testing for Keyboard Accessibility

Conclusion

Why Accessibility Matters

Training Your Team

Writing Alternative Text

Ensuring Proper Heading Structures

Installing `eslint-plugin-jsx-a11y`

Avoid Using `<div>` and `<span>` for Interactive Elements

Using `aria-label` for Accessibility

Dynamic Updates with `aria-live`

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