website-accessibility-and-ux:-how-are-they-related?

David Gevorkian

Accessibility has a great impact on user experience (UX). Creating an accessible website ensures that people, regardless of their physical or mental limitations, can obtain the information they need and communicate with your organization like the rest of the world.

With internet technology becoming mainstream, making your fully accessible is more important than ever. Adhering to the web accessibility standards is a legal requirement (as provided in the American Disability Act of 1990). Public and private organizations also consider it a social responsibility.

Building and Construction Accessibility.

Physical access to offices, healthcare facilities, schools, and commercial establishments is a basic civil right. When constructing a building, the owner should ensure that accessibility is incorporated into the planning and design process. For example, people in wheelchairs should be able to conveniently enter a building through the presence of ramps or via elevators. There should be parking areas allocated only for clients or guests with disabilities, doors should be kept open where possible, signs must be placed where customers can easily see them, and specialized devices or equipment that cater to their needs should be made available.

Website Accessibility.

The federal law requires that all public accommodations should be accessible to anyone with or without a disability. With billions of people using the internet to transact with government offices, buying all sorts of stuff online, booking a hotel, flight or restaurant reservations, searching for local businesses, etc, it is also important that websites are made accessible and navigable to them.

When designing a website, a lot of developers and business owners tend to overlook the importance of website accessibility. What they don’t realize is that it compromises their brand, hurts their reputation, and increases their risk of lawsuits.

The Americans with Disabilities Act (ADA) is a comprehensive law aimed to protect the rights of people with disabilities. It requires that all offices, organizations, or institutions (public or private) make their goods or services accessible to those with physical or cognitive limitations.

While web accessibility was not specifically outlined in the ADA, it is considered part of Title III: Public Accommodations. ADA compliance is a hot topic today and many businesses have faced lawsuits because of violations due to non compliance.

What is Section 508?

Also known as 508 Compliance, it is the shorthand for the law requiring government websites to be accessible for people with disabilities. It is an amendment to the Workforce Rehabilitation Act of 1973 which basically requires accessibility on all federal electronic and information technology (EIT).

What is WCAG?

Because the ADA does not directly define web accessibility and it’s scope, web designers and developers refer to the Web Content Accessibility Guidelines (WCAG). It is a set of international standards that provides specific recommendations on how to make websites accessible.

Differences between WCAG 2.0 and 2.1

WCAG 2.1 is the updated version of the guide which was published early in 2018. It defines the success criteria provided in 2.0 but with a few more additions to address mobile accessibility, people with low vision, and people with cognitive and learning disabilities. It’s important to note that WCAG 2.1 conforms to 2.0 which means that the accessibility requirements outlined in the WCAG 2.1 are the same as that of the earlier version.

What is VPAT?

The Voluntary Product Accessibility Template (VPAT) was originally used as a tool to conduct government research on the use of information and communications technology (ICT). Now, it is being utilized to test a website’s accessibility in conformance to the rules and regulations provided in the ADA and Section 5.

When it comes to website design, we often think about aesthetics. Of course, to attract more visitors, we want to make our websites beautiful with beautiful fonts, graphics, buttons, and other visual elements.

But creating a website that is both beautiful and accessible is possible. When designing your website, consider the following steps:

Enable keyboard navigation for web design.

ADA-compliant websites are keyboard-accessible. This means that all their functionalities can be accessed through the keyboard. In addition to traditional keyboards, note that some disabled users make use of specialized computer keyboards. Thus, your website navigation order must be logical and intuitive. This means it should follow a visual flow, such as “right to left” or “top to bottom”. Basically, you want to make it easy for users to navigate links, buttons, and form controls on your website via their keyboards.

Prioritize text clarity.

Written content such as articles page info and calls-to-actions should be easy to read. Vision problems like color blindness, near or farsightedness, cataract, and low vision are among the most common disabilities not just in the U.S. but in the world. Thus, it only makes sense to prioritize text clarity when designing websites.

Don’t rely exclusively on color.

