#KiwiParty 2014 - Notes de conférences

Designing for accessibility - Laura Kalbag

Les développeurs sont aussi des designer par essence. car les designers concoivent des choses.

L'accessibilité n'interessent pas les personne car ce n'est pas "shiny" que ça n'utilise pas des "preprocesseurs" ou des outils cools.

Mais ce n'est pas "Sympa" que le web ne soit pas accessible, car cela exclut un grand nombre de personnes. L'accessibilité profiterai au maximum de personne.

Améliorer l'accesibilité à permis de d'augmenter les ventes de société d'assurance ou d'augmenter les ventes de virgin.net de 68%

Les déficiences visuelles ne sont pas binaires. Il y a différents type d'handicaps qui empèchent d'accèder au web. Ex : surdié de légère à sévère. problème visuels : astigmatisme. photophobie...

L'idée principale de l'accessibilité est de rendre les choses plus facile. Plus facile à lire, plus facile à écouter, plus facile à utiliser.

L'accessibilité vise à améliorer l'utilisabilité d'un site web (pour tout le monde).

Si l'on rend un site web plus facile à lire. Il sera plus facile à lire pour tout le monde. Donc tout le monde y gagne.

Eviter les texte écrtis tout petit. Ne pas empécher l'utilisateur de redimensionner les tailles de polices.

Il faut rendre les choses compréhensibles. Un texte bien écrit est un bon point pour l'accessibilité. Eviter les contrastes trop fort ou trop faible.

Au sujet des liens : Il ne faut pas que l'utilisateur doivent deviner quels sont les éléments avec lesquels interragir. Il faut rendre les lien facilement identifiable. Avec du sougliné par exemple. (convention à respecter)

Il faut utiliser impérativement les balise Aria

Un peu compliqué de suivre la conf en anglais et de prendre des notes. Les notes des slides seront suffisante. Le lien sera placé ici plus tard :)

Outils à utiliser : Wave checker : www.webaim.com

Utiliser des outlis de tests de contrast

Responsive Logic - Julien Cabanès

Responsive Logic = Layout conditionnel + +

Layout Conditionnel

Le contenu détermine les breakpoints et non l'inverse. 

Le layout est un bonus

Il faut utiliser des unités relative - em pour la typographie et les espaces interne (font-size et padding) % pour les largeurs de contenueurs et marges

Idéalement, utiliser un préprocesseur pour les media queries

Eviter autant que possible les max-width (approche mobile first).

BEM, vos CSS sous vitamines !

BEM est une methodologie pour avoir des CSS plus maintenables

Utiliser des classes autonomes qui disent exactement à quoi elle vont servir.

Les classes peuvent être hiérarchisées .article et .article-title par exemple.

 BEM = Block Element Modifier

La structure des classes se décompose ainsi : 

block-name__element-name--modifiername

Exemple pour un menu :

.menu, .menu__tab, .menu__tab--current

BEM permet d'éviter les fuites car tous les éléments sont stylés par une classe unique.

BEM permet aussi d'utiliser les classes sur n'importe quel élément. On est donc indépendant de la structure.

Introduction au persuasive design

Changer les comportement. Selon une étude, une sensibilisation ne suffit pas à modifier les comportement.

Exemple : sensibiliser les gens aux danger du tabac ne fait pas baisser le nombre de fumeur.

Il faut changer les comportement. L'interdiction elle a efectivement permis de diminuer le nombre de fumeurs.

Mécanismes pour changer les comportements :

L'effet gel Si l'on solicite l'utilisateur, il y a plus de chance que celui-ci agisse. Exemple : demander à une personne de surveiller ses affaires.

Les gens ont beaucoup de mal à revenir sur une décision prise.

L'amorçage : Il' s'agit de cacher à une personne le coût réel d'une action. Si l'utilisateur se prête à une expérience de prime abord, il sera plus enclin à suivre le processus jusqu'au bout.

Le pied dans la porte:  Demander peu au débuter puis les augmenter au fil du temps. Ex : demander l'heure avant de demander de l'argent = 4x plus de chance de recevoir de l'argent.

La pique : Perturber le fonctionnement de l'utilisateur : par exemple demander une somme d'argent incongrue ex : 26€72. au lieux de 20€ afin de casser les scénarios pré-établis. perturber l'utilisateur permet de mieux faire percevoir son message à l'utilisateur.

L'engagement

pour que l'utilisateur poursuive un comportement, il faut qu'il soit engagé vis a vis de ce comportement.

L'utilisateur doit s'attribuer des raisons d'ordre interne. Sortir du mode punition/récompense car ce n'est pas un schéma durable. Il faut que l'utilisateur soit libre de faire ses choix. Si l'utilisateur à une bonne image de lui même en faisant quelque chose, il aura tendance à poursuivre.

Plus un acte est couteux, plus l'utilisateur sera engagé dans un comportement. Par exemple "Liker" un contenu est moins couteux que de poster un commentaire donc moins engageant.

Quelques exemple de persuasive design :

Nike+ qui permet de suivre son activité physique avec des capteurs physiques. L'utilisateur est libre de choisir ses objectif et peut donner de la visibilité de ses usage. => Résultat : collecte de donnée efficaces.

