Web Accessibility: designing for all

by Sylvia Kim

Accessibility is an important and often forgotten element of building websites and digital products. While W3C’s Web Accessibility Initiative lays out specific standards to follow, it’s surprising how many of those steps are left out in websites and products we use everyday. As the industry continues to make progress in creating a more inclusive web, we should all internalize these standards and own them in our day-to-day work. In this series, members of our project management, development, and design teams share honest reflections and tips on how we can champion accessibility.

Before addressing web accessibility, it’s important to understand exactly who benefits from it. Consider the list of people below, who do you think would benefit from accessibility?

  • Sandra, who is blind
  • Albert, a 78-year-old grandfather
  • Brenda, who has rheumatoid arthritis in her hands
  • Michelle, who is learning English as a second language
  • Mahmoud, who is color blind
  • Jim, who doesn’t have a great data plan for his phone

The answer is: everyone! The World Wide Web Consortium (W3C), an international community that works to develop Web standards, says that while the main focus of Web accessibility is people with disabilities, accessibility also benefits people without disabilities, including:

  • older people
  • people with low literacy or those not fluent in the language
  • people with low bandwidth connections or using older technologies
  • new and infrequent Web users
  • mobile phone users

Which begs the question, if we design for users who have physical impairments, won’t that make the overall experience better for everyone? I would think so.

A few team members and I attended an accessibility workshop at Perkins School for the Blind to better understand how blind users interact with the Internet. It was would be an enormous understatement to say I had a difficult time using my Macbook’s screen reader, VoiceOver, even as a sighted user. But the biggest takeaway was a shift in perspective about disabilities and inclusivity.

Disabilities don’t fit into a box and accessibility shouldn’t either. Consider accessibility as a continuum or spectrum, rather than saying this completely is or is not accessible (you can start with WCAG 2.0 Success Criteria and meet their technical standards to implement best practice accessibility techniques).

When faced with a decision to design for accessibility, you may get some pushback. A common response might be, “But really how many blind users are we expecting to use this website/product/etc.?” While we should empower blind users, accessibility isn’t simply addressing users of just one kind. I’m not in the minority when I say I can’t read on my computer without my glasses. According to the Vision Council of America, approximately 75% of adults use some sort of vision correction. Remind your team that disabilities look and feel many different ways and by providing an accessible website, you can strive to meet the access needs of a diverse society.

A quick exercise in designing accessible forms

As a general rule, don’t rely on color alone to convey information. This comes in handy especially when designing forms. While color is a great way to communicate information, it may not be enough of a distinguishing factor.

In this example, the email address form field’s red border alerts the user of an error.

Form field with red outline error

An easy way to see how users with color blindness will interpret designs is to use Photoshop’s color blindness filter. It simulates two types of color blindness: protanopia, an inability to perceive any red light, and deuteranopia, an inability to perceive green light. You can access the filter by going to View > Proof Setup > Color Blindness.

If we turn the filter on, we see that the red border around the input, although slightly more bold than the others, disappears and may not be informative enough for a color blind user to be prompted to fix their error.

Form field error grey box

By including some extra copy in an expanded field, color blind users will be able to distinguish the error.

Form field extra copy red

This also addresses a second point: provide easily identifiable feedback. Presenting clear feedback and instructions that require user action will help all users, including those who may have learning disabilities or aren’t accustomed to using the Internet.

Form field explainer text grey

This form field example is just the tip of the iceberg. Here are some great resources to help you get started with designing accessible websites that are intentional, compliant, usable, and thoughtful:

To wrap up our series, Jimi Choi will be providing some free accessibility resources for developers on Friday.

About Fresh Tilled Soil

Fresh Tilled Soil is a Boston-based user interface and experience design firm focused on human centered digital design