/
index.html
296 lines (294 loc) · 20.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Asap:400,400i&subset=latin" rel="stylesheet">
<link rel="canonical" href="https://inclusivedesignprinciples.org/" />
<link rel="alternate" hreflang="en" href="https://inclusivedesignprinciples.org/" />
<link rel="alternate" hreflang="es" href="https://inclusivedesignprinciples.org/es/" />
<link rel="alternate" hreflang="fr" href="https://inclusivedesignprinciples.org/fr/" />
<link rel="alternate" hreflang="ja" href="https://inclusivedesignprinciples.org/ja/" />
<link rel="alternate" hreflang="nl" href="https://inclusivedesignprinciples.org/nl/" />
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="icon" sizes="192x192" href="/favicon.png">
<link rel="apple-touch-icon" href="/favicon.png">
<title>Inclusive Design Principles</title>
</head>
<body>
<header>
<nav aria-label="page">
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#principles">The Principles</a></li>
</ul>
</nav>
<aside class="languages">
<h2>Choose a language:</h2>
<ul>
<li><a href="/" lang="en" hreflang="en" aria-current="page">English</a></li>
<li><a href="/es/" lang="es" hreflang="es">Español</a></li>
<li><a href="/fr/" lang="fr" hreflang="fr">Français</a></li>
<li><a href="/de/" lang="de" hreflang="de">Deutsch</a></li>
<li><a href="/ja/" hreflang="ja" lang="ja">日本語</a></li>
<li><a href="/nl/" hreflang="nl" lang="nl">Nederlands</a></li>
</ul>
</aside>
<div>
<div class="title-and-illustration">
<h1>
Inclusive
Design
Principles
</h1>
<img src="/images/balloons_opt.svg" alt="three hot air balloons hang together in a calm, sunny sky" />
</div>
<p>
Contributors:
<a href="https://twitter.com/iheni">Henny Swan</a>,
<a href="https://twitter.com/IanPouncey">Ian Pouncey</a>,
<a href="https://twitter.com/heydonworks">Heydon Pickering</a>,
<a href="https://twitter.com/LeonieWatson">Léonie Watson</a>
</p>
</div>
</header>
<main>
<div id="introduction" tabindex="-1">
<p>These Inclusive Design Principles are about putting people first. It's about designing for the needs of people with permanent, temporary, situational, or changing disabilities — all of us really.</p>
<p>They are intended to give anyone involved in the design and development of websites and applications - designers, user experience professionals, developers,
product owners, idea makers, innovators, artists and thinkers - a broad approach to inclusive design.</p>
<p>The principles are also available to hang on your wall as <a href="posters/posters.zip">a set of illustrated posters (2MB)</a> by Barclays Access team.</p>
</div>
<h2 id="principles" class="with-button" tabindex="-1">
<span>The Principles</span>
<button data-expandAll hidden>expand all</button>
</h2>
<div class="principle-container">
<div class="intro">
<h3 id="provide-comparable-experience">Provide comparable experience</h3>
<button data-expands="provide-comparable-experience-content" aria-label="open section" aria-describedby="provide-comparable-experience" hidden>
<svg focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
<g transform="translate(0 -981.5)">
<rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
<rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
</g>
</svg>
</button>
</div>
<div id="provide-comparable-experience-content" class="principle-content">
<p><em>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.</em></p>
<h4>Full description</h4>
<p>Whether out of circumstance, choice, or context people are diverse. As people use different approaches and tools to read and operate interfaces, what the interface offers each user should be comparable in value, quality, and efficiency.</p>
<h4>Examples</h4>
<ul class="examples">
<li><strong>Content for alternatives:</strong> 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.</li>
<li><strong>Ergonomic features:</strong> Providing synchronized closed captions makes your video accessible. But making them customizable, color coded, and repositionable provides a more comparable experience.</li>
<li><strong>Notifications:</strong> 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.</li>
</ul>
<p>
<a href="#provide-comparable-experience">
<img src="/images/link.svg" alt="">
Link to <strong class="principle-name">Provide comparable experience</strong>
</a>
</p>
</div>
</div>
<div class="principle-container">
<div class="intro">
<h3 id="consider-situation">Consider situation
</h3>
<button data-expands="consider-situation-content" aria-label="open section" aria-describedby="consider-situation" hidden>
<svg focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
<g transform="translate(0 -981.5)">
<rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
<rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
</g>
</svg>
</button>
</div>
<div id="consider-situation-content" class="principle-content">
<p><em>People use your interface in different situations. Make sure your interface delivers a valuable experience to people regardless of their circumstances.</em></p>
<h4>Full description</h4>
<p>People are first time users, established users, users at work, users at home, users on the move, and users under pressure. All of these situations can have an impact. For those who already find interaction challenging, such as those with disabilities, this impact may make usage particularly difficult.</p>
<h4>Examples</h4>
<ul class="examples">
<li><strong>Colour contrast:</strong> When using an interface outdoors, good contrast lessens the impact of bright sunshine.</li>
<li><strong>Context sensitive help:</strong> 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.</li>
<li><strong>Captions on the go:</strong> 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.</li>
</ul>
<p>
<a href="#consider-situation">
<img src="/images/link.svg" alt="">
Link to <strong class="principle-name">Consider situation</strong>
</a>
</p>
</div>
</div>
<div class="principle-container">
<div class="intro">
<h3 id="be-consistent">Be consistent
</h3>
<button data-expands="be-consistent-content" aria-label="open section" aria-describedby="be-consistent" hidden>
<svg focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
<g transform="translate(0 -981.5)">
<rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
<rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
</g>
</svg>
</button>
</div>
<div id="be-consistent-content" class="principle-content">
<p><em>Use familiar conventions and apply them consistently.</em></p>
<h4>Full description</h4>
<p>Familiar interfaces borrow from well-established patterns. These should be used consistently within the interface to reinforce their meaning and purpose. This should be applied to functionality, behavior, editorial, and presentation. You should say the same things in the same way and users should be able to do the same things in the same way.</p>
<h4>Examples</h4>
<ul class="examples">
<li><strong>Consistent design patterns:</strong> Use consistent web and platform design patterns to help build familiarity and understanding.</li>
<li><strong>Consistent editorial:</strong> 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.</li>
<li><strong>Consistent page architecture:</strong> Use consistent page architecture across templates to help people scan and navigate key content.</li>
</ul>
<p>
<a href="#be-consistent">
<img src="/images/link.svg" alt="">
Link to <strong class="principle-name">Be consistent</strong>
</a>
</p>
</div>
</div>
<div class="principle-container">
<div class="intro">
<h3 id="give-control">Give control
</h3>
<button data-expands="give-control-content" aria-label="open section" aria-describedby="give-control" hidden>
<svg focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
<g transform="translate(0 -981.5)">
<rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
<rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
</g>
</svg>
</button>
</div>
<div id="give-control-content" class="principle-container">
<p><em>Ensure people are in control. People should be able to access and interact with content in their preferred way.</em></p>
<h4>Full description</h4>
<p>Do not suppress or disable the ability to change standard browser and platform settings such as orientation, font size, zoom, and contrast. In addition, avoid content changes that have not been initiated by the user unless there is a way to control it.</p>
<h4>Examples</h4>
<ul class="examples">
<li><strong>Scrolling control:</strong> '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.</li>
<li><strong>Make it stop:</strong> 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.</li>
<li><strong>Allow zoom:</strong> There are many reasons why a user may want to operate the pinch-to-zoom gesture on their touch device. Make sure it is not suppressed, and that the content does not get obscured when it is put to use.</li>
</ul>
<p>
<a href="#give-control">
<img src="/images/link.svg" alt="">
Link to <strong class="principle-name">Give control</strong>
</a>
</p>
</div>
</div>
<div class="principle-container">
<div class="intro">
<h3 id="offer-choice">Offer choice
</h3>
<button data-expands="offer-choice-content" aria-label="open section" aria-describedby="offer-choice" hidden>
<svg focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
<g transform="translate(0 -981.5)">
<rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
<rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
</g>
</svg>
</button>
</div>
<div id="offer-choice-content" class="principle-content">
<p><em>Consider providing different ways for people to complete tasks, especially those that are complex or non standard.</em></p>
<h4>Full description</h4>
<p>There is often more than one way to complete a task. You cannot assume what someone's preferred way might be. By providing alternatives for layout and task completion, you offer people choices that suit them and their circumstances at the time.</p>
<h4>Examples</h4>
<ul class="examples">
<li><strong>Multiple ways to complete an action:</strong> 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.</li>
<li><strong>Layout:</strong> Where there are long lists of content consider offering a grid or list layout option. This supports people who may want larger images on screen or smaller rows.</li>
<li><strong>Accessible alternatives:</strong> 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.</li>
</ul>
<p>
<a href="#offer-choice">
<img src="/images/link.svg" alt="">
Link to <strong class="principle-name">Offer choice</strong>
</a>
</p>
</div>
</div>
<div class="principle-container">
<div class="intro">
<h3 id="prioritise-content">Prioritise content
</h3>
<button data-expands="prioritise-content-content" aria-label="open section" aria-describedby="prioritise-content" hidden>
<svg focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
<g transform="translate(0 -981.5)">
<rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
<rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
</g>
</svg>
</button>
</div>
<div id="prioritise-content-content" class="principle-content">
<p><em>Help users focus on core tasks, features, and information by prioritising them within the content and layout.</em></p>
<h4>Full description</h4>
<p>Interfaces can be difficult to understand when core features are not clearly exposed and prioritised. A site or application may provide lots of information and functionality, but people should be able to focus on one thing at a time. Identify the core purpose of the interface, and then the content and features needed to fulfill that purpose.</p>
<h4>Examples</h4>
<ul class="examples">
<li><strong>Keep task focused:</strong> Progressively reveal features and content when needed, not all in one go.</li>
<li><strong>Prioritising tasks:</strong> An email application is principally for writing and reading email. The "compose" button is, therefore, present on all screens, and early in the focus order. The inbox is prioritised over other lists of email, such as "sent" and "spam" messages. Less used features such as tagging or organizing email into folders appear later in the focus order, as they will generally only be used when the primary task of reading the email is complete.</li>
<li><strong>Prioritising content:</strong> 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.</li>
<li><strong>Prioritising editorial:</strong> 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.</li>
</ul>
<p>
<a href="#prioritise-content">
<img src="/images/link.svg" alt="">
Link to <strong class="principle-name">Prioritise content</strong>
</a>
</p>
</div>
</div>
<div class="principle-container">
<div class="intro">
<h3 id="add-value">Add value
</h3>
<button data-expands="add-value-content" aria-label="open section" aria-describedby="add-value-content" hidden>
<svg focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
<g transform="translate(0 -981.5)">
<rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
<rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
</g>
</svg>
</button>
</div>
<div id="add-value-content" class="principle-content">
<p><em>Consider the value of features and how they improve the experience for different users.</em></p>
<h4>Full description</h4>
<p>Features should add value to the user experience by providing efficient and diverse ways to find and interact with content. Consider device features such as voice, geolocation, camera and vibration API's, and how integration with connected devices or a second screen could provide choice.</p>
<h4>Examples</h4>
<ul class="examples">
<li><strong>Integration with connected devices or second screen:</strong> Using voice interfaces to control multimedia, search for content, output from music or TV adds value for people who struggle to use other interfaces.</li>
<li><strong>Integration with platform APIs:</strong> 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.</li>
<li><strong>Make task completion easier:</strong> 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.</li>
</ul>
<p>
<a href="#add-value">
<img src="/images/link.svg" alt="">
Link to <strong class="principle-name">Add value</strong>
</a>
</p>
</div>
</div>
</main>
<footer>
<p class="project-foot">
<strong>Inclusive Design Principles</strong><br>
<a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons Licence" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/2.0/uk/88x31.png" /></a>
</p>
</footer>
<script src="/js/scripts.js"></script>
</body>
</html>