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