Accessibility Checklist for Designers

Accessibility is about good usability, regardless of a user’s capabilities. It sounds simple, but breaking into the world of accessibility can feel daunting to many designers. Accessibility education is often written in a technical style because it aligns with the Web Content Accessibility Guidelines (WCAG, frequently pronounced “wuh-cag”). In this checklist, however, I will avoid all the jargon and focus on only what is essential for you to know. Please use this list to familiarize yourself with the criteria needed for accessibility, but don’t just stop here. Good usability doesn’t end with a checklist.

You can download a PDF version of the checklist by clicking the Download button above.

Visual Design Checklist

Visual design is our love language to the world: colors, text, and hierarchy. And if we don’t want that message to be lost, we need to convey it accessibly. Keep this checklist at the forefront of your mind as you work.

Color

1.4.1 Use of Color: Avoid using color alone to convey information. Pair it with text, icons, or patterns to ensure everyone can understand your design.

Try viewing your design in black and white. If the information still makes sense without color, you’re on the right track!

1.4.3 Contrast (Minimum): Make sure text stands out with a contrast ratio of at least 4.5:1 against the background for easy readability.

Need help with color contrast? Check out my article on color contrast tools in Issue 38 to ensure your color palettes are inclusive.

1.4.11 Non-text Contrast: Ensure UI components and graphics have a contrast ratio of at least 3:1 with their surrounding colors for better visibility.

Text

1.1.1 Non-text Content: Provide text alternatives for non-text content to ensure everyone can understand its purpose.

Consider which images are providing value versus which are simply there for decoration.

1.3.3 Sensory Characteristics: Don’t rely on sensory cues like color, shape, or size alone. Make sure your instructions work for everyone.

1.4.5 Images of Text: Avoid using images to display text. Use actual text instead for better accessibility and flexibility.

2.4.4 Link Purpose (In Context): Make sure every link’s purpose is clear from the text or surrounding context—no guessing games!

2.4.6 Headings and Labels: Use clear and descriptive headings and labels so users instantly understand the topic or purpose.

Consider if you were to turn your layout into an outline. Which headings would appropriately describe the sections and subsections?

UI/UX Design Checklist

The items in this section are specific to digital and interactive elements.

Product navigation

1.3.2 Meaningful Sequence: Organize and present content in a logical, meaningful order to ensure it makes sense to all users.

Consider the order in which you want users to read/interact with what is on the page.

2.4.5 Multiple Ways: Provide at least two ways for users to navigate, whether it’s through a menu, search, shortcuts, or other options.

3.2.3 Consistent Navigation: Keep menus and controls in the same place across your design to make navigation easy and predictable.

3.2.4 Consistent Identification: Use consistent labels and visuals for components that have the same function to avoid confusion.

Keyboard interaction

2.1.1 – Keyboard: Ensure all functionality can be accessed using a keyboard, without requiring timed inputs.

2.1.2 No Keyboard Trap: Make sure users can move to and from all content freely using a keyboard—no getting stuck!

Be mindful of pages or flows in a design where users may need to exit or use their keyboard to advance forward.

2.4.1 Bypass Blocks: Offer a way for users to skip over repetitive content and jump straight to what they need.

Consider how and where a skip link should be displayed.

2.4.3 Focus Order: Ensure focus moves through components in a logical, intuitive order.

When tabbing through the interactive elements on a page, does it follow a logical order of how a visual user would explore the page?

2.4.7 Focus Visible: Ensure the keyboard focus is clearly visible so users always know where they are.

Include hover and focus states for all of your interactive elements.

3.2.1 On Focus: Keep elements stable. Don’t make them change when they get keyboard focus.

3.2.2 On Input: Ensure elements don’t unexpectedly change when users interact with them.

Responsive design and mobile devices

1.3.4 – Orientation: Design your website to work seamlessly in both portrait and landscape orientations.

1.4.4 Resize Text: Ensure text can be resized up to 200% without breaking the layout or functionality.

1.4.10 – Reflow: Design content to work without horizontal scrolling. It should adapt and stay functional on any screen size without scrolling in two dimensions.

1.4.12 Text Spacing: Make sure your content stays clear and functional even if users adjust text spacing.

Relative sizing should be used to enable a user to adjust the text.

2.5.1 Pointer Gestures: Design gestures so they can be completed with a single pointer—no complex motions required.

2.5.4 Motion Actuation: Allow users to perform motion-based actions through an interface alternative, and give them the option to disable motion controls.

Errors

3.3.1 Error Identification: Clearly identify and explain input errors to help users fix them easily.

Use text to describe errors, and pair it with visual cues like images or color changes for clarity.

3.3.2 Labels or Instructions: Always include clear labels or instructions to guide users when they need to input information.

Consider how you want a user to interact with the form and what types of information would be helpful for them to know.

3.3.3 Error Suggestion: Provide helpful suggestions to guide users in correcting their mistakes.

Provide users with the proper context to enter a valid input or correct inaccurate or missing inputs.

3.3.4 Error Prevention (Legal, Financial, Data): For critical actions like legal, financial, or data submissions, double-check entries, confirm decisions, and allow users to undo changes.

Animations

1.4.2 Audio Control: Don’t autoplay sound. Give users control over audio.

2.2.2 Pause, Stop, Hide: Give users controls to pause, stop, or hide any moving or auto-updating content.

Be mindful of content that auto plays; this can be animations, videos, or even carousels.

2.3.1 Three Flashes or Below Threshold: Avoid including content that flashes more than three times per second to prevent triggering seizures.

Timing

2.2.1 Timing Adjustable: Let users turn off, adjust, or extend time limits to stay in control.

Ongoing Effort and Empathy

Accessibility isn’t just a box to check. It’s about creating experiences that work for everyone, regardless of their abilities. This checklist is a starting point, but good accessibility requires ongoing effort, curiosity, and empathy. Take what you’ve learned here, and apply it to your next project. Start small if you need to, but start somewhere. And remember, the more you practice, the more natural it becomes. Let’s design a world where no one gets left behind.