SLIDE 1
Karwai Pun Interaction designer Home Office Digital, Data and Technology @krwpn
!
Karwai Pun
Opening up accessible design Karwai Pun Interaction designer Home - - PowerPoint PPT Presentation
Opening up accessible design Karwai Pun Interaction designer Home - - PowerPoint PPT Presentation
Opening up accessible design Karwai Pun Interaction designer Home Office Digital, Data and Technology @krwpn ! Karwai Pun Who Karwai Pun Karwai Pun Karwai Pun Karwai Pun Government Digital Service Design Principles Start with user
SLIDE 2
SLIDE 3
Karwai Pun
Who
SLIDE 4
Karwai Pun Karwai Pun
SLIDE 5
Karwai Pun
SLIDE 6
Karwai Pun
Government Digital Service
Design Principles
Start with user needs Do less Design with data Do the hard work to make it simple
- Iterate. Then iterate again.
1 2 3 4 5
SLIDE 7
Karwai Pun
Government Digital Service
Design Principles
This is for everyone Understand context Build digital services, not websites Be consistent, not uniform Make things open: it make things better 6 7 8 9 10
SLIDE 8
Karwai Pun
Posters
SLIDE 9
Karwai Pun
SLIDE 10
!
Karwai Pun
SLIDE 11
Karwai Pun
SLIDE 12
!
Designing for users on the
autistic spectrum
Don’t use figures of speech or idioms
Karwai Pun
SLIDE 13
Do this.
Do write in plain language
Designing for users on the
autistic spectrum
Karwai Pun
SLIDE 14
Karwai Pun
<h1>
<nav>
<label>
Designing for users of
screen readers
Do structure content using HTML5
SLIDE 15
Karwai Pun
Don’t rely on text size and placement for structure
Header
36pt, bold
Designing for users of
screen readers
SLIDE 16
Karwai Pun
Do use a combination
- f colour, shape and
text
Start !
Designing for users with
low vision
SLIDE 17
Karwai Pun
Don’t only use colour alone to convey meaning
Designing for users with
low vision
SLIDE 18
Karwai Pun
Do use images and diagrams to support text
!
Designing for users with
dyslexia
SLIDE 19
Karwai Pun
Don’t use large blocks
- f heavy text
!!
Designing for users with
dyslexia
SLIDE 20
Karwai Pun
Do design for keyboard or speech
- nly use
Tab
!
Designing for users with
physical or motor disabilities
SLIDE 21
Karwai Pun
Don’t make dynamic content that requires a lot of mouse movement
!
1 2 3 2a 2b 2c
Designing for users with
physical or motor disabilities
SLIDE 22
Karwai Pun
Do use subtitles or transcripts for videos !
CC
Designing for users who are
D/deaf or hard of hearing
SLIDE 23
Karwai Pun
Don’t put content in audio or video only
!
Designing for users who are
D/deaf or hard of hearing
SLIDE 24
Karwai Pun
SLIDE 25
Karwai Pun
SLIDE 26
Karwai Pun
Share
SLIDE 27
Karwai Pun
- 10,000
impressions on Twitter
- 700 likes,
65 forks on GitHub
!
"
SLIDE 28
Karwai Pun
Can I encourage you to develop
- ne that specifically considers
people who navigate their computer with voice recognition software.. as I do?
SLIDE 29
Karwai Pun
Do give the user a chance to choose to play the audio/video present on the web page. Don't automatically have audio/video play upon loading a page.
SLIDE 30
Karwai Pun
Don’t use complicated words Why?
SLIDE 31
We talk about accessibility in the posters but what about making the posters accessible themselves?
Karwai Pun
SLIDE 32
Karwai Pun
SLIDE 33
Karwai Pun
Translate
SLIDE 34
Concevoir pour les utilisateurs
malvoyants
Faire… Ne pas faire…
mettre les boutons et les notifications en contexte Envoyer séparer les actions de leurs contextes établir une mise en page linéaire et logique ! zoom à 200 % répartir le contenu sur toute la page ! utiliser une combinaison de couleurs, de formes et de textes Démarrer " n’utiliser que la couleur pour transmettre l’information déporter les informations dans des fichiers à télécharger#
publier toutes les informations dans la page web$
HTMLAa
utiliser de bons contrastes de couleurs et une taille de texte lisible utiliser des contrastes de couleurs faibles et des textes de petites tailles Aa
zoom à 200 % Envoyer Pour plus d’information, une adresse : access@digital.homeoffice.gov.uk Ce travail est sous licence Creative Commons : attribution – pas d’utilisation commerciale – partage dans les mêmes conditions – 4.0 – international. Pour voir une copie de cette licence, visitez https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr. Version française proposée par Vincent Valentin (@htmlvv).Gestalten für Benutzer mit
Schwerhörigkeit oder Gehörlosigkeit Richtig Falsch
Zur Kontaktaufahme verschiedene Kommunikations- wege bereitstellen
Kontakt nur telefonisch ermöglichen- Das Lesen langer
- Inhalt durch
- Ein lineares,
- Bei Videos
- der Abschriften
CC
Informationen nur als Audio oder Video vorhalten- Komplizierte Wörter
- der Redewendungen
- Tu das.
Lizensiert unter der Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz. Lizenz- bedingungen unter https://creativecommons.org/licenses/by-nc-sa/4.0/deed.de Deutsche Übersetzung: Andreas Kiermaier (https://andreas.kiermaier.net)Karwai Pun
SLIDE 35
Karwai Pun
SLIDE 36
Karwai Pun
SLIDE 37
Karwai Pun
What’s next?
SLIDE 38
Karwai Pun
SLIDE 39
Karwai Pun
SLIDE 40
Karwai Pun
SLIDE 41
Karwai Pun
Megan.Rodger@digital.homeoffice.gov.uk Simon.Castillo@digital.homeoffice.gov.uk
SLIDE 42
Karwai Pun
www.github.com/UKHomeOffice/posters
Posters
www.git-browser.com/ukhomeoffice/posters/accessibility
SLIDE 43
Karwai Pun
For more information, contact:
access@digital.homeoffice.gov.uk
SLIDE 44
Karwai Pun
SLIDE 45
Karwai Pun Interaction designer Home Office Digital, Data and Technology @krwpn