While color is important, they are not the only consideration to make when creating an accessible user interface. The font style and size are important too. Times New Roman, Verdana, Arial, and Calibri are among the most recommended font styles.

Order content in HTML for screen readers.

When structuring content, always consider how it can be accessed by people that use screen readers. These are devices that translate digital text into synthesized speech. Note that a screen reader presents content linearly or one item at a time.

Add explanatory link text.

Providing a text description can help users distinguish one link from the others and determine whether to follow the link. When the link redirects users to an image, the text alternative will describe the unique function of the link. If it contains both text and an image, the description can be used to describe both the content and the image.

Use a 40×40 pt. clickable area for touch controls.

People with mobility issues make use of touch controls to navigate the web. When creating the layout of your web interface, provide enough space for CTAs and other clickable areas.

Do not forget to follow the accessibility checklist.

An accessibility checklist ensures that all parts of your website adhere to the WCAG. Everything from the images, colors, text, audio, video, navigation, site structure, forms, and text elements.

Accessible web design does not only lead to better experience among users with disabilities but also among those who do not have disabilities or limitations. Many accessibility requirements improve user experience, particularly in limiting situations.

For example, the use of contrasting colors or easy-to-ready fonts benefits people accessing a website from a small screen (such as a mobile phone) or in a dark room. Text alternative benefits users with limited bandwidth while audio transcription is a great tool for users who are unable to use earphones to access audio content.

Websites that follow the WCAG and ADA-requirements for web accessibility can benefit from creating a page solely for accessibility information. A great example of an accessibility guide is the one from the BBC website. It outlines how users can navigate and make the most from their website if they are blind, can’t see very well, unable to hear, or unable to use the keyboard or mouse to browse. Meanwhile, the accessibility statement is a powerful declaration of their commitment to making their site accessible. It includes information about the company’s accessibility goals and the methods they are using to achieve them.

After making the necessary changes, web designers should test whether they have achieved their accessibility goals.

Accessibility testing can be done in two ways: manual or automated. Accessibility firms like Be Accessible Inc. combine these approaches by using tools and conducting end-user testing involving real people with disabilities to examine the accessibility of a website.

Usability testing, on the other hand, is carried out to determine how useful the website is based on several criteria, such as learnability, efficiency, and user satisfaction. A more practical and effective way for businesses to measure the usability and accessibility of their websites is by outsourcing it to a third-party testing company.

Accessibility, in a nutshell, is usability for all.

It ensures that everyone has equal access to your website, no matter what limitations or disabilities they have.

Accessible websites have all elements from the text to the visuals and audio components available for people with disabilities.

It’s hard to cater to all disabilities, but by following the recommendations provided by the WCAG, Section 508, and relevant policies on accessibility, you can make your website usable and accessible for people with varying disabilities.

accessibility-drives-aesthetics

Paying homage to OXO, Eames, GOV.UK, and more.

Alex Chen

Graphic of 4 accessibility icons in a row gradually increasing in contrast over a purple lilac background.

Graphic of 4 accessibility icons in a row gradually increasing in contrast over a purple lilac background.

Image descriptions are in the alt text.


There’s an article circulating that claims accessibility and aesthetics are at odds with each other, creating a paradox that forces us to compromise. Here’s why I find that belief completely and utterly false:

The article claims that if we are “too accessible,” we will meet the needs of the minority but end up hurting those of the majority. This creates a false equivalence between having legitimate access needs and having a preference for a certain aesthetic.

Let’s assume two people are looking at a poster to check for movie times. Person A can read it just fine, but Person B can’t read it at all. The words are too small and the colors are too faint to see. So Person B requests a new poster.

The movie theater takes the feedback into account and releases a new poster. Now, both people can read it. But Person A doesn’t think it looks nice.

These needs are simply not the same.

The majority-minority mentality itself is a harmful way to divide people. To provide an example of how this plays out in planning, the 80–20 rule suggests that we should focus development efforts on the majority use case that plays out 80% of the time.

