Behind every great site or application lies thought, empathy and inclusion. This doesn’t happen by accident, it happens by design.
Inclusive
Design
Principles
Henny Swan, Ian Pouncey, Heydon Pickering and Léonie Watson
www.InclusiveDesignPrinciples.org
#IDPrinciples
Design is not just what it looks like and feels like. Design is how it works.
- Steve Jobs
Applying accessibility techniques to an unusable site is like putting lipstick on a pig. No matter how much you apply, it will always be a pig.
- Lipstick on a usability pig, Jared Smith
Consider situation:
People use your interface in different situations. Make sure your interface delivers a valuable experience to people regardless of their circumstances.
Captions on the go: watching video on a train, second screening or while the kids watch TV.
Imagine being low vision, doing the weekly shop while waiting for a train on a sunny day.
Prioritize content:
Help users focus on core tasks, features, and information by prioritizing them within the content and layout.
On a laptop secondary content dominates the screen
Zoomed at 300% and only ads are visible
Headings help us target the content we want
Overuse of headings undermines prioritising content
Headings or lists?
Be consistent:
Be consistent with conventions and with their application throughout your interface.
Use consistent design patterns
Use consistent editorial, including text alternatives used cross platform
Offer choice:
Consider providing different ways for people to complete tasks, especially those that are complex or non standard.
Provide a choice in how to complete a task:
- Swipe to delete
- Tap to edit and delete
Give control:
Ensure people always have control over content and presentation. People should be able to access and interact with content in their preferred way.
Do not suppress devices settings such as orientation
Provide means to control autoplay
Provide a choice on how to control autoplay
Separate audio controls for audio prompts for blind gamers
Provide comparable experience:
Ensure your interface provides a comparable experience for all users, so people can accomplish tasks in a way that suits their needs without undermining the quality of the content.
Colour closed captions/subtitles makes dialogue much easier to follow
alt="Three hot air balloons hang together in a calm, sunny sky"
I used to have sight so I appreciate descriptive alt text on decorative images.
- Léonie Watson
“It can be difficult today to visualise the building as it looked a hundred years ago, but as we follow the tour, imagine the rooms with their royal furniture and ornaments removed, and with lino covering the floors, and boards protecting the walls. You’ll have the opportunity to see photographs of the Pavilion during its time as a hospital throughout our tour.”
Add value:
Consider the value of features and how they improve the experience for different users.
Chromecast in iPlayer: independently control TV from your accessible device of choice
Voice API
Camera API
Touch ID
How do we know when something is accessible?
How do we know when something is accessible? When I can use it!
When I can use it!
- Johnny Taylor
Inspiration and acknowledgements
Co-authors: Léonie Watson, Ian Pouncey and Heydon Pickering
Contributors: Jamie Knight, Chris Mills, Glen Gordon, Marco Zehe, Ethan Marcotte, David Sloan, Melanie Richards, Tom Waterhouse, Matt Attkinson, Charles McCathieNevile, Patrick Lauke, and Justin Stockton.
www.InclusiveDesignPrinciples.org (English and Spanish)
Blog post and slides at www.paciellogroup.com
Thank you
#IDPrinciples
Inclusive Design Principles
By iheni
