10 Most Common Web Accessibility Issues to Solve for
By Shormistha Chatterjee, Community Contributor - September 2, 2022
According to World Bank’s recent report, 15% of the global population lives with a disability, of which 2-4 percent encounter difficulties in functioning. Recent WHO also states that one billion people live with some form of disability. But sadly, website accessibility testing is not validated or considered to be mandatory by many online entities.
It is revealed that common accessibility errors and issues are prevalent in the top 1,000,000 websites. Thus, it’s crucial to ensure your digital assets solve common web accessibility issues to help people with disabilities more actively in modern society.
Why make a Website Accessible?
- Protection from lawsuits and fines resulting from an inaccessible website
- Giving target audience equal access to your site, content, and services
- Demonstrating your brand’s commitment to serving every person
Which impairments or issues to consider when making a website accessible?
Several accessibility issues need to be considered when giving access to your product or service:
- Visual impairments like low-vision or color blindness
- Seizures like photosensitive epilepsy
- Mobility or motor issues like wheelchair users’ concerns
- Auditory impairments such as audience problems or hearing difficulties
- Learning or cognitive impairments like dyspraxia, dyslexia, dyscalculia, and dysgraphia.
In fact, other conditions should ideally be taken into account; however, the impairments listed are considered the starting point to making a website accessible.
Four Key Principles of Accessibility
Before jumping into the common web accessibility issues, learning about the Web Content Accessibility Guidelines (generally referred to as WCAG) is significant. It describes the list of accessibility standards and is classified under four key principles:
- Make it simpler for users to see and hear content
- Present text alternatives for non-text content
- Give captions & other alternatives for multimedia
- Create content that can be presented without losing meaning using assistive technologies
- Make all functionality accessible straight from a keyboard
- Give users sufficient time to read & use the content
- Don’t use content that might trigger seizures
- Facilitate users to navigate and find content
- Build text that is understandable and readable.
- Create content appear and operate in predictable manners.
- Help users avoid & correct errors.
- Maximize compatibility with present and future user tools.
Note: If such principles aren’t met, differently-abled people will not be able to use the Web.
10 Most Common Accessibility Issues to Solve for
Let’s look at the most common web accessibility issues that need to be resolved.
1. Inappropriate Alternative Text on Images
Alt text for images is one of the common accessibility issues in web design. According to WebAIM, 31.3 percent of home page banners were missing alternative texts. Other, older accessibility studies between 2006 & 2013 mention this setback manifold times, indicating that this is a known accessibility error that has not gone away. From a web accessibility standpoint, this is a major challenge.
Solution– Remember to keep the alternative texts to the point, short, and descriptive, So that folks with visual impairment can read and understand what the image is all about.
Developers can add the alt texts in any of the three ways mentioned below:
- Use the “aria-labelby” attribute when describing the image as the content of a varied component
- For a background image with a distinct tag, using the “aria-label” attribute also works
- Adding up an “alt” attribute in case the image is revealed under the“img” tag
2. Poor Contrast Text
Did you know that low-contrast text is the #1 accessibility error noticed on many websites? The poor contrast of the site makes it hard for the users to identify the edges and shapes of several components. However, it was found on 86.4 percent of home pages in WebAim’s current analysis.
So, websites must find a way to fix such accessibility issues in web design. WCAG recommends 1.4.6 Contrast (Enhanced), 1.4.3 Contrast (Minimum), & 1.4.11 Non-text Contrast.
Solution– The text-to-background contrast ratio must be 4.5:1. You can prevent this web accessibility error by using a color contrast checker in the web design phase to make certain all background colors, text, and interactive elements have the perfect color contrast ratio.
WebAIM’s color checker tool demonstrates the effects of unacceptable and acceptable contrast. Changing your site background to grey and foreground color to red makes links difficult to read.
To scrutinize the entire website manually and interactively, you can also use BrowserStack for cross-browser testing and create a granular report that identifies all instances of poor contrast and the places where texts and backgrounds aren’t in the appropriate contrast ratio. Once you conform to this standard criterion, the information on your site will be readable and accessible to every person.
3. Heading Hierarchy
Website users with disabilities hardly ever read an entire web page. They use AT (Assistive Technologies) to navigate the web page. A screen reader is one such Assistive technology that persons with vision impairments often use to access websites. The majority of screen reader users use headings to navigate any website. Hence, it is crucial to maintain the heading hierarchy logically (H1>H6) to ensure that users have no difficulties navigating your site.
Solution– Adhere to the correct form of headings & a separate presentation from the structure by using Cascading Style Sheets (CSS). Examples of proper use of headings:
- Use <h1> for the page’s title. Avoid using <h1> other than the title of particular pages.
- Use headings to specify & organize your content structure.
- Don’t skip heading levels (<h1> to <h3>), as screen reader users will be unsure if the content is missing.
Read More: How to Test Websites with Screen Readers
4. Too Many Navigation Links
Cluttered navigation links present a common accessibility issue that testing experts often detect. Users with visual impairments follow the navigation when they load a new webpage. However, screen readers cannot detect navigation if not coded well.
Solution-A solution is to correctly assign ARIA roles to navigation menus to specify their purpose and make them navigable. Besides, you must ensure that a “Skip to Main Content” link is accessible so that screen reader users can easily skip over the navigation.
Browserstack Automate can be used to check how your website behaves by simulating the real user conditions combinations. By running accessibility tests on websites, you can ensure that your website complies with the WCAG and other crucial guidelines, thus ensuring your site is accessible to every user on the Internet.
5. Poorly Structured Form labels
When form input fields do not have labels, it can make it difficult for assistive technology users to understand the purpose of the control. Screen reader users can’t comprehend what you are trying to collect. It may be difficult for them to understand what form of content should be entered into a specific form field.
Solution– Every field in the form should have an accurately-positioned, descriptive label. Use the <label> tag to associate the label text with the form field. In fact, the W3C’s Web Accessibility Initiative (WAI) has a convincing article on labeling form fields.
You can also rest assured that labels are easily operated through assistive devices by including automated accessibility testing into the QA roadmap straight from the beginning i.e. the brainstorming stage.
Follow-Up Read: Responsive Web Design Challenges And Their Solution
6. Using Non-descriptive Links
When including links in any content, use text that correctly describes where the link can go. So that, assistive technology can swiftly navigate screen readers to specific web page links. Using a phrase like “Read More” or “Click here” doesn’t make sense for a screen reader user.
Other non-descriptive link phrases to avoid comprise:
- Read more
- Link to [link destination]
Solution– When focused on creating exceptional user experiences, it is better to make your descriptive text unique and relevant.
7. Lack of Keyboard Accessibility and Navigability
Visually impaired website visitors or users with mobility disabilities may find it challenging to use a mouse or trackpad to navigate any website. In fact, for them accessing content through assistive technology such as voice-operated commands or a sip-and-puff device could be far easy.
Solution– The best and only solution to this problem is to ensure that all your websites are optimized, and website content should be logical to accommodate such necessities.
Testing websites manually for the above could be the better option. It is crucial that the tester not merely rely on visual feedback but use a screen reader for auditory navigation. With Browserstack Live this is painless to accomplish. BrowserStack cloud infrastructure provides a Screen Reader trait for desktop (macOS & Windows) sessions, allowing QAs to test the non-visual usability and navigation of their websites. Testing multi-experience apps also becomes a breeze.
8. Embedding Inaccessible Documents
Accessibility issues extend to elements like documents hosted on your site. PDFs and other documents considered digital products (for example Word documents and PowerPoint presentations) should be made accessible for users with disabilities. Some of these programs have an accessibility checker built into programs to help.
Solution– Ensure that visually impaired website visitors never have to undergo a negative user experience. Start by scanning your entire website for free. When you are conducting accessibility tests, remember to keep the user experience at the forefront.
9. Forgetting about Mobile-First
The number of smartphone users today surpasses 6 billion globally and is forecast to further progress by several hundred million in the next few decades. Mobile-first design lies at the crux of any well-thought-out website UX
Number of smartphone users worldwide from 2016-2027
Solution– Incorporate accessibility at all touchpoints and ensure websites should be optimized to accommodate such requirements. Also, ensure that your site complies with web accessibility guidelines.
The best way to cope with this challenge is to get a Chrome extension like for BrowserStack. Here is how it can help:
- Quick audit and scan of your website
- Automated accessibility report generation
- Painless to attempt-Free Trial
- Free web accessibility tests at your fingertips
10. Add Subtitles and Captions to Videos
Using subtitles and captions for video clips is also one of the common accessibility problems faced over the past few decades. Content creators now realize that omitting them leaves your website standing out from the crowd (obviously not in a positive sense). Deaf people necessitate some form of caption for accessing video content.
Solution– Using voice recognition software can assist in setting up subtitles and captions and make content more accessible. This isn’t just useful for someone who has deafness yet also for somebody who might need to understand video content in a public space with no headset.
How to run Quick Accessibility Tests on BrowserStack?
Ensure that visually-impaired visitors never have to suffer a bad user experience. Employ BrowserStack’s Live Screen Reader feature for desktop (macOS &Windows) sessions for manual testing, non- usability, and visual navigation of websites.
Step 1: Ensure that audio is turned on on your preferred machine or device. Screen Reader for a macOS or Windows session in Live can be easily turned on by accessing the option called Screen Reader from the drop-down in-session toolbar.
Step 2: Checking on the Enable ScreenReader checkbox, hover and enable the ScreenReader trait that will start after a few seconds
Step 3: Enabling Screen Reader should then cause an audio-verbal description to be triggered for every single deed on the site including clicking, pointing, keyboard navigation, etc.
You can also head into Automated Accessibility Tests
- To run automated accessibility testing, you can easily make use of axe, a lightweight and fastest tool that checks your site against accessibility guidelines and rules and produce a report highlighting the violations.
- By running automated accessibility testing on sites with Automate and axe, you can scrutinize if a website complies with the WCAG and other guidelines, ensuring your site is accessible to all users (counting disabled people) on the Internet.
All accessibility tests on BrowserStack will be implemented on real devices and browsers– both the newest & older models. This counts multiple versions of all major browsers (Chrome, Edge, Firefox, Safari, Internet Explorer, and more) as well as 1000s of desktop and mobile devices (Windows, Android, iOS,). You won’t have to restrict your tests with the insufficiencies of simulators and emulators.
Designing your website with accessibility will help you cater content to your whole audience without leaving anybody behind and ensure that your audience has a flawless experience navigating your website, irrespective of their disabilities.
In a nutshell, by increasing web accessibility, we’ll ultimately ensure that everybody can gain equal access to the digital world and its rich bounty of resources.