What Is Accessible Design?
Accessible design ensures usability for disabled individuals by considering diverse hearing, movement, sight, and cognitive abilities. Prioritizing accessibility improves the overall user experience and prevents the exclusion of those who might otherwise struggle to use a product.
In late 2024, I developed the Accessible Design Checklist plugin for Penpot. This tool streamlines accessibility reviews and helps designers track what has been addressed.
Why Use a Checklist?
While checklists can’t cover every specific need, they help identify common accessibility issues and encourage learning about inclusive design practices. This checklist focuses on design elements—refer to the WCAG Overview for comprehensive accessibility guidelines.
Let’s go through the checklist! Progress won’t be saved if you refresh or leave the page, so be sure to take notes.
Accessible Content
Designers often create placeholder text and microcopy. Even temporary content should be accessible:
- Use clear, simple language and avoid idioms or complex metaphors.
- Structure content with headings.
- Provide text alternatives for complex images like graphs and maps.
Link Design
Links are a fundamental web feature, yet often designed to blend in instead of standing out:
- Ensure links are visually distinguishable from non-interactive text.
- Use descriptive link text instead of generic terms like “click here.”
- Clearly indicate when a link opens in a new tab or window.
Layout Design
Predictable and consistent layouts improve accessibility across devices:
- Keep layouts simple and consistent.
- Ensure designs work across various viewport sizes (desktop, tablet, mobile, etc.).
- Support both landscape and portrait orientations.
- Avoid horizontal scrolling.
- Ensure text remains readable if resized to 200% or spacing is adjusted.
Navigation Design
Navigation should allow users to easily find and interact with content:
- Maintain consistent link placement and order across pages.
- Include a skip link for keyboard users to jump to the main content.
Accessible Color Usage
Color alone shouldn’t convey critical information, as some users may be color-blind or visually impaired:
- Ensure information isn’t solely communicated through color.
- Use additional visual indicators for error, warning, and success states.
Color Contrast
Text and interactive elements should have sufficient contrast against their background:
- Check contrast for large and normal-sized text.
- Ensure contrast is adequate for text overlapping images or videos.
- Verify contrast for form inputs, checkboxes, and icons.
Accessible Typography
Typography affects readability, and different fonts render at varying sizes:
- Avoid center-aligned text.
- Use left-aligned text for left-to-right (LTR) languages and right-aligned text for right-to-left (RTL) languages.
- Ensure body text is at least 16px for readability.
Accessible Images
Images should have text alternatives unless they’re purely decorative:
- Avoid text in images (except for logos).
- Provide alternative text for images and icons.
Interaction Design
Users should clearly understand which elements are interactive and how to use them:
- Ensure interactive elements are visually identifiable.
- Use clear, descriptive labels for buttons and interface elements.
- Maintain consistent labeling for interactive components.
- Design large enough target areas and provide adequate spacing to prevent accidental interactions.
- Ensure interactive content is accessible without requiring hover actions.
- Include visible focus styles for keyboard navigation.
Form Design
Forms are essential interactive components, and accessibility ensures they are usable for all:
- Every form input should have a corresponding label.
- Placeholder text should not replace labels.
- Required fields should be explicitly indicated with text.
- Form errors should be displayed above the form and specify which field requires attention.
- Clickable areas around navigation links should be large enough to tap easily.
Final Thoughts on Accessibility
Achieving 100% accessibility is challenging, but small design improvements can make a significant difference. Thoughtful design choices help create more inclusive digital experiences.
Download the Accessible Design Checklist Plugin for Penpot
Find the plugin in the Penpot Hub and explore additional plugins, libraries, and templates to enhance your design process.
Interested in developing your own checklist plugin? Check out my open-source repository and the Penpot Help Guide for plugin development resources.