*This article is an English translation of a Japanese article.
Web accessibility guidelines are crucial for ensuring that all users, regardless of their abilities, can equally access web content. However, when efforts based on these guidelines are insufficient or merely superficial, accessibility may actually decrease. In this article, we will explore specific examples of inadequate approaches to accessibility and offer suggestions for improvement.
1. Offering Surface-Level Assistive Features
Example of the Problem
Some websites provide assistive features such as text-to-speech or color-changing options and consider these measures sufficient for accessibility. While these features are helpful, they do not cover all the accessibility requirements needed for a fully functional site. For instance, even if a text-to-speech function is available, if the content is poorly structured or navigation is confusing, users will still face challenges.
How to Improve
Instead of relying solely on assistive features, ensure that basic accessibility measures are in place, such as semantic HTML markup, proper labeling, and full keyboard support. Strive for a design where users don’t need to rely on assistive technology to navigate the site seamlessly.
2. Incomplete or Improper Use of Alternative Text
Example of the Problem
Important images may have alt text, but decorative or banner images that do not convey meaningful information also have alt text, cluttering the user experience for screen reader users. This forces users to listen to unnecessary details, making navigation cumbersome.
How to Improve
Use alternative text only when it provides meaningful information. For purely decorative images, use an empty alt attribute (alt="") or hide them using aria-hidden="true". This prevents the screen reader from overwhelming users with irrelevant information.
3. Lack of Full Keyboard Accessibility
Example of the Problem
While some sections of the site can be navigated with a keyboard, interactive elements like modal windows or dropdown menus are only accessible via mouse, excluding users who rely solely on keyboards.
How to Improve
Ensure that all interactive elements are fully accessible by keyboard. Check that users can navigate with the tab key and can close modal windows using the escape key, among other essential keyboard functionalities.
4. Inadequate Color Contrast
Example of the Problem
Choosing stylish color schemes that prioritize aesthetics over functionality can result in poor contrast, such as light gray text on a white background. This makes it difficult for visually impaired or older users to read the content.
How to Improve
Follow the Web Content Accessibility Guidelines (WCAG) for color contrast. Ensure that text has a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text to maintain readability for all users.
5. Insufficient Form Labeling
Example of the Problem
Some forms use placeholders as labels, which disappear as users start typing. This can confuse screen reader users or those with cognitive disabilities who may not remember the required input for each field.
How to Improve
Ensure that all form elements have explicit labels that remain visible even after input begins. Placeholders should only be used for supplementary information, not as a substitute for labels.
6. Lack of Subtitles or Descriptions for Audio and Video Content
Example of the Problem
When video or audio content lacks subtitles or transcripts, it excludes users who are deaf or in an environment where sound is unavailable.
How to Improve
Provide accurate captions or transcripts for video and audio content. Also, consider offering sign language interpretation or subtitles in multiple languages to further enhance accessibility.
Conclusion
There are many ways in which web accessibility efforts can fall short. Superficial fixes are not enough; real accessibility improvements come from thoughtfully applied best practices and standards. By focusing not just on assistive features but also on the overall design and content structure, you can make your site accessible to all users. Take a proactive approach to improving accessibility by adhering to guidelines and regularly reviewing your website’s performance.
We have released the UUU Web Accessibility Widget Tool, designed to make web accessibility easy to implement. This tool helps improve the accessibility of websites quickly and efficiently, even without specialized knowledge.
If you’re interested in enhancing your website’s accessibility, please check out the details. We are here to support you in making your website more user-friendly and accessible to a wider audience.