Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Get exclusive access to thought-provoking articles, bonus podcast content, and cutting-edge whitepapers. Become a member of the UX Magazine community today!

Home ›› Accessibility ›› 15 Website Accessibility Tips That Increase Everyone’s Engagement

15 Website Accessibility Tips That Increase Everyone’s Engagement

by Rashaud Brooks
4 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

Making your website compliant with WCAG and ADA benefits everyone, not just those with disabilities.

For over a decade, the U.S. Department of Justice (DOJ) has been advocating for standardized website development and content to increase the accessibility of the Internet for those with disabilities.

But consent decrees and/or settlement agreements for inaccessible websites have hit Target, Amazon.com, PeaPod, Netflix, H&R Block, Hilton International and many other corporations over the past few years. In fact, overlooking easy-to-do tasks such as adding alt-text and headings cost Target $6 million to settle a class action suit filed by the National Federation of the Blind.

Ultimately, compliance with the DOJ and the American Disabilities Act (ADA) is not just about better serving the individuals with vision or hearing issues—it’s about providing a better web user experience for everyone.

The importance of an inclusive user experience

Some of the disabilities that keep someone from enjoying your full customer experience are:

  • Color blindness
  • Blindness and low vision
  • Deafness and hearing loss
  • Learning disabilities
  • Cognitive limitations
  • Limited physical dexterity, such as the inability to use a keyboard or mouse, and more.

To help navigate the web, tech innovators have done a great job providing assistive devices like screen reader software (seen in the video below), voice interactive software, Braille output devices, or closed captioning.

But even with these technology tools, an estimated 18% of the United States population with disabilities still have website access issues. This is a big deal, not because of the maximum penalty the DOJ imposes for a violation is $75,000 (subsequent violations are $150,000), or because settlements are in the millions. This is a big deal because businesses can’t afford to ignore almost 20% of their target audience, especially when the U.S. Department of Labor estimates this population controls more than $200 billion of discretionary spending power.

Layout and color rule web design, but not everyone can access the web the same way

If improving your customer experience is not enough incentive, lawyers say the best way to avoid an ADA problem (and the courts) is to be proactive, even though the government has not explicitly defined legal standards. But those seeking a regulatory change might be disheartened to hear that the DOJ’s Public Accommodation Website Regulations, originally expected in June 2015, have been delayed until April 2016.

The good news is there are Web Content Accessibility Guidelines (WCAG) that provide designers with standards for making web content more accessible. While the DOJ sorts out the legal definitions and rules regarding website accessibility compliance, they are using the WCAG as criteria for any consent decrees and lawsuits. This means businesses can easily prepare for next April by meeting WCAG’s basic A-level standards.

For instance, adding consistent and clear labels can improve your site’s SEO, as browsers crawl the same elements outlined in WCAG. This means your content will be easier for any potential customer to find. And, missing captions are a lost opportunity. They help to create curiosity and educate all visitors.

That being said, designers and developers really just need to be more mindful and aware.

My accessible design story

Layout and color rule the world for anyone that works in website design, but not everyone can access the web the same way. Personally, I had my own ‘aha’ moment during an ADA workshop that reviewed the different levels of color blindness. As part of the course, we had to navigate a website using only the arrows on a keyboard.

This is something I challenge all website designers to try. To navigate through the page(s), hit tab or use the arrow key to read one of your own websites. This is how someone who has to use a screen reader consumes a page. It is just like reading a book and goes left to right.

However, when a designer does not tag, or name all subheads, they stop the reader from being able to navigate the website. If the skeleton structure is not named appropriately, the reader is unable to read the post or article.

Providing text alternatives and adding labels are critical for any non-text elements. The behind-the-scenes text allows assistive devices to transform the element into large print, braille, speech, symbols or simpler language.

Luckily, there are simple tools that allow you to test your design:

  • Photoshop has a color blindness checker built right into the program.
  • Vischeck shows you what a colorblind person actually sees.
  • Wave, a free tool, grades your accessibility and displays the scoring on your web page with icons and indicators.

Below is a checklist of 15 tips you can use to improve your accessibility.

Videos with audio

  1. Provide captions
  2. Provide full text transcript of the video or a version of the video with a text description
  3. Include a mechanism to stop, pause, mute, or adjust volume for audio that automatically plays on a page for more than 3 seconds

Non-text content

  1. Add a text alternative to all of your images
  2. Add a text alternative to your audio and video (a succinct description of the topic)
  3. Add a name to all of your controls (such as `Search’ or `Submit’)

