Design that works for everyone: accessibility at GetGround

GetGround
6 min readSep 30, 2022

--

Written by Floriane, former Frontend Engineer at GetGround

Accessibility matters

At GetGround, we’re on a journey to create an accessibility compliant Design System. In this post, I wanted to take a quick look at what web accessibility actually is, who it helps, and our goals at GetGround for making a product that serves everyone equally.

What do we mean by “accessibility”?

“Accessibility” means removing the barriers that stop people accessing, interacting with, or benefiting from something.

Ever used a lowered pavement, or a dropped kerb? Maybe for your bike or trolley? Almost all of us have. They were initially made with accessibility in mind — to help wheelchair users cross the road unassisted.

But, soon enough, everybody was using them in different situations. This characterises accessibility in a nutshell — it’s intended for those with disabilities, but often ends up helping everyone.

Figure 1: Dropped kerb were invented to help people in wheelchairs crossing the streets (source: curb cut in the Wiktionary)

Misconceptions around disability

There are quite a few misconceptions when it comes to disabilities. First, we tend to think (incorrectly) that disabilities are always visible. But disabilities or impairments can affect speech, audition, vision, physique, or cognitive and learning abilities — meaning you might not notice them just by looking.

Another misconception is that a disabled individual will have only one disability. But many people have several. A deaf person from birth, for example, may have trouble speaking and reading because their initial auditory impairment makes it harder to learn to read and pronounce words the way a hearing person would.

Figure 2: ‘Not every disability is visible’ says a sign on the toilets’ door at one airport

How big is the issue?

In a word, enormous. About 15% of people worldwide are estimated to have one or more disabilities, representing over 1bn people. In the UK alone, 16% of working-age adults have a disability, amounting to over 11m people.

As you might expect, the chances of having a disability grow as people age. Of those aged 60+, about 46% of them have one or more disabilities.

It’s also worth remembering that these stats only consider permanent disabilities — that is, lifelong conditions. Many of us will experience temporary disabilities throughout our lives, only increasing the need for accessibility (both online, and out in the world).

Figure 3: Different types of disabilities depending on their durability: Permanent, Temporary, and Situational. (source: Microsoft’s inclusive design kit)

What is accessibility for the web?

The Web Content Accessibility Guidelines 2.2, or WCAG 2.2, are the standard guidelines for web applications and websites. They define how to make Web content more accessible to people with disabilities.

Web accessibility rests on four key principles: perceivable, operable, understandable, and robust. Under those four principles are thirteen guidelines. The guidelines describe the goals that web content creators should work towards to make their content accessible.

And finally, under each guideline, there are acceptance criteria. We use these to assess the level of conformance of a website or web application towards accessibility. Each acceptance criterion is assigned a level of conformance, A being the lowest level, AA the medium, and AAA the highest.

For each success criterion, there’s noted both sufficient and advisory techniques. These firstly indicate how to meet the success criterion, and then go how to overcome accessibility barriers that aren’t covered in the testable success criterion.

When it comes to human-computer interactions, both the user and the software can contribute to making those interactions accessible.

On the one hand, users might choose different input/output devices, browser plugins, or screen readers either to accommodate their disabilities or for more comfort. On the other hand, software must allow users to interact with a device or application in whatever way is best for them.

For example, some users prefer to navigate the web using only their keyboard, either for speed’s sake or because they cannot use a pointing device due to cognitive or physical impairments. In response to this preference, any software should let users navigate with their keyboard without sacrificing any functionality.

What’s the benefit of accessible design?

Accessibility isn’t just a ‘nice-to-have’ — there’s clear research showing that doing the right thing is profitable, too.

Remember that 15% of the world’s population has some kind of disability — not including temporary disabilities. So to make a product accessible to this group, is to massively expand its possible customer base.

A public commitment to accessibility is also likely to improve a business’s public image.

Who’s responsible for accessibility?

The short answer is everybody. Anyone engaged in a web application or website creation is responsible for its accessibility. Here are some quick tips to start making a change.

As a product manager or lead, you can make accessibility a requirement. Provide time and budget and help to prioritise accessibility issues.

As a UX/UI designer, you can consider accessibility in your designs. Examples include:

  • Checking for contrasts
  • Considering the hierarchy of information
  • Including visuals for focus and hover states

As a UX researcher, you can include sensitive users in design tests and research.

As a content designer, you can care for the readability, understandability, and structure of information.

And as an engineer (frontend and quality assurance), you can implement the techniques described by WCAG 2.2, testing your product with assistive technologies, and implementing automated testing tools such as Axe-core to help detect accessibility issues early on.

If you’re interested in knowing more about how you can contribute to improving web accessibility in your role and your team, I’d recommend checking out accessibility.digital.gov.

Ultimately, everyone in any business (GetGround included!) is responsible for making the web more inclusive. By building empathy with others and their singularities, we build and sell products that work for everyone.

How is GetGround making its products more accessible?

At GetGround, we’re currently working to reach level AA. Recently, my colleague Nick Black distilled the WCAG 2.2 guidelines that we’ll use daily into four ‘cheat sheets’ — so that we can easily refer back to them and ensure they’re consistent throughout our designs.

At GetGround, we want to help build a fairer and more productive world. We can only do that if our products — and the opportunities they present to users — are totally accessible. By following the WCAG guidelines, we make them fully usable for anybody, and therefore invite a broader range of people to use our products without discrimination.

An example in practice

Let’s take an example of accessibility in practice — adequate contrast: [Text and images of text must have an adequate contrast ratio.]

As per the Perceivable accessibility principle, “information and user interface components must be presentable to users in ways they can perceive.” That means contrast is crucial: it makes information stand out, and ensures it’s fully legible.

People with impaired vision, or colourblindness, will struggle to decipher content if it’s low contrast — a bit like when you’re reading on your phone, and the sunlight hits your screen.

Under the Perceivable principle, there is a Distinguishable guideline, defined as “making it easier for users to see and hear content including separating foreground from background.”

One of Distinguishable’s success criteria is Contrast (Minimum): “the visual presentation of text and images of text has a contrast ratio of at least 4.5:1.”

To achieve an accessible contrast level, we need to refer to the sufficient techniques. One of them is to ensure that the front text or visual element has a ratio of 4.5:1 to its background. To do so, you can use online tools such as the Contrast Checker by WebAIM.

Figure 4: Examples of text over a background colour. The two above pass the contrast ratio test, whereas the lower two have low contrast and can make their text invisible to people with low vision or colour blindness. (source: Accessibility @ MC Blog, Montgomery College)

What’s next in GetGround’s accessibility initiative?

We’re just at the start of our journey to build accessible products, but we’re heading in the right direction! An AA-compliant design system and component library are our first steps, and there’s more to come. How are you making the web more accessible?

GetGround is always interested in meeting with anyone interested in making the world a fairer and more productive place. If you’d like to chat about accessibility, or working at GetGround, connect with me on LinkedIn!

--

--