Inclusive Design Patterns, de Heydon Pickering

Certains navigateurs et le mode high contrast de Windows retirent les images.

Ne pas spécifier de taille en px. Utiliser les unités viewport font-size calc(1em + 1vw) Lazy load de polices : onload et noscript [quid du chargement partiel ?] FOUT : choisir une police système aux métriques proches en attendant le chargement. Subsetting les (google) fonts avec Fontsquirell : supprimer les caractères inutilisés. Conserver le latin unicode.

Résultat de la recherche pour Limitation du titre à 60 caractères

ne servent qu'aux voyants en navigation tabulaire top 0 right 100%

cf. les fonts recommandées par les associations de dyslexiques :

• d et b pas en miroir
• kerning élevé entre les lettres (rn ne ressemble pas à m)
• ascendantes et descendantes suffisamment élevées et de hauteurs constantes
• aucun ornement réduisant la lisibilité
• aucune lettre ne peut être confondue avec une autre (1,I et l, O et 0)

Dans les faits, les polices faites pour les dyslexiques (OpenDys) ne sont pas plus efficaces et pas plus appréciées que Verdana, Helvetica, Arial, et Times Roman (par ordre de priorité).

Tant que la police n'est pas exagérément ornementée, celle-ci ne fait pas de grosse différence en terme de lisibilité.

Mesure d'un paragraphe : le nombre de caractères constituant une seule ligne. Sélectionner la ligne la plus longue pour référence. Bringhurst recommande 45 à 75 caractères. 60 est la valeur médiane. max-width: 60rem;

Pour des questions de lisibilité, éviter la justification. En print l'hyphenation permet d'éviter que l'on se retrouve avec de gros trous, en web l'hyphenation n'est pas top.

line-height : le W3C recommande 1,5x d'espacement.

Paradoxalement, un contraste trop élevé peut réduire la lisibilité du texte pour certaines personnes (migraine dûe aux lumières vives, syndrome d'Irlen…)

Liens : soulignés (par défaut) Technique du text shadow blanc pour que les ascendantes et descendantes restent visibles Focus : arrière-plan coloré Externe : icône pseudo element et texte alternatif Copywriting : phrases courtes et longues en alternance pour casser la monotonie, directes (non passives), sans répétition Le contenu est l'essentiel, tout le reste est de l'amélioration

Éviter de mettre du contenu avant le titre, par exemple les metas, sinon les personnes navigant de titre en titre avec leur lecteur d'écran rateront le contenu sans le savoir

Inclure le sous-titre dans le titre, avec un préfixe sous-titre visible uniquement

Accessibilité du contenu : test de Flesch-Kinkaid

• très facile à lire : compréhensible par un enfant de 11 ans.
• facile à lire : français conversationnel (12 ans)
• assez facile à lire (13 ans)
• français moyen : 13-15 ans
• assez difficile : 16-18
• difficile : fac
• très difficile : universitaire

Titres compréhensibles hors contexte (pour les lecteurs d'écran).

• Si l'on souhaite citer le travail/site de quelqu'un d'autre, la moindre des choses est de citer l'auteur et/ou le nom du travail.

• avec son et image pour ceux qui peuvent et veulent, peut être écoutée par les non-voyants (+ audio-description), peut-être lue sans le son avec des sous-titres. Prévoir un transcript pour ceux qui ne peuvent pas télécharger la vidéo
• Sélectionner un player focusable par tabulation, avec un style focus visible. Le tester avec NVDA sous Windows + Firefox, et/ou avec VoiceOver sur Mac + Safari. Le lecteur d'écran devrait annoncer qu'il s'agit d'un bouton de lecture ou d'un bouton pause. La lecture doit pouvoir être déclenchée via les touches Espace ou Entrée
• le lecteur YouTube est accessible. Voir aussi Able Player, Accessible HTML5 Video Player23 (from PayPal) et Accessible and Responsive HTML5 Video Player24 (by Laura Kalbag)
• les sous-titres peuvent être ajoutés dans une balise avec un fichier WebVTT. Signaler les changements d'interlocuteur (écrire le nom entre parenthèses, en majuscule, deux-points) et les sons d'arrière-plan / les sons qui ont un impact sur ce qui se passe (entre crochets, majuscule). Guide plus précis : http://bbc.github.io/subtitle-guidelines
• le transcript transpose les sous-titres, et apportent juste quelques précisions sur le visuel, par exemple (HORS CHAMP) si un personnage intervenant est hors-champs

Rendre l'association de n'importe quel élément du flux visuellement équilibré.

/* 1. Rythme vertical : si line-height = 1.5, espace entre les blocs de 1.5. / main * + * { margin-top: 1.5rem; / 1 */ }

li, dt, dd, br, th, td { margin-top: 0; } main * + *:not(p) { margin: 3rem 0; }

owl-selector * + * . Séléctionne tous les enfants sauf le premier

/* Masque les éléments vides (comme les

)*/ main :empty { display: none; }

Préférer les éditeurs Markdown ou Textile pour éviter les éléments vides

Shadow DOM, Custom Elements, HTML elements, and HTML templates document.registerElement('toggle-button', { prototype: toggleButton });

// Custom Elements v1 syntax customElements.define('toggle-button', toggleButton);

Demo : http://codepen.io/heydon/pen/ZOqwqQ

nav > ul (pas ol) > li La convention est de placer la navigation dans l'entête de la page, horizontalement. Attention à absolute et fixed : l'item a beau être positionné ailleurs, l'ordre de tabulation continue à suivre l'ordre de déclaration dans le code source, ce qui peut donner des sauts d'un bloc à l'autre peu intuitifs avec la navigation tabulaire. Quand c'est possible éviter de retirer des éléments du flux. Style de l'entrée de menu en cours d'affichage : pas seulement la couleur.

Style de lien sélectionné

• Mauvais : juste la couleur
• Bien : soulignement
• Mieux : zoom + flèche

Style de lien focusé

• Mauvais : rien
• Bien : conserver l'outline par défaut
• Mieux : un style encore plus visible que l'outline par défaut

a.current-page { display: inline-block; padding: 0.5rem; background: $highlight-color; transform: scale(1.2); }

a.current-page::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.25em; height: 0.25rem; background: url('images/pointer.svg') center no-repeat; background-size: auto 100%; }

