Avant de découvrir les règles Opquast, il est important de comprendre leur organisation. Ces bonnes pratiques sont regroupées en plusieurs catégories, chacune visant un objectif précis, comme l’accessibilité, l'écoconception ou encore le SEO. Parcourir ces règles par objectif vous permettra de cibler les aspects les plus pertinents pour votre projet et de garantir une qualité optimale à chaque étape de votre démarche.
Vous voulez intervenir sur :
| Règle | Étape du projet | Thématique | Action(s) à entreprendre | Module(s) à installer | Qui peut agir ? | Mise en œuvre |
|---|---|---|---|---|---|---|
| Il est possible de connaître les nouveaux contenus ou services. | Conception, Éditorial | Contenus | Ajout de module, Configuration | Advanced Views RSS Feed, Aggregator | Développeur | Configurer une vue des nouveaux contenus ou installer un des différents modules de la communauté tels que Advanced Views RSS Feed ou Aggregator qui permettent la création d'un flux RSS. |
| La première occurrence d’une abréviation ou d’un acronyme dans le corps de chaque page donne accès à sa signification. | Conception, Développement, Éditorial | Contenus | Ajout de module | CKeditor Abbreviation | Développeur, Contributeur | Le module CKeditor Abbreviation permet d'ajouter la possiblité d'utiliser des balises abbr dans l'éditeur de texte du site. |
| Un lexique ou un glossaire adapté au public visé explique le vocabulaire sectoriel ou technique. | Éditorial | Contenus | Ajout de module | G2, Glossify | Développeur, Contributeur | Les modules G2 ou Glossify permettent la mise en place d'un glossaire entièrement personnalisable en contribution. |
| Les contenus ne détournent pas de caractères pour simuler une mise en forme visuelle. | Éditorial | Contenus | À mettre en place | Contributeur | Il revient au contributeur de respecter cette règle. |
|
| Chaque champ de formulaire est associé dans le code source à une étiquette qui lui est propre. | Développement | Formulaires | Fonctionnalité native | Webform | Les formulaires générés par Drupal ou le module Webform sont conformes. |
|
| Les informations complétant l’étiquette d’un champ sont associées à celui-ci dans le code source. | Développement | Formulaires | Fonctionnalité native | Webform | Les formulaires générés par Drupal ou le module Webform sont conformes. |
|
| Le format de saisie des champs de formulaire qui le nécessitent est indiqué | Développement | Formulaires | À mettre en place | Contributeur | La conformité dépend de la contribution éditoriale réalisée au niveau du formulaire. |
|
| L’utilisateur est averti lorsqu’une saisie est sensible à la casse. | Développement | Formulaires | À mettre en place | Contributeur | La conformité dépend de la contribution éditoriale réalisée au niveau du formulaire. |
|
| Chaque étiquette de formulaire est visuellement rattachée au champ qu’elle décrit. | Conception | Formulaires | Fonctionnalité native | Webform | Concepteur | Les formulaires générés par Drupal ou le module Webform sont conformes. La conception doit s'assurer de ne pas déroger à cette règle. |
| Les informations contextuelles se rapportant à un champ de formulaire lui sont visuellement rattachées. | Conception | Formulaires | Fonctionnalité native | Webform | Concepteur | Les formulaires générés par Drupal ou le module Webform sont conformes. La conception doit s'assurer de ne pas déroger à cette règle. |
| En cas de rejet des données saisies dans un formulaire, les champs contenant les données rejetées sont indiqués à l’utilisateur. | Développement | Formulaires | Fonctionnalité native | Webform | Les formulaires générés par Drupal ou le module Webform sont conformes. |
|
| En cas de rejet des données saisies dans un formulaire, les raisons du rejet sont indiquées à l’utilisateur. | Développement | Formulaires | Fonctionnalité native | Webform | Les formulaires générés par Drupal ou le module Webform sont conformes. |
|
| Les messages d’erreur personnalisés sont exprimés dans la langue du formulaire. | Développement | Formulaires | Fonctionnalité native | Webform | Les formulaires générés par Drupal ou le module Webform sont conformes. |
|
| Les éléments d’une liste déroulante qui peuvent être regroupés le sont de manière appropriée. | Éditorial | Formulaires | À mettre en place | Contributeur | La conformité dépend de la contribution éditoriale réalisée au niveau du formulaire. |
|
| Les listes d’options de formulaires sont présentées dans un ordre identifiable. | Développement | Formulaires | À mettre en place | Contributeur | La conformité dépend de la contribution éditoriale réalisée au niveau du formulaire. |
|
| Les champs permettant l’autocomplétion sont signalés dans le code source. | Développement | Formulaires | Développement supplémentaire | Webform | Développeur | Webform permet d'implémenter manuellement les bons attributs dans le code source. |
| Les boutons désactivés ne sont pas masqués aux lecteurs d’écran. | Développement | Formulaires | Fonctionnalité native | Webform | Les formulaires générés par Drupal ou le module Webform sont conformes. |
|
| Les vidéos comportent des sous-titres synchronisés. | Éditorial | Images et médias | À mettre en place | Contributeur | La conformité dépend de la contribution éditoriale. |
|
| La durée des contenus vidéo ou audio est indiquée. | Développement | Images et médias | À mettre en place | Contributeur | La conformité dépend de la contribution éditoriale. |
|
| Les vidéos sont déclenchées par l’utilisateur. | Développement | Images et médias | Fonctionnalité native | Le lecteur natif de Drupal est conforme. |
||
| Les sons sont déclenchés par l’utilisateur. | Développement | Images et médias | Fonctionnalité native | Le lecteur natif de Drupal est conforme. |
||
| Les animations, sons et clignotements peuvent être mis en pause. | Développement | Images et médias | À mettre en place | Développeur | Ce critère est dépendant des développements réalisés. |
|
| Chaque changement de langue est signalé. | Éditorial | Internationalisation | À mettre en place | Contributeur | La conformité dépend de la contribution éditoriale. |
|
| Chaque lien est doté d’un intitulé dans le code source. | Développement | Liens | À mettre en place | Contributeur | Cela dépend de la contribution éditoriale. Drupal permet d'implémenter ce critère. |
|
| Les liens sont visuellement différenciés du reste du contenu. | Conception | Liens | À mettre en place | Concepteur, Développeur | Cela dépend de la conception graphique et des développements. |
|
| Les liens provoquant l’ouverture d’un logiciel externe ont un libellé explicite. | Éditorial | Liens | À mettre en place | Contributeur | La conformité dépend de la contribution éditoriale. |
|
| L’utilisateur est averti des ouvertures de nouvelles fenêtres. | Éditorial | Liens | À mettre en place | Contributeur | La conformité dépend de la contribution éditoriale. |
|
| Le format des fichiers proposés en téléchargement est indiqué. | Développement | Liens | À mettre en place | Contributeur | La conformité dépend de la contribution éditoriale. |
|
| La taille des fichiers internes proposés en téléchargement est indiquée. | Éditorial | Liens | À mettre en place | Contributeur, Développeur | La conformité dépend de la contribution éditoriale et des développements. |
|
| La langue des fichiers en téléchargement est précisée lorsqu’elle diffère de celle de la page d’origine. | Éditorial | Liens | À mettre en place | Contributeur | La conformité dépend de la contribution éditoriale. |
|
| La navigation ne provoque pas l’ouverture de popups. | Conception | Navigation | Fonctionnalité native | Conforme par défaut. |
||
| Les items actifs de menu sont signalés. | Développement | Navigation | À mettre en place | Concepteur, Développeur | La conformité dépend de la conception graphique et des développements. |
|
| Les blocs de navigation de même nature sont affichés aux mêmes emplacements sur toutes les pages. | Conception | Navigation | À mettre en place | Concepteur, Développeur | La conformité dépend de la conception graphique et des développements. |
|
| Les icônes de navigation sont accompagnées d’une légende explicite. | Conception | Navigation | À mettre en place | Contributeur, Développeur | La conformité dépend de la contribution et des développements. |
|
| Chaque page contient des liens d’accès rapide placés au début du code source. | Développement | Navigation | Fonctionnalité native | Conforme par défaut. |
||
| Le focus clavier n’est ni supprimé ni masqué. | Développement | Navigation | Fonctionnalité native | Conforme par défaut. |
||
| La navigation au clavier permet d’interagir avec l’intégralité des contenus et services. | Développement | Navigation | Fonctionnalité native | Développeur, Contributeur | Conforme par défaut. Cela dépend des développements et de la contribution. |
|
| La navigation au clavier s’effectue dans un ordre prévisible. | Développement | Navigation | Fonctionnalité native | Développeur, Contributeur | Conforme par défaut. Cela dépend des développements et de la contribution. |
|
| L’information n’est pas véhiculée uniquement par la couleur. | Conception | Présentation | À mettre en place | Concepteur, Développeur | La conformité dépend de la conception graphique et des développements. Nativement Drupal respecte la règle. |
|
| Les contenus sont présentés avec un contraste suffisant par rapport à leur arrière-plan. | Conception | Présentation | À mettre en place | Concepteur, Développeur | La conformité dépend de la conception graphique et des développements. Nativement Drupal respecte la règle. |
|
| Le contenu et le sens de chaque page ne sont pas altérés lorsque les styles sont désactivés. | Développement | Présentation | À mettre en place | Concepteur, Développeur | La conformité dépend de la conception graphique et des développements. La contribution doit aussi faire en sorte de respecter cette règle. |
|
| Un contenu n’est pas désigné uniquement par sa forme ou par sa position à l’écran. | Éditorial | Présentation | À mettre en place | Concepteur, Développeur | La conformité dépend de la conception graphique et des développements. Drupal est compatible mais la règle doit être implémentée. |
|
| Une famille générique de police est indiquée comme dernier élément de substitution. | Développement | Présentation | À mettre en place | Développeur | La conformité dépend des développements. |
|
| Les éléments visuellement présentés sous forme de liste sont balisés de façon appropriée dans le code source. | Éditorial | Structure et code | Fonctionnalité native | Conforme par défaut. |
||
| Chaque identifiant HTML n’est utilisé qu’une seule fois par page. | Développement | Structure et code | À mettre en place | Développeur | Cela dépend des développements. |
|
| Aucune redirection ou rafraîchissement automatique côté client n’est imposée. | Développement | Structure et code | Fonctionnalité native | Conforme par défaut. |
||
| Les cellules des tableaux de données sont reliées à leurs entêtes. | Éditorial | Structure et code | Ajout de module | CKEditor5 Table Fix | Développeur | Le module CKEditor5 Table Fix permet la conformité. |
| Les titres des tableaux de données sont renseignés. | Éditorial | Structure et code | Ajout de module | CKEditor5 Table Fix | Développeur | Le module CKEditor5 Table Fix permet la conformité. |
| La linéarisation des tableaux utilisés pour la mise en page ne nuit pas à la compréhension des contenus. | Développement | Structure et code | À mettre en place | Contributeur | Cela dépend de la contribution éditoriale. |