Design for Accessibility

Why is accessibility important?

Every application should be accessibile because otherwise you leave out a large fraction of people and don't provide equal access to all the users. Aside from this reason, numerous countries have laws to ensure that designs are accessible, failing to do so might lead to legal repercussions

Typography

People with visual impairment, color blindness, and reading difficulties, among others, are part of the group that we need to keep in mind while creating designs. It is best to have text elements that are easily readable which means you should avoid Speciality Display Fonts.

Daniel Schwarz, in one of his articles about accessibility, suggests to focus on some details like:

• Alignment: left or right only (don’t justify)
• Minimum font size should be around 16px
• Line spacing: at least 1.5x the font size
• Paragraph spacing: at least 1.5x the line spacing
• Paragraph width: max. 80 characters; 40 for CJK characters

Dynamic Type

Accessibility is a prominent theme in iOS design. Apple provides you access to dynamic font presets, as shown in this image. Like this, if you set your text to Body, and enable Dynamic Type, the system will automatically increases the size based on the user’s preferences.

Dynamic System Colors

In addition to system colors, iOS gives you access to certain dynamic system colors that adapt to both light and dark mode perfectly. These include colors for links, labels, placeholder text, separators, etc. A more comprehensive list can be found in the documentation.

VoiceOver

Apple gives its users access to a screen reader tool, VoiceOver. With this tool, users can interact with an application using gestures. This allows the users to communicate with an app without looking at the screen as the tool communicates the content that is on the screen verbally. VoiceOver is an extremely useful feature and you can take a look at how it works here.

Accessibility Inspector

Accessibility Inspector is another awesome tool that enables you to identify the parts of your application that are not accessible. With the accessibility inspector, you get feedback on how to make your app more accessible. Furthermore, you can even simulate what a user would experience if they're using VoiceOver.

Accessible Colors

There are many apps that can help you check if your colors are accessible. One interesting app is contrast, made by soffes and mds. It helps you choose colors that follow the accessibility guidelines.

The A11Y project

The A11Y project does a really great job at explaining all the basics to make your project more accessible. It is a community-driven effort to make digital accessibility easier. There are plenty of resources you can find there. Their checklist is a great way to see how accessible your project is.

WCAG Accessibility Checklist

WCAG Accessibility is an app available for both iOS and Android. You can download it via the App Store. It's an easy to use app that gives you a checklist of items you need to keep in mind to ensure that your application is accessible.

Accessible color systems

If you want to go a step further, you can create entire color systems. Daryl Koopersmith and Wilson Miner from Stripe mention in their article, that it is important to hand-pick colors and check their contrast against a standard. There is another interesting article by Katie Riley where she explains how she created an accessible color scheme.