Oftentimes, ableist people use this as an excuse to avoid designing for disabled people. That’s not what this rule is actually about. This rule is intended to focus on the most common user goals and scenarios. Take a pet supply online store, for example. If 80% of people want to buy pet food, we can de-prioritize the case where 20% of people want a treat tasting subscription service. But people should be able to buy pet food whether they are Blind, or Deaf, or have cerebral palsy, or have any kind of disability that requires accessibility.

Edge cases refer to scenarios, not humans.

The article constantly compares people with visual impairments to people with “normal vision.”

Normal is a lazy word. When people say someone is normal, they usually mean able-bodied. Or white. Or cisgender. Or male. Or heterosexual. Normal is an othering tool because it implies marginalized people are abnormal.

In an age where technology is constantly straining our eyes, breaking our posture, and forcing us into sedentary lifestyles, having access needs is normal. When nearly 13% Americans have a disability and nearly 75% use some sort of vision correction, disability is normal (disability source, vision source).

Rather than use the word normal, I find it’s helpful to use specific terms:

  • Blind vs. sighted
  • Deaf vs. hearing
  • Disabled vs. non-disabled
  • Disabled vs. able-bodied

Instead of acting as an inhibitor, accessibility is often a driving factor in aesthetics. You don’t need to sacrifice aesthetics in order to be accessible (and if you think the two concepts are polar opposites of each other, I don’t think you’re trying hard enough).

To prove it, here are some of my favorite examples of beautiful accessible design:

  • OXO Swivel
  • Eames leg splint
  • RX bar packaging
  • Prime Access Consulting
  • Gov.UK design system
  • Cash App

(None of these were paid product endorsements.)

OXO Swivel

Kitchen tools like potato peelers were notoriously difficult to use. Fashioned purely out of thin metal rods, they often hurt to hold, especially for people with arthritis.

(It’s worth noting that this was a health issue that disproportionately affected women, since they were often expected to carry out household labor without complaining.)

Comparison of the old metal peeler (not accessible, not aesthetic) with the new OXO grip peeler (accessible! aesthetic!)

Comparison of the old metal peeler (not accessible, not aesthetic) with the new OXO grip peeler (accessible! aesthetic!)

OXO released their Good Grips line in 1990, with the swivel peeler as their flagship product designed specifically for people with arthritis. It’s significantly easier to grip and has a charming, bold look. I personally love the contrast between the chunky black handle and the thin, metal peeler.


Eames leg splint

Disabled veterans were a major reason why accessibility became a top issue in post WWII America. Specifically, medics found the standard metal leg splint actually made injuries worse and needed a better solution, so they went to the Eames designers.

Comparison of the old metal leg splint (not accessible, not aesthetic) with the bent plywood splint (accessible! aesthetic!)

Comparison of the old metal leg splint (not accessible, not aesthetic) with the bent plywood splint (accessible! aesthetic!)

Charles and Ray Eames, arguably the two most famous industrial designers in history, were commissioned to design a light-weight, easily manufacturable leg splint for veterans. They created the splint using bent plywood (their most well-known medium of choice). I find this object really elegant and impressive to look at, and far more friendly than the metal version.


RX Bar packaging

Most packaged foods list the ingredients on the back in fine print, making it difficult and sometimes impossible to read.

(This poses a real issue to folks with allergies and specific dietary needs.)

Comparison of a Lays chips bag (not accessible, not aesthetic) with bold RX bar packaging (accessible! aesthetic!)

Comparison of a Lays chips bag (not accessible, not aesthetic) with bold RX bar packaging (accessible! aesthetic!)

RX Bar values transparency in their design by listing all the ingredients in big bold letters. This benefits people with low vision, and ultimately everyone who wants to take a closer look at the ingredients. I find the simplicity of this package design makes a beautiful, bold impact.


Prime Access Consulting and Purple Rock Scissors

Prime Access Consulting (PAC) is a consultancy that specializes in accessibility and inclusion. They do a lot of impressive work, especially for museums, which are historically inaccessible to Blind folks.

