Inclusive and accessible mobile

•

2 recomendaciones•1,368 vistas

Henny Swan

An introduction to mobile accessibility for Mobile Monday, June 11, 2012

Tecnología Diseño

Inclusive
and
Accessible
Mobile

#MobA11y

Henny
Swan

Senior
Usability
and
Accessibility
Specialist,
BBC

henny@iheni.com

Mobile
and

Diverse
user
model,
age,
technology,

accessibility
temporary

Mobile
is
by
deﬁni9on
disabling

Mobile
is
by
deﬁni9on
enabling

USA
21st
Century
Communica9ons
and

Video
Act

‘There
are
62
million
poten9ally

disabled
users
in
the
UK’

Gareth
Ford
Williams,
BBC

Mobile
Accessibility
Guidelines
&

techniques

Coming
soon

1.
Support
device

capabiliEes
Content

must
not
break
device
accessibility

Web
and
plaKorm
speciﬁc
controls

should
be
used
as
intended

Accessibility
features
must
be

implemented
in
a
way
that
is
not

mutually
exclusive

Device
speciﬁc
guidelines
should
be

followed

Device
capability

2.
AlternaEves
Provide
alterna9ves
for
content
and

func9onality:

HTML:
alt=“Description”!
iOS:
labels,
hints and
traits!
Android:
android:contentDescription!

Hide
non
content
and
func9onality

objects:

HTML:
alt=“”!
iOS
do
not
‘Enable
Accessibility’

Android
do
not
make
focusable
via

android:focusable !

Provide
appropriate
editorial

Alterna9ves

3.
NavigaEon

Provide
consistent,
recognisable

naviga9on

Group
related
links:

Tabindex=“-1”not
supported

a
single
link
ahref
is
supported

Remove
skip
links
on
touch
and
mobile

Links

Provide
a

logical
focus
order
and
content
order

4.
Structure

Use
headings
(H1
to
H6),
WAI
ARIA

Landmarks,
HTML5
sec9oning
elements

‘Accordion’
structure
from
desktop
to

mobile

Structure

Desktop

www.smashingmagazine.com

Structure

Main
naviga9on
packed

away
Mobile
Banner,
naviga9on

landmarks
can
be

removed

Heading
structure

collapsed

Structure

5.
Touch
Visual
cues
to
help
users
navigate

BBC
iPhone
app
for
iPlayer
Audible
cues
for
voice
output
users

‘BBC
Two'

No9fy
screen
readers
of
changes
to

layout

Provide
enough
‘read-‐tap
symmetry’

Touch
targets
should
be
large
enough

Touch

Talk
is
cheap

Screen
reader
tes9ng
on
mobile

There
is
no
subs9tute
for
tes9ng
with

users
with
disabili9es
on
mobile

Más contenido relacionado

La actualidad más candente

Debunking Common Myths of Mobile Application DevelopmentAntenna Software

Delivering Exceptional User Experiences and Engagement – Learn from Real Worl...BlueArc Group

HTML5 for Mobile - When and WhyDMI

GENCom Unified Communications datasheetGENBANDcorporate

Mr Lucchina Cisco Will The Device be really king ?IDATE DigiWorld

Are You Mobile Friendly or a Mobile Frenemy?vizCards

Nokia E7 Smartphone: Nokia and IBM Co-operationNokia Central & East Europe

Apple iPhone and iPad at IBMChris Sparshott

Video. The new dialtone for business communicationsschinarro

Location aggregation, the next wave of location accessHitReach

IBM Mobile strategy for Social Business - May 2012Ed Brill

Kentico Technical Learning: Exploring jQuery MobileThomas Robbins

Cisco Presentation jabber updatesolarisyougood

Cisco connect jabber client updateVitor Costa

Open Source And UxScott Weiss

More than the Sum of its parts, the API's whole3scale

LocalSocial Overview Q409v3Sean O'Sullivan

Rococo Software Q409Sean O'Sullivan

Zenprise ctia 10-11-2011_v02Shafaq Abdullah

La actualidad más candente (20)

Debunking Common Myths of Mobile Application Development

Delivering Exceptional User Experiences and Engagement – Learn from Real Worl...

HTML5 for Mobile - When and Why

GENCom Unified Communications datasheet

Mr Lucchina Cisco Will The Device be really king ?

Are You Mobile Friendly or a Mobile Frenemy?

Nokia E7 Smartphone: Nokia and IBM Co-operation

Apple iPhone and iPad at IBM

Video. The new dialtone for business communications

Location aggregation, the next wave of location access

IBM Mobile strategy for Social Business - May 2012

Kentico Technical Learning: Exploring jQuery Mobile

Cisco Presentation jabber update

Cisco connect jabber client update

Open Source And Ux

More than the Sum of its parts, the API's whole

LocalSocial Overview Q409v3

Rococo Software Q409

Zenprise ctia 10-11-2011_v02

Destacado

Mobile ux upaHenny Swan

Universal access across devicesHenny Swan

Accessibility beyond the desktop - panel slides Accessibility 2.0Henny Swan

Opera Accessibility SXSW 09Henny Swan

The secret life of an accessible playerHenny Swan

Web and mobile accessibilityHenny Swan

Dive Into Mobile - Guidelines for Testing, Native and Web AppsSusan Hewitt

Is the mobile web enabled or disabled by design?Henny Swan

Mobile Accessibility (MobA11y)Henny Swan

Introduction to mobile accessibility, 2015Henny Swan

Interpersonal communicationMehran Rostamzadeh

Introduction to mobile accessibility - AccessU 2013Henny Swan

The Velvet Rope - making user experience accessibleHenny Swan

