Giter Site home page Giter Site logo

disic / guide-integrateur Goto Github PK

View Code? Open in Web Editor NEW
137.0 16.0 8.0 2.04 MB

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

Home Page: https://disic.github.io/guide-integrateur/

License: Other

CSS 21.86% HTML 73.75% JavaScript 4.39%
rgaa a11y webdev webdesign

guide-integrateur's Introduction

Guide de l’intégrateur RGAA 3

Introduction

Ce guide de l’intégrateur vous est proposé dans le cadre des ressources accompagnant la prise en main de la version 3 du référentiel général d’accessibilité pour les administrations (RGAA 3).

Toutes les règles et tous les exemples d’implémentation donnés ici se réfèrent à la version 3 du RGAA.

Le RGAA 3 est composé d’un document d’introduction, d’un guide d’accompagnement et d’un référentiel technique. Cet ensemble de documents a une portée réglementaire puisqu’ils ont été rendus officiels par l'arrêté du 29 avril 2015, lui-même venant préciser l'article 47 de la loi 2005-102 du 11 février 2005 et l'arrêté 2009-546 du 14 mai 2009.

Les ressources complémentaires sont des supports sans valeur réglementaire et visent à vous aider à rendre vos contenus numériques accessibles et conformes au RGAA 3.

À qui s’adresse ce guide ?

Ce guide s’adresse aux intégrateurs chargés de réaliser les gabarits HTML et CSS et se focalise sur les problématiques de respect de la sémantique et de la mise en forme. Il n’est pas question dans ce guide de JavaScript, qui fait l’objet avec ARIA, d’un tout autre guide.

À chacun son métier

Certaines problématiques ne sont volontairement pas abordées, car elles dépendent d’autres acteurs que l’intégrateur web. Par exemple, les contrastes de couleurs ou la pertinence des liens ne sont pas du ressort de l’intégrateur. Ce sont aux concepteurs, designers ou contributeurs de s’attacher à respecter ces contraintes.

Mode d’emploi du guide

Le guide a été pensé comme une série de fiches pratiques sur le même modèle pour en faciliter l’utilisation. Vous pouvez les lire en fonction de vos besoins, sans avoir à suivre un ordre particulier, chaque fiche étant indépendante.

Certaines fiches proposent également des démonstrations d’implémentation conforme et non conforme. Les démonstrations, exemples et explications s’appuient uniquement sur les navigateurs utilisés dans la base de référence et sur les recommandations de la version 3 du RGAA.

Vous retrouverez dans chaque fiche :

  • Sommaire : pour naviguer à travers l’ensemble des fiches du guide ;
  • Synthèse : les principaux points à retenir ;
  • Correspondances RGAA 3 : les correspondances avec les critères du référentiel technique du RGAA 3.

Sommaire des fiches

Intégration web et RGAA 3

Thématiques du RGAA 3 abordées à travers ces fiches :

  • Images
  • Cadres
  • Tableaux
  • Liens
  • Éléments obligatoires
  • Structuration de l’information
  • Présentation de l’information
  • Formulaires
  • Navigation
  • Consultation

Ressources connexes et références

Licence d’utilisation

Ce document est la propriété du Secrétariat général à la modernisation de l’action publique français (SGMAP). Il est placé sous la licence ouverte 1.0 ou ultérieure, équivalente à une licence Creative Commons BY. Pour indiquer la paternité, ajouter un lien vers la version originale du document disponible sur le compte GitHub de la DInSIC.

Ce guide est rédigé au format Markdown Vous trouverez sur ce lien Wikipedia des précisions sur ce langage. Il peut également être consulté en ligne ou au format PDF (1,2 Mo).

guide-integrateur's People

Contributors

astik avatar audreymaniez avatar etat-plateforme avatar philippebron avatar philippevay avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

guide-integrateur's Issues

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">

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.

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...

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) :
texte-14px-conteneur-1000px

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

Qu'en pensez-vous ?

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.