The document discusses the importance of making mobile applications accessible to all users. It addresses some of the challenges in mobile accessibility like small screens and lack of standardization. The key points made are: 1) Accessibility should be considered from the start when developing mobile apps. 2) Descriptive text using techniques like alt tags and labels help users who cannot see or perceive images and multimedia. 3) Color alone should not be used to convey meaning as some users may not see or perceive color correctly.

1. Shyamala
Prayaga

3. Do
we
really
need
to
bother
about
MOBILE?

4. Yes,
it
has
become
integral
part
of
our
life!

5. So
has
it,
for
them

6. Are
we
not
being
biased
when
developing
mobile
apps?

7. BUT

8. mobile
is
by
definiHon
DISABLING

9. REMEMBER
THIS?
• An
electronic
telecommunicaHons
device
• make
and
receive
calls
• Send
and
receive
messages

10. Hence….
Smaller
screen
size
Poor
light
Glare
Small
fonts
Poor
image
and
colour
support
Small
keyboards
No
mouse
One
hand

11. At
the
same
TIME

12. mobile
is
by
definiHon
ENABLING

13. Now
Then
Purpose
is
the
same…
needs
and
requirements
changed
People
want
more

14. Hence….
Task
based
GeolocaHon
Camera
integraHon
Calendar
integraHon
Bridges
the
digital
divide
I
can’t
afford
a
computer
but
I
have
a
mobile

15. NEXT
big
quesHon?

16. WHAT
ARE
DIFFERENT
MOBILE
APPLICATIONS
TYPES?

17. Mobile
Web
NaHve
Apps
Apps

18. Hybrid
Apps

19. Responsive

20. So
many
mobile
devices,
So
any
applicaHon
types!
How
to
make
them
accessible?

21. Accessibility…
What
is
that?

22.
when
your
mobile
applicaHon
is
ready
for…

23. Diverse
user
model
Sight,
hearing,
mobility,
learning
and
cogniHon

24. AssisHve
technology
users
Screen
readers,
screen
magnificaHon,
voice
input

25. Hidden
disability
Chronic
faHgue,
depression,
ME,
fibromyalgia,
verHgo,
nausea,
photo
sensiHvity

26. Aging
DeterioraHon,
first
Hme
users

27. Temporary
RSI,
broken
wrists,
back
pain,
short-­‐term
illness

28. Cultural
Language,
color,
iconography

29. Technology
and
changes
hardware,
soYware,
access

30. MOBILE
ACCESSIBILITY
CHALLENGES

31. Small
devices

32. Different
shapes
and
sizes

33. Touch
screens

34. Lack
of
standardized
UIs

35. Lack
of
device
expandability

36. Using
devices
out
“in
the
wild”

37. Next
big
quesHon,
How
to
make
mobile
apps
accessible
with
so
many
challenges?

38. First
build
accessibility
into
your
decision
making
process

39. ESSENTIAL
INGREDIENTS
OF
ACCESSIBILITY

40. 1. Web
standards
–
HTML,
CSS,
JavaScript
and
XML
2. Web
browser
3. Plaborm
Accessibility
API
–
iOS,
Android
and
Blackberry
4. AssisHve
technology
5. Plaborm
accessibility
features
6. USERS

41. Mobile
Accessibility
Principles,
Guidelines
&
Techniques

42. Add
descripHve
text
to
user
interface
controls
in
1
your
applicaHon
-­‐
(images,
sound,
video)
Why?
User
cannot
perceive
important
informaHon
or
loses
informaHon
due
to
lack
of
alternaHve/descripHve
text.

43. 1
Who
does
it
helps?
Func%onal
Disability
Context:
• User
who
is
blind
cannot
perceive
content
that
include
non-­‐text
objects.
• User
whose
browser,
assisHve
technology,
other
user
agent
doesn't
support
object.

44. 1
Who
does
it
helps?
Situa%onal
Disability
Context:
• User
can
be
billed
for
download
volume
so
images
might
be
turned
off
to
save
costs.
• Some
mobile
user
agents
have
limited
support
for
non-­‐text
objects
• Some
user
agents
also
shrunk
images
in
size
to
fit
the
device's
screen
which
can
make
images
meaningless

45. How
do
we
achieve
that?
1
Using
Alt
and
Title
HTML
EXAMPLE
<img
src=“meta.png”
alt=“This
is
meta
refresh
image”
/>
Using
android:contentDescripHon
ANDROID
EXAMPLE
<ImageBuoon
android:id=”@+id/add_note_buoon”
android:src=”@drawable/add_note”
android:contentDescripHon=”@string/add_note”/>