Page en cours (signalée dans le menu)

Pour éviter que l'utilisateur recharge la page courante en cliquant sur le lien menant sur la page courante, on peut en modifier le href en mettant à la place une ancre vers le contenu principal (#main).

Header : mettre le logo dans le menu de navigation puisqu'il joue le même rôle (naviguer vers la page d'accueil) Préférer les tables de matières, ouvertes par défaut, aux dropdowns. Ils donnent un aperçu du contenu de la page en un seul coup d'oeil, sans avoir besoin de tout ouvrir. Utile pour les architectes de l'information pour étendre l'architecture, et pour les utilisateurs.

Navigation tabulaire : par défaut, cliquer sur une ancre donnera le focus :

• à la cible si elle est focusable
• au premier élément focusable dans la cible
• sinon, au premier élément focusable après la cible Dans certains navigateurs le focus ne suivait pas le contenu. Pour IE, ajouter tabindex="-1" sur le titre de la cible suffit à corriger le bug. Smooth scrolling : penser à faire le focus en JS et à changer le hash dans l'url.

Ajouter des titres aux navigations pour les différencier.

• menu hamburger : inutile si moins de 5 items
• icône menu : la couleur des barres doit correspondre à la couleur d'arrière-plan des items, doit être accompagné d'un label « menu » et avoir la forme d'un bouton.
• Opera mini ne charge pas les polices
• Pictogrammes : en svg + fallback png background plutôt que de l'unicode Tous les éléments interactifs doivent être associés à un nom : nom caché (visually-hidden), aria-label, ... Placer le bouton dans la nav, au-dessus de la liste d'items Utiliser aria-expanded pour indiquer que le menu est ouvert aux lecteurs d'écran Utiliser display:none plutôt que height:0 pour empêcher la navigation tabulaire sur le menu quand il est réduit.