Breaking silos - all bad things must come to an endHenny Swan

Destacado (14)

Mobile ux upa

Universal access across devices

Accessibility beyond the desktop - panel slides Accessibility 2.0

Opera Accessibility SXSW 09

The secret life of an accessible player

Web and mobile accessibility

Dive Into Mobile - Guidelines for Testing, Native and Web Apps

Is the mobile web enabled or disabled by design?

Mobile Accessibility (MobA11y)

Introduction to mobile accessibility, 2015

Interpersonal communication

Introduction to mobile accessibility - AccessU 2013

The Velvet Rope - making user experience accessible

Breaking silos - all bad things must come to an end

Similar a Inclusive and accessible mobile

Mobile site design best practicesAyantek LLC

Mobile browser testing v1.0Ravindran Antonysamy

Monetizing and the mobile webWAN-IFRA

Build Mobile Websites | How to make a Mobile Website | Creating Mobile WebsitesClickTecs

CrownPeak Mobile Marketing VideocastShelley Iocona

Adaptation and Continuity in Multi-Device EnvironmentsSerenoa Project

12 reasons for building mobile app with ionic frameworkOptiSol Business Solutions

What You Need To Know About Mobile | Noel Webb, SpeakFeel CorporationCanadaHelps / MyCharityConnects

Widgets –what’s that all about then?Nathalie Magniez

Mobile Web Standards and its FutureSeungyun Lee

Optimizing mobile apps and websitesVik Chaudhary

SharePoint and MobileJeff Willinger

Embracing the mobile frontier and reaching the digital nativesEktron

Adobe AIR Mobile development for Android and PlayBookMihai Corlan

Mobile web apps designvictorpanaite

Mobile Web (R)Evolution - Sept 2011arendsf

Mobile web technologies_overview_v1_0_enHemant Shah

Top Ten Tips for HTML5/Mobile Web DevelopmentSimon Guest

Mobile First by Sparks GroveBrooke Novak

appsnack mobileoverviewMatthew Kent

Similar a Inclusive and accessible mobile (20)

Mobile site design best practices

Mobile browser testing v1.0

Monetizing and the mobile web

Build Mobile Websites | How to make a Mobile Website | Creating Mobile Websites

CrownPeak Mobile Marketing Videocast

Adaptation and Continuity in Multi-Device Environments

12 reasons for building mobile app with ionic framework

What You Need To Know About Mobile | Noel Webb, SpeakFeel Corporation

Widgets –what’s that all about then?

Mobile Web Standards and its Future

Optimizing mobile apps and websites

SharePoint and Mobile

Embracing the mobile frontier and reaching the digital natives

Adobe AIR Mobile development for Android and PlayBook

Mobile web apps design

Mobile Web (R)Evolution - Sept 2011

Mobile web technologies_overview_v1_0_en

Top Ten Tips for HTML5/Mobile Web Development

Mobile First by Sparks Grove

appsnack mobileoverview

Último

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106

Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j

Scaling API-first – The story of a global engineering organizationRadu Cotescu

Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies

Install Stable Diffusion in windows machinePadma Pradeep

Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK

Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal

Key Features Of Token Development (1).pptxLBM Solutions

Slack Application Development 101 Slidespraypatel2

Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst

GenCyber Cyber Security Day PresentationMichael W. Hawkins

08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls

Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes

04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG

Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software

Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada

FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh

Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies

The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los

Inclusive and accessible mobile

1. Inclusive and Accessible Mobile #MobA11y Henny Swan Senior Usability and Accessibility Specialist, BBC henny@iheni.com

2. Mobile and Diverse user model, age, technology, accessibility temporary Mobile is by deﬁni9on disabling Mobile is by deﬁni9on enabling USA 21st Century Communica9ons and Video Act ‘There are 62 million poten9ally disabled users in the UK’ Gareth Ford Williams, BBC

3. Mobile Accessibility Guidelines & techniques Coming soon

4. 1. Support device capabiliEes Content must not break device accessibility Web and plaKorm speciﬁc controls should be used as intended Accessibility features must be implemented in a way that is not mutually exclusive Device speciﬁc guidelines should be followed Device capability

5. 2. AlternaEves Provide alterna9ves for content and func9onality: HTML: alt=“Description”! iOS: labels, hints and traits! Android: android:contentDescription! Hide non content and func9onality objects: HTML: alt=“”! iOS do not ‘Enable Accessibility’ Android do not make focusable via android:focusable ! Provide appropriate editorial Alterna9ves

6. 3. NavigaEon Provide consistent, recognisable naviga9on Group related links: Tabindex=“-1”not supported a single link ahref is supported Remove skip links on touch and mobile Links

7. Provide a logical focus order and content order 4. Structure Use headings (H1 to H6), WAI ARIA Landmarks, HTML5 sec9oning elements ‘Accordion’ structure from desktop to mobile Structure

8. Desktop www.smashingmagazine.com Structure

9. Main naviga9on packed away Mobile Banner, naviga9on landmarks can be removed Heading structure collapsed Structure

10. 5. Touch Visual cues to help users navigate BBC iPhone app for iPlayer Audible cues for voice output users ‘BBC Two' No9fy screen readers of changes to layout Provide enough ‘read-‐tap symmetry’ Touch targets should be large enough Touch

11. Talk is cheap Screen reader tes9ng on mobile

12. There is no subs9tute for tes9ng with users with disabili9es on mobile

13. Thank you henny@iheni.com

Inclusive and accessible mobile

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (14)

Similar a Inclusive and accessible mobile

Similar a Inclusive and accessible mobile (20)

Último

Último (20)

Inclusive and accessible mobile