8 Website Issues that Accessibility Widgets Can’t Fix, and How to Really Fix Them
Bad website design, badly coded website themes, and bad content entry can all lead to accessibility issues on your website. While it may be tempting to use a product that promises to quickly and easily make your site “ADA compliant”, there are many issues that these products cannot fix. In fact, businesses that operate websites containing these widgets are frequently sued for the lack of accessibility.
What is an Accessibility Widget?
Accessibility widgets, also called overlays or toolbars, insert a set of controls and settings on an individual website that a site visitor can use to customize the way they visually experience the website. This includes the ability to change the font size, colors, and color contrast. Most of these products will allow you to hide images and stop animations on the page. One product offers its own screen reader that will verbally read out the content of the web page.
So, what’s the problem?
- These products are not necessary. Users who want to change the font size, color scheme, or color contrast on a website can already do this through their browser settings to control these aspects on all websites, not just the ones that have these widgets. Accessibility widgets can interfere with a user’s browser settings, making it harder, not easier, to use a site.
- These products introduce new problems. For those who use screen readers to access websites, these products interfere with screen reader functionality, again making websites less usable.
The general recommendation from the accessibility community is to avoid the use of accessibility widgets. So what should you do instead? To create a website that can be used by the largest number of people, make sure your site meets the current version of the Website Content Accessibility Guidelines.
What are Website Content Accessibility Guidelines?
Website Content Accessibility Guidelines (WCAG) are an international standard created by the W3C to help create more accessible websites. These guidelines are aimed at making websites more “perceivable, adaptable, operable and robust” for all users, including those who use screen readers and other assistive technologies to interact with websites. WCAG success criteria are divided into three tiers, with A being the least strict and AAA being the strictest. Most sites aim to comply with level AA, which currently includes 54 separate success criteria that must be met.
Code and Content Issues Not Fixed By Accessibility Widgets
Because so many website accessibility issues are caused by the underlying code of the website or content that was added to the site, the best solution is to fix the underlying issue, which widgets can’t do. Below are examples of some of the most common website accessibility issues that widgets cannot fix and what you should do instead. This is by no means a comprehensive list.
1. Accessibility Widgets Can’t Fix Missing Alt Text
WCAG requires text alternatives for non-text content, with some specific exceptions. If an image is for “pure decoration”, alt text is not required. Otherwise, the image needs alt text that describes the image. Accessibility widgets do not currently generate alt text for images. While this could be possible in the future with AI, how accurate will that text be and how will they distinguish between images that need alt text and ones that are only for decoration? Additionally, widgets cannot fix issues where the image itself contains a large amount of informational text that is not otherwise included in the content of the page.
What to do instead: Add alt text to your non-decorative images, especially e-commerce product images. For e-commerce product images, make sure to describe features that a sighted user would know just by looking at the image (ie. t-shirt with pocket on the top left). Don’t include informational text as part of the image without also providing that same information in the text-based content.
2. Accessibility Widgets Don’t Add Captions and Transcripts
WCAG requires captions and transcripts for all video and audio content. Some accessibility widgets are starting to offer additional paid services to create captions and transcripts, but this is not part of their core product.
What to do instead: Create your own captions and transcripts or contract with a service provider that specializes in this area.
3. Accessibility Widgets Can’t Fix Form Labels and Error Handling
WCAG includes at least 10 different success criteria related to forms and how they behave. Accessibility widgets cannot do anything to address these requirements, which include:
- visible labels for all fields (not just placeholder text)
- clear and specific error messages directly associated with the field where the error exists
- visually and programmatic indicators for all required fields
- ability to use autocomplete and password managers to fill out fields
- ability to review submissions before completing forms that “that cause legal commitments or financial transactions”
What to do instead: If you are not able to generate your own custom, compliant form code, use a well-regarded form tool provider. Gravity Forms is my go-to for creating accessible forms on WordPress sites. Even then, you still need to fully test your forms to make sure they meet all the applicable requirements.
4. Accessibility Widgets Can’t Fix Headings
WCAG includes multiple success criteria related to the sequence of content and how HTML headings are used. The proper use of HTML headings in a document provides a logical structure to the content, similar to an outline. Headings are ordered and hierarchical. Unfortunately, headings are often used incorrectly as a way to apply a visual style to text. Using headings out of sequence can create a confusing experience for someone using a screen reader. But this is not something an accessibility product could easily fix since they don’t understand your content.
What to do instead: Use HTML headings in your content and website templates to provide structure and meaning, not to apply visual style. Use headings in a logical order.
5. Accessibility Widgets Won’t Fix Ambiguous Links
WCAG bars the use of “ambiguous” link text. In the same way sighted users may scan a page to get a sense of the content, screen reader users may “scan” a page by having the screen reader announce all the links on a page. Hearing a series of “Read More” links is not helpful and is not something an accessibility widget is going to fix.
What to do instead: If you have control over your website templates, you can programmatically add an aria-label attribute to your links with more meaningful text, such as “Read More” followed by the title of the article. Some website editing tools allow you to define aria-label values directly when creating the page. Another option is to remove “Read More” links entirely and just use the title of the article as the link. This option works for all users and is good for SEO.
6. Accessibility Widgets Can’t Fix Keyboard Usability
WCAG requires that users can fully operate a website using only a keyboard. All interactive elements must be accessible using only the TAB, ENTER, arrow, and ESC keys. This applies to opening/closing all navigation menus, advancing carousels and sliders, opening/closing tabs and accordions, playing/stopping audio and video elements, completing and submitting forms, opening/closing popups, and clicking links. If your site is not coded for a keyboard to perform all these functions, accessibility widgets will not resolve those issues.
What to do instead: These interactive features can be tricky to get right for accessibility. First, consider if these features are truly necessary on your website or if the information can be presented some other way. If you feel that your site truly requires advanced interactive elements, work with a knowledgeable web developer or use a well-regarded theme to provide these tools and then test extensively.
7. Accessibility Widgets Can’t Fix Non-Visible Content
With the release of WCAG version 2.2 in October 2023, there is now a requirement that content be at least partially visible on the screen when it has focus. This helps orient keyboard-only users to where they are within the page content. The most common failure I’ve seen for this is a carousel of content where the content that is not on the screen is still reachable by keyboards and screen readers. Widgets cannot change the coding or behavior of these carousel tools (which are often provided by yet another third party).
What to do instead: Again, consider if a carousel is really necessary on your site. UX research has shown very low rates of users clicking through to the other slides. If you must use a carousel, work with a developer or tool provider with proven experience in making accessible sliders and carousels.
8. Accessibility Widgets Can’t Fix the Size and Spacing of Clickable Elements
As of WCAG 2.2, there are specific requirements for the size and spacing of clickable elements to prevent a user from inadvertently clicking the wrong item. Because the requirements are complex, somewhat situation-dependent, and have to do with the underlying website code and styling, there’s no way a widget can fix this type of issue.
What to do instead: Avoid designing buttons and icon links that are small and/or very close together. Download this helpful bookmarklet to easily see if your clickable elements are at least 24px X 24px.
Summary
If you are trying to create a website that meets WCAG guidelines for ADA compliance, accessibility widgets are not the solution. There’s no “get compliant quick” solution for website accessibility. The only true path to website accessibility is good design, good code, good content entry, and diligent, ongoing testing.
Website Accessibility Services
If you would rather let someone else make your website accessible, Elevage Digital offers Website Accessibility Audit, Remediation, and Accessible Website services. Request a Quote today to start the conversation.