Making Mobile Accessible

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
Unit: Million
525
700

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 will improve the experience for all users.
Easier to read, hear, interact, understand and stay focused.
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%.

“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 multisep forms can also help to simplify the flow of content.

Learning Disabilities - Error Prevention
Give 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%
1 / 30,000
Complete chromatopsia
All colours, as grey
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

Visual Impairments - Colour Blindness
Deuteranope
Non-colour blind
Protanope

Visual Impairments - Colour Blindness
Non-colour blind
Tritanope

Visual Impairments - Colour Blindness
Deuteranope
Non-colour blind
Protanope

Visual Impairments - Colour Blindness
Non-colour blind
Tritanope

Learning from others
The ignorance of accessibility is more common than you may think…

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
Many thanks to these people for the work referenced within this presentation.
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
!