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.
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.
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.
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.
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.
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”)