Welcome to the "Designing with Accessibility in Mind" workshop repository! This two-day online event is designed to elevate your Design Systems skills to an expert level, focusing on creating accessible design systems and components from the ground up.
- Dates: September 9 and 10
- Time: 12:00 PM - 4:00 PM ET (6PM - 10 PM CEST) each day
- Format: Online Event
- Hosts: Sarah Massengale and Marcelo Paiva
Over the course of two days, we'll cover both fundamentals and advanced techniques of accessible design, including:
- Defining accessible user stories and acceptance criteria
- Designing accessible components and experiences
- Conducting user research with participants with disabilities
- Creating and testing accessible prototypes with screen reader users
- Collaborating and handing off accessible components to developers
- Leveraging design tokens for accessibility
These materials will be used throughout the workshop to guide our learning and activities. Please review them before the workshop begins.
- Day 1 Slides - Presentation slides for Day 1 (PDF - 10.6 MB)
- Day 1 Figjam Activity File - Figjam activity file for Day 1
- Day 2 Slides - Presentation slides for Day 2 (PDF - 2.6 MB)
- Bonus Slides - Extra content about Universal Design, Inclusive Design principles, How Screen readers work with the browser, Accessibility Bluelines (Annotations), etc. (PDF - 5.9 MB)
This section contains a collection of prompts and examples designed to guide you through the process of creating accessible designs. These resources will help you consider accessibility from the outset of your design process, ensuring that your work is inclusive and user-friendly for all individuals, regardless of their abilities.
- Accessibility-Focused Design Prompts - Prompts for designing with words and accessibility in mind
- Accessibility Prompt Examples - Output examples for accessibility-focused design prompts
- Accessible User Journey Stories - User stories and outputs for accessible user journeys
These documents provide accessibility specifications for various UI components. They cover basic elements to complex interactive features, serving as a reference to ensure your design system meets accessibility standards and offers an inclusive user experience.
- Accessible Component Stories - User stories and outputs for accessible components
- Accessible Accordion Design - Accessibility specifications for accordion components
- Accessible Autocomplete Implementation - Accessibility guidelines for autocomplete functionality
- Accessible Dropdown Menus - Accessibility requirements for dropdown menus
- Accessible Modal Dialogs - Accessibility considerations for modal dialogs
- Accessible Pagination Controls - Creating accessible pagination controls
- Accessible Search Bar Design - Accessibility requirements for search bars
- Accessible Unordered Lists - Accessible unordered list implementation
- Accessible Error Messages - Best practices for accessible error messages
- Fieldset and Legend Usage - Proper use of fieldset and legend for form accessibility
- Accessible Form Validation - Accessible form validation techniques
- General Form Accessibility - General accessibility guidelines for forms
- ARIA Landmarks Guide - Using ARIA landmarks for improved navigation
- Accessible Paragraph Structure - Guidelines for accessible paragraph structure
- Implementing Skip Links - Implementing skip links for keyboard navigation
- Neurodiversity in UX Design - Practical checklist for UX designers focusing on neurodiversity
- Accessibility Testing Protocols - UX research protocols for accessibility testing
- Accessibility Resources - Accessibility Resources & ToolsFor Designers and Developers
- Accessibility Review Sessions - How to conduct an accessibility review session.