Compliance in the system

Building for Accessibility in our Design system

Building for Accessibility in our Design system

YEAR

2022

CATEGORY

ARTICLE

ROLE

TEAM DIRECTION/INCLUSIVITY EVANGELIST/DESIGN SYSTEMS

ORGANIZATION

GOJEK

Gojek gets more than a 100 million users per day. They vary in ages, tech knowledge, frequency of usage etc. In Indonesia alone, 8,56% of citizens have some form of disability. That’s 21,8 million people, and almost half of those have double disabilities (SUPAS 2015). Till now we’ve not designed for disabilities, either temporary or permanent. This leaves a major part of the users struggling to use our app.

We’d like to think that Gojek isn’t just for those with perfect eyesight, hearing or tactile ability. If anything, Gojek should make life easier for users, regardless of disabilities. Having a disability, chronic illness or another special need shouldn’t limit your ability to participate fully in activities other people may take for granted.

a11y is a numeronym for Accessibility where the number 11 refers to the number of letters omitted

Designing with accessibility in mind means we are following our a11y principles:

Become an a11y

CLEAR -

Help users navigate by designing clear and easy layouts with distinct calls to action. Enabling familiar, consistent interactions that make complex tasks simple and straightforward to perform. 

OPERABLE -

Supporting assistive technologies and personalisation. Designing Gojek to adapt to environmental variations, such as device orientation, screen size, resolution, etc.

ROBUST -

Designing Gojek to accommodate a variety of users. We want people to enjoy Gojek in any context and on all supported devices. 

Home

Stories

Play

About

We are taking various steps to ensure that Gojek as a product provides delightful experience to all our users. These are the steps -

We ensure that the colours used in our component and UI pass the WCAG guideline for AA standard.  It is not recommended that Level AAA conformance be required as a general policy for our entire UI because it is not possible to satisfy all Level AAA success criteria for some content.

For the same purpose, we have modified the current colour palette coming from the branding guidelines to comply more wit colour contrast. We have a separate palette that we implement in our components, to be used in the UI. Although the palette is new, the base shades are still compliant with the ones coming from branding, since we want to ensure that the synergy between the branding, marketing and the actual app UI is maintained.

As mentioned before, we have created themes based on the overall product categories in Gojek; Consumer(Green), Merchants(Purple) and Third party apps(Pink). This is just one of the examples -

Ensure 95~100% of our UI passes WCAG 2.0 Color contrast ratio value

Currently, our colours pass majorly AA standards. AAA pass for title, body, and caption tokens but only on background colours not on the coloured fills including active/primary.

With a High Colour contrast tokens set we aim to push the benchmarks for minimum contrast of 7:1 and above i.e. passing AAA standards for:

  • Fill colours that are generally used in combination with text

  • Icon colours since icons are often actionable

High contrast mode for our tokens

Haptics falls under the field of kinaesthetic communication, which focuses on tactile contact as a form of communication. It refers to the sensation delivered to users through a touch UI. It is generally linked with audio and visual feedback in key interactive moments. You can synthesise haptics by configuring parameters like haptic intensity and sharpness. Each event starts at a specific time, with its own specific parameters, like haptic intensity and sharpness for haptic events, or audio volume and pitch for audio events[3]. This helps in simulating the real world in onscreen interfaces. It creates an interactive and immersive experience. Some of the examples of haptic feedback that we are building into our system are -


Success Notification

  • Indicates that a task or action has completed


Error Notification

  • Indicates that a task or action has failed


Warning Notification

  • Indicates that a task or action has produced a warning of some kind


Selection Feedback

  • Indicates that a UI element’s values are changing


Heavy Impact

  • Indicates a collision between large or heavyweight UI objects


Medium Impact

  • Indicates a collision between medium-sized or medium-weight UI objects


Light Impact

  • Indicates a collision between small or lightweight UI objects

Provide haptic feedback as a way to build affordance

Provide a new scale with bigger base size to address readability issues in driver/consumer app, as well as support dynamic resizing of text, based on user preference

Improve our existing text style library to support better readability

Ensure that our components support screen reading and talk back functionalities for blind/partially sighted people

Support for screen reader and talk-back

Create and maintain libraries for light and dark mode for aloha components. Provide a switch on the UI to toggle themes

Support for theming in Asphalt Aloha

Image courtesy Keith Vaz, Manyu Varma

© 2022 Mayank Sagar

Coming soon !

© 2022 Mayank Sagar

All these efforts are slowly showing their impact in the form of quantitative as well as qualitative numbers. Here is an example where within 7 days, almost 45% of MAU (Monthly Active Users) who launched Gojek with VoiceOver property confirmed booking.


We have many more user stories coming in where building for inclusivity and accessibility has bought a positive impact to Gojek as an org. This has helped us become stronger evangelists within the product org and get more teams onboard to these initiatives

Seeing the impact

Seeing the impact