Post on 14-Jul-2015
transcript
Why does it matter?
Approximately one billion people worldwide have some form of disability, making up a quarter of the mobile subscribers worldwide.
Visually Impaired
Mental Health
Dyslexia
Autism
Mobility
0 175 350 525 700
Unit: Million
But why should I bother?
“People with disabilities rarely use the web”
“We don’t want to affect the experience for the majority of our users”
“We don’t have the budget for accessibility”
“Accessible websites are ugly”
Oh…
Accessibility doubled Legal and General’s life insurance sales online. !
Tesco home delivery sales increased by £13m in 2005. Normal visitors also claimed to prefer the accessibility changes that were made.
!
Accessibility changes increased Virgin.net sales by 68%.
Accessibility will improve the experience for all users.Easier to read, hear, interact, understand and stay focused.
“Stand on a street corner sometime and watch how many walkers prefer using curb-cut ramps instead of stepping
over a storm drain or tiptoe- ing around a street post. Most people choose to use a ramp when entering a
building, even if they aren’t in a wheelchair or require the use of crutches.”
Learning Disabilities
‘Learning disability’ is an umbrella term covering many different intellectual disabilities. It means that a person’s capacity to learn is affected and that they may not learn
things as quickly as other people.
Learning Disabilities - Consistency
Consistent navigation and iconography. !
Between screens the placement, functionality and display of elements should be consistent to aid familiarity and focus.
!
!
Interactive elements should produce predictably similar results. !
Any components that give the user feedback (touch states, animations etc) should be consistant through the application.
Learning Disabilities - Transformability
Text should be scalable without breaking functionality. !
Application content should remain readable and functional when text size is either increased or decreased.
!
Avoid using text within images. !
Use true text within images wherever possible, this means that the textual content will also support the scaling of any text sizes.
!
Don’t rely on colour to convey content. !
Not all users will be able to relate a colour to an event or situation, so don’t rely on colour alone to convey message.
Learning Disabilities - Multi Modality
Make content available in multiple mediums. !
Provided alternative ways of viewing content (such as audio and video) provides the user with multiple means of perceiving content.
!
!
Images can be used to convey and enhance content. !
The use of images can aid the users understanding of any content they may find complicated to understand.
!
This also applies to iconography, text provides contextual cues and content comprehension
Learning Disabilities - Focus
Help the user to focus on import an content. !
White space and page design can help to increase focus on content. However, be careful to draw attention away with animations, sounds,
images and busy backgrounds - this makes it hard for some users to focus. !
Structure content. !
Breaking content into shorter sections with clear headings creates a clear and easy to follow structure for users. Sequencing pages and using multi-
sep forms can also help to simplify the flow of content.
Learning Disabilities - Error PreventionGive the user control.
!
The user should have complete control over content updates and changes, content time-outs should be avoided unless more time can be requested.
!
Indicate the user of their current state. !
Make sure the user knows their progress or current state within a flow, this may be a position within the navigational structure or a step within a
sequence !
Allow the reversal of any users actions !
Any critical interaction (user input, navigation) should be reversible or cancellable.
Dyslexia
Dyslexia is a common type of specific learning difficulty that mainly affects the skills involved in the reading and
spelling of words.
Dyslexia - Iconography
Whilst text aids the user by giving more context to any imagery that is used, iconography allows
users to skip reading any supporting text. !
This can save the user both time and frustration, allowing them to identify the purpose of the
navigation almost instantly.
Dyslexia - River Effect
Justified text and double spacing after periods produces large gaps between text,
this is known as creating a distracting river of whitespace.
!
This can make it hard for the user to read both accurately and fluently, which can cause
them to constantly lose their place.
Dyslexia - Blurred Content
Using pure black text on a pure white background causes swirled words due to the sensitivity of the contents high contrast. This bad habit affects the users ability to read, as
well as making the process very tiring. !
Longer breaks are required between reading text, long paragraphs make it easy for users to
lose their place. A rule of ‘one idea per paragraph’ helps to keep focus.
Dyslexia - Washout Effect
Serif fonts can obscure the shape of lettering, causing them to merge together within
words. This makes the text become faint and indistinct, slowing the reader down.
!
To overcome this, sans-serif fonts increase space between letters, making the words
easier to understand. !
Italics should be avoided due to being both jagged and slanted, making it hard for users to
understand. This becomes even worse so when smaller font sizes are used.
Autism Spectrum
Autism and Asperges syndrome are both part of a range of related developmental disorders known as autistic
spectrum disorders (ASDs) that begin in childhood and last through adulthood.
Autism Spectrum - Content Availability
The display of content that cannot be interacted with by the user can cause frustration and panic for some users.
!
Ideally, an alternative form of interaction should be shown such as registering for an update of when an item is in stock, rather
than a grey ‘Out of Stock’ button. !
Otherwise, such content should be hidden from the user, but accessible upon request.
Autism Spectrum - Limit Choices
User with autism can easily be overloaded within information and choices. Because of this, the number of routes (links) the user
can take should be kept to a minimum within each area.
!
It should take a user no more than three clicks to be able to navigate to their desired
destination. !
Providing more than a single method of navigating information, where possible, gives the user control over navigation.
Hearing Loss
Hearing loss is a common problem that often develops with age or is caused by repeated exposure to loud
noises.
Hearing loss - Closed Captioning
Any videos used should always include subtitles. Closed caption should be implemented effectively to
ensure all viewers can achieve an enjoyable experience.
!
Banding should be used as the caption background, but it should not obscure any important content and
the context of the caption should still be clear. !
Captions are not just for users with hearing loss. Users with learning difficulties and non-english
speakers also gain a better experience.
Hearing loss - Visual Notification
Any interactive features that indicate some form of progress should always be
supported with a visual alert. !
This could be by showing a visual notification as well as the chime that is played when a
message received… !
…Or showing some form of visual validation when content finishes updating.
Hearing Loss - Content Availability
Applications and sites that are locked to landscape orientation will create difficulties for
users who are hard of hearing. !
Orientation locks cause problems for users with some disabilities.
!
Landscape for example, once the phone has been turned around it is likely that the users hands will
be covering the speakers of the mobile device - this makes it difficult for the user to hear any
audio content.
Visual Impairments
Visual impairment is when a person has sight loss that cannot be fully corrected using glasses or contact lenses.
Visual Impairments - Colour Blindness
Type Colour affected % population
Protanopia Red and Green, more intense. 1% all males
Deuteranopia Red and green. 1% all males
Tritanopia Blue and yellow < 1%
Complete chromatopsia All colours, as grey1 / 30,000
Incomplete chromatopsia All colours, dimly visible 1 / 30,000
Protanomaly Reds can seem black 1% males, 0.01% females
Deuteranomaly Muted greens 6% males, 0.4% females
Tritanomaly Blue and yellow 0.01%
Visual Impairments - Colour Blindness
• Text links that aren’t underlined
• Maps with multiple lines
• Keys used for tables / graphs
• Coloured maps
• Discounted items on e-commerce sites
Useful Tools
Color Oracle - A free colour blindness simulator for Window, Mac and Linux. !
WAVE Web Accessibility Tool - An online tool checks page accessibility, providing tags to show the results. !
WHO - Information on disabilities on a global scale, useful reports and fact sheets.
References
Why Bother with Accessibility? - Laura Kalbag !
Evaluating Cognitive Web Accessibility - WebAim !
World Health Organisation !
RNIB !
The National Autism Society !
6 Surprising Nad Practices That Hurt Dyslexic Users - UXMovement !
Say Goodbye to Red-Green Color Scales - Gregor Aish !
Many thanks to these people for the work referenced within this presentation.