Accessible UX: Going beyond WCAG (#ID24)

Accessible UX
Going beyond WCAG
Jon Gibbins,
@dotjay
#ID24 #a11y #UX
19 May 2016

Accessible UX: Going beyond WCAG
Problems
1. Accessibility cannot be done by one person in your team
▸ Don’t just be the accessibility guy/gal
▸ Raise awareness
▸ Teach
▸ Learn

Problems
2. QA and testing phase often too late for accessibility
▸Think about accessibility as early as possible
▸Bake it into your process

Problems
3. 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

I don’t have all the answers
▸Accessibility is contextual
▸Accessibility comes with experience
▸Accessibility is not just about code

Incorporate accessibility in UX design
process
▸Research
▸Define
▸Wireframe
▸Test with people
▸Iterate

Research
▸Think about accessibility early
▸Accessibility more likely to
▸get baked into prototypes
▸persist through development
▸make it into production at an acceptable level

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

Define
▸Information architecture
▸Plan understandable structure
▸Plan heading structure

Define
▸Labelling
▸Use concise, clear, consistent and descriptive labels
▸Form controls
▸Navigation
▸Link text

Design
▸Design with accessibility in mind
▸Multimodal interactions – choice
▸Familiarity
▸Design patterns
▸Iconography
▸Layout
▸Content order

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

http://webaim.org/resources/designers/

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

“Menu”
Article
headings

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?

Information & Relationships
▸Sometimes adding semantics is not enough
▸Did you know?
▸Does or get pronounced differently in
screen readers?

▸Sometimes adding semantics is not enough
▸Did you know?
▸Does or 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.

▸Use of structure helps
▸Context
▸Overview
▸Navigation
▸Also breaks up content to make is more digestible
▸Markup
▸Headings
▸Landmarks
▸Lists

Language
▸Define for page
▸Define where there are changes
▸If you don’t…

Language

Sur le Pont d'Avignon
L'on y danse, l'on y danse
L'on y danse tous en rond

Language

L'on y danse, l'on y danse
L'on y danse tous en rond

Instruction & Orientation
▸Informative label text
▸Informative heading text
▸Informative error messages

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

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

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

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)

Content
▸Good accessibility begins with content

Writing style
▸Make your point clear first then explain
▸One point per paragraph
▸Use short line lengths wherever possible
▸Helps people who are deaf, have dyslexia, dementia or other
cognitive and learning disabilities
▸See W3C COGA Techniques (Working Draft)

CAPS
▸Harder to read (dyslexia)
▸Shouting, caps can cause different reading by screen
readers

Screen reader nuances
▸Using semantic markup helps
▸But screen readers can still get things wrong

Screen reader pronunciation
▸We have language selection in WCAG, but what about
pronunciation?

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)
▸Windows mobile
▸ enewsletter “ee newsletter” = ˈiːnuːzˌletər (correct)

Compound words
▸Compound words are commonplace
▸Homepage
▸Sitemap
▸"Signup" announced as "sig–nup" in VoiceOver iOS
▸Spaces and hyphens are your friends.

Read / Reading
▸“Reeding” vs “Redding”
▸<h2>Get reading</h2> = “Get Redding”
▸<a href="#">Read more</a> = “Red more”

Emphasis
▸“Skip to content” vs “Skip to main content”
▸“con tent” vs “con tent”

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

Long numbers
▸Phone numbers
▸Company numbers
▸ trick
▸08245475
▸CSS 3 speak-as: digits
▸Very poor support but should improve

Moving forward
▸More testing currently being done in this area.
▸Other pronunciation examples:
▸http://lab.dotjay.co.uk/tests/screen-readers/pronunciation/

Responsibility?
▸Users?
▸Software vendors?
▸Developers?
▸Content creators?
▸Web standards?

Responsibility?
▸Users?
▸Software vendors?
▸Developers?
▸Content creators?
▸Web standards?
All of us!

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!

Jon has personal connections to
accessibility.

Jon has personal connections to
accessibility.
Photo credit: Jon Gibbins with thanks to Drake Music Project

Empathy
▸Most of us have a connection to accessibility

Empathy
▸Mobile
▸small screens
▸text sizes
▸touch targets and keys
▸environment (hands-free, noise, rain)

Empathy
▸Ageing
▸We are all ageing
▸Multiple disabilities of different types

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

Commit
▸Establish an ongoing commitment to accessibility
▸Create an accessibility statement
▸Get an accessibility champion on your team

Resources: accessibility books
▸A Web for Everyone:
Designing Accessible User
Experiences by Sarah Horton
and Whitney Quesenbery
▸Design Meets Disability by
Graham Pullin

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/mobile
▸BBC GEL – How to design for accessibility
▸http://www.bbc.co.uk/gel/guidelines/how-to-design-for-accessibility

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

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

#sharetheoran
https://youtu.be/x9MvEZskR6o

Thanks!
Jon Gibbins, @dotjay
@DigA11y

Accessible UX: Going beyond WCAG (#ID24)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Kürzlich hochgeladen (9)

Empfohlen

Empfohlen (20)

Accessible UX: Going beyond WCAG (#ID24)

Hinweis der Redaktion