How to Bake Accessibility into Your Design System

Modern e-commerce does its very best to help businesses with a digital footprint relax into a sense of ease and convenience. We see this in the simplicity of starting a website these days, with competitive platforms offering fully fleshed out design ideas and click-button site building, no coding required.

However, as a business owner, web designer, or web developer, it is essential that you not let ease and convenience lull you into a missed step when it comes to supporting digital accessibility efforts. Also known as the “build it first, fix it later” approach. 

This fix-it-later approach results in the design, development, and deployment of whole websites riddled with baked-in accessibility barriers. And, unfortunately, these barriers come with a whole host of downsides, including that they:

• violate federal law
• fail to comply with global standards
• leave businesses remarkably vulnerable to lawsuits and fines
• fail to capture easily achievable business benefits 

This approach seems to rely on the belief that auditing websites and retrofitting accessibility upgrades is just as easy as designing an accessible website from the beginning. Afterall, there are services for auditing accessibility, so who cares if it gets baked in from the outset or added in later? *shrug*

Why Early Adoption of Digital Accessibility Matters - The Train Metaphor

Imagine that two trains leave Penn Station in NYC at the exact same time, both bound for Union Station in Los Angeles. Each train has 500 passengers to pick up between NYC and LA, all of whom want to get to LA to live their best life.

The First Train: Getting there the FASTEST is all that matters

The first train leaves Penn Station without setting any scheduled stops to pick up passengers, knowing that it can always go back to get them later when it needs to. This train arrives at Union Station in record-setting time. 

But just as the train pulls into the station, word arrives that those 500 passengers at every station in-between NYC and LA have filed complaints and lawsuits about not being picked up. They’ve told their family, friends, and neighbors about the problem. They’ve left horrible online reviews. They’ve recommended that nobody buy a ticket on that train line ever again. They’re even lobbying their elected officials to see what can be done about the problem in the future. They know they’re as valuable and worthy as any other paying customer. They just weren’t treated that way. 

Realizing its mistake, the first train reverses course immediately, retracing its path to pick up those other 500 customers across the country. Unfortunately, picking up the neglected passengers is not as easy as they imagined it would be since some are now scattered, hard to find, and uncertain of the schedule. And others have declared that they’ll never ride that train now, no matter what happens. 

The first train does eventually succeed in reaching LA again- with many of the passengers on board (though not all). The cost of taking this approach was exponentially more than it should have been across all metrics. It required significant time, energy, resources, public relations, lawyers, and money. Brand impression and loyalty are low. Future business is uncertain.

The Second Train: Getting everyone there in the MOST SENSIBLE WAY is what matters

The second train leaves Penn Station, stopping as scheduled at every station along the cross-country route, picking up passengers as scheduled. This train arrives at Union Station with train cars full of happy passengers, eager to reward the train with high praise, glowing reviews, and future ticket purchases. Brand impression and loyalty are high. Future business is certain.

Digital Accessibility Upfront is the MOST SENSIBLE WAY

Planning your website’s path from start to finish, while accounting for digital accessibility upfront, as part of the plan in the first place, is far easier and more readily achievable than backtracking. It ultimately saves time, money, hassle, legal wrangling, and consumer trust. It builds brand objectives, loyalty, tax incentives, and business benefits right into the framework from day one.

Design Components That Need Early Attention

Our main focus is on actually making the web more accessible to blind and low-vision users, and to that end, we want you to know the top five design components you should build into your website from the start. 

Top 5 Design Components To Do Upfront

• Semantic HTML and Headings: Using semantic HTML and structuring your website with heading designations is how your website will communicate with screen readers and other assistive technology.

How to Do It: Use HTML elements like <header>, <nav>, <main>, <footer>, <article>, etc. to identify sections and functions. Doing this in conjunction with heading designations, used in order (like <h1>, <h2>, <h3>, etc.) provides a clean layout that is easy to understand, follow, and navigate with assistive tools. 

• Keyboard Navigation: This means making sure that your entire website can be navigated and engaged with using only a keyboard. 

