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

Visual Impairments - Colour Blindness

Non-colour blind

Deuteranope

Protanope

Visual Impairments - Colour Blindness

Non-colour blind Tritanope

Visual Impairments - Colour Blindness

Non-colour blind

Deuteranope

Protanope

Visual Impairments - Colour Blindness

TritanopeNon-colour blind

Learning from othersThe 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

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.