Design for UX & Accessibility
As web workers, be that designers or developers, it is our job to create not only engaging user experiences but also to ensure an all inclusive design and setup. Making sure our content is presented in the most accessible and easy-to-use way will liberate our user to use the web freely and without hinderance, a benefit to all.
please note: the video is merely the recorded version of the visual part of presentation, no audio included.
Effective inclusive UX design:
focus on your users.
study & learn from their behaviour.
listen & observe | review | iterate | repeat
consistency is key.
establish your approach and stick to it, across all aspects:
content | copy | design | interaction
- provide alternatives to all media. content | copy | design | interaction
- offer a positive experience. quality of content | tone of language | delight to use/access
Six thinking hats
- lateral thinking method
- tool for decision making and project planning
- originally designed for helping business managers
- this method can be applied to many fields/projects
highly recommended watching!
Eric's talk is one of the most moving and insightful - one which everyone working in web should watch. This very personal experience, shared by one of the brightest minds in our industry, painfully illustrates how our designs and builds will fail in real life scenarios unless we consider our users mindfully.
An Event Apart: video description
It’s easy to design for the idealized user, someone who’s smart, calm, and informed. It’s less easy, and thus more important, to design for a more realistic user: still smart, but harried and uncertain. The best designs handle both with care. But how many designs can help a user who is completely in the dark and barely capable of rational thought?
In this passionate presentation captured live at An Event Apart Austin, AEA cofounder Eric A. Meyer draws on his personal and professional experience to explore examples of crisis-mitigating design successes and failures. In the process, he illustrates ways that you can *and should* consider the needs of users teetering on the edge of panic. Helping them will make your designs more relevant and useful for *all* your users.
Eric Meyer has been working with the web since late 1993 and is an internationally recognized expert on the subjects of HTML, CSS, and web standards.
Author of “Eric Meyer on CSS” and “More Eric Meyer on CSS” (New Riders), “Cascading Style Sheets: The Definitive Guide” (O’Reilly & Associates), “CSS2.0 Programmer’s Reference” (Osborne/McGraw-Hill), and “CSS Web Site Design” (Peachpit) as well as numerous articles for the O’Reilly Network, Web Techniques, Web Review, and A List Apart, Eric also created the classic CSS Browser Compatibility Charts (a.k.a. “The Mastergrid”) and coordinated the authoring and creation of the W3C’s first official CSS Test Suite.
In 2006, Eric was inducted into the International Academy of Digital Arts and Sciences for “international recognition on the topics of HTML and CSS” and helping to “inform excellence and efficiency on the Web.” quoting An Event Apart via vimeo
Equally highly recommended and insightful is the book, a sequel to this talk and an excellent must-read.
#a11y | accessibility
To follow the ideal principle of the #oneweb means that websites need to be accessible: accessible inclusively to all people, accessible in turn to their chosen devices and accessible on connections of varying speeds.
I'd highly recommend to check out the brilliant The a11y Project for plenty of brilliant articles, checklists and resources.
The web’s ideal principle of universal access to content, promoted by Tim Berners-Lee, Jeremy Keith and many others.
This is for everyone. #onewebTim Berners-Lee 2012
Ensure access to functions via keyboard - test by using tab key to navigate site
Provide captions/transcripts for visual/audio content - provide text alternatives for images
Add alternative versions of content - use visuals/icons and text in combination
- user experience builds on the foundation of accessible design, adding more depth
- consideration of the complexities of people and their current situations
- research and user testing to guide UX design
- good UX will mean a pleasurable experience, meeting the needs of target group
- recurring cycle of work for best results: test - review - iterate
a quick word on tools
No tool can replace a real person, a real human! The listed tools are useful additions and I'd recommend you use them. Testing for aspects of performance is part of accessibility too and for such details, these tools can deliver good insights.
Testing for accessibility, however, is not possible without getting people involved and testing the scenario, user journey or task in real life.
some tool options
Note: most user testing apps will require you to set up an account ~ and extended test will cost. Again, these are not recommendations just a short list of widely popular services.
- contrast ratio
- tool to check colour contrast against WCAG guidelines
- by Lea Verou
- Web Accessibility Evaluation Tool
- by WebAIM
- Web accessibility test
- by CTIC
- Web Accessibility Checker
- by ATRC
- "… gives you insight on how well your site loads and provides actionable recommendations on how to optimize it."
- by GT.net
- Insights into key areas, including accessibility, SEO, social media and technology
- by Silktide
- PageSpeed Insights
- "... analyzes the content of a web page, then generates suggestions to make that page faster."
- by Google
- UK: Equality Act 2010
- Web Content Accessibility Guidelines (WCAG) 2.
- gov.uk: Accessibility and assisted digital Understanding WCAG 2.1
- WAI-ARIA Overview
- The Accessibility Project
- Beautiful design for everyone Ann McMeekin Carrier
- Inclusive New Media Design
- Accessible By Design Andrew Spencer
- juicy studio Gez Lemon
- HTML5 accessibility Steve Faulkner
- Accessibility for the modern web talk by Derek Featherstone
- W3C: Complete List of Web Accessibility Evaluation Tools
- Inclusive Design Microsoft
To understand how someone with accessibility needs views a website, I'd highly recommend that you try this out yourself. Put your mouse away and try to manage with only keyboard navigation. Set up a screenreader and try out its function to see how well you'd manage to navigate the webpage. I found this to be a humbling experiment which highlighted the necessity of good accessibility of content.
Smashing Magazine published a brilliant article, titled How A Screen Reader User Accesses The Web: A Smashing Video – in which Bruce Lawson introduces a webinar with Léonie Watson. It shows recordings of Léonie using a screenreader to access the web – an excellent demo with insights not only from a blind user but one with special expertise in dev and accessibility. Make sure to watch in its entirety!
How A Screen Reader User Surfs The Web
While putting together the notes for this session, I was reminded that my favourite app for user testing is now retired. Silverback, by clearleft, was a mac-only app which recorded users via webcam and screencast. In-app tools allowed for study and annotations during review.
It was a friendly and easy-to-use, easy-to-explain tool which I highly recommended to all web students. In the past, I loved introducing this app, both for its own merit and in addition, for the beautiful work on the logo by Jon Hicks.
logo design, Jon Hicks
The reminder of Silverback app's demise prompted me to return to Jon
site ~ and made me think of another logo I miss. Mailchimp started
off with this lovely icon and has since evolved (and lost much of
that original charm and personality in my view). When we talked
about Jon's work during our icon design session the other week, I
did not get the time to show you these.
Do check out the posts to read about Jon's process and have a look at his newer work while you're there ;)
read journal entry: Silverback
read journal entry: Mailchimp
A big thank you to Jon for his permission to feature these loops here :)