The number one goal of website and digital accessibility is ensuring that all individuals with disabilities can fully and equally participate in online content. However, many websites continue to face significant accessibility hurdles. For example, over 96% of the world’s top one million web pages are not accessible .
Also, a whopping 98% of websites do not comply with the WCAG version 2.1., making identifying common accessibility errors and improving access for people with disabilities of utmost importance.
Addressing website accessibility issues—such as keyboard navigation, color contrast, missing alt text, and content structure problems, can make a world of difference for individuals with disabilities who need accessible websites.
Learning more about common website accessibility issues with a nod to keyboard navigation, color contrast, missing alternative text, and dozens of other quality of life changes can transform how individuals with disabilities interact with websites and mobile applications.
Common Website Accessibility Issues
Here’s a quick breakdown of the most common website accessibility issues, including detailed descriptions, known accessibility remedies, and more:
Bad Keyboard Navigation
One of the most challenging accessibility issues for individuals with disabilities is the lack of efficient keyboard navigation, particularly for those with mobility impairments who rely on keyboard-based navigation to perform all functions on a webpage. A keyboard can be much more accessible than a mouse, which often requires hand dexterity.
One best practice is to ensure that the Tab key can be used to access the most used interactive elements, such as buttons and forms. Additionally, a visible indicator should highlight the current selection, making it easier to track the user’s focus, regardless of where the mouse cursor is on the page.
Accessibility tools can help ensure that every field on a website or mobile application can be accessed via keyboard navigation.
Accessibly addresses keyboard navigation issues by providing clear focus indicators for interactive elements, making it easier for individuals with disabilities to see what they are selecting. Another helpful feature is the option to skip content links, allowing screen reader users to bypass unnecessary navigation menus.
In short, any website that relies heavily on mouse clicks to navigate offers a poor web accessibility experience. Websites should prioritize keyboard navigation, especially when it comes to completing forms or accessing essential interactive elements.
Color Contrast Problems
Two popular tools used to identify color contrast problems are Accessible and Color Oracle, with the latter offering simulations of how people with different types of color blindness perceive web page colors, along with suggestions for appropriate foreground and background colors.
For example, light gray text on a light pink background violates WCAG guidelines. That’s why we recommend using accessibility overlay tools like Accessibly, which allow screen reader users to instantly adjust text and background colors on the website according to their comfort level.
Plus, the app offers real-time feedback with instant contrast evaluation, ensuring that web designers understand exactly what needs to be adjusted to meet accessibility standards.
Missing Alt Text for Images
For visually impaired screen reader users, missing alternative text for images can prevent them from fully understanding the content. Third-party devices like screen readers rely on the alt attribute to interpret and read images aloud for the visually impaired.
By using the alt attribute within HTML code, each image on the website can have a descriptive text that conveys its content. Remember, WCAG calls for alternative text to be as descriptive as possible. For example, an image of a brown fox jumping over a log should include well-written alt text, such as: “A brown fox leaping gracefully over a log beside a massive lake,” which is much more descriptive than simply writing “fox jumping.”
Another feature we appreciate about web accessibility tools is their ability to edit multiple images at once. This makes it much easier for developers to quickly update an entire website’s images with accurate alt text.
Lastly, Accessibly provides plenty of guidelines and best practices for creating compelling alternative text, helping ensure it is both concise and descriptive.
Bad Modal Dialogs
An often overlooked area in web accessibility design is poor modal dialog design, which can impair keyboard navigation and screen reader compatibility. Other issues caused by bad modal dialogs include insufficient visual cues, making it difficult to distinguish between different sections, titles, or other website elements.
Approximately 15% of the global population has some form of disability, so addressing these issues can improve retention rates, lower bounce rates, and positively impact other key performance indicators that help your business or organization thrive.
Bad Menus
Another area of concern in web accessibility is inaccessible navigation menus. All assistive technology users, such as those relying on screen readers and touch interfaces, use these technologies to navigate menus.
For example, the aria-haspopup=”true” command indicates that a menu option has more than one option.
Fortunately, web developers can implement ARIA rules and properties on site elements and use automated testing tools like WAVE and Axe to identify these issues early in the development process.
With the Accessibly website accessibility overlay widget, you can rely on contextual feedback and other recommendations for error messages. Sometimes, more descriptive language is required. Additionally, the app highlights error messages that do not meet standards, such as improper labeling.
Lastly, Accessibly offers real-time feedback on error validation and ARIA attributes, ensuring that dynamic content is read correctly by assistive technologies like screen readers and magnifiers.
Bad Error Messages
Error messages can make or break a website. Providing clear and helpful feedback is essential when users interact with elements or they may encounter frustration. We recommend using ARIA attributes like aria-invalid=”true” and aria-describedby to notify users when they’ve made an error, along with a suggestion, e.g., “Please enter your first and last name.”
Form Field Label Issues
One of the most common web accessibility issues involves accessible form fields. It’s important to understand what accessible form fields require. Assistive technology, such as screen readers, offers insight into how to fill out forms by reading out each corresponding label element for fields like name, email, message, and other required labels.
Remember, abandonment—especially on checkout pages—can decrease site traffic, lower average revenue per order, and negatively impact numerous other key performance indicators that reflect your business’s health. With approximately 15% of the world’s population experiencing partial or total disabilities, every website visitor counts!
One of our favorite tools for ensuring proper labeling on websites and mobile applications is Axe. It’s a powerful assistive technology tool that checks whether every input field in a form has a corresponding <label> element, which is necessary for screen readers to interpret the fields properly. Additionally, we appreciate Axe’s detailed reporting, which outlines web accessibility issues with descriptions and steps for resolution.
No discussion of form field label correction is complete without mentioning Accessibly. Accessibly can help by conducting menu structure audits to ensure the hierarchical structure is correct and that all menus are keyboard-navigable.
In addition, ARIA roles and properties should be optimized so that screen readers can effectively interpret and present dynamic content to individuals with disabilities.
Video and Multimedia Accessibility
Individuals with hearing or vision impairments can take advantage of several accessible features like captioning and audio descriptions. This allows people with low vision, blindness, hearing loss, or those who are deaf to fully engage with and participate in all content.
There are numerous tools available for adding these features, including Amara and YouTube’s automatic captioning tools, which content creators can edit.
Today, much of the content can be converted into accessible formats, such as audio captioning, which is especially important for videos that would otherwise prevent a large percentage of the deaf or hard-of-hearing population from fully understanding the material.
For web accessibility, there is robust support for video and multimedia features, including automated captions for videos, caption editing tools, subtitles, transcripts, and audio descriptions that describe everything happening in the video.
In short, if your website or mobile application requires captions or audio descriptions, Accessibly will let you know.
Inaccurate Heading Structure
Another area where websites often struggle is maintaining a consistent structure for headings. Individuals with disabilities rely on well-structured content with logical sequences, using proper headings such as H1, H2, H3, etc. This helps users quickly access the key content.
Similar to form field labeling issues, accessibility checkers like WAVE do an excellent job of identifying problems with heading structures and providing suggestions for improvement. For example, the tool will flag pages with too many H3 tags, missing headings, or similar issues.
Without a consistent heading structure, navigation becomes much more difficult for users, especially those relying on screen readers.
As a best practice, accessibility standards call for a single H1 tag for the main page title, H2 tags for major sections, and strategic use of H3 and H4 tags based on the content’s structure.
Remember, never skip heading hierarchy, as this can confuse assistive technology like screen readers.
A Word on the Americans with Disabilities Act
Undoubtedly, the most significant piece of legislation aimed at improving the lives of individuals with disabilities, the Americans with Disabilities Act (ADA) ensures that businesses and organizations adhere to accessibility best practices. Primarily, it requires the creation of accessible interactive content (e.g., captioned video content) and other necessary accessibility aids, based on the needs of the target audience.
The ADA’s provisions on accessibility best practices are guided by the Web Content Accessibility Guidelines (WCAG), which provide a comprehensive set of instructions for website owners to improve accessibility and address related issues. These guidelines include applying appropriate contrast ratios, ensuring readable PowerPoint presentations, ensuring compatibility with assistive technology, and providing proper keyboard-only navigation (such as visible focus indicators on online forms) for individuals with disabilities.
Ways to Resolve Accessibility Issues
Following the Web Content Accessibility Guidelines (WCAG), here are our favorite solutions for addressing the most common accessibility issues:
Implementing Keyboard Navigation
Per WCAG guidelines, all interactive elements on a web page must be fully accessible using no more than a few keyboard shortcuts, like the Space key. Additionally, focused elements must have visible indicators for greater readability.
Two of our favorite tools for identifying and fixing keyboard navigation issues are WAVE and Keyboard Accessibility Checkers. These tools provide visual feedback on web pages and analyze a website’s ability to work well with keyboard navigation alone. Is there an inaccessible form element or two? Get a complete assessment with either of these keyboard accessibility checkers.
High Contrast Text and Background
One of the best ways to ensure proper color contrast ratios on a website is to use an accessibility overlay like Accessibly for visually impaired users. Accessibly does an excellent job of suggesting optimal contrast ratios. Plus, Color Oracle provides a complete view of how users with varying degrees of color blindness see to better interpret your webpage or mobile application colors.
We always advocate for the recommended 4.5:1 for standard text and 3:1 for larger text and several alternative color combinations that can transform how the dyslexic read and interpret content.
Adding Alt Text to Images
One of the best tools for evaluating alt text for images on your website is WAVE. It analyzes a web page and highlights any missing or poorly written alternative text for images. It also ensures compatibility with third-party assistive devices like screen readers and magnifiers.
Be sure to catch missing alt text on images the next time you conduct a full accessibility audit, which can check everything from missing link text to broken data tables. Even correcting contact forms and remediating inaccessible documents should be part of your audit. If you’re a frequent screen reader user, you’ll find this especially useful.
Correctly Labeling Form Fields
Axe and WAVE are two of our favorite tools for correctly labeling form fields and addressing other common web accessibility issues.
For example, Axe automatically scans a web page to identify accessibility issues in real-time. Developers can then generate visual reports that highlight the problem areas. These areas are clickable, allowing developers to see exactly what adjustments need to be made to the site’s code.
Providing Captions and Transcripts for Media
In order to better access and navigate web content, visually impaired users with various types of visual impairments can benefit from accompanying audio descriptions, with the option to add subtitles and adjust caption timing to ensure proper synchronization with the spoken word.
One of the best tools for creating captions and transcripts for media is ARIA, which allows users to create and edit video captions. We also appreciate YouTube’s built-in captioning tool, which enables users to add and edit captions directly on the platform for accuracy before launching their channel or video.
For regular multimedia accessibility audits, consider using website accessibility overlay widgets like Accessibly to integrate accessibility into your daily routine. You can build an accessible website by following best practices for contrast ratios, visual content, voice recognition software, row or column headings, text and background colors, and hundreds of other accessibility improvements you can make on websites and mobile applications.
Using Semantic HTML and Proper Headings
You should use semantic HTML and a proper heading hierarchy. With correctly structured HTML, devices like screen readers can help visually impaired users identify elements and navigate content more effectively.
Proper headings (e.g., H1, H2, etc.) allow users to quickly jump to key sections, reducing the time spent searching for information.
As a best practice, avoid using generic <div> or <span> tags when possible. Instead, use semantic tags such as <nav> for navigation and <header> for page headers, which provide a more logical structure. One of our favorite tools to check for accurate heading structure is WAVE.
Keep in mind that color cues alone are often insufficient, especially for colorblind users. Visual cues, such as icons or underlines, are more effective than relying on color alone to distinguish content.
For links, buttons, and other website elements, avoid differentiating them by color alone. Ensure you use proper semantic elements so screen readers can convey the purpose of buttons and other interactive elements without relying on color.
Accessibly for the Color Blind
The Accessibly accessibility widget for websites provides color-blind and visually impaired users with new ways to fully and equally engage with website content.
It allows users to add alt text to images, adjust color contrast, and more—making content significantly more readable. Plus, it’s compatible with assistive technologies such as screen readers and supports users on nearly all accessibility needs, including keyboard navigation and image alt tag issues. In addition, you may opt into grayscale mode, which strips all colors from a web page.
Other features include customizable color filters, high-contrast text and background color options (with a color contrast checker), and individual indicators on web pages. These indicators may incorporate borders or icons to highlight essential elements. To support a range of colorblind combinations—from red-green to blue-yellow—we apply optimal color choices.
By addressing common accessibility issues with Accessibly, website owners can create a more inclusive website for a diverse user base, including those with cognitive impairments and hearing disabilities. Additionally, voice recognition software enables individuals with disabilities to navigate and interact with web content independently.
With Accessibly, you can take advantage of a free 7-day trial with full access to all features. A small code snippet is all that’s needed—simply add it to your site, or use native integration options for WooCommerce, Shopify, or WordPress.
Help improve ADA and WCAG compliance, minimize legal risks, and promote inclusivity. Download the Accessibly widget today to ensure equal access for all users.
Let’s solve all your website’s accessibility needs today!
