Why collaboration on accessibility matters
Designers create visually intuitive layouts, while developers bring these designs to life, ensuring functionality across devices and assistive tech. Without collaboration, accessibility gaps can emerge, limiting usability for people with disabilities.
- Holistic approach – Accessibility should be built into both design and development. Designers create accessible layouts; developers implement these designs using semantic HTML, ARIA roles, and other accessibility standards.
- Prevention of issues – Early collaboration helps spot and resolve accessibility issues before they’re embedded in design or code, saving time and reducing the need for retrofits.
- Consistent user experience – A collaborative approach ensures accessibility features are consistent across the site, enhancing the user experience.
- Shared responsibility – Accessibility is a team effort, ensuring no part of the process is overlooked.
How designers and developers can collaborate on accessibility
Start with accessibility in mind
Accessibility should be a project priority from the beginning.
- Align on standards – Ensure both teams understand accessibility principles, like WCAG, from the start to set clear expectations.
- Plan for accessibility – Discuss accessibility needs early on, considering how designs will support people with various disabilities.
Design with implementation in mind
Design layouts and elements that are both visually and technically accessible.
- Flexible layouts – Use relative units like
em
orrem
for responsive design, ensuring content reflows properly. - Accessible forms – Design forms with descriptive labels, clear focus indicators, and proper grouping (e.g.,
<fieldset>
and<legend>
tags). - Contrast and focus – Choose colors with sufficient contrast and make focus indicators visible for keyboard navigation.
Provide detailed design documentation
Clear documentation helps developers implement accessibility features accurately.
- Annotated designs – Include font sizes, contrast ratios, and details on ARIA roles or HTML elements to use.
- Responsive specs – Describe how the layout should adapt to various screen sizes and devices.
- Interactive prototypes – Show focus states, keyboard navigation, and interactive behaviors to clarify design intent.
Maintain communication and feedback loops
Regular communication helps address accessibility challenges as they arise.
- Regular check-ins – Schedule updates to discuss progress, tackle issues, and keep accessibility on track.
- Collaborative problem-solving – If a design element is hard to make accessible, brainstorm alternative solutions together.
- Mutual feedback – Designers can review code for design consistency, and developers can review designs for accessibility.
Test for accessibility throughout development
Involve both teams in testing to ensure a fully accessible final product.
- Designer testing – Review implemented designs for visual and functional consistency, using screen readers and keyboard navigation.
- Developer testing – Use tools like Silktide’s accessibility checker to identify issues in the code and ensure compatibility with assistive technologies.
- User testing – When possible, test with people with disabilities to gain real-world insights and validate accessibility.