The Inclusive Design Principles

The Inclusive Design Principles

Women Tech Makers, London March 2019

Léonie Watson ~ Director, TetraLogical

Twitter
@LeonieWatson
Twitter
@TetraLogical
Website
TetraLogical.com
Github
@LJWatson

Inclusive design

Is about designing for people with permanent, temporary, situational, and changing disabilities - all of us really

Inclusive Design Principles

Inclusive Design Principles:
inclusivedesignprinciples.org

Provide comparable experience

Ensure your interface provides a comparable experience for all so people can accomplish tasks in a way that suits their needs without undermining the quality of the content.

Provide comparable experience: Example

Content for alternatives: Having a basic alternative, whether it's alt text, a transcript, audio description, or sign language, makes the content accessible but to be equivalent it needs to capture the essence of the original.

Provide comparable experience: Example

Notifications: Notifications that appear in an interface are visually obvious but require proactive discovery by screen reader users. A comparable experience for blind users, can be achieved by using a live region. The notification then requires no explicit action on the part of the user.

Consider situation

People use your interface in different situations. Make sure your interface delivers a valuable experience to people regardless of their circumstances.

Consider situation: Example

Captions on the go: You're aware that the video content you are providing will be consumed on mobile devices, which may be in public spaces where people might prefer to consume the content without being antisocial. For smaller viewports, sound is switched off and captions activated by default.

Consider situation: Example

Context sensitive help: Users may need help when they first encounter a complex form or interaction. This help may become redundant, even distracting, as a user becomes more familiar with the form or interaction. Context sensitive help provides the user with choice as to when they access help and better control over the page.

Be consistent

Use familiar conventions and apply them consistently.

Be consistent: Example

Consistent design patterns: Use consistent web and platform design patterns to help build familiarity and understanding.

Be consistent: Example

Consistent editorial: Use plain language consistently across platforms including editorial that is relied on by screen reader users such as text alternatives, headings, labels for buttons and so on. Keeping editorial style consistent is also important, such as making sure the top of articles always have a clearly marked summary paragraph, or making sure bullets always start with a bolded definition.

Give control

Ensure people are in control. People should be able to access and interact with content in their preferred way.

Give control: Example

Scrolling control: 'Infinite scrolling' can be problematic, especially for users navigating by keyboard because they can't get past the stream of refreshing content. Give the option to turn off this feature and replace it with a 'load more' button.

Give control: Example

Make it stop: Some users find that animations or parallax scrolling cause nausea, and others find them plain distracting. Where they play automatically, they should at least be easy to stop, by providing prominent playback controls.

Offer choice

Consider providing different ways for people to complete tasks, especially those that are complex or non standard.

Offer choice: Example

Multiple ways to complete an action: Where appropriate, provide multiple ways to complete an action. On mobile swipe to delete an item can be supported together with an edit button that allows you to select items then delete. An example of this is in iOS mail.

Offer choice: Example

Accessible alternatives: Alternative ways of presenting data, such as data tables for info graphics, should be available to all users as an option rather than a hidden link just for screen reader users. Accessible alternatives can benefit not just a specific target group but all users as long as we offer the choice.

Prioritise content

Help users focus on core tasks, features, and information by prioritising them within the content and layout.

Prioritise content: Example

Prioritising content: The primary content on a news article page is the story, therefore it should come before other content, both visually and in the source order. Related content, such as similar articles, should follow it, and unrelated content after that.

Prioritise content: Example

Prioritising editorial: Editorial for links, headings and buttons should use plain language and put the primary text first. This applies to both visible and hidden text. This makes the text easy to scan both visually and audibly for screen reader users. Plain language also benefits non native speakers and is easier to translate.

Add value

Consider the value of features and how they improve the experience for different users.

Add value: Example

Integration with platform APIs: Enhance functionality using platform features. The vibration API makes notifications more usable by deaf and hard of hearing people while the geolocation API makes it easier for people with mobility impairments to use location based services.

Add value: Example

Make task completion easier: Add a 'Show password' button to input fields so users can verify they have correctly inputted text, or add touch identification for password protected areas.

Thank you

Women Tech Makers, London March 2019

Léonie Watson ~ Director, TetraLogical

Twitter
@LeonieWatson
Twitter
@TetraLogical
Website
TetraLogical.com
Github
@LJWatson