Text content

  1. Break up content with subheadings for new sections
  2. Add a `Skip to Content’ link
  3. Label elements and give instructions
  4. Clearly identify input errors
  5. Avoid elements that flash more than 3 times per second
  6. Ensure that each page of the website has a language assigned

Color Usage

  1. Use more than color to communicate instructions
  2. Use more than color to communicate other critical information (charts, graphs, etc.)
  3. Distinguish text links from surrounding text with a clear contrast between the link and the surrounding text that uses at least a ratio of 3:1, then add another differentiator

Making your website compliant with WCAG and ADA benefits everyone, not just those with disabilities. So the next time you tackle a design project, be sure to look at it through new eyes.

post authorRashaud Brooks

Rashaud Brooks
Rashaud Brooks, ChannelNet’s UX/UI Director, is responsible for championing the strategy for user experience (UX) design disciplines across all new and existing client programs. Adept at directing the design of web interfaces, he knows how to cater to the needs of all stakeholders: corporate users and brand owners, dealers, retailers and end consumers. Design and color are his passions and he is known for his professionalism and high-level of creativity. He leads the implementation of solutions in collaboration with marketing, sales, and development as well as supervises, mentors and develops UX team members. A valued member of our management team, he also presents design concepts and solutions to current and prospective clients. He has led numerous multichannel solutions for some of the top brands in the world. He ensures user-centric design and website accessibility practices are applied to each project and platform. In addition to his ChannelNet experience, he previously worked for some of the top-tier agencies in the U.S. such as Campbell Ewald, Team Detroit and Enlighten. A graduate of the Art Institute of Atlanta, Brooks is a passionate gamer and devotes his playing time to Madden Football, Magic: the Gathering, and Star Craft. He voluntarily puts gaming on pause to spend time every month teaching teens how to grow personally & spiritually. Brooks resides with his family in Allen Park, MI.

Tweet
Share
Post
Share
Email
Print

Related Articles

Discover how AI is changing UX research. It’s not just making data analysis faster. It’s also encouraging people to think more deeply. Learn how to strike a balance between human insight and AI-driven efficiency to create more thoughtful designs.

Article by Charles Gedeon
How AI and Metacognition Are Shaping UX Research
  • The article talks about how AI can speed up data analysis and encourage people to think more deeply about biases and missed insights, which can improve the quality of user-centered design.
  • It shows that AI-powered UX research tools need to include reflection checkpoints. These checkpoints let researchers critically assess their assumptions and conclusions.
  • The piece highlights the collaboration between AI’s ability to recognize patterns and human judgment to make sure the research outcomes are meaningful and consider the context.
Share:How AI and Metacognition Are Shaping UX Research
4 min read

How can thoughtful workspace design transform collaboration and creativity? Discover how a human-centered approach reimagined 21,940 square feet into a flexible, inspiring environment that employees love.

Article by Aalap Doshi
Rethink Space: Designing a Human-Centered Workspace that Supports Flexibility, Collaboration, Privacy, Innovation, Creativity, and Transparency
  • The article explores how human-centered workspace design can improve collaboration, flexibility, and creativity by addressing employee needs.
  • It highlights solutions like open zones, quiet spaces, and pod-like configurations, showing how these changes boosted teamwork and morale.
  • The piece emphasizes the value of co-creation, adaptability, and clear communication in rethinking office spaces.
Share:Rethink Space: Designing a Human-Centered Workspace that Supports Flexibility, Collaboration, Privacy, Innovation, Creativity, and Transparency
7 min read

Why do designers grumble at the mere mention of PowerPoint? Discover smart strategies that turn frustration into creative solutions.

Article by Jim Gulsen
Why Designers Hate PowerPoint (and How to Fix It)
  • The article examines why PowerPoint often frustrates designers, from its limited design capabilities to inefficient workflows, and explores opportunities to bridge those gaps.
  • It highlights strategies like building systematic design elements, creating templates, and augmenting slides with other design tools.
  • The piece underscores the importance of collaboration, simplicity, and proactive planning to elevate design and streamline workflows.
  • It highlights practical methods to help designers balance quality and speed for presentations that are both functional and visually engaging.
Share:Why Designers Hate PowerPoint (and How to Fix It)
4 min read

Join the UX Magazine community!

Stay informed with exclusive content on the intersection of UX, AI agents, and agentic automation—essential reading for future-focused professionals.

Hello!

You're officially a member of the UX Magazine Community.
We're excited to have you with us!

Thank you!

To begin viewing member content, please verify your email.

Tell us about you. Enroll in the course.

    This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and