How Bottom-Up Web Development Creates Better Accessibility

How Bottom-Up Web Development Creates Better Accessibility

Creating an accessible website is essential, but it’s not easy. A traditional web design process takes a top-down approach that prioritizes aesthetics, marketing, and technical function, but the result is often an inaccessible design. With a bottom-up approach, an accessible user experience is the priority, which makes the website more accessible. Unfortunately, most websites are built with a top-down approach and accessibility is either an afterthought or completely ignored.

Business owners with inaccessible websites are at risk for being sued, and it doesn’t matter how small or large your business is – nobody is immune. For instance, in 2019, a blind man named Guillermo Robles sued Dominos Pizza because he wasn’t able to order a pizza online using screen-reading software. In 2022, the case settled and Domino’s received a court order to fix their website and pay Robles a $4,000 judgment.

If you’re a website developer, these lawsuits should be a concern. While some lawyers don’t see how a web developer can be held directly liable under the ADA for creating an inaccessible website, you’re still at risk. Even if you can’t get sued by the end user, if one of your clients gets sued by an individual, your client might sue you for breach of contract. Depending on what’s in your contract, there could be consequences. For example, if you made a direct or implied promise to deliver a website that meets all legal regulations and laws applicable to your client, you might have something to worry about.

But before we dive deeper into the bottom-up approach and how it supports accessibility more than a top-down approach, let’s get into what accessibility actually is and why it matters.

What is website accessibility and why is it important?

The Americans with Disabilities Act (ADA) mandates that all websites owned by businesses open to the public must be accessible to people with disabilities. Although the ADA doesn’t outline specific technical standards, in general, users must be able to navigate, read, and interact with the website’s content. The site also needs to provide a way for users to submit feedback. That’s website accessibility in a nutshell, and if you’re designing websites, you need to follow a system that ensures all the sites you build meet the ADA’s requirements.

Even if you can’t be held legally liable for an inaccessible website, you’ll be more respected by your clients when you create accessible websites by default. However, your clients may not even understand the importance of having an accessible website. You might need to explain it to them to sell them on the benefits. There’s also a chance that some of your clients may not want to prioritize accessibility over their design preferences. You’ll need to decide whether or not to work with those clients. If you choose to work on projects for clients who don’t want an accessible website, talk to a lawyer about putting a clause in your contract that holds you harmless for any consequences your client may face.

Creating an accessible website isn’t just about screen readers

Accessibility requirements take a lot of factors into consideration, like the way visually impaired users access websites with screen readers. However, creating an accessible website isn’t just about making sure your content can be read by a screen reader or that you add alt tags to all of your images. Accessibility encompasses a wider range of factors that make a website usable for people with all types of disabilities, and even people without disabilities. The only difference is that accessibility for disabled individuals is mandated by law.

While screen-reader-friendly content is required for visually impaired users, making websites accessible is something you should do for everyone’s benefit. This may require completely shifting the way you approach design because it’s not just a matter of creating a “user-friendly interface” or good-looking layouts. Accessibility needs to be baked into the structure and foundation of a website. Unfortunately, since this takes more effort, most developers ignore the responsibility. This is a big mistake.

Why are so many websites inaccessible?

Web design has become stale over the years, where people just keep recycling the same templates and layouts without considering usability. As a result, around 43% of people find most websites difficult to use. This proves that accessibility doesn’t just affect disabled users.

Since website templates tend to have the same structure, it’s no wonder there are so many accessibility issues. If one doesn’t work, all the copies will be dysfunctional, too. Templates make it easy for anyone to publish a website, but it comes at the cost of accessibility. And if you’re a designer using templates without modifications, you’re probably delivering inaccessible websites to your clients without knowing.  

To start incorporating accessibility into your sites, consider taking a bottom-up approach to the way you design and develop your sites.

How to take a bottom-up approach to web design

