Making the Web a More Accessible Place

DZone 's Guide to

Making the Web a More Accessible Place

In this article, we discuss how to better address accessibility issues within web development to avoid legal trouble and create a happier user-base.

· Web Dev Zone ·
Free Resource

The web is a highly visual environment, with many of the most popular sites relying on images, videos, and other rich media assets to keep audiences engaged and more fully immersed in the online experience. But, roughly 1.3 billion people have at least one type of visual impairment, preventing them from enjoying the full scale of this high-value web content.

To address this challenge, many countries, especially the U.S. and European countries, have enacted accessibility laws to raise awareness of the issue and pressure companies and brands to act. According to a 2020 report, website and mobile accessibility lawsuits in 2019 amounted to one-fifth of all American With Disabilities Act Title III lawsuits, with a majority alleging blind-related violations specifically.

So, beyond a desire to create web content that is accessible for all users because it’s the right thing to do and can boost engagement, companies are now obligated to make web media accessibility a priority by law. This means creating a visual web that can be used by everyone with ease and confidence. 

Developers have a large part to play in making sure that all audiences can enjoy an enriched online experience. That’s why it’s imperative that developers follow these four best practices to create a website experience that accommodates all.

You may also like: How AI Is Making the Web More Accessible

1. Design With Color Blindness in Mind

Color blindness is a visual-impairment that can cause a great deal of confusion in the digital world. Users who are color blind find it challenging to see or to differentiate between a specific combination of colors. Hence using websites and navigating based solely on context clues become difficult. 

For example, on an e-commerce site, a customer browsing for a t-shirt with different colors won’t be able to easily distinguish all available options. Without being able to clearly distinguish colors, these customers will most likely give up and opt out of buying from the online store. 

To help assist users that are color-blind, designers can add patterns and textures to highlight the difference between colors like red and green. Additionally, they can choose colors that are less likely to cause confusion for site visitors who are color blind. This means avoiding color combinations like green-red, green-blue and others that are commonly problematic groupings. Website developers can also make sure to clearly label all colors with descriptive words to help with the process.

2. Generate Meaningful alt Text for Screen Readers

One of the most common pitfalls in enabling accessible content is the lack of alt text in the HTML attribute in the source code. With the alt attribute, the embedded text will render in place of the related image. Additionally, those listening to the content of a web page, such as a blind user, can still understand and interact with the content. This is especially valuable when it’s not possible to alter images or colors.

When generating this text, the description must be clear, concise, readable, and understandable. Thankfully, advances in AI algorithms make it easy to automatically recognize, categorize, and generate keywords and phrases, saving lots of time in the media-management pipeline.

3. Enable Dark or Light Mode

In a digital world, a good portion of our day-to-day lives takes place in front of a computer or phone screen, whether at work completing tasks or at home shopping online and catching up on social media. Research shows that 90 percent of regular digital device users have experienced sensitivity to light, causing headaches and blurred vision.

For people with light sensitivity, dark mode and brightness adjustability are mandatory so users can easily look at a screen without the potential negative effects of harsh light. Websites must provide these functions and be able to easily convert all available colors to the exact opposite colors. By inverting the background, users will have a more pleasant and enjoyable web-viewing experience.

4. Transcribe all Videos

In 2014, numerous Federal Communications Commission (FCC) mandates were passed to clarify and update closed captioning rules for IP-delivered content. For example, captions must relay the speaker’s exact words with correct spelling, punctuation, and grammar with 99% accuracy. They must also align with the time the words are spoken.

Adding subtitles as an alternative or as a feature for pre-recorded videos make it easier for everyone to enjoy the content delivered. It even benefits those without visual disabilities, especially since 80 percent of videos are viewed with audio off. By generating transcripts and placing them appropriately on the site, developers make it easy for any user to follow along in sync with the video and receive quality captions.

Developers should follow these tips to risk alienating customers who are visually impaired and losing out on a lot of revenue — through lost sales, reduced readership (and thus ad revenue), or even lawsuits. In fact, online retailers alone are leaving $6.9 billion in potential revenue on the table by having an inaccessible website.

However, by considering accessibility as core to the development process and proactively building a site that’s accommodating for all users, developers can easily create a more accessible, workable, and lucrative online presence. After all, when doing the right thing is also the best thing for one’s website or business — why wait?

Further Reading

developers ,ecommerce ,web accessibility ,web developement

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}