Inclusive Design Reviews

Deliverables

Deliverables Annotated designs Inclusive Design Review report Comments added directly to your designs We work with your documentation e.g. InVision, PDF, PPT, Sketch etc. Inclusive Design Review report In depth rationale, issues and fixes based on annotated designs Outline of next steps Delivered in PPT, Word or PDF

1. Annotated designs Annotations are categorized by role: UX – components, functionality, user journeys Design – styles, colors, layout, fonts Development – suggested coding requirements Annotations are tagged by priority: Required - breaks WCAG and/or prevents one or more groups accessing content Recommended – suggests a more usable and inclusive alternative

Design annotations Design annotations document WCAG fails. They highlight changes required to ensure compliance with design related guidelines e.g.: Improve color contrast Add visible focus states Provide labels for form inputs A sample design requirement shown in InVision.

User Experience annotations User experience annotations document WCAG fails or recommendations based on the Inclusive Design Principles. They highlight improvements to features and alternative ways to present features e.g.: Add a ‘Show password’ feature to password inputs Add voice search to mobile search features A sample UX recommendation shown in InVision.

Development annotations Accessibility requirements Headings and landmarks role=“main” H1 – Settings H2 – Accounts H2 – Notifications Form inputs All visible labels must be coded using ‘for’ and ‘ID’ Placeholder text indicates format Text alternatives Headshot.jpg [First name, Second name Switch controls … Sample comments in InVision for developers to start building out coding and content order requirements. Development annotations document initial coding requirements for: Structural markup Form inputs Text alternatives Content order Keyboard interactions Focus management Roles and states Content order Content order should follow the direction of the arrows. 2 3 4 5 7 1 6 11 8 9 10 Sample form showing the suggested content order.

2. Report In depth report covering: Summary – headline issues and findings Recommendations – detailed issues and fixes Highlights – examples of best practice Next steps – how to integrate advice into processes and design assets Resources - a curated list of accessible user experience resources techniques and tools

Sample Report