Pied dans la porte avec des pieds dans la porte avec la participation à des challenges de plus en plus élevés.

Macro & Micro Persuasion

Exemple de micro persuasion avec linked in, qui propose de plus en plus de fonctionnalité en fonction de l'utilisation que l'on fait du service.
=> Découverte du profil d'une autre personne, proposition d'inscription, puis de plus en plus d'information. 

 Plus les utilisateurs sont en confiance, moins ils seront sensibles aux éléments extérieux négatifs.

Donner un sentiment d'appartenance au groupe. Exemple avec Amazon qui permet de se personnaliser son interface.

 ARIA, toute une symphonie - Stéphane Deschamps

 ARIA : Accessible Rich Internet Application

WCAG 1 = Uniquement l'HTML est accessible

WCAG 2 = Accessibilité agnostique de la technologie. Le Javascript doit, lui aussi, être accessible. (et/ou le Flash, Silverlight...)

Le But de WCAG est de rendre accessible tout les contenus web.

ARIA sert a décrire les rôles et les états des éléments d'un contenu. Exemple : un onglet de menu, actif, ou non.

Attention : Si Aria permet de définir un élément comme étant un bouton, autant utiliser un élément qui sert strictement à ça.

Les Landmarks

Les landmarks permettent de définir des point "importants" dans la page. exemple : Banner, Search, Form, Article.

Ces landmarks permettent d'accéder rapidement aux contenus. Notamment avec le lecteur d'écran Jaws.

 ARIA et l'interactivité

aria-live = off : le contenu ne changera pas (valeur par défaut)
aria-live = polite : la zone va être rafraichie, lors de l'entrée dans la zone le contenu doit être mis à jour
aria-live = assertive : Si le contenu d'une section est modifié dynamiquement, alors l'utilisateur est averti.

Il y a aussi aria-relevent et aria-atomic, mais sont plus complexe à mettre en oeuvre.

Pour voir ce que l'on fait en Aria : Addon firefox : Juicy Studio Accessibility Toolbar

role="image"

Permet de définir qu'un élément est une image. et permet de proposer un texte alternatif (à utilise par exemple en conjonction à du SVG)

role="button"

Cet élément ne sera pas tabulable il faut absolument ajouter un tabindex="0".

role="checkbox"

Permet de définir des élément de case à cocher avec 3 éléments. Décoché, Coché et partiellement coché.

aria-labbeled-by et aria-descripbed-by

Permet de définir par quel élément est présenté l'input ainsi qu'une description supplémentaire.

Description d'élément non HTML

arira-expanded : permet de déterminer si un élément est ouvert ou fermé (Accordéons par exemple)

role="dialog" et role="alertdialog" : permet de définir que des éléments sont des messages qui s'affichent en en rollover.

Si l'on ajoute une role="dialog", alors il faut aussi empécher en Javascript de sortir du focus des élément se trouvant dans la popin. Ce qui est assez compliqué.

role="alert" : permet de définir qu'un élément est une alerte. cet élément va intérompre l'utilisateur et lui explicité son erreur (à mettre en oeuvre au niveau des formulaires avec validation coté client)

Les onglets HTML

Voir les élément d'onglets dans les slides.

Les description aria, permettent aussi de facilier les interactions javascript en se basant sur les différentes propriétés.

Application

Il s'agit d'un cas à part qui permet de définir une zone de la page qui se comportera comme une application.

La zone videra le buffer systématiquement et ne récupérera que le contenu de l'applicatif.

Ce rôle application n'a que peu d'utilité.

D'autres éléments pas HTML

menubar : définie une barre de menu, menuitem... attention, ces éléments doivent implémenter tous les comportement par défaut. Exemple : navigation au clavier avec les flèches etc etc... c'est donc complexe à mettre en oeuvre.

Vues en arbres : treelist, treeitem...

Vue de tableau : treegrid, permet de hiérarchiser les éléments.

role="presentation" : permet de supprimer la sémantique de certaines éléments. exemple, permet de désactiver la prise en compte des listes à puces dans les li d'un menu, si l'item du menu est le lien dans le li.

role="presentation" est votre meilleur ami lorsque vous faites de l'ARIA

Line-Height : Cette propriété méconnue - Vincent de oliveira

le rôle de line-height est de gérer l'espace vertical entre les lignes. et donc de créer un rhytme vertical.

Il s'agit de l'interligne, entre le bas de et le haut des caractères.

Le line-height est la hauteur minimale d'une ligne.

La valeur par défaut est "normal".

Un bon ajustement de line-height entre les titres et les contenus textuel permet d'avoir un bon rhytme vertical.

Graphisme et ergonomie des projets... horrible - Guillaume Hurst

Conférence basé sur les projets où la fonction prime sur l'esthétique. Ex : GED, Extranets, Backoffices, Formulaires, Tableaux...

Eviter de surcharger les pages qui sont déjà complexe de base.

Il faut du design simple.

Voir les slides.... grosso modo : faire simple, faire efficace, faire de la qualité XD

Voila voila... trop chaud... abandon