(When we think about visually accessible design it’s important to consider that Black and Indigenous people have higher rates of visual impairment, so this is as much a race issue as a disability issue. source)

PAC has created braille labels and audio recordings for Cooper Hewitt, a bold new website for the Field Museum and MCA Chicago with high contrast and large touch targets, and an image description management system called the Coyote Project.

Purple Rock Scissors is an independent strategic creative agency. They specialize in a holistic approach including UX design, content, business strategy, and agile tech.

Compare the Louvre’s site with that of the Field Museum’s, which Purple Rock Scissors redesigned while also consulting Sina, the founder of PAC.

The visual clutter on the Louvre’s site is distracting and makes it difficult to look for and focus on what you want to do. In comparison, the clean aesthetic of the Field Museum’s site — with big bold text, helpful visuals, and clear call to actions — is more accessible and better looking. Purple Rock Scissors has an awesome case study about this project.


GOV.UK Design System

Government agencies are required to meet rigorous accessibility standards (as they should, they serve the people). But I think anyone who has used a government institution’s website can relate to these sites being difficult to use. Often stuck in the 90’s, they typically have small font sizes, overly dense text, and are not responsive on mobile.

Compare, for example, the San Francisco Department of Public Health’s website with that of GOV.UK.

What a big difference. Not only was the SF website full of clutter but I swear it took about 10 seconds to fully load all the images (on my Google chrome browser). In comparison the GOV.UK site places all the essential information front and center and took about 1 second to load. I find their high contrast, simple writing, and clear status messages really supportive and highly aesthetic.

Related to the UK design system is Adam Silver’s website. Adam is currently a designer for the UK ministry and also writes a blog about creating accessible UI. His site is intentionally very clean, with large font sizes and clever use of white space. I think it creates a really pleasant look overall.

Adam Silver website screenshot

Adam Silver website screenshot


Cash App

I use Venmo, Paypal, Chase Pay, and Cash App to send money to people. In my experience, most of these apps have several distracting elements on the screen. Especially on Venmo and Chase Pay, I have to navigate through several options before I find what I need. (And Venmo keeps showing me other people’s transactions? Why?)

Comparison of the Venmo app(not accessible, not aesthetic) with the Cash app (aesthetic! sort of accessible)

Comparison of the Venmo app(not accessible, not aesthetic) with the Cash app (aesthetic! sort of accessible)

In my opinion, Cash App is the most intuitive. When you open it, you can immediately request or pay money without having to navigate to another page. Its simple interface creates a playful and minimalist look.

Update: Cash App is definitely aesthetic and almost accessible! The color contrast runs just shy of passing WCAG compliance. Here’s a comparison chart showing what the app would look like at AA large, AA, and AAA. Thanks to the very observant reader for that catch.

Comparison chart of Cash App: 1) original at 2.71, fail, 2) AA large pass at 3.05, 3) AA pass at 4.55, 4) AAA pass at 7.08

Comparison chart of Cash App: 1) original at 2.71, fail, 2) AA large pass at 3.05, 3) AA pass at 4.55, 4) AAA pass at 7.08


And many more

I shared some of the most notable examples of beautiful accessible design that come to mind, though I want to point out that there are many more examples out there that I didn’t mention.

If any come to mind that you want to share, comment or tweet at me @thetuttingtutor.

Of course disability rights is about disabled people.

It’s also about women. And race. And class. Every social issue is also a disability issue. This means accessibility is not just a matter of compliance, it’s a means of working toward restorative justice.

When we talk about accessibility, we have to talk about systemic barriers as well. It is completely legal for employers to pay disabled people below minimum wage (source). The state can take away benefits when they get married (source). The healthcare industry charges them exorbitant prices for medical care (see the price of insulin) and mobility aids (see the price of wheelchairs).

When we pit aesthetics and accessibility against each other, we are complacent in the systems that create barriers for disabled people. When we prioritize aesthetics over accessibility — as subjective as that judgment may be — we actively oppress disabled people further.

However…

When we declutter our designs to focus on the essentials, we create minimalist interfaces that are accessible for people with cognitive disabilities. And aesthetic.

