Accessible Design Checklist

Accessible design is when you make your design usable for disabled people. Factoring in a range of hearing, movement, sight, and cognitive abilities makes your product a better experience for everybody while preventing the exclusion of disabled people who would otherwise not be able to use it.

At the end of 2024, I created an Accessible Design Checklist plugin for Penpot. I wanted to make it easier to review my work for accessibility and check off items I had already considered in my design.

I was inspired by the How to meet WCAG (Web Content Accessibility Guidelines) Quick Reference. Many countries use WCAG as a baseline for their laws and regulations around digital accessibility, so it is a valuable reference. I was also inspired by the simplicity and structure of other accessibility checklists, including the A11y Project’s accessibility checklist and Geri Reid’s WCAG accessibility checklist for designers.

Checklists can’t address every need or accommodation specific to your product, but they can help you avoid some of the biggest issues and learn more about accessible design.

Let’s jump into the checklist. You can check off the items, but please remember that your progress won’t be saved if you refresh or leave the page!

Accessible content

Often, designers write content and microcopy as part of their designs. We create placeholder content while we await the final copy. Even if you’re using dummy content, you can set a good example for making content accessible.

Use plain language and avoid figures of speech, idioms, and complicated metaphors.

Use headings to introduce and section content.

Complex images like charts, graphs, and maps have text alternatives.

Link design

Links are one of the web’s most essential features, yet we often design them to blend in with surrounding text rather than make them stand out and easily find.

Links are recognizable as links and distinguishable from the non-interactive text.

Link text is unique and describes the link’s destination, not just “click here.”

Links that open in a new tab or window are clearly labeled.

Layout design

Accessible layout design involves creating predictable and recognizable designs so people can access any page on any device and have (as close as we can get to) the same experience.

The layout is simple and straightforward.

The layout is consistent across different views and pages.

The design works on different viewport sizes (desktop, laptop, tablet, mobile.)

The design works in both landscape and portrait orientations.

The layout doesn’t require horizontal scrolling.

If the text is resized to 200%, or the font or text spacing changes, the layout doesn’t break.

Navigation design

Like layout design, navigation is most useful when users can quickly find what they need.

The links and order of navigation are consistent across views/pages.

Design a skip link for people using keyboard navigation to skip to the main content.

Accessible color

For people who are color-blind, blind, or have difficulties with sight, it can be difficult or impossible to understand the meaning of information when it’s communicated only through color.

Make sure color isn’t the only way you communicate information.

Make sure that error, warning, and success states are not visually communicated by just color.

Accessible color contrast

Adequate contrast between the foreground text (or object) color and the background color ensures that it is readable or distinguishable.

Check the contrast for all large-sized text.

Check the contrast for all normal-sized text.

Check the contrast for text that overlaps images or video.

Check the contrast for input elements (form inputs, checkboxes, etc.), including their outlines or borders.

Check icon contrast.

Accessible typography

There’s a lot to accessible typography, and it’s hard to apply strict guidelines. Firstly, it depends on the readability of your chosen font and ensuring the text is large enough for most people to read without needing to zoom in. There are no specific guidelines around text sizes, as different fonts render the same font sizes at different pixel sizes. 16px is usually a good size for body text; anything below 14px can be tricky for most people to read.

Avoid center-aligned text.

Use left-aligned text for left-to-right (LTR) languages and right-aligned text for right-to-left (RTL) languages.

Accessible images

The best way to make images more accessible is to ensure you’ve provided text alternatives for people who can’t see or understand the image. You don’t need to do this for solely decorative images, but make sure you include alternative text for any images that are part of or support the content.

Images don’t have text (logos as text are ok.)

Alternative text is provided for images and icons.

Interaction design

Interaction design is how our design works for users. How do they know what they can interact with? Is it easy to interact with the elements? How do they know what they’re supposed to do? Accessible interaction design prevents barriers for people using our interfaces.

Interactive objects look visually interactive.

Button text and other interface labels are unique and describe the action.

Components and buttons that are used in multiple locations are consistently labeled.

Interactive objects have a target area that is large enough.

There’s enough space between interactive items to prevent accidental interactions.

Users can access content and interactions without the need to hover.

Visible focus styles have been designed for interactive elements navigated via keyboard input.

Form design

From sign-up and login forms to apps that take, forms are the primary way users interact with our designs. Many app interfaces are just fancy forms. Accessible form design requires taking care to ensure users understand how to use form inputs and are able to use the inputs regardless of whether they’re using a mouse, keyboard, touch interface, voice control, or another form of assistive technology.

All form inputs have a corresponding label element.

Placeholder text in forms is not used for labels.

Required form fields are indicated using text.

Form input errors are displayed above the form, indicating which form field they correspond to.

There is no such thing as 100% accessible. Accessibility that accommodates every individual person’s needs is very difficult and impossible to test. But with some thoughtful design decisions, we can make a huge difference to many people.

Download the Accessible Design Checklist plugin for Penpot

In the Penpot Hub, you can also find many more plugins, libraries and templates to enhance your Penpot experience.

Are you interested in developing your own checklist plugin? You can check out my open source code repository. You can also find documentation about creating plugins on the Penpot Help guide.