Most website owners know that web accessibility is a fundamental human right. Besides, having an ADA-compliant website ensures your website reaches more than 1 billion people with disabilities. Similarly, the best practices for resolving accessibility issues, comply with other business goals like SEO, usability, and mobile-friendly designs.
Web accessibility lets people with cognitive disabilities, vision-impaired people, and other problems quickly access online content. And it is possible through content that works with assistive technology like screen readers, customized joysticks, and alternative keyboards.
Besides, according to the world wide web consortium, websites that do not adhere to the web content accessibility guidelines end up with a lawsuit.
You do not have to worry if you don’t know where to begin to find out if your website is ADA-compliant or not.
You can start by checking out how accessible your existing website is before opting for a full accessibility audit. To help you out, here is a list of the ten most common accessibility issues in a website to look out for, the causes, and how you can fix them.
What are accessibility issues?
Before identifying your website accessibility issues, you must first know what they exactly are. Accessibility issues are any barriers that make it difficult or impossible for disabled users to access, navigate or engage with your website content.
And to understand how these issues crop up in the first place, you need to know how disabled web users access websites. They access websites differently, depending on factors like their disability, cognitive limitations, hearing loss or blindness, and personal preferences. For example, people who cannot use a mouse rely on keyboard-only navigation while others use assistive technologies like screen readers that read website content aloud. There are also slip-and-puff devices that let users without mobility issues in their arms use their breath to navigate the website.
By ensuring you have an accessible site, you know that a diverse range of people can reach your website. You can thus widen your potential market and target audience and thus strengthen your brand image.
Ten common accessibility problems
According to the world wide web consortium, there are 78 success criteria to become an accessible website.
But not all these success criteria are relevant to every website.
There are ten most common accessibility issues found in most sector and industry websites that web owners and designers should be wary about.
Accessibility issue #1: Inappropriate navigation links
Navigation links can pose accessibility issues because screen readers cannot detect them if poorly coded. The screen reader will not skip over it, meaning users with visual impairments will have to listen to the navigation whenever they load a new page.
The solution to this problem is accurately assigning ARIA roles to navigation menus to indicate the link purpose while making it navigable. There should also be a ‘Skip to main content’ link on the web pages to allow users to skip navigation.
Accessibility issue #2: Data tables not adequately marked up for screen readers
WCAG 2.0 does not make any distinctions between simple and complex data tables. So users need to associate the information in each data cell with relevant columns and row headers.
The simple data tables have one level of row or column headings that are appropriately marked up for screen reader users to access the information in the table. These tables use the TH element for the row and column headers and the TD element for data cells.
Screen readers, unfortunately, cannot access data tables with more than one level of row or column headers.
The solution to this accessibility issue lies in using more simple data tables because they are easy to mark up.
While you can make complex data tables accessible to screen readers by using ID, HEADERS, and/or SCOPE attributes, most screen reader users find it challenging to use these complex data tables with multiple header levels.
Accessibility issue #3: Insufficient color contrast
According to WCAG 2.1, the background and text colors should have a contrast ratio of 4:5:1 in the case of small text and 3:1 for large text. Similarly, user-interactive components and interactive elements like button elements, visible focus indicators, and clickable social media icons should have a color contrast ratio of 3:1.
The lack of this color contrast can make it challenging for users with visual disabilities like color blindness and low vision to navigate your website.
You can prevent this web accessibility issue by using a color contrast checker in the design stage to ensure all text and background colors and interactive elements have the correct color contrast ratio.
However, according to WCAG 2.1, user interface components unavailable for user interaction, like a disabled HTML control, need not meet contract requirements. In this case, an inactive user interface component may be visible but not operable all the time.
The submit button you place at the base of your form is a perfect example.
This button may be visible to the reader all the time. However, it gets activated only upon the user completing the required fields in the forms.
Accessibility issue #4: Inaccurate or absence of text alternatives for images
Screen reader users generally depend on their screen readers to understand visual content. All images on your website must have an image alt text tag because the visually impaired cannot see them. So any informative and important image for understanding your web page content should have a text alternative or alt attribute describing the image content. In the case of purely decorative images meant for only visual design, you have to include null alt text (alt=””), but you don’t need to provide any description.
The best way to avoid this issue from cropping up is by developing a strategy at the design stage. You have to decide which images require and don’t require meaningful alt text.
Accessibility issue #5: No logical sequence in focus order of interactive elements
Users who depend on the keyboard alone for navigation purposes should know which element they are focusing on and the sequence of focus order of the interactive elements. Differently-abled users can get confused and even end up disoriented on the page if there is no logical, sequential order for these elements.
It is especially challenging for users with low vision problems or motor disabilities who depend on a joystick for navigation purposes.
The solution to this web accessibility issue ensures that users encounter information in focused order relevant to the content meaning while navigating through the content. And of course, the user should also be able to use the keyboard to navigate.
Accessibility issue #6: Missing WAI-ARIA attributes
Developers use the help of the Web Accessibility Initiative- Accessible Rich Internet Applications (WAI-ARIA) to build accessible interactive content like sliders, accordions, and drag-and-drops. However, if improperly implemented, there is the risk of this interactive content interfering with users who rely on speech instructions or screen readers for web navigation.
Even dynamic content that suddenly appears on the screen like confirmation, error, status, loading, and warning messages can cause issues for blind and visually impaired users. This is because the messages appear without any screen reader announcement.
Screen reader users need to be updated about any screen changes because of a lack of a visual frame of reference. Besides, they can make informed decisions only if they stay up to date about the current page information.
You can, however, quickly resolve this issue.
Depending on the dynamic on-screen content importance and context, you can insert ARIA attributes into your HTML code to appropriately indicate the information. Aria content notifies assistive technologies that there is a change and lets them understand its content type to navigate the page better.
However, as the severity of the incidence and impact of these errors depend on the technology used, you will have to test the site on the various operating system, devices, browsers, and technologies. It helps ensure set automatic focus doesn’t interfere with the announcement of newly opened modal windows, loading screens, or popups.
Accessibility issue #7: Lack of keyboard accessibility for screen reader users
It can get challenging and perhaps even impossible for visually impaired website visitors to use a mouse to navigate the website. They instead need only a keyboard to move across the website using keyboard commands like the tab key and shortcuts.
So for them to be able to navigate your site with a keyboard, it should easily access or trigger all the interactive website elements. It includes having well-structured content with the appropriate heading structures. The keyboard should also easily access hyperlinks, forms, links, and media controls.
There should also be a visible keyboard focus indicator showing the different page elements. These indicators are visual cues, and usually, borders or highlights surrounding the focused element that let users with low vision know where they are on a web page. Besides, you should code the website for keyboard navigation as focus indicators follow a logical reading order.
The best and only solution to this problem is ensuring that all your webpage content operable through a mouse should also be operable by keyboard users. So it means that a mouse, along with focus and touch events, should trigger the interactive elements.
Accessibility issue #8: Missing or ambiguous link text
Links may be necessary for web navigation, but only if properly used. It is because missing or ambiguous link text can trigger multiple accessibility issues. For example, missing link text is an obstacle to visually impaired users.
A typical example of missing alt text is the absence of text on the link. This link can be anything like a button, icon, logo, or any other image. Whatever the link may be, the screen reader user will not read any image that functions as a link without any text.
You can avoid the problem by ensuring the image alt text conveys the image purpose or action instead of just having an image description.
Even ambiguous or vague text like ‘Read more’ or displaying only the whole link gives the screen reader user a bad experience. This type of text does not convey the required or enough information to the user about what they have to do.
Screen reader users tend to navigate from link to link. If there is no link in a text, or if it is ambiguous, it does not provide the user with the link’s context and where it takes them.
You can once again quickly fix this problem by using informative text providing minimal details about the link’s purpose or function.
Accessibility issue #9: For forms that do not comply with web content accessibility guidelines
it is common for websites to have form fields for the user to fill out. However, there is always the chance of these form fields causing accessibility issues to individuals with visual impairments while filling out the form.
Most online forms do not have appropriate labels and instructions conveying form control information to the screen readers.
Besides, incorrectly filled forms will return with the incorrect fields with form inputs highlighted in red. This again poses an accessibility issue for users who cannot see the red area. It is instead better to explain which part of the form has the error. And this is possible if the screen reader can read the text.
The solution to the problem lies in ensuring all contact forms or input fields on your website have clear, accessible labels. The screen reader will thus be able to read it and know what to fill in. Buttons should also have a clear text to understand what to select upon completing the form. And if you use CAPTCHA, make sure there are audio or other accessible text alternatives for users with visual impairments.
Some forms also have security functions wherein the page or form expires after some time. The problem is that visitors using assistive web technology to fill out the form may need some extra time to fill out the form.
Besides, they may not even know there is a time limit and end up with an expired form.
This problem can be prevented by either removing the time-outs on forms or providing enough information to let the user know the form’s time limit. Alternatively, you can offer an option for assistive technology users to extend the time limit to have enough time to complete the process.
Accessibility issue #10: Non-HTML content limiting web accessibility
Even non-HTML content on your websites like PDFs, Word documents, and PowerPoint presentations can create accessibility issues. The solution lies in making these documents accessible by tagging PDFs for navigation by a screen reader.
You can also offer an Accessibility Checker function within your PowerPoint presentation and Word document software to create accessible documents.
Besides, people using screen readers need appropriate page structure in your HTML to read your website content. Inaccurate heading structure only makes your content unorganized and confusing for them to navigate. Many make the common mistake of just bolding text instead of using the proper heading ranking.
On the contrary, your headings should have the proper heading rank with subsequent subheadings in an orderly manner. The correct header elements make it easier for screen reader users to navigate different sections.
Here are a few frequently asked questions about website accessibility issues.
What are the four significant categories of accessibility?
The four basic accessibility principles WCAG 2.0 is based on are POUR: Perceivability, Operability, Understanding, and Robustness.
How do you resolve accessibility issues?
You can resolve accessibility issues by performing manual and automated tests to ensure the site conforms with WCAG 2.0 guidelines. And it is based on the case that you need to complete the required changes to your website and visual presentation to improve your website compliance.
Examples include enhancing text color contrast and its ratio because poor text contrast is a common issue with websites. Another change would be to use alternative text in all your image’s content for screen reader users.
Screen readers can also get confused if there is no logical, sequential order in your website content. You must ensure you logically arrange all your content to avoid confusing or disorientating users. Also, ensure that any form on your site complies with web content accessibility guidelines and that all links are appropriately labeled.
What are accessibility bugs?
When your website does not meet WCAG guidelines or provides poor user exercise for those dependent on assistive technology, you have an accessibility bug in your website. So, in short, accessibility bugs are accessibility issues indicating your content is not available or reachable by everyone.
And this may not only apply to users with disabilities. Each website visitor has their own needs at different times and in multiple circumstances.
For example, even sighted users may find it challenging to focus on their phone or tablet screen while browsing in bright light. You can resolve this bug by ensuring your site complies with WCAG success criteria for color contrast limits.
What are the different types of accessibility?
There are so many accessibility issues that may arise based on the person trying to access your product or service:
- Visual impairments like color blindness or low-vision
- Motor or mobility issues like wheelchair users’ concerns
- Auditory impairments like hearing difficulties and audience problems
- Seizures like photosensitive epilepsy
- Learning or cognitive impairments like dyslexia.
There are some other accessibility issues that any user may suffer from like:
- Incidental barriers like sleep deprivation and reduced focus
- Environmental obstacles like having to use a mobile device underground for work reasons
How to fix your web accessibility issues
Knowing your accessibility issue solves half the problem because you can take the appropriate measures to resolve the case and create accessible websites.
However, there is no need to worry if you aren’t sure if your site has any accessibility issues. There are various accessibility testing options available.
For example, you can use one of the many automated tools like a checker to assess the state of the site. Based on the tool results, you can decide on the required time and resources to develop and maintain an accessible and compliant web address.
Then again, if you do not have the time or necessary know-how to perform comprehensive accessibility audits, then many companies can do it for you. They will conduct automated and manual tests to ensure your site conforms with WCAG compliance regulations before your users entangle them.
Have a question?
We’re always here to help.
The ADA prohibits any private businesses that provide goods or services to the public, referred to as “public accommodations,” from discriminating against those with disabilities. Federal courts have ruled that the ADA includes websites in the definition of public accommodation. As such, websites must offer auxiliary aids and services to low-vision, hearing-impaired, and physically disabled persons, in the same way a business facility must offer wheelchair ramps, braille signage, and sign language interpreters, among other forms of assistance.
All websites must be properly coded for use by electronic screen readers that read aloud to sight-impaired users the visual elements of a webpage. Additionally, all live and pre-recorded audio content must have synchronous captioning for hearing-impaired users.
Websites must accommodate hundreds of keyboard combinations, such as Ctrl + P to print, that people with disabilities depend on to navigate the Internet.
Litigation continues to increase substantially. All business and governmental entities are potential targets for lawsuits and demand letters. Recent actions by the Department of Justice targeting businesses with inaccessible websites will likely create a dramatic increase of litigation risk.
Big box retailer Target Corp. was ordered to pay $6 million – plus $3.7 million more in legal costs – to settle a landmark class action suit brought by the National Federation of the Blind. Other recent defendants in these cases have included McDonald’s, Carnival Cruise Lines, Netflix, Harvard University, Foot Locker, and the National Basketball Association (NBA). Along with these large companies, thousands of small businesses have been subject to ADA website litigation.
Defendants in ADA lawsuits typically pay plaintiff's legal fees, their own legal fees for defending the litigation, and potential additional costs. In all, the average cost can range from tens of thousands of dollars, to above six figures. There are also high intangible costs, such as added stress, time and human capital, as well as reputational damage. Furthermore, if the remediation is incomplete, copycat suits and serial filers can follow, meaning double or triple the outlay. It's vital to implement a long-term strategy for ensuring your website is accessible and legally compliant.