46. 1
Using
label,
hints
and
traits
iOS
EXAMPLE

47.
Label
Short
word
or
phrase
Describes
the
object
or
view
i.e.
‘Play’
Does
not
describe
the
type
i.e.
‘Play
buoon’
Trait
Describes
the
type
i.e.
link,
buoon,
checkbox,
selected,
adjustable
More
than
one
trait
can
be
used
i.e.
checkbox,
selected
Hint
Use
sparingly
ExplanaHon
not
a
command
i.e.
‘Plays
video’
not
‘Play
video’

48. Label:
Done,
Label:
[Program
name,
Label:
SubHtles
Label:
Enter/
back
to….
Episode
number]
On/Off
Exit
Full
screen
Trait:
Buoon
Trait:
StaHc
text
Trait:
Buoon
Trait:
Buoon
Label:
Play
/ Label:
[
00.07
of
59.37
]
swipe
up
or
Label:
Show/
Pause
down
to
adjust
Hide
more
Trait:
Buoon
Trait:
Adjustable
Trait:
Buoon

49. 1
DescripHve
text
guidelines
• Add
contextual
informaHon
to
images,
such
as
the
image
name,
to
communicate
the
meaning
and
context
of
the
images
• Don’t
do
keyword
stuffing
for
alternate/descripHve
text
for
SEO
ranking
• Localize
text

50. 2
Do
not
rely
on
color
alone
to
convey
meaning
Why?
User
perceives
color
incorrectly
or
not
at
all,
and
so
misses
or
misunderstands
informaHon
or
makes
mistakes.

51. 2
Who
does
it
helps?
FuncHonal
DisabiliHes
Context
User
who
are
blind
or
colorblind
perceives
color
incorrectly
or
not
at
all

52. 2
Who
does
it
helps?
Situa%onal
Disability
Context
Many
screens
have
limited
color
paleoe
and
color
difference
is
not
presented.
Device
is
used
in
poor
lighHng
(for
example,
outdoors),
so
colors
are
not
clearly
perceived.

53. 2
How
do
we
achieve
that?
Use
blocks
of
color
rather
than
vague
outlines/shades

54. 2
• Contrast
between
foreground
and
background
AA
(minimum):
4.5:1
AAA
(enhanced):
7:1

55. 2
HOW
TO?
Why
4.5:1?
Compensates
for
the
loss
in
contrast
that
results
from
• moderately
low
visual
acuity,
• congenital
or
acquired
color
deficiencies,
• the
loss
of
contrast
sensiHvity
that
typically
accompanies
aging.
Why
7:1?
Compensates
for
the
loss
in
contrast
sensiHvity
usually
experienced
by
• users
with
vision
loss
equivalent
to
approximately
20/80
vision.
• users
with
low
vision
who
do
not
use
assisHve
technology.
• provides
contrast
enhancement
for
color
deficiency.

56. 2
Color
guidelines
• Ensure
that
foreground
and
background
color
combinaHons
provide
sufficient
contrast.
• Ensure
that
informaHon
conveyed
with
color
is
also
available
without
color

57. 3
Minimize
text
input
in
the
interface
Why?
User
has
difficulty
entering
text
so
text
is
entered
incorrectly
or
mistakes
are
made.

58. 3
Who
does
it
helps?
FuncHonal
DisabiliHes
Context
User
with
motor
disability
(for
example,
parHal
paralysis,
hand
tremor,
lack
of
sensiHvity,
coordinaHon)
has
difficulty
entering
informaHon.

59. 3
Who
does
it
helps?
SituaHonal
Disability
Context
• Device
has
small
keypad
which
has
limited
funcHonality
• The
context
of
mobile
could
be
unpredictable

60. 3
How
do
we
achieve
that?
• Provide
alternaHve
means
to
enter
text
if
possible
• Avoid
free
text
entry
where
possible.
• Provide
pre-­‐selected
default
values
where
possible.
• Specify
a
default
text
entry
mode,
language
and/or
input
format,
if
the
device
is
known
to
support
it.
• Use
keyboard
shortcuts
if
supported
by
the
device
and
browser

61. 4
Use
SemanHc
Markup
Why?
If
the
page
markup
is
invalid
this
will
result
in
unpredictable
and
possibly
incomplete
presentaHon
of
the
content.

62. 4
Who
does
it
helps?
FuncHonal
DisabiliHes
Context:
AssisHve
technology
or
browser
cannot
handle
invalid
markup.
Easier
for
disabled
users
using
screen
readers
to
understand
the
purpose
of
elements
and
quickly
jump
between
different
types
of
elements.

