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 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