41
iErgo Raphaël Yharrassarry Design for all, smartphone & tablette

Design for all - Smartphone et Tablette - FLUPA

Embed Size (px)

DESCRIPTION

Présentation sur l'accessibilité des tablettes et smartphones.

Citation preview

Page 1: Design for all - Smartphone et Tablette - FLUPA

iErgoRaphaël Yharrassarry

Design for all,smartphone & tablette

Page 2: Design for all - Smartphone et Tablette - FLUPA

iErgo

Design

for a

ll

Acces

sibilit

é

Un peu

de te

chniq

ue

Des o

utils

& de

s

liens

Page 3: Design for all - Smartphone et Tablette - FLUPA

iErgo

Page 4: Design for all - Smartphone et Tablette - FLUPA

iErgo

Démo

Page 5: Design for all - Smartphone et Tablette - FLUPA

iErgo

le parcours

Page 6: Design for all - Smartphone et Tablette - FLUPA

iErgo

Page 7: Design for all - Smartphone et Tablette - FLUPA

iErgo

Page 8: Design for all - Smartphone et Tablette - FLUPA

iErgo

Page 9: Design for all - Smartphone et Tablette - FLUPA

iErgo

Page 10: Design for all - Smartphone et Tablette - FLUPA

iErgo

Catachrèse

Page 11: Design for all - Smartphone et Tablette - FLUPA

iErgo

Page 12: Design for all - Smartphone et Tablette - FLUPA

iErgo

Design

for a

ll

Acces

sibilit

é

Un peu

de te

chniq

ues

Des o

utils

& de

s

liens

Page 13: Design for all - Smartphone et Tablette - FLUPA

www.iergo.fr - [email protected]

c’est quoi ?

Web

Web apps

Applications

Applications hybrides

13

Page 14: Design for all - Smartphone et Tablette - FLUPA

iErgo

iOS - iPhone - iPad

Page 15: Design for all - Smartphone et Tablette - FLUPA

iErgo

Page 16: Design for all - Smartphone et Tablette - FLUPA

iErgo

Page 17: Design for all - Smartphone et Tablette - FLUPA

iErgo

Page 18: Design for all - Smartphone et Tablette - FLUPA

www.iergo.fr - [email protected]

Android

«Ice Cream Sandwich» - version 4Support des écrans multitouch

«Gingerbread, Honeycomb» &Co - Version 1,6 à 3nécessité d’installer des applications tiers suivant les besoins.

18

Page 19: Design for all - Smartphone et Tablette - FLUPA

iErgohttp://webaim.org/projects/screenreadersurvey3/

Mobile Platform # of Respondents % of Respondents

Nuance Talks (Nokia) 374 30.0%

VoiceOver for iPhone 338 27.1%

Mobile Speak (Nokia) 203 16.3%

TalkBack for Android 31 2.5%

Orator/Oratio for BlackBerry 8 0.6%

Other 80 6.4%

Page 20: Design for all - Smartphone et Tablette - FLUPA

iErgo

Design

for a

ll

Acces

sibilit

é

Un peu

de te

chniq

ues

Des o

utils

& de

s

liens

Page 21: Design for all - Smartphone et Tablette - FLUPA

iErgo

La taille ne varie pas.

Page 22: Design for all - Smartphone et Tablette - FLUPA

iErgo

Page 23: Design for all - Smartphone et Tablette - FLUPA

www.iergo.fr - [email protected]

taille des cibles

Minimumcoté : 0,74 cmespacement : 0,38 cm

Confortablecoté : 0,9 cmespacement : 0,38 cm

23

Page 24: Design for all - Smartphone et Tablette - FLUPA

iErgo

Applications et SDK

Page 25: Design for all - Smartphone et Tablette - FLUPA

iErgo

Web, Web apps, (hybride)

Page 26: Design for all - Smartphone et Tablette - FLUPA

iErgo

Respecter les normes

Séparer le contenu de la forme

Page 27: Design for all - Smartphone et Tablette - FLUPA

iErgo

Responsive design

Page 28: Design for all - Smartphone et Tablette - FLUPA

iErgo

em & %

Page 29: Design for all - Smartphone et Tablette - FLUPA

iErgo

Les formulaires,abusons des types et attributs

Page 30: Design for all - Smartphone et Tablette - FLUPA

iErgo

Champ texte

Page 31: Design for all - Smartphone et Tablette - FLUPA

iErgo

Champ mot de passe

Page 32: Design for all - Smartphone et Tablette - FLUPA

iErgo

Champ téléphone

Page 33: Design for all - Smartphone et Tablette - FLUPA

iErgo

Menu déroulant

Page 34: Design for all - Smartphone et Tablette - FLUPA

iErgo

Date et heure

Page 35: Design for all - Smartphone et Tablette - FLUPA

iErgo

Design

for a

ll

Acces

sibilit

é

Un peu

de te

chniq

ues

Des o

utils

&

des l

iens

Page 36: Design for all - Smartphone et Tablette - FLUPA

www.iergo.fr - [email protected]

Quelques liens

La liste des guidelines «accessibilités» pour différentes plateformes.Resources for mobile accessibility guidelines : http://www.iheni.com/mobile-accessibility-guidelines/

Mobile Web Best Practices (MWBP) http://www.w3.org/TR/mobile-bp/

36

Page 37: Design for all - Smartphone et Tablette - FLUPA

www.iergo.fr - [email protected] iErgo

W3C mobileOK Checker

http://validator.w3.org/mobile/

Page 39: Design for all - Smartphone et Tablette - FLUPA

www.iergo.fr - [email protected] iErgo

Adobe Shadows

http://labs.adobe.com/technologies/shadow/

Page 40: Design for all - Smartphone et Tablette - FLUPA

iErgo

Questions ?

Page 41: Design for all - Smartphone et Tablette - FLUPA

iErgo

Raphaël [email protected] iergo