63. 4
Who
does
it
helps?
SituaHonal
Disability
Context:
Some
older
mobile
browsers
do
not
display
content
with
invalid
markup.

64. 4
How
do
we
achieve
that?
HTML
EXAMPLE
<form
acHon="hop://example.com/donut"
method="post">
<p>
<input
type="checkbox"
name="flavor"
id="choc"
value="chocolate"
/>
<label
for="choc">Chocolate</label><br/>
<input
type="checkbox"
name="flavor"
id="cream"
value="cream"/>
<label
for="cream">Cream
Filled</label><br/>
<input
type="checkbox"
name="flavor"
id="honey"
value="honey"/>
<label
for="honey">Honey
Glazed</label><br/>
<input
type="submit"
value="Purchase
Donuts"/>
</p>
</form>

65. 4
How
do
we
achieve
that?
ANDROID
EXAMPLE
android.view.accessibility.AccessibilityNodeProvider
This
semanHc
structure
allows
accessibility
services
to
present
a
more
useful
interacHon
model
for
users
who
are
visually
impaired.

66. 5
Have
a
concise
page
content
and
page
size
User
only
sees
small
Why?
areas
at
a
Hme,
is
unable
to
relate
different
areas
of
a
page,
and
so
becomes
disoriented
or
has
to
scroll
excessively.

67. 5
Who
does
it
helps?
FuncHonal
DisabiliHes
Context
User
with
restricted
field
of
vision
or
using
screen
magnifier
gets
only
small
part
of
page
or
image
at
a
Hme.

68. 5
Who
does
it
helps?
SituaHonal
Disability
Context
Mobile
device
has
small
screen,
so
not
all
inform
can
be
displayed

69. 5
How
do
we
achieve
that?
• Clear
and
concise
language,
as
mobile
users
are
looking
for
a
quick
access
to
informaHon.
• Limit
scrolling
to
one
axis
throughout
the
app
(verHcal
or
horizontal
axis)
a
• Avoid
image
larger
than
the
screen
size
• Divide
pages
into
usable
but
limited
size
porHons.
• PosiHon
important
things
higher
up
and
less
important
things
lower
down
in
scrolling
views
• Create
large
clickable
areas

70. Do
not
insert
funcHons
that
can
only
be
managed
6
via
gestures.
Always
add
a
buoon/link
Why?
• Most
gestures
are
not
intuiHve
• Not
recognized
by
many
users

71. 6
Who
does
it
helps?
FuncHonal
DisabiliHes
Context
• Blind
users
cannot
use
gestures
at
all
• Users
with
temporary
disability
cannot
use
gestures
• Gestures
are
guess
work
for
most
users

72. 6
Who
does
it
helps?
SituaHonal
DisabiliHes
Context
Gestures
cannot
be
used
in
most
of
the
outdoor
or
indoor
context

73. 6
How
do
we
achieve
that?
• Use
gestures
which
can
be
used
even
with
buoon
or
link
• Don’t
rely
completely
on
gestures
for
the
interacHon,
have
alternate
interacHve
mechanisms

74. 7
Ensure
that
it
is
possible
to
zoom
the
interface
Why?
Due
to
small
screen,
readability
goes
for
a
toss

75. 7
Who
does
it
helps?
Zooming
helps
users
who
cannot
read
or
see
Hny
leoers
or
have
sight
disability

76. 7
How
do
we
achieve
that?
HTML
<meta
name="viewport"
value="iniHal-­‐scale=1.0,
minimum-­‐scale=1.0,
maximum-­‐
scale=2.0">

77. CONCLUSION

78. Mobile
is
for
every
.
Think
about
it
in
your
next
applicaHon!

79. Guidelines
related
to
mobile
accessibility
Web
Content
Accessibility
Guidelines
(WCAG)
Mobile
Web
Best
PracHces
(MWBP)
RelaHonship
between
WCAG
and
MWBP
Widget
Accessibility
Guidelines
Widget
Usability
Best
PracHces
Mobile
Website
Guidelines
(University
of
AusHn)

80. Device
specific
mobile
accessibility
guidelines
Android
Designing
for
Accessibility
Android
Accessibility
Blackberry
Best
PracHce
Designing
Accessible
ApplicaHons
iOS:
Accessibility
Programming
Guide
Nokia/Symbian:
User
Experience
checklist
for
Touch
and
Keypad
(PDFs)

82. Shyamala
Prayaga
@pshyama