the velvet rope - making user experience accessible
TRANSCRIPT
The velvet ropeHenny Swan @iheni
This talk we given at NUX5, 2016. For notes accompanying the slides please download as a PDF.
Images should all be accessible, and video is described in the note.
Colin late 60sretiredEastEnders faniPlayer userblindscreen-reader user
BBC iPlayer v3
Multiple headings with updating copy
Duplicated links to the same page
Primary content far down in the content order
Links with dual actions
What do these issues have in common?
They are not accessibility issues.
What does a disabled person want?compliance with WCAGsupport for WAI ARIApage validationan accessibility policy
Said nobody, ever!
#auxaccessible user experience
“Applying accessibility techniques to an unusable site is like putting lipstick on a pig. No matter how much you apply, it will always be a pig.”
—Lipstick on a Usability Pig, Jared Smith
“It pains me to say this but web developers may not be the most important people when it comes to making accessible websites and apps.”
—Ian Pouncey
Guidelines focus on…
code over designoutput over outcomecompliance over experience
Guidelines focus on…
code over designoutput over outcomecompliance over experience
Accessible User Experience Principles
1. BBC - How to Design for Accessibility2. Microsoft Inclusive Design Toolkit3. A Web for Everyone - Sarah Horton and Whitney Quesenbery
Accessible User Experience Principles1.People first2.Equivalence3.Choice4.Control5.Consistency6.Value
People firstPlace the needs of people above the needs of technology
“The potential audience of a website or app is anyone human. Inclusivity of ability, preference and circumstance is paramount.”
—Heydon Pickering, Inclusive Design Patterns
Legacy content
Legacy contentProcurement
Legacy contentProcurementThird-party content
Legacy content ProcurementThird-party contentPattern libraries
EquivalenceDisabled people can perceive, understand, navigate and interact with content equally without barriers
Accessible
1.2.2 Captions (Prerecorded): Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled
Netflix
Equivalent experience:
Colour-coded speakers
ITV Player
Equivalent experience:
Colour-coded speakers
Custom styles
YouTube
Equivalent experience:
Colour-coded speakers
Custom styles
Repositioning
Ted Talks
Equivalent experience:
Colour-coded speakers
Custom styles
Repositioning
iPlayer
Equivalent experience:
Colour-coded speakers
Custom styles
Repositioning
Understandable
BuzzfeedBuzzfeed
In 2015, Ofcom reported 80% of subtitle users in the UK do not identify as having hearing loss.
Microsoft Inclusive Design Toolkit
ChoiceProvide multiple ways to find content and complete complex or non-standard tasks
Beware of assumptions and be aware of context
“It can be difficult today to visualise the building as it looked a hundred years ago, but as we follow the tour, imagine the rooms with their royal furniture and ornaments removed, and with lino covering the floors, and boards protecting the walls. You’ll have the opportunity to see photographs of the Pavilion during its time as a hospital throughout our tour.”
www.brightonmuseums.org
“It can be difficult today to visualise the building as it looked a hundred years ago, but as we follow the tour, imagine the rooms with their royal furniture and ornaments removed, and with lino covering the floors, and boards protecting the walls. You’ll have the opportunity to see photographs of the Pavilion during its time as a hospital throughout our tour.”
www.brightonmuseums.org
Visual designNon visual designInclusive design
“…choice is a privilege. One whose luxury some of us don’t have.”
—Sina Braham
ControlEnsure the user always has control over content and can customise the display
Pinch zoomLegibility InteractionDistraction
Don’t disable zoom —Adrian Roselli
ConsistencyUse consistent and familiar design patterns
Standard versus custom components
Inconsistent focus order
“Since navigation is at the bottom focus should start here.”
Consistency across platforms
ValueFeatures add value for everyone but some features add more value than others
FeaturesFilters Grid / list layoutWizardsData visualisation
UXMovement
Just Eat AmazonYouTube
Voice API Geolocation API Camera and voice API
Consider disabled people when prioritising features
The principles of accessible user experience is all user experience
Billy Gregory @TheBillyGregory
When is something accessible?
Johnny Taylor @ableaccess
When I can use it!
Inclusive Design Patterns —Hendon Pickering
Thank youHenny Swan @iheni