More and more people are learning about the importance of web accessibility every day. Part of the reason for its increasing awareness is the rise in lawsuits and demand letters being sent to businesses both big and small. From January to December 2019 alone, companies have been scrambling to find a solution to their accessibility shortcomings, with Google searches showing a 400% increase in results for ADA and WCAG-friendly answers.
To help companies understand accessibility standards better, they need to look into what other businesses (who have already received legal complaints and lawsuits) have done wrong so that they can learn from their errors. In the following sections, we will discuss some of the most common accessibility standards that websites fail to meet so that you won’t make the same mistake.
Compliance Level of Menus
Based on a study that scanned and analyzed 10,000,000 websites, a whopping 98% failed to adhere to WCAG and ADA accessibility standards. That’s quite an unfortunate statistic considering some of the websites that failed actually put in the work to improve their menu’s accessibility, yet they were still unsuccessful in covering all the requirements of the WCAG.
The following are the requirements set by the WCAG for website menus:
- Users can use the Tab key to navigate to the next element, and Shift+Tab to navigate to the previous element, and the focused element must be easily identifiable using a focus ring (outline).
- A “NAV” tag or a “role” attribute equal to “navigation/menu/menubar” (depends on the menu type) must be present on the top element that contains all the links and menu items (role= ”navigation/menu/menubar”).
- Users can open dropdowns using the Enter and the arrow-down keys. Dropdowns should also be opened by focusing on the menu item.
While the following aren’t set-in-stone WCAG requirements, they have appeared in several lawsuits, which makes adhering to them highly recommended for businesses.
- Users can close the dropdown using the Esc key, and the keyboard focus must go back to the root menu item of this dropdown.
- Users can navigate across the menu bar itself using the left-and-right keyboard arrows. When reaching the end of the menu, and pressing the forward arrow key, the navigation should loop back to the first item.
- Users can navigate within dropdowns using the up-and-down arrows, and the focus must never escape and loop within the dropdown unless it was intentionally closed.
It’s incredibly important for companies and organizations to follow the WCAG standards for menu accessibility. Imagine a person with disabilities, specifically a motor-impaired user, trying to navigate the menu options of a website that didn’t care to modify its user interface with accessibility options. The user will have to somehow open dozens of links and dropdown options one by one since the web developers didn’t implement skipping options or alternative dropdown commands for its users. Not only will the user feel frustrated and possibly upset with the browsing experience, but he (or she) most likely won’t be able to find what he (or she) is looking for in the website due to poor web development.
Based on the findings earlier, almost none of ten million websites implemented all of the WCAG requirements when it comes to menus, which is concerning, to say the least. Some websites designed alternate navigation options by using the Tab key to skip between links and web elements, and others improved on it by allowing Tab navigation through dropdown menus as well. However, almost none of the sites gave users the option to close dropdown elements with the Esc key, and a good chunk of the online pages failed to implement proper arrow key navigation.
Compliance Level of Images
In the same study, 52% of the websites tested failed based on WCAG standards. While that’s still a high number, it’s a much better statistic compared to menu accessibility as discussed earlier.
The WCAG has a single requirement for images used in websites: all images must have an Alt attribute that properly describes the objects in the image, and if the image contains texts, then the embedded text must also be present in the alt attribute.
The fact that 48% of the scanned websites followed this standard is a good start towards the goal of accessibility. There are millions of people with visual impairments in the US, and having many websites adhering to accessibility guidelines when it comes to images can only help users with disabilities to be more comfortable and effective in browsing such sites.
Compliance Level of Forms
According to the results, 71% of the ten million websites failed to follow the WCAG standards for website forms. The accessibility requirements are as follows:
- When a form is submitted and errors are present, the keyboard focus must be taken to the first invalid field, and the user must receive an explanation (both visual and to the screen-reader) of what the issue is with this field.
- All fields must include a “LABEL” tag that is connected to the field by the “id” and the “for” attributes, or an “aria-label” attribute.
- Required fields must include both visual cues (Asterix*, text or other), and the “aria-required” attribute equals true.
- When a form is submitted successfully, a blind user with a screen-reader should be informed of that using an alert element or via other means.
- Fields must include the “aria-invalid” attribute to inform screen-readers whether the field is currently valid or invalid. This attribute must change dynamically according to the validations. E.g. an empty required “name” field must include aria-invalid= ”true” to indicate that it’s invalid, but change to aria-invalid= ”false” once the user fills it up.
The findings show that most open-source platforms like Joomla, Magento, and WordPress fail to meet the standards set above. While the ability to change and override these systems manually makes website management much easier for web managers, it doesn’t bode well for accessibility purposes because it’s rare for website managers to manually apply the necessary compliance requirements on the website.
Compliance Level of Links
Links are the bread and butter of most websites because of how helpful they are in improving search engine rankings. It’s a good sign that only 22% of the websites tested failed to follow the WCAG standards, with a high 78% able to meet the following accessibility requirements:
- Links must provide a visual indicator if they are opened in a new window, and also announce that to a screen-reader using a hidden text or title.
- Must contain text, title, or an aria-label.
- Links must be noticeable on-page and look different than regular text.
- Must be logically ordered within the document (a “read more” must come after the title and the paragraph of a section, for example).
- Links must be reachable by keyboard navigation using the Tab key.
It’s essential for a website to have working links, and it’s even better when the links are properly programmed using accessibility standards. Visually-impaired people can certainly navigate better when opening a link that prompts the website to inform them that a new window has been opened, either through a screen reader or a strong visual indicator. The same holds true for people with motor disabilities who use the keyboard for their full browsing experience; they can better access sites if the links can be properly selected using the Tab key.
A Final Word on Websites that Fall Short in Compliance
If we are going to make a conclusion solely based on the analysis of 10,000,000 pages, it’s easy to say that the internet is generally in a bad place when it comes to accessibility compliance. This isn’t much of a surprise, as complete accessibility can be extremely challenging to achieve manually. Website developers often try to meet the requirements halfway by conforming only to certain standards, but the WCAG aims for all of its requirements to be followed for compliance.
Many website owners don’t really know a lot about programming or coding a website for accessibility. It’s already hard to design a website that does what you want it to do and adding in more requirements for accessibility options can be overwhelming for most developers. If your website needs improvements to meet the accessibility guidelines set by the ADA and WCAG, you can always rely on Access-A-Pal.
Access-A-Pal is a game-changer when it comes to web accessibility, using advanced machine learning and computer vision technologies to help ensure that your website gets 100% compliance with ADA and WCAG standards. If you want to improve your audience’s browsing experience and avoid accessibility lawsuits, contact Access-A-Pal now so that they can help you build a better website for your customers.
