216digital.
Web Accessibility

Phase 1
Web Remediation for Lawsuit Settlement & Prevention


Phase 2
Real-World Accessibility


a11y.Radar
Ongoing Monitoring and Maintenance


Consultation & Training

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

Web Design & Development

Marketing

PPC Management
Google & Social Media Ads


Professional SEO
Increase Organic Search Strength

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

About

Blog

Contact Us
  • The Hidden Accessibility Barriers in Popular Plugins

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

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

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

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

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

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

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

    Common Accessibility Barriers in Popular Plugins

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

    1. Poor Keyboard Navigation

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

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

    2. Lack of ARIA Landmarks and Roles

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

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

    3. Inconsistent Focus Indicators

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

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

    4. Non-Semantic HTML and Improper Heading Structure

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

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

    5. Missing or Incorrect Alt Text

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

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

    WCAG Guidelines: How Plugins Often Fall Short

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

    Perceivable

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

    Operable

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

    Understandable

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

    Robust

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

    How to Handle Inaccessible Plugins

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

    1. Evaluate the Plugin for Accessibility Barriers

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

    2. Consider Replacing the Plugin with an Accessible Alternative

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

    3. Reach Out to Plugin Developers

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

    4. Use ARIA Landmarks and Roles to Improve Plugin Accessibility

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

    5. Test Regularly with Accessibility Tools

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

    Plugins Are Powerful—But Watch Out for Hidden Barriers

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

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

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

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

    Greg McNeil

    October 7, 2024
    How-to Guides, Legal Compliance
    ADA Compliance, plugins, Web Accessibility, web development, website plugins
216digital Scanning Tool

Audit Your Website for Free

Find Out if Your Website is WCAG & ADA Compliant













    216digital Logo

    Our team is full of expert professionals in Web Accessibility Remediation, eCommerce Design & Development, and Marketing – ready to help you reach your goals and thrive in a competitive marketplace. 

    216 Digital, Inc. BBB Business Review

    Get in Touch

    2208 E Enterprise Pkwy
    Twinsburg, OH 44087
    216.505.4400
    info@216digital.com

    Support

    Support Desk
    Acceptable Use Policy
    Accessibility Policy
    Privacy Policy

    Web Accessibility

    Settlement & Risk Mitigation
    WCAG 2.1/2.2 AA Compliance
    Monitoring Service by a11y.Radar

    Development & Marketing

    eCommerce Development
    PPC Marketing
    Professional SEO

    About

    About Us
    Contact

    Copyright 2024 216digital. All Rights Reserved.