Accessibility quick wins are modifications that take a short amount of time to implement in your application as a first step to making it more accessible for all.
Alt-text in Images
All visual and non-text elements (images, GIFs, graphs, charts) in your application should be accompanied by alternative text (alt-text for short), which is text that describes your non-text elements in detail, providing necessary context for assistive technology users.
- Add the alt-text attribute to all your image elements, for example,
- Alternatively, write detailed captions under your non-text elements
- For purely decorative images on a page, consider adding an empty
<alt="">attribute so screen readers can skip them altogether
Animations on the web and mobile have been known to trigger seizures, induce nausea or trigger headaches and more. It is also not uncommon for users to turn animations off to meet their preferences, for example, optimize their device performance or save battery. As such, it is important to incorporate animations in a way that is inclusive of all without causing harm.
- Adopt the three flashes or less recommendation from WCAG, which stipulates that your animation should not have any more than a maximum of three flashes in a one second period.
- Give users full control of the animations in your application, so that they can pause the animations, stop the animations or hide them from a page altogether should they prefer to.
- Where user interaction on a page i.e. scrolling up and down triggers animation, add provisions to disable or reduce this motion-induced animation.
Buttons are an important way to deliver calls-to-action to your application’s users.
- Icon-only buttons should include button labels to provide context around button actions.
- Disabled buttons are often used to communicate that an action needs to be completed first before moving to the next step. However, disabled buttons are inaccessible to screen readers and often, it is unclear to an assistive tech user what the final outcome of completing a couple of steps is. Adding labels that describe why a button is disabled and what needs to happen to enable it is a good first step.
- With button sizing, make sure to provide a large area for user interaction, for example, in iOS the minimum touch target size is 44x44 points, and in Android it is 48x48 points.
- Consider using in-built button elements by default (on the web as well as on mobile) as they have predefined styles and a11y features like touch target size, tab focus, focus highlight and interaction shortcuts (not everyone uses a pointing device to interact with components) written into them.
- Accessibility guidelines on links, images and other clickable elements
- Find detailed recommendations about share buttons and best practices around them in the Share Buttons section of this a11y guide.
Color contrast is a measure of how different colors are from each other - colors that are opposites have the highest contrast and those that are next to each other on the color wheel have the least contrast.
WCAG recommends that
- the color contrast between background and foreground elements should have a 4.5:1 contrast ratio,
- icons for user interfaces that are essential should have a 3:1 contrast ratio.
- You can use this color contrast resource by WebAIM to guide you on what ratio to aim for.
- You can use WebAIM’s color contrast checker tool to confirm that the colors you are using are appropriately contrasted.
Page headers are primarily how screen readers and other assistive technologies navigate pages on the web. Correctly identifying page headers makes it possible for assistive technology users to get a quick overview of what’s on the page and jump to the sections they are interested in.
- Use HTML markup to identify page headers. For example, here are guidelines on using the
<header>element on the web
- Organize your headers hierarchically, being careful not to skip levels i.e. H2 should come after H1, do not skip to H3 or H4 after H1.
- On native mobile apps, you can also configure anything that represents a header as a heading to let the users quickly explore what the screen has to offer and speed up navigation, by jumping from one to another with a simple gesture.
- Web Accessibility Initiative (WAI) Guide to Headings
- Digitally Accessible Headings by Princeton University
Modals are pieces of information that pop up, and are commonly used to nudge a user to complete a specific action, or to provide more information.
Because modals are informative but also disrupt the flow of information on a page, it is important to give the user full control over opening and closing modals throughout your application. An accessible modal is one that
- provides the right information to screen readers
Important information should be conveyed in multiple modes, that is - color, haptics, sound, through messages and iconography - so everyone can perceive it.
For example, consider a text box in a form that is highlighted in red when the user enters invalid information: colorblind users may not perceive it and screen reader users may also miss it if it is not actively configured by developers. Adding some messaging next to it with specific information on why the information entered is invalid and how the user can fix it, will make it much easier for everyone to identify. Redundancy helps in this case. The more modes your information is presented in, the easier it will be to understand.
Order of Actions
If your application presents the user with a choice of actions at any point, be sure to present the least destructive option first from the range of choices, for example, when asking the user to confirm their selected action to delete a playlist, the OK option should be highlighted first instead of the CANCEL option; or if you have CANCEL and CONFIRM as options for the user to pick from, highlight CANCEL first because remedial actions are easier (when one cancels, they can redo a task.
Providing ways for users to share your application across different social media is one of the most common ways to spread the word about your application and draw users’ attention to it. A minimalist / common approach is to use hyperlinked social media icons to achieve this.
Accessible icons are images which can be accessed equitably and whose function can be understood clearly by all application users. To make your icons accessible:
- Add alternative text to your icons that describes their purpose i.e. what to expect on click. For further reading on alt-text best practices, see the images and alt text section.
- Choose icon colors that have high contrast to your background and see the color contrast section for more detailed best practices.
- Provide clarity by including accompanying on-screen text, usually a one-word descriptive label, next to your icons.