« personne ne veut utiliser votre produit. Les gens veulent juste faire ce qu'ils ont à faire et basta ».

Boutons et liens sur mobile : un par ligne, et suffisamment de marge entre.

Prototype papier : une grande feuille format raisin, pleins de papier prédécoupé représentant les composants, de la patafix, du plastique transparent, des ciseaux et des feutres à tableau blanc

<li>
    <h3>
        Naked Man In Garage Forecourt       
        <a href="/artist/kenny-mulbarton">by <cite>Kenny Mulbarton</cite></a>
    </h3>
    <img src="/images/naked-forecourt-man.jpg" alt="High-contrast black and white image of a naked man nonchalantly leaning against a gas pump." />
    <dl>
        <dt>Size:</dt>
        <dd>90cm × 30cm</dd>
        <dt>Price:</dt>
        <dd>€35.95</dd>
        <dt>Rating:</dt>
        <dd><img src="/images/rating_4_5.svg" alt="">4 out of 5 stars</dd>
    </dl>
</li>

• liste de definition : indique à l'utilisateur d'un lecteur d'écran qu'il va entendre un ensemble de clés-valeurs. De plus les listes ont un style par défaut (intéressant si la feuille de style ne charge pas pour une raison x ou y)

• x est lu "iks" par les lecteurs d'écran. × ("fois") est un caractère différent.

• "Taille" (Size) est moins correct que "Dimension" mais plus utilisé dans l'usage courant et plus clair

• les étoiles sont en SVG comme vu précédemment. Un texte alternatif serait redondant.

• La vignette principale est l'image canonique du produit. Sur cette image le produit doit être entier, sans altération et élement distrayant. Les versions alternatives (autres couleurs) doivent être présentées de la même façon, sous le même angle.

• stratégies de réduction de poids de l'image : compression, lazy loading sous la ligne de flottaison, images responsives avec <picture>.

• Des styles distincts pour les liens normaux, pour les liens d'appel à l'action et pour les vrais boutons. Conserver un lien graphique, par exemple du bleu, pour indiquer que les trois sont cliquables.

• Ne pas rajouter cursor:pointer sur les boutons (réservé aux liens)

• Éviter les liens niveau bloc (risque de mistap sur écran tactile)

• L'objectif n'est pas de cocher toutes les cases des pré-requis du WCAG mais de faire en sorte que l'utilisateur puisse faire ce qu'il a à faire (utilisabilité)

• Utiliser le schéma Product (http://schema.org/Product)

• Utiliser <title>

• donner le rôle form à un n'est pas redondant, cela permet de rendre le formulaire navigable.

Anti-patterns :

• dropdown menu. Préférer les tables de matières ouvertes (ex: Wikipédia) https://www.nngroup.com/articles/drop-down-menus-use-sparingly/
• carousel (contenu texte)
• infinite scrolling. Souvent mal implémenté.
• boutons désactivés. Les laisser activés et montrer un message d'erreur.
• captcha

<form role="form" class="sorter" method="get">
    <fieldset>
        <legend>Sort by</legend>
        <input type="radio" name="sort-method" id="most-recent" value="most-recent" checked>
        <label for="most-recent">most recent</label>        
        <input type="radio" name="sort-method" id="popularity" value="popularity">
        <label for="popularity">popularity</label>
        <input type="radio" name="sort-method" id="price-low-high" value="price-low-high">
        <label for="price-low-high">price (low to high)</label>
        <input type="radio" name="sort-method" id="price-high-low" value="price-high-low">
        <label for="price-high-low">price (high to low)</label>
    </fieldset>
    <button type="submit">sort</button>
</form>

• donner le rôle form à un n'est pas redondant, cela permet de rendre le formulaire accessible en tant que région par les lecteurs d'écran
• Il n'y a pas de label pour un groupe de boutons radio, seulement un label par bouton. permet de regrouper toutes les options et de les rattacher à la légende « Sort by ». Ainsi à chaque fois qu'un des boutons aura le focus, le lecteur d'écran annoncera « Sort by » + le label du bouton.