How to Do It: Make sure navigation is possible using the Tab and Shift+Tab buttons. And confirm that your interactive elements, like menus, forms, and buttons, don’t act as traps for people using keyboard navigation (keeping them from getting out or moving on). Also, double check that pop-ups aren’t unknowingly blocking navigation or taking people to another website without warning. 

Check out our blog for more insights on keyboard navigation, including this article: If Your Website Only Works With a Mouse, It’s Broken! 

• Color Contrast and Visual Design: Make sure that text and other visual elements on the webpage have strong contrast against their background. Subtle or slight color shifts (like just varying hues of a single color) are not enough to stand out to people with low vision. Strong contrast helps distinguish text and more. 

How to Do It: The global Web Content Accessibility Guidelines (WCAG) currently recommend a minimum contrast ratio of 4.5:1. 

• Alternative Text for Images: Make sure every image on your website has a textual description. This enables anyone relying on screen readers to understand the expanded context provided by the image and to experience the messaging intended by its inclusion on the webpage.

How to Do It: Include a brief, clear textual description of both what the image shows and what it is intended to convey. These two elements are both important because the meaning of an image is frequently broader than just whatever is portrayed in the image. For example, an article on aging gracefully and naturally might make reference to wisdom and beauty that come with age. An image embedded in the article might show a huge, beautiful old oak tree, with leaves vibrant shades of red and orange, having changed color for the fall. The alt text on the image might say: “A tree with leaves turning colors conveys the beauty of aging.”

• Accessible Form and Labels: Make sure that any forms used on the website are easily understood and navigated. Without this, what should be a great opportunity to communicate with your visitor or gather critical or sales information, can turn into frustration and failure to convert.

How to Do It: Include clear, easy to understand labels for every form, error message, or on-site instruction. Every detail counts with this. For instance, it isn’t enough to just label a form as a form. You need to make sure that a user can easily understand what type of form they’ve encountered, what is being asked of them, and what information they need to provide at every step of the form.

Tools and Tips for Designers and Devs

While there are a lot of options out there for web designers and developers when it comes to creating usable, accessible online space for everyone, a few that we’ve found incredibly handy are things like:

• Figma annotations
• Accessibility checklists
• Coding best practices

These are very useful for keeping track, staying on task, and communicating in real time about needed edits and review. 

This is especially true if your design and development team isn’t well-versed in digital accessibility in the first place. We invite you to peruse our blog to see what insights and practical guidance feels the most helpful in getting to the end goal.

Benefits in Baking Accessibility In from the Start

If you read the train metaphor above, then you know there are some serious benefits to being proactive- building accessibility in from the start- versus being reactive- retrofitting accessibility upgrades after the fact. 

Some of these benefits include things like:

• Faster development
• Fewer bugs
• Better user experience
• No or low risk of lawsuits and fines
• Building brand loyalty and trust
• Facilitating conversions (how you measure it- completed sales, gathering contact info, getting phone call or email inquiries, etc.)
• SEO boosts from search engines like Google that favor fully accessible websites

Who Can Help You with Digital Accessibility Design and Development?

We can! AllyADA is in the business of conducting digital accessibility audits and helping companies and organizations plan how to retroactively build key accessibility design components into their website. 

But guess what else we do? Help companies and organizations plan how to build key accessibility design components into their website from the beginning!

Understanding that you should start with accessibility at the outset doesn’t mean that you have to do it alone. Our team of CPACC-certified accessibility professionals can assess your web design plan and strategy and offer direct feedback and advice on how best to:

• Make your website fully compliant with WCAG and ADA standards
• Make your website fully accessible to blind and low-vision users
• Utilize whatever tools your team is comfortable with to review and communicate design and development recommendations
• Review your website once it’s up and running to ensure successful completion of the plan, including through blind manual review of the website
• Review your website periodically for compliance with ever-evolving standards or in keeping with any site adjustments or upgrades that take place

Call AllyADA today for a free consultation to get an idea how we can help. Fixing problems before they even start is what smart, forward-looking leaders like to do. Yeah, we know that’s you.