Design for all - Smartphone et Tablette - FLUPA

  • View
    144

  • Download
    0

  • Category

    Design

Preview:

DESCRIPTION

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

Citation preview

iErgoRaphaël Yharrassarry

Design for all,smartphone & tablette

iErgo

Design

for a

ll

Acces

sibilit

é

Un peu

de te

chniq

ue

Des o

utils

& de

s

liens

iErgo

iErgo

Démo

iErgo

le parcours

iErgo

iErgo

iErgo

iErgo

iErgo

Catachrèse

iErgo

iErgo

Design

for a

ll

Acces

sibilit

é

Un peu

de te

chniq

ues

Des o

utils

& de

s

liens

www.iergo.fr - raphael@iergo.fr

c’est quoi ?

Web

Web apps

Applications

Applications hybrides

13

iErgo

iOS - iPhone - iPad

iErgo

iErgo

iErgo

www.iergo.fr - raphael@iergo.fr

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

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%

iErgo

Design

for a

ll

Acces

sibilit

é

Un peu

de te

chniq

ues

Des o

utils

& de

s

liens

iErgo

La taille ne varie pas.

iErgo

www.iergo.fr - raphael@iergo.fr

taille des cibles

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

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

23

iErgo

Applications et SDK

iErgo

Web, Web apps, (hybride)

iErgo

Respecter les normes

Séparer le contenu de la forme

iErgo

Responsive design

iErgo

em & %

iErgo

Les formulaires,abusons des types et attributs

iErgo

Champ texte

iErgo

Champ mot de passe

iErgo

Champ téléphone

iErgo

Menu déroulant

iErgo

Date et heure

iErgo

Design

for a

ll

Acces

sibilit

é

Un peu

de te

chniq

ues

Des o

utils

&

des l

iens

www.iergo.fr - raphael@iergo.fr

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

www.iergo.fr - raphael@iergo.fr iErgo

W3C mobileOK Checker

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

www.iergo.fr - raphael@iergo.fr iErgo

Adobe Shadows

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

iErgo

Questions ?

iErgo

Raphaël Yharrassarrywww.iergo.frraphael@iergo.fr iergo

Recommended