A top-down approach begins with the big picture and breaks it down into smaller details. A bottom-up approach works in the opposite way – the fine details are considered first and the big picture emerges within that container. In this context, the fine details are accessibility standards. Once you make a website accessible, then you can create the rest of the elements and design within the boundaries of the accessible structure.

If you’re not sure where to begin, the following strategies will help.

6 Strategies to make client websites more accessible

6 Strategies to make client websites more accessible

1. Brush up on accessibility basics

If you haven’t already become familiar with the basics of website accessibility, that’s where you’ll want to start. For example, study websites with accessible typography, color contrast, list elements, heading tags, and navigation. You’ll learn a lot just from seeing how other developers make it work.

2. Learn how screen readers work and test your site

Learning how a screen reader works is the most important thing you can do to make your websites accessible. Watch this man use a screen reader as he demonstrates the difference between accessible and inaccessible content. Knowing how this works will help you build better sites and you’ll understand why you should never skip alt tags and other important accessible elements.

If you can, get screen reader software for first-hand experience so you know what the frustrations are when a site is not accessible. Use it to navigate your clients’ sites before delivering the final product to make sure it’s accessible, or pay someone who regularly uses a screen reader to test your sites before delivery.

3. Consider how useful features might also annoy users

There are plenty of cool features that seem user-friendly that can also be a source of frustration. Just because a particular feature has some benefits, don’t assume it isn’t also capable of frustrating users. For example, Facebook randomly refreshes a person’s feed for the purpose of providing newly posted content, but it often happens right when a user is about to click on an ad or post. Many people find this refresh feature annoying, but Facebook hasn’t done anything about the issue.

If you create a website with dynamic content or features that impact the way a user navigates the site, first make sure it doesn’t interfere with accessibility, and then consider how it might cause frustration. It’s helpful to have people test your websites thoroughly before delivering them to your clients, but if that’s not possible, ask your clients to tell you if they get any feedback that warrants changes to the user experience.

4. Reconsider extremely plain content

For the most part, simplicity usually enhances accessibility because it’s devoid of bells and whistles that create distractions and barriers for users. However, there are exceptions. For example, if you have a single web page with 10-20 hyperlinks and there’s no design to the page, its simplicity will work against your intentions.

When a user visits a webpage that only has links, say in a bulleted list in two columns down the page, all the links look the same and it takes a lot of effort to read them all to figure out which one to click. Instead of structuring content like this, use category headings to group links together by type, and use color contrast to make the links more visible and easier to read. All it takes is a simple alternating background color behind the links so they don’t blend into the background of the page.

5. Get granular

Let’s say you place a floating hamburger menu at the bottom of the screen for mobile users to make navigation extremely easy – users can just tap the menu with their finger while they hold their phone. When you create the drop-down menu items, you’ll want to place the most important links at the bottom (rather than the top) because that’s where they’ll be most accessible to users.

This particular design might not work with typical layouts for other pages, but because you’re taking a bottom-up approach, you’ll find a way to make it work because accessibility is the priority.

6. Use closed captioning

Anytime you add video content to a website, if you have control over it, use closed captioning. While video players will typically provide subtitles for users, it’s not the same. Subtitles are generated automatically or transcribed by people, but it only accounts for spoken words. On the other hand, closed captioning includes descriptions of everything that’s happening, including descriptions of background noise, music, and other important sounds.

Prioritize accessibility for the best user experience

Building good websites requires that you prioritize the user experience, and that includes focusing on accessibility. While it’s a legal requirement for business websites to be accessible to people with disabilities, making sites more accessible benefits everyone. Fancy, flashy sites might seem cool on the surface, but too many bells and whistles can work against your intentions. Most business owners want conversions, and by prioritizing accessibility, you can help them achieve this goal.

Chief Revenue Officer at Software Development Company
Timothy Carter is the Chief Revenue Officer. Tim leads all revenue-generation activities for marketing and software development activities. He has helped to scale sales teams with the right mix of hustle and finesse. Based in Seattle, Washington, Tim enjoys spending time in Hawaii with family and playing disc golf.
Timothy Carter