When we design objects to be ergonomic and naturally form with our bodies, we create products that are accessible to physically disabled people. And aesthetic.

When we up the contrast, increase the font size, and choose a clear typeface, we become accessible to people with low vision. And aesthetic.

Accessibility drives aesthetics because the ability to use something is beautiful.


12–02–2019: Made correction that Purple Rock Scissors redesigned the Field Museum website, not PAC. Apologies for the misinformation.

5-accessibility-tools-to-check-your-design’s-contrast-ratio

If you’re working on web design projects, then it follows that web accessibility should be one of your top user experience considerations. Whether it’s finessing on-page readability for users with visual impairment, or ensuring that your web page’s visual cues remain effective on mobile devices, sometimes color alone may be what’s standing between you and a truly accessible and inclusive design.

One of the most important considerations is contrast ratio — or the luminance relationship between light and dark elements (most often text) in your design. Users with certain cognitive disabilities may require lower contrast text, while low vision readers may need high contrast user interface considerations in the visual design they consume.

Likewise, color blindness is also a consideration that needs the attention of any designer implementing a design process which strives towards equitable, accessible design.

The good news is that there are a handful of inexpensive — and even free — tools that can help you become more cognizant of design for all, and how you can help people equitably experience the design you’re creating.

1. Contrast

Contrast
 is a macOS app that offers designers a way, like its namesake, to immediately gauge the contrast ratio of color choices to assure they are in alignment with Web Content Accessibility Guidelines (WCAG). An app that’s built for immediate feedback without being a burden to your design workflow, Contrast also offers a guide
 on their site that acts as a primer on some of the WCAG accessibility standards.

The app acts as a small menu bar which you can integrate into whatever design software you’re using, or move the menu bar around your desktop to use as a floating window anywhere else on your screen.

958823a6d4793b99c8bdcf26f096f458

2. Color Safe

If you’re looking for an in-browser option, Color Safe
 is a web-based tool that allows designers to generate color palettes based on WCAG standards for contrast ratio. Simply select your project’s background color, font family, font size and weight — plus the WCAG standard you’re trying to achieve — and Color Safe will generate palettes whose contrast ratio scores you can compare.

B5b023b6c63dd63a59577a22e3d2ddd8

3. Tanaguru Contrast-Finder

Tanaguru Contrast-Finder
 is an easy-to-use, web-based tool that allows you to simply enter your preferred foreground and background colors (in either RGB or as a hex code) to monitor your design’s contrast ratio. The tool allows you to select your desired minimum contrast ratio scores, while also generating a list of adjacent colors to evaluate.

These provided alternatives also come with in-use samples of different text sizes, weights, and their resultant contrast ratios — giving you a sense for which color and text choices will not only be more accessible, but play nicely together as part of your overall design.

F1d4337c4ee09101061acc2f0231c9b7

4. Stark

With plugins for Adobe XD, Figma, and Sketch, Stark
 is a plugin that features a suite of tools to foster accessible and inclusive design standards — right from within the software designers are already working with. Stark’s contrast checker tool allows designers to double-check that their typography and font size — in conjunction with the design’s background colors or supporting visuals — provides the necessary legibility and sufficient contrast to harmonize with accessibility guidelines.

As a bonus, Stark also assists with additional accessibility issues, including color-blindness. The app allows designers to view their work in color-blindness simulation and make tweaks to their design system.

F4813b3e9edd2f4d3a0fb01d073f4f5c

5. Spectrum

Spectrum
 is also a free tool that can assist you as you design with color-blind users in mind. A free Google Chrome extension developed by Yehor Lvivski, Spectrum also allows designers to directly test their sites across a range of over eight different versions of color vision deficiencies, including an array of red-green and blue-yellow color blindness.

12b02fa67c1da7ec46ab0b496e749c12

With over 200 million people in the world who are visually impaired, web accessibility should be a top consideration in every designer’s process. Now that you’ve got some handy apps in your toolkit, it’s your turn to get out there and make the web a more accessible place for all!

