disic/guide-integrateur

Un guide destiné aux intégrateurs chargés de réaliser des gabarits HTML et CSS accessibles.

guide-integrateur's Issues

Lisibilité des guides intégrateur / concepteur / contributeur

Bonjour,

Je parle pas mal des guides intégrateur / concepteur / contributeur que vous avez réalisés car je les trouve bien faits et très pratiques pour des non connaisseurs.

Une personne m'a fait, cependant, la remarque que ces guides manquent de lisibilité.

En effet, le texte des paragraphes est écrit assez petit (environ 14px si on a laissé son navigateur configuré à 16px par défaut). On gagnerait en lisibilité à le laisser à 100% de la taille de police définie par l'utilisateur dans son navigateur.

Par ailleurs, il y a des grands blocs de paragraphes qui s'étendent sur un peu plus de 1000px de large. Ces textes sont donc difficiles à lire car les lignes sont très longues.
Si on limitait les grands blocs de texte à 850px de large maximum, cela faciliterait la lecture.

Exemple :

Un bloc de texte actuellement (14px, conteneur 1000px) :

Un bloc de texte à 100% et un conteneur de 850px maximum :

Qu'en pensez-vous ?

Lien vers le pdf à télécharger incorrect

Bonjour,
sur le site https://disic.github.io/guide-integrateur/, le lien vers le pdf à télécharger mène vers une page 404. => https://github.com/DISIC/guide-integrateur/pdf/guide-integrateur.pdf

Bravo pour le boulot, par ailleurs, ce guide est très clair et pertinent !

Image SVG de décoration

Bonjour,

Il me semble qu'une erreur s'est glissée dans la partie "Cas des images svg" de la rubrique "Image de décoration : alternative vide" : https://disic.github.io/guide-integrateur/9-images.html#imagedecoration

L'exemple mentionné est :

En résumé, une image vectorielle de décoration devrait ressembler à ceci :
<svg role="img">
</svg>

Ça ne devrait pas être ça plutôt ?

En résumé, une image vectorielle de décoration devrait ressembler à ceci :
<svg aria-hidden="true">
</svg>

Coquille dans la page Formulaires - Aides et contrôles de saisie - Démonstrations

Dans la section Indication de format, on a le code :

<label for="taille">Quel est votre taille ?</label> <input id="taille" aria-describedby="help-title" type="text" /> <span id="help-taille"><abbr title="centimètres">cm</abbr></span>

Or il y a une coquille sur la balise <span id="help-taille"> qui devrait être <span id="help-title">

Balises HTML5 et landmarks ARIA : phrase sans verbe

Bonjour,

dans la section Pourquoi doubler les balises HTML5 avec les landmarks ARIA ?, le 2e paragraphe comporte 3 phrases :

Vous pourriez mettre plusieurs balises header ou footer dans votre structure de site. Ces balises pouvant être contenus dans des balises article ou section pour créer des en-têtes d'articles et des pieds d'article. Ajouter les landmarks permet de différencier toutes ces balises des balises structurant le corps principal de la page.

La 2e phrase n'a pas de verbe à l'indicatif et il semble y avoir un souci avec l'ensemble. Un point-virgule entre les 2e et 3e phrases peut-être ? Ou une seule phrase :

Vous pourriez mettre plusieurs balises header ou footer dans votre structure de site : ces balises pouvant être contenus dans des balises article ou section pour créer des en-têtes d'articles et des pieds d'article, ajouter les landmarks permet de différencier toutes ces balises des balises structurant le corps principal de la page.

Mais c'est alors bien trop long...

Erreur de landmark "nav" != "navigation"

Bonjour (et bravo pour ce document),

J'ai constaté une petite erreur de nommage dans le choix d'un landmark ARIA sur la fiche de Gabarit Général (peut-être ailleurs également) : https://github.com/DISIC/guide-integrateur/blob/master/1-gabarit-general.md

Dans la section "Éléments HTML5 et landmarks ARIA", il est indiqué :

la navigation principale et les éventuelles navigations secondaires : role="nav".

La bonne valeur est role="navigation"

Bonne journée.

tabindex="-1" utile pour le Javascript

Dans la fiche 7 concernant le focus, le rôle de l'attribut tabindex est bien expliquée, par contre concernant la valeur -1 il y a un oubli (volontaire ?) :

À l'inverse, tabindex="-1" permet de retirer un élément du parcours du focus. L'élément qui possède cet attribut ne recevra plus le focus.

La valeur -1 rend en effet le focus impossible à l'aide de la touche TAB, par contre depuis HTML 5, il permet de rendre cet élément focusable via Javascript (peu importe l'élément). Cela peut servir par exemple lorsqu'on souhaite déplacer le focus sur un élément non focusable par défaut à la suite d'une action utilisateur.

Sinon, bien joué pour ces notices ! c'est top.