Color palettes, font choices, imagery, content hierarchy — web designers obsess over how a website looks and functions. Yet, it’s easy and common to overlook a crucial experience element: website accessibility.

Web accessibility means websites, tools, and technologies are designed and developed, so that people with ALL abilities can use them.

Users may have different limitations or types of disabilities preventing them from effectively using your website. Some estimates place disabled Americans around 26% (nearly 61 million people, with an annual disposable income of $1.2 trillion), and over a billion people world-wide live with some form of disability.

Websites and platforms that don't meet the latest in website accessibility standards exclude huge communities of users, and frankly, are more likely to give a poor user experience (UX) to everyone. Many of the same principles guiding web accessibility also improve UX – no one likes struggling with a frustrating website.  

There are also legal implications – the United States and countries around the world have accessibility laws and regulations to prevent discrimination and promote equal access across the web.

How do you ensure your website is accessible and inclusive for everyone? We’re sharing web accessibility benefits, legal risks, user considerations and best practices, and a proven process to easily improve accessibility.  

Our Accessibility Guide Uncovers:

• Why Website Accessibility is Important
• Web Accessibility is The Law
• Designing for Different Users – Two Sample Considerations
• Getting Started -  A Website Accessibility Process

Why Website Accessibility is Important

The internet is at the heart of today’s digital age, from education, finances, employment, government, business, healthcare, home management, and more. That’s why equal access and opportunity are so important.

Designing a web experience for EVERYONE means considering a variety of disabilities and limitations, like:

• Motor Function impairments - such as weakness and limitations of muscular control, limitations of sensation, pain that impedes movement, and missing limbs
• Hearing impairments – such as partial to full deafness
• Cognitive impairments – such as dyslexia, learning disabilities, trouble concentrating, or anxiety
• Neurological limitations – such as brain injuries, proneness to seizures, and autism
• Speech impairments - such as dyslexia or slurred speech
• Vision impairments – such as color blindness, partial blindness in one eye, or full blindness

These disabilities are not mutually exclusive - users can experience any combination of these impairments at any time.

Plus, consider other circumstances that may impact a user’s ability to effectively use your website like, lack of digital maturity, temporary disabilities (such as a broken arm), situational setbacks (such as limited audio), and internet users with slow connections or using different devices.

For example, including closed captions on your video is a great way to include people with hearing impairments or those using screen readers. It's also a great way to include people on the metro without their headphones or on their phone, while their college roommate is sleeping.

It’s solving for different user types and situations, whether they’re permanent or situational. This is frequently referred to as inclusive design – designing for the widest range of people and circumstances.

Providing an equal experience for everyone is just the right thing to do. Plus,  ensuring your website is built to accommodate all users boosts better revenue outcomes.

Web Accessibility Benefits:

• Reach larger audiences
• Perform better in search results and improve search engine optimization (SEO)
• Have better overall usability
• Have faster downloading times
• Avoid legal action, which is very costly in terms of time and money
• Promote positive brand experiences
• Lead to customer loyalty and increased ROI

While inaccessible websites lead to:

• Reduced user retention
• Negative brand experience
• Reduced conversions
• Legal action – lawsuits stemming from policies put in place to protect the rights of people with disabilities

If your website is not optimized to be inclusive and accessible for all, there’s a very real chance that you’re excluding users from interacting with your business – and that comes with legal risks.

Web Accessibility is The Law

In many cases, web accessibility is a basic human right required by law.

In 2022, there were 2387 web accessibility lawsuits filed, with the largest majority (58%) occurring in the consumer goods, services, and retail industry. The same year saw a 143% increase in companies receiving multiple lawsuits year-over-year.

Legally, accessibility is measured through a set of criteria put forth by the Web Content Accessibility Guidelines (WCAG).

WCAG guidelines defines four principles of accessibility, as:

• Perceivable - Information and user interface components must be presentable to users in ways they can perceive.
• Operable - User interface components and navigation must be operable.
• Understandable - Information and the operation of the user interface must be understandable.
• Robust - Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.

The WCAG also has three levels of compliance: A (least stringent, impacts the largest proportion of people), AA, and AAA (most stringent). Each level builds on the previous level.

• A is the easiest to attain with minimal effort and immediately benefits a large audience, but it doesn’t solve everything.
• With just a bit more effort, it’s possible to reach AA compliance and benefit those using assistive technology (meaning screen readers and keyboards). Meeting AA is the most common and attainable goal, enabling the majority of users to comfortably use your website.
• AAA has fairly minimal benefits over AA, with significantly more effort involved.

Section 508, a subset of WCAG, dictates that your website or application must meet WCAG 2.0 AA to receive federal funding. More information can be found here.

Let’s look at examples of color contrast variations and what would be considered acceptable by WCAG.

In this example, consider users with excellent eyesight – it’s still challenging to see yellow text on a blue background. Trying to fill out a form or submit information when the text is illegible makes for a stressful user experience for everyone.

By ensuring the button copy is large and the colors meet the contract minimum, the form submission experience is easier for all users – plus, it passes WCAG standards.

Designing for Different Users – Two Sample Considerations

Interacting with your website should be second nature — text clear enough for users of all abilities to see, thoughtful content hierarchy and layout to guide exploration, diverse and relatable photos and imagery, and usable interactive features.

