Menu Sheet Overlay
Search Sheet


What is accessible design?

By definition, an accessible product is one that can be used and consumed by all its users. Designing for accessibility means to make sure that what you’re designing is inclusive and usable by a diverse audience, regardless of disability.

Why is it important?

Accessibility statistics tell us that 18.7% of the U.S population, experience some type of disability. This includes physical impairments from affect the use of a touch device, cognitive impairments that may affect the ability to decipher meaning from visual elements and visual impairments such as color blindness that may cause the need to use contrast aids, screen readers and magnifiers. Accessible design aids in creating a better experience not just for people with disability, but also for people without it. Designing this way makes better products, furthermore it is simply the right thing to do.

How to design for accessibility

Mobify has developed a series of accessibility best practices from our extensive mobile interaction design experience. In general, accessibility should not be considered a checklist of rules-- it's a way of designing for people. Consider the following examples as you design the shopping experience:

Use minimum tap targets

The size of a finger or thumb varies with age, gender and body shape. The ability to touch a particular area can also vary greatly (consider an elderly user with challenges in motor function). In order to make a product’s interface inclusive, a minimum tap target should be observed. Industry standards for this can vary, but Mobify recommends a value no less than 44px square for all interactive elements. This is not to say that all tap-able elements should be this size, but rather the interactive element and spacing that separates interactions should be at least this value. This will not only help users interact with the UI, but ensure the correct element is tapped.

Active and disabled states Lancome
As seen in the Lancome navigation menu, each element regardless of size is spaced out using a minimum tap target, reducing the possibility of a user mistakenly tapping the wrong option.

Ensure sufficient colour contrast

A significant number of people have difficulties distinguishing certain shades and color combinations. Accessible color contrast between text and background is not only essential for an inclusive experience, Google’s Lighthouse tool is now penalizing sites that do not recognize a sufficient level of color contrasting. There are multiple tools out there to help designers test contrast between foreground (text) and background color. Check out this handy tool for testing contrast levels. Chrome also has colour contrasting built in to the dev tools.

Contrast checker and lighthouse checklist offers useful tools for performing a11y checks on contrast. Lighthouse references this parameter in the outputted PWA score.

Don’t rely solely on color to provide distinction

Around 1 in 12 men and 1 in 200 women have some degree of colour vision deficiency. If a design relies solely on color to distinguish one element from another, these users will not be able to make that distinction. An example of this is shown below; the size swatches utilize a coloured border to communicate the size a users has selected to purchase and a light grey tone to sizes that are out of stock. When this is presented to a user with a color vision deficiency, these variations are indistinguishable. An accessible way to approach this UI would be to increase the border thickness on the selected state and draw a line through the out of stock items.

Product Options UI Kit
The product options example in the UI kit uses an increase in border width to denote active selections and strikethrough effect for out of stock options.

Back up icons with text

Users with sight deficiencies rely on screen readers to communicate the meaning of certain graphical elements. Ensuring alt text is present for all icons is essential coding practice. However, what about sighted users and their ability to decipher meaning from symbols? An accessible design is one that does not depend on its users understanding an icon in order to function. Always endeavor to back up graphical elements with text, use icons to visually enhance the interaction and make it more recognizable rather make the user question what it does.

Icon labels in the Ui Kit checkout
The UI Kit demonstrates where labels are used with icons to explain unclear interactions. In the shopping cart design (left), the account icon is backed up with explanatory text 'Sign In' whereas the + and - icons in the quantity steppers are a much more familiar interaction.

Label form fields

Removing form labels in place of placeholder text is a common trait in ‘clean’ web design. However, this pattern will affect those using screen readers and negate their ability to understand the content required in that field. Form labels are there to give context to the information entered before, during and after a user interacts with the form. As shown in the example below, a user going back to check a completed form without labels has no context as to what information has been entered where. Placeholder text should be used for example content. This will further aid comprehension to those who might not understand what is required.

The effect of not using form labels
This example demonstrates how a completed form appears with and without form labels. If a user wishes to review the form on the left, there is no clear way to distinguish certain entries. Adding labels makes reviewing the form much clearer.

Provide clear error messaging

As well as providing clear instruction through form labels and placeholder text, error messaging should be designed, and inline validation utilized, to aid in the process of error recovery. Not all users will understand why their entry resulted in an “incorrect password” error. Understand the data required and deliver clear instruction for the user on inputting a valid entry (“Passwords are minimum 8 characters and contain at least one numeral”)

Error messaging best practice
This example shows two approaches to error handing on a form field. The more accessible solution on the right offers an additional indicator to the color change in the form of an error icon, as well as some contextual content as to how the user should resolve the error.