For more color resources, check out a practical UI color application guide, and our favorite color palette picking tools.


Find more Community stories on our blog Courtside.
Have a suggestion? Contact stories@dribbble.com.

accessibility-and-web-performance-are-not-features,-they?re-the-baseline

This week I’ve been brooding about web performance and accessibility. It all began when Ethan Marcotte made a lot of great notes about the accessibility issues that are common with AMP:

In the recordings above, I’m trying to navigate through the AMP Story. And as I do, VoiceOver describes a page that’s impossible to understand: the arrows to go back or forward are simply announced as “button”; most images are missing text equivalents, which is why the screen reader spells out each and every character of their filenames; and when a story’s content is visible on screen, it’s almost impossible to access. I’d like to say that this one AMP Story was an outlier, but each of the nine demos listed on the AMP Stories website sound just as incomprehensible in VoiceOver.

Ethan continues to argue that these issues are so common in AMP that accessibility must not be a priority at all:

Since the beginning, Google has insisted AMP is the best solution for the web’s performance problem. And Google’s used its market dominance to force publishers to adopt the framework, going so far as to suggest that AMP’s the only format you need to publish pages on the web. But we’ve reached a point where AMP may “solve” the web’s performance issues by supercharging the web’s accessibility problem, excluding even more people from accessing the content they deserve.

I’ve been thinking a lot about this lately — about how accessibility work is often seen as an additional feature that can be tacked onto a project later — rather than accessibility work being a core principle or standard of working on the web.

And I’ve seen this sentiment expressed time and time again, in the frameworks, on Twitter, in the design process, in the development process, and so much so that arguing about the importance of accessibility can get pretty exhausting. Because at some point we’re not arguing about the importance of accessibility but the importance of front-end development itself as a series of worthy skills to have. Skills that can’t be replaced.

Similarly, this post by Craig Mod, on why software should be lightning fast, had me thinking along the same lines:

I love fast software. That is, software speedy both in function and interface. Software with minimal to no lag between wanting to activate or manipulate something and the thing happening. Lightness.

Later in the piece, Mod describes fast software as being the very definition of good software and argues that every action on a computer — whether that’s a website or an app — should feel as if you’re moving without any latency whatsoever. And I couldn’t agree more; every loading screen and wait time is in some degree a mark of failure.

Alex Russell made a similar point not so long ago when he looked at the performance of mobile phones and examined how everyone experiences the web in a very different way:

The takeaway here is that you literally can’t afford desktop or iPhone levels of JS if you’re trying to make good web experiences for anyone but the world’s richest users, and that likely means re-evaluating your toolchain.

I’m sort of a jerk when it comes to this stuff. I don’t think a website can be good until it’s fast. The kind of fast that takes your breath away. As fast as human thought, or even faster. And so my point here is that web performance isn’t something we should aspire to, it should be the standard. The status quo. The baseline that our work is judged by. It ought to be un-shippable until the thing is fast.

The good news is that it’s easier than ever to ship a website with these base requirements of unparalleled speed and accessibility! We have Page Speed Insights, and Web Page Test, not to mention the ability to have Lighthouse perform audits with every commit in GitHub automatically as we work. Ire Aderinokun showed us how to do this not so long ago by setting up a performance budget and learning how to stick to it.

The tools to make our websites fast and accessible are here but we’re not using them. And that’s what makes me mad.


While I’m on this rant — and before I get off my particularly high horse — I think it’s important to make note of Deb Chachra’s argument that “any sufficiently advanced negligence is indistinguishable from malice.” With that in mind, it’s not just bad software design and development if a website is slow. Performance and accessibility aren’t features that can linger at the bottom of a Jira board to be considered later when it’s convenient.

Instead we must start to see inaccessible and slow websites for what they are: a form of cruelty. And if we want to build a web that is truly a World Wide Web, a place for all and everyone, a web that is accessible and fast for as many people as possible, and one that will outlive us all, then first we must make our websites something else altogether; we must make them kind.