To demonstrate web accessibility use cases, let’s compare design optimizations to improve two different users’ experiences.

Motor Function Issues

A person living with motor-function issues (like limitations of muscular control or sensation, pain that impedes movement, and missing limbs) may prefer to use keyboard navigation, instead of a mouse or touchscreen.

A keyboard navigable site enables the user to tab between links using the keyboard; hit enter to select a particular link, and use the up and down arrows to scroll up and down the page.

They also might predominantly use mobile devices, so optimizing your website to deliver a great mobile experience from every device is key.

Designing a more accessible experience for users with motor function issues includes, but is not limited to:

• Mobile-friendly  
• Keyboard navigable
• Orientation agnostic
• Easy to hit buttons + large click areas
• Plentiful space between components

Visual Impairment

A person living with a visual impairment (like vision loss in one or both eyes, or color blindness) has different needs than someone with a physical limitation.

They may zoom in to read information, so it’s important to make sure text and images are high resolution and can be viewed at a minimum of 200% of their original size. Additionally, check that there’s a satisfactory level of color contrast to ensure copy is legible (font color and size) against the background.

Users with more significant visual impairments might use assistive technology, like screen readers, to interact with your website. Screen readers simply render the text and image content into speech or braille output.

Designing a more accessible experience for users with visual impairments includes, but is not limited to:

• High contrast
• Non-color distinction (color cannot be the only way to distinguish meaning – for example, if you used red copy on a webform to indicate an error, a person living with color blindness might not see that distinction. Fix this by using both color and a visual cue, like an icon.)
• Screen zoom (content can be viewed at 200%)
• Screen reader support
• Alt-text for images (pro tip – alt text also helps to boost SEO)
• Keyboard navigable
• Avoid small font sizes and long texts

Both scenarios show the differences and similarities between designing an experience to be more accessible for everyone’s way of life. Many of the recommendations, like mobile optimization, are crucial user experience (UX) best practices too.

By stepping into your audience’s shoes, removing frictions, and painstakingly striving to make the experience easier to navigate and engage with, you’ll inevitably improve your website for all of your users.

Getting Started -  A Website Accessibility Process

Follow these steps to ensure your website is accessible and technically compliant.  Need help? Contact Whereoware to improve your website accessibility.

Step 1 - Accessibility Audits

Strategically audit your website’s compliance by testing a sample of pages. Where do you note challenges or frustrations?

Think through common scenarios –

• Is the website mobile optimized? (Test by interacting on your device)
• Is there an intuitive content hierarchy and layout?
• Is copy legible, with enough color contrast?
• Can the website be navigated via a keyboard?
• Do CTA buttons have enough contrast and space to easily click?
• Is webform error messaging combining color, messaging, and icons to guide the user to successfully input data (not relying solely on color)?
• If you zoom your screen to 200%, do you lose important content?  

Make note of all of these potential issues to prioritize fixing later. This discovery stage is crucial in determining what your company can improve on.

Step 2 - User Interviews

Pull together a team of diverse users to understand their needs, challenges, and impressions. This step will validate the assumptions and findings from step 1, but also reveal new challenges and opportunities to improve accessibility.

Make sure a variety of different perspectives and user types are heard and considered.

Step 3 – Requirements + Roadmap

Find out your organization’s standards for Accessibility and DEI (diversity, equity, inclusion).

Itemize how your site is used, like making purchases, viewing account information, submitting claims, or carrying out other tasks. Identify the highest visited pages, and those with the highest abandonment rate.

Layer in the issues found in step one and two to develop a roadmap to focus attention on making highest priority pages more accessible, and working through the backlog.  

Step 4 - Design and UX

This execution stage is reimagining your current digital experience and mapping out key optimizations to make it more accessible.

Depending on your site’s issues, a designer might create new brand guidelines, wireframes, user flows, and/or content assets to address pain points and adhere to design and user experience (UX) best practices.

Step 5 – Testing

Once new designs and optimizations are ready, it’s time to test.

Start with iterative testing – run automated tests to make sure code is meeting accessibility standards. If any issues are found, add prioritize them within a backlog.

We recommend running Google Lighthouse Automated Testing tool to rate your website’s individual pages based on performance, accessibility, SEO, and best practice criteria to receive a score. To provide a good user experience, sites should strive to have a good score, which is in the 90-100.

Don’t forget to run manual tests too. Double check all user tasks can be accomplished, all issues identified during your previous audit are no longer creating friction, and all content is accessible, via a keyboard or a screen reader.

Step 6 – Continuous Evaluation

Optimizing for a more accessible web experience is never complete – it’s an ongoing task. Your users and their priorities will always evolve, as will technology and best practices. Over time, your website may creep back into less accessible territory.

Continuously evaluate, measure, and test how you can make the web experience better for ALL users. Roll out new accessibility enhancements as you find issues, but at a minimum, evaluate and measure your website’s overall accessibility each quarter.

Accessibility is for Everyone

At Whereoware, we believe that internet access is a fundamental right – and accessibility is for everyone.

From accessibility audits, to kickoff and discovery, through architecture, design, and development, our accessibility and user-experience experts will ensure your website’s user experience is excellent for all users. Contact us for a professional accessibility audit and remediation plan.

‍