Accessible UX: Going beyond WCAG (#LWSa11y)
-
Upload
jon-gibbins -
Category
Internet
-
view
424 -
download
0
Transcript of Accessible UX: Going beyond WCAG (#LWSa11y)
Accessible UXGoing beyond WCAG
16 May 2016
Jon Gibbins, @dotjay
@webstandards #lwsA11y #a11y #UX
Accessible UX: Going beyond WCAG
Jon Gibbins▸ Digital accessibility consultant at Dig Inclusion,
Bristol▸ Testing, training, development, support▸ Web, mobile, PDF, ebook
Accessible UX
Accessible UX: Going beyond WCAG
Problems1. Accessibility cannot be done by one person in your team • Raise awareness • Teach
Accessible UX: Going beyond WCAG
Problems2. QA and testing often too late for accessibility • Bake it into the process - accessible UX!
Accessible UX: Going beyond WCAG
Problems3. Accessibility not built into development processes • BS 8878 • Not a set of development guidelines. • Project management roadmap for ensuring that web products are built in an accessible way.
Accessible UX: Going beyond WCAG
I don’t have all the answers▸ Accessibility is contextual▸ Accessibility comes with experience▸ Accessibility is not just about code
Accessible UX: Going beyond WCAG
Accessible UX: Going beyond WCAG
Incorporate accessibility in UX design process▸ Research▸ Define▸ Wireframe▸ Test with people▸ Iterate
Accessible UX: Going beyond WCAG
Research▸ Think about accessibility early▸ Accessibility more likely to
▸ get baked into prototypes▸ persist through development▸ make it into production at an acceptable level
Accessible UX: Going beyond WCAG
Research▸ Putting people first goes a long way towards
accessibility▸ Include people with disabilities for diverse personas
▸ Different disabilities, different needs▸ Older people (often first time users)▸ Plan to test with similar people
Accessible UX: Going beyond WCAG
Define▸ Information architecture
▸ Plan understandable structure▸ Plan heading structure
Accessible UX: Going beyond WCAG
Define▸ Labelling
▸ Use concise, clear, consistent and descriptive labels▸ Navigation▸ Link text
Accessible UX: Going beyond WCAG
Design▸ Design with accessibility in mind
▸ Multimodal interactions – choice▸ Familiarity
▸ Design patterns▸ Iconography
▸ Layout▸ Content order
Accessible UX: Going beyond WCAG
Design▸ Contrast
▸ 4.5:1 at least (higher for mobile – see later)▸ Colour combinations
▸ Avoid red/green▸ Avoid red/black▸ Don’t use colour alone▸ Test using colour blindness tools
Accessible UX: Going beyond WCAG
http://webaim.org/resources/designers/
Accessible UX: Going beyond WCAG
Wireframe▸ Wireframe with accessibility in mind
▸ Fix accessibility before it hits the screens, e.g. order
▸ Documenting accessibility as you go will help future iterations
▸ Annotate wireframes with accessibility detail▸ Show structure, headings, labels, order
Accessible UX: Going beyond WCAG
Accessible UX: Going beyond WCAG
“Menu”
Articleheadings
Accessible UX: Going beyond WCAG
Test▸ Incorporate people with disabilities
▸ Wireframe and design reviews▸ Prototype testing▸ User testing
▸ User sessions, be prepared for interactions to take longer
▸ Is the test lab accessible? Can you test at home or remotely?
UX meets WCAG
Accessible UX: Going beyond WCAG
Accessible UX: Going beyond WCAG
Information & Relationships▸ Sometimes adding semantics is not enough▸ Did you know?
▸ Does <em> or <strong> get pronounced differently in screen readers?
Accessible UX: Going beyond WCAG
Information & Relationships▸ Sometimes adding semantics is not enough▸ Did you know?
▸ Does <em> or <strong> get pronounced differently in screen readers? Not by default!
▸ Do not rely on them for very important information.▸ Consider whether the content deserves to be a
heading, or could be supplemented with iconography (alternative text), etc.
Accessible UX: Going beyond WCAG
Information & Relationships▸ Use of structure helps
▸ Context▸ Overview▸ Navigation▸ Also breaks up content to make is more digestible
▸ Markup▸ Headings▸ Landmarks▸ Lists
Accessible UX: Going beyond WCAG
Language▸ Define for page▸ Define where there are changes▸ If you don’t…
Accessible UX: Going beyond WCAG
Language<p>Sur le Pont d'AvignonL'on y danse, l'on y danseSur le Pont d'AvignonL'on y danse tous en rond</p>
Accessible UX: Going beyond WCAG
Language<p lang="fr">Sur le Pont d'AvignonL'on y danse, l'on y danseSur le Pont d'AvignonL'on y danse tous en rond</p>
Accessible UX: Going beyond WCAG
Instruction & Orientation▸ Informative label text▸ Informative heading text▸ Informative error messages
Accessible UX: Going beyond WCAG
Images of Text▸ We know about alternative text▸ Images of text is not flexible
▸ Cannot be selected▸ Cannot be used with “Speak Selection” features▸ Sighted screen reader user?!
Accessible UX: Going beyond WCAG
Content (WCAG 2.0 Level AAA)▸ Reading level
▸ Use of plain language whenever possible▸ Avoid unnecessary jargon and slang
▸ Line length▸ Do not use justified text▸ Glossary
Beyond WCAG
Accessible UX: Going beyond WCAG
Design▸ Sans-serif fonts for body text▸ Supplementing with imagery and iconography
▸ WCAG doesn't really cover this▸ Helps people with learning disabilities, dyslexia,
reading a second language
Accessible UX: Going beyond WCAG
Design for mobile▸ Touch target sizes and spacing
▸ When designing for touch, make sure the tap size of the navigation item is at least 7mm (equivalent)
▸ Finger tips are ~7mm▸ Reachability▸ Zoom design
▸ Labels above control▸ Higher colour contrast due to mobile context, e.g. glare
▸ BBC guidelines suggest 7:1 ratio (the WCAG AAA requirement)
Accessible UX: Going beyond WCAG
Content▸ Good accessibility begins with content
Accessible UX: Going beyond WCAG
Accessible UX: Going beyond WCAG
Writing style▸ Make your point clear first then explain▸ One point per paragraph▸ Use short line lengths wherever possible▸ Helps people who are deaf or have cognitive and
learning disabilities
Accessible UX: Going beyond WCAG
CAPS▸ Harder to read (dyslexia)▸ Shouting, caps can cause different reading by screen
readers
Accessible UX: Going beyond WCAG
Screen reader nuances▸ Using semantic markup helps▸ But screen readers can still get things wrong
Accessible UX: Going beyond WCAG
Screen reader pronunciation▸ We have language selection in WCAG, but what
about pronunciation?
Accessible UX: Going beyond WCAG
Hyphenation▸ Example: E-newsletter▸ iOS▸ enewsletter “ehneyewsleta” = ˌe njuːsletər (sounds Russian)▸ e-newsletter “ee newsletter” = ˈiːnuːzˌletər (correct)▸ Android▸ enewsletter “eh newsletter” = ˌenuːzˌletər (wrong “e” sound)▸ e-newsletter “ee newsletter” = ˈiːnuːzˌletər (correct)▸ Windows mobile▸ enewsletter “ee newsletter” = ˈiːnuːzˌletər (correct)▸ e-newsletter “ee newsletter” = ˈiːnuːzˌletər (correct)
Accessible UX: Going beyond WCAG
Compound words▸ Compound words are commonplace▸ Homepage▸ Sitemap▸ "Signup" announced as "sig nup" in VoiceOver iOS▸ Spaces and hyphens are your friends.
Accessible UX: Going beyond WCAG
Read / Reading▸ “Reeding” vs “Redding”▸ <h2>Get reading</h2> = “Get Redding”▸ <a href="#">Read more</a> = “Red more”
Accessible UX: Going beyond WCAG
Emphasis▸ “Skip to content” vs “Skip to main content”▸ “con tent” vs “con tent”
Accessible UX: Going beyond WCAG
Date format▸ ambiguity, clarity (e.g. US versus UK)▸ 01 03 2015 could be “1st of March” or “3rd of January”▸ An interesting thing to note in VoiceOver
▸ it sometimes reads numbers strangely▸ for example: 2013 = “twenty thirteen inches”
▸ “Date expected in dd/mm/yyyy format”▸ “millimetres” in some speech engines
Accessible UX: Going beyond WCAG
Long numbers▸ Phone numbers▸ Company numbers▸ <span> trick
▸ <span>0824</span>5475▸ CSS 3 speak-as: digits
▸ Very poor support but should improve
Accessible UX: Going beyond WCAG
Moving forward▸ More testing currently being done in this area.▸ Other pronunciation examples:
▸ http://lab.dotjay.co.uk/tests/screen-readers/pronunciation/
Accessible UX: Going beyond WCAG
Responsibility?▸ Users?▸ Software vendors?▸ Developers?▸ Content creators?▸ Web standards?
Accessible UX: Going beyond WCAG
Responsibility?▸ Users?▸ Software vendors?▸ Developers?▸ Content creators?▸ Web standards?
All of us!
Accessible UX: Going beyond WCAG
Final points▸ Test, test, test!
▸ No. (one-word sentence) is read by VoiceOver on iPad correctly, but on iPhone it reads it as “number”.
▸ These changes to our content are clearer for all!
What can I do?
Accessible UX: Going beyond WCAG
Jon has personal connections to accessibility.
Accessible UX: Going beyond WCAG
Jon has personal connections to accessibility.
Photo credit: Jon Gibbins with thanks to Drake Music Project
Accessible UX: Going beyond WCAG
Empathy▸ Most of us have a connection to accessibility
Accessible UX: Going beyond WCAG
Empathy▸ Mobile
▸ small screens▸ text sizes▸ touch targets and keys▸ environment (hands-free, noise, rain)
Accessible UX: Going beyond WCAG
Empathy▸ Ageing
▸ We are all ageing▸ Multiple disabilities of different types
Accessible UX: Going beyond WCAG
Empathy▸ Accessibility is about understanding people and the
barriers that they face▸ Getting your own experience of accessibility helps
you to put yourself in the shoes of others and keep accessibility in mind when building and testing your sites and applications
Accessible UX: Going beyond WCAG
Commit▸ Establish an ongoing commitment to accessibility▸ Create an accessibility statement▸ Get an accessibility champion on your team
Resources
Accessible UX: Going beyond WCAG
Resources: accessibility books▸ Design Meets Disability
book by Graham Pullin
Accessible UX: Going beyond WCAG
Resources: guidelines▸ Guidelines for mobile and platform-specific
▸ WCAG 2.0▸ http://www.w3.org/WAI/WCAG20/
▸ BBC Mobile Accessibility Guidelines▸ http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mo
bile▸ BBC GEL – How to design for accessibility
▸ http://www.bbc.co.uk/gel/guidelines/how-to-design-for-accessibility
Accessible UX: Going beyond WCAG
Resources: W3C WAI▸ David Sloan has a good run down of helpful UX resources
▸ http://www.paciellogroup.com/blog/2013/06/accessible-user-experience-and-w3c-wai/
▸ Designing for Inclusion▸ http://www.w3.org/WAI/users/Overview.html
▸ Effective involvement of people with disabilities in the design process▸ Planning and Implementing Web Accessibility
▸ http://www.w3.org/WAI/managing.html▸ Involving Users in Web Projects for Better, Easier Accessibility
▸ http://www.w3.org/WAI/users/involving
Accessible UX: Going beyond WCAG
Resources: W3C WAI (continued)▸ Involving users in evaluation
▸ http://www.w3.org/WAI/eval/users.html▸ Mobile Accessibility
▸ http://www.w3.org/WAI/mobile/▸ Shared Web Experiences: Barriers Common to Mobile
Device Users and People with Disabilities▸ http://www.w3.org/WAI/mobile/experiences
Questions?
#sharetheorange https://youtu.be/x9MvEZskR6o
Thanks!Jon Gibbins, @dotjay