A Guide to Understanding, Preventing, & Fixing Common Web Accessibility Issues
Michelle Reid
Preventing accessibility issues commonly found in digital environments by prioritizing online inclusion is much more than just a trend or social responsibility today. It’s a must, and it’s every website owner’s legal obligation. One billion people with disabilities comprise the world’s largest minority group living with diverse needs – off and online. Website owners today have a unique opportunity to extend audience reach with an enhanced user experience that prioritizes accessibility for individuals of all abilities and walks of life.
Yet, research shows an alarming rate of websites are developed with accessibility issues that present challenges with inclusion and consideration of DEI (Diversity, Equity, and Inclusion).
WebAIM’s 2023 study evaluating the accessibility of 1 million website home pages and domains with at least 1 billion home page elements showed that nearly 97% of home pages had WCAG 2 failures, a mere 1.6% decrease since last year. And if you think that’s because the online venues evaluated were developed by amateurs who aren’t clued into digital innovation best practices – think again. WebAIM sourced the extensive list of websites researched from Alexa’s Top 1,000,000 websites and DomCop’s top 10 million domains.
The number of elements that compose website home pages is growing in parallel with the evolution of web development and interactive technologies. In turn, contemporary websites have an ever-increasing risk for more accessibility challenges, whether detected and presented in an accessibility report, or staying undetected and festering compliance issues and risks of website owners.
The unfortunate reality is that studies like the one conducted by WebAIM tell us that most websites are designed with some form of digital accessibility issue, putting the majority of website owners at legal risk by not complying with ADA guidelines or WCAG laws.
With global eCommerce sales expected to reach $8.1 trillion by 2026, excluding a buyer audience as large as the world’s community of people with disabilities could easily limit revenue bottom line, intentionally or not. Whatever a person’s set out to do online, (from leisurely surfing of the web, to shopping, banking, or taking care of errands and admin), every online user deserves the right to equally access online digital experiences.
Below we look at some of the web’s most common accessibility issues and provide a pro tip to prevent or fix them. But before we delve into these frequently occurring website accessibility issues, let’s define what website accessibility issues are and why they matter.
What are website accessibility issues & why are they important?
Defining website accessibility issues clearly sheds some light on why preventing and fixing them is crucial to ensuring inclusive digital user experiences.
Accessibility issues for websites or any online digital space or asset are barriers that limit a person’s capacity to access content with an inclusive user experience. These limitations are a result of development and design elements that create challenges engaging with online digital assets and environments. Whether intentional or unintentional, accessibility issues can damage brand reputation by restricting audience engagement and reach.
To understand how people with disabilities can be affected by accessibility issues, here’s a breakdown of some of the conditions and disabilities websites should and must consider:
- Cognitive disabilities – like autism, Alzheimer’s, various degrees of mental illness, and more
- Motoric impairments as a result of disabilities like cerebral palsy, multiple sclerosis, and arthritis
- Learning disabilities – like dyslexia, dysgraphia
- Vision disabilities – like blindness and low vision
- Hearing impairments or deafness
- Neurological conditions – like epilepsy and head injuries
- Speech disabilities resulting from conditions like apraxia or accidents
- Temporary injury or recovery related conditions after a surgery, accident; or sudden onset due to contraction, infection, or a condition’s flareup
Online user needs and preferences of individuals with disabilities and impairments vary. Accessing online and digital experiences can be powered with a range of AI-driven assistive technologies and web accessibility tools. Prioritizing user inclusion with accessible development, design, and updates to your digital environment positions you as a leader in innovation. You empower everyone to get the most of what your digital space can offer by making sure your digital environment is navigable with a keyboard, screen-reader, sip and puff devices, or braille display. Prioritizing user inclusion by preventing and fixing digital accessibility issues broadens your audience reach with a positive public image. The results are increased sales potential, elevated SEO ranking, brand awareness, and an overall strengthened online presence.
Website Accessibility Issues: Common Culprits & Pro Tips to Prevent & Fix Them
1. Bad hierarchy, structure, & operability inaccessible for keyboard navigation
Keyboards are one of the most commonly used online navigation tools for people who don’t use a mouse due to cognitive, motor, and vision disabilities. Every keystroke allows users to engage in online experiences that might otherwise be inaccessible. To ensure optimal flow and inclusion of keyboard navigation, any website, platform, app, or online space a user attempts to navigate needs:
- A logical page hierarchy (headers: H1, H2, H3, etc.)
- Sequential structure of content (Header, body text, image below or on either side of text, followed by a CTA [Call to Action] button, for example)
- Fully operable and understandable functions of elements that are integral to UX, (like buttons, forms, and links)
- Avoid “keyboard traps” where a keyboard user gets stuck and cannot advance or complete an action
Everything from message clarity to the location, look and feel, and layout of content, along with easy menu navigation plays a role in creating inclusive online experiences through keyboard navigation. Think of what you want your website visitors to do on your website. If you’re selling a product or service, make the purchasing process simple:
- Structure product pages with a focused order -both vertically and horizontally
- Enable a simple “add to cart,” “buy now” or “checkout” options
- Provide a clear description of the product, price, features, benefits and customer support included.
Overlooking these vital elements that ensure your website presents information within a logical, focused order and structure could affect keyboard navigation and create one of the most common accessibility issues.
Pro Tip: Keep the structure, hierarchy, and functionality of your online space logical and easy to understand and operate. Make sure that website elements are in a sensible, focused order that’s easy to understand and follow. With AI (Artificial Intelligence) powering keyboard navigation, think of your keyboard like a person navigating your website.
Poor urban planning will make any road traveled more difficult to navigate for anyone – whether walking, driving, or using public transit. Inadequate, illogical, and inoperable websites will create an equally cumbersome UX with clunky, interrupted, or even dysfunctional keyboard navigation. Create a digital space that makes it easy for inclusive user interaction, so that pointing to any element using the arrow keys and getting the full user experience is simple and smooth.
2. Missing or inaccurate alt text for images
While alt text is often known to optimize SEO ranking, increase website traffic, sales, and engagement rates, alt text was originally created to ensure accessibility of graphics and images for people with vision disabilities. Anyone using a screen reader or braille display to engage with digital content can benefit from the accessibility requirement of online image alt text. These assistive technologies scan the alt text and relay it audibly or in braille.
All images and visuals like infographics, maps, charts, or graphs that add value, insight, and/or help website visitors understand the content must include image alt text, so anyone who can’t see the visuals understands the image’s intent. Just one missing or inaccurate alt text description could generate multiple compliance issues. Manually identifying images with missing alt text is a tedious process prone to human error.
Pro Tip: Preventing and remediating accessibility violations that result from missing or inaccurate alt text can be simplified and with AI-powered technology that scans and automates fixes, helping websites conform to compliance standards and laws with inclusion.
3. Coding of navigation links
Coding navigation links is a paramount to providing a frictionless and inclusive online user experience to anyone using screen readers. The assistive Assistive technology will not skip over links that are poorly coded, which. This can interrupt the flow of a screen reader’s human-like ability to process content and relay information out loud.
Pro Tip: Website owners should assign the right ARIA roles to navigation menus. This defines the objective of a link, while ensuring it can be navigated by assistive technology. Including a link to “skip to main content’ in website pages also helps prevent hiccups in navigation.
4. Inadequate color contrast
Content becomes difficult to read if the color contrast between text and the background is low, especially for people with vision disabilities using small screens or with poor resolution.
WCAG requirements are a 4:5:1 color contrast ratio for small text on a background, and a 3:1 ratio for text that’s larger. This also includes UI (User Interface) elements like buttons, clickable vector and/or icons. The functionality and operability of these elements is no less critical than their color contrast, and any that are not operable and should be at all time can incur compliance issues and violations according to WCAG regulations. But something like the “sign up” button for a newsletter is exempt from WCAG color contrast requirement until it can be clicked after filling out a form.
Pro Tip: Use a text color that contrasts strongly with your background to make content more readable, and use a color contrast checker during design and development stages. Light text on a starkly dark background and dark text over a light background are common best practices. Web accessibility widgets can make adapting color contrast as simple as one click and can cost-effectively keep website owners ahead of the curve with WCAG compliance.
5. Video and audio content without captions or transcripts
Audio and video content can bring websites to life, but they can present accessibility challenges to people with hearing or vision disabilities. Users of all abilities sometimes prefer muting video sound and following along with written transcripts and captions. Some users simply find it easier to process information in writing, even if they don’t have a disability.
Pro Tip: Including captions and transcripts of audio and video content to ensure inclusion is essential.This prevents accessibility compliance issues by considering the needs of people with hearing, vision, and cognitive disabilities. At the same time, captions and transcripts also provide screen reader and braille display users with the information.
6. Text in a font that makes it difficult to understand or access content
Keeping your content easy to understand includes ensuring that it’s legible to every human eye that can see, and to assistive technologies simulating the process of a person reading text. Certain fonts can make reading and comprehension of content challenging for people with learning disabilities like dyslexia. Screen readers are frequently used to access online text by users who are blind. Specific fonts make it easier for screen readers’ AI-algorithms to identify letters, process words, and relay various forms of written content clearly and audibly. Text in the wrong font could create compounding common accessibility issues.
Pro Tip: Choosing a simple font that’s common to most operating systems is a web accessibility best practice. Regardless of the device used, text then stands a higher chance of being displayed in the correct font that is easy to discern and read. Some of the more commonly used fonts include Arial, Lucida Sans, and Helvetica. Integrating a web accessibility widget into a website can also enable near-instant adjustment of fonts for inclusion of users with dyslexia, vision impairments, or other cognitive disabilities.
7. Forms that lack labels or tooltips to help ensure accurate and full completion
Forms are frequently included in websites for various purposes – newsletter signup, registration for events, subscriptions, or service/support inquiries, to name a few. These forms can present accessibility challenges to people who depend on assistive technology. Form fields often lack coding labels or adequate instructions for assistive technology users, which makes filling out a form an extremely common accessibility challenge.
And if a form is not completed correctly, errors are commonly highlighted in red or use red text – yet another accessibility challenge for people who are blind, colorblind, or vision impaired.
Pro Tip: Prevent barriers informs by incorporating tool-tip text that notifies users of form completion errors and how to fix them. Include clear, accessible form field labels across your website. Screen readers can then scan, read and process the labels so that it’s easy to relay what’s required to complete the form. Keep button text concise and clear to ensure they are easily actionable with the help of screen readers.
If for security reasons your website includes CAPTCHA, make sure audio or TTS options are available for users with vision disabilities. And lastly, consider providing the option to disable timeout of form completion that presents challenges to multiple users with or without disabilities and can increase bounce rate.
8. Inadequate mark up of data tables
Since WCAG guidelines don’t distinguish between simple and complex data tables, it’s up to the user to correlate data in the cell with corresponding headers of rows and columns.
Simple data tables usually have one level of row or column headings appropriately marked. This combined with TH element for headers and the TD element for data cells helps ensure seamless access by screen reader users.
However, the challenge arises with complex data tables that have multiple header levels. Unfortunately, screen readers face difficulties in interpreting tables with multiple headers, creating yet another one of the most common accessibility issues for websites.
Pro Tip: Opt for simple data tables to effortlessly ensure accessibility. Though complex data tables can be accessible to screen readers with the use of HEADERS, ID or SCOPE attributes, most assistive technology will still be challenged to use and navigate complex data with several header levels.
Keep data tables simple for screen reader users and foster a more inclusive digital environment with enhanced UX.
9. Inaccessible documents
Including PDFs, MS Word documents, and PowerPoint presentations on your website can create accessibility issues for assistive tech tools like screen readers if:
- Page and content structure of documents is disorganized
- Content distribution is illogical and cumbersome to process
- Document lacks precise headers that simplify AI-powered navigation
- Bolded text used instead of properly formatting headings
Pro Tip: Make documents accessible with accurate tagging. Using an accessibility solution to ensure WCAG compliance of MS Word , PDF documents, or PowerPoint presentations can prevent website accessibility issues. Use properly organized heading rank within a logical hierarchy and order, (i.e. title, H1, H2, etc).
The UserWay Solution
Are you already aware that your website contains any of the common accessibility issues explored above?
Take action.
UserWay’s comprehensive framework of web accessibility solutions include a scanner that can help identify and automatically remediate WCAG violations. The tool also provides accessibility reports and guidance to fix any common accessibility issues on your website. Our team of certified accessibility experts can also perform manual audits and provide legal support services.
UserWay’s AI-powered Pro Widget 4.0 drives inclusive online digital experiences, with the users ability to make UI adjustments and to tailor a website’s UI and UX to their needs. With easy and cost-effective integration, UserWay’s widget makes it easy to:
- Change font, line spacing, web page and element color contrast
- Disable automation of animation or video
- Activate a built-in screen reader or keyboard navigation
- Add form labels
- Amend or add alt text for images, and so much more.
Request your personalized demo of our leading web accessibility solution now.
Answers to Common FAQs
What are some common accessibility issues?
Some of the most common accessibility issues in digital environments include but are (unfortunately) not limited to:
- Missing web page hierarchy, structure, & poor operability that deter keyboard navigation
- Insufficient or inaccurate image alt text
- Poor navigational coding
- Lack of video or audio content captioning or transcripts
- Text font that makes content difficult to read, understand or access with assistive tech
- Inaccessible documents, (PDFs, MS Word Documents, PowerPoint files)
What does accessibility issue mean?
An accessibility issue prevents users with diverse needs from engaging with online digital experiences with ease, or at all. Common accessibility issues can create user experience obstacles for anyone with physical, cognitive, or learning disabilities, whether their conditions are temporary or permanent. Website accessibility issues can limit target audience reach, affect brand reputation, and put website owner brands and organizations at legal risk in not conforming to WCAG compliance laws and ADA guidelines.
What is an example of poor accessibility on websites?
One example of poor accessibility on a website is a vision impaired user’s difficulty to complete form fields with the use of a screen reader as a result missing form labels.
Is Web Accessibility Required by Law?
The Americans with Disabilities Act (ADA) requires that any commercial online environment be accessible and usable for people with disabilities. ADA compliance issues can lead to costly lawsuits for any sized company. Preventing and fixing any website accessibility issues helps ensure ADA compliance and inclusion of all online user experiences.
Share