Merge pull request #16 from edrlab/update-rules

update rules

content/french/rules/055.md

@@ -2,8 +2,8 @@
 N: '175'
 Rubrique: Présentation
 title: La charte graphique est cohérente sur l'ensemble du livre numérique. 
-detail: La charte graphique est cohérente sur l'ensemble du site. 
-abstract: 
+detail:  
+abstract: "La charte graphique doit permettre de traduire la structure de l’œuvre : le lecteur doit pouvoir se repérer dans la progression de l’intrigue, la hiérarchisation de l’information, etc."
 categories: [" Présentation"]
 agrege: O4175-E055
 opquast: '4 175'
@@ -14,13 +14,12 @@ weight: "055"
 after: "056"
 actif: '1'
 layout: rules
-date: 2023-09-28
-tags: ["", ""]
-objectif: ["", ""]
-Meo: [""]
-Controle: [""
-]
+date: 2024-07-22
+tags: ["accessibilité", ""]
+objectif: ["Permettre une homogénéité et une continuité dans la lecture et la navigation."]
+Meo: ["Utiliser une ou des feuille(s) de style(s) qui permet(tent) une mise en page cohérente du texte et/ou des différents contenu.", "S’assurer que les polices de caractères embarquées dans le livre numérique soient lisibles par l’ensemble des publics."]
+Controle: ["Le contrôle a lieu à la vérification de l’affichage des pages dans différents environnements (i. e. logiciels de lecture, liseuses). "]
 Source: ["Opquast"]
 Referentiel: [""]
-Steps: ["", ""]
+Steps: ["conception", ""]
 ---

content/french/rules/056.md

@@ -2,8 +2,8 @@
 N: '176'
 Rubrique: Présentation
 title: L'information n'est pas véhiculée uniquement par la couleur. 
-detail: L'information n'est pas véhiculée uniquement par la couleur. 
-abstract: 
+detail: 
+abstract: "Cette règle consiste à ne pas faire référence à un contenu ou à une fonctionnalité uniquement par sa couleur. Par exemple, les références à un lien interne ou externe au livre qui seraient signalées par la seule couleur bleue ne seront pas lisibles par certains publics."
 categories: [" Présentation"]
 agrege: O4176-E056
 opquast: '4 176'
@@ -14,13 +14,20 @@ weight: "056"
 after: "057"
 actif: '1'
 layout: rules
-date: 2023-09-28
-tags: ["", ""]
-objectif: ["", ""]
-Meo: [""]
-Controle: [""
-]
+date: 2024-07-22
+tags: ["accessibilité", ""]
+objectif: ["Permettre l’accès à l’information pour les utilisateurs dont le terminal ou le logiciel de lecture, l’assistance technique ou encore le handicap (comme le daltonisme) ne permettent pas de visualiser ou de différencier les couleurs", "Améliorer l’accessibilité des contenus aux personnes handicapées"]
+Meo: ["Fournir un complément à la couleur pour véhiculer l’information qu’elle porte. Ce complément, indépendant de la couche de mise en forme CSS, peut être de plusieurs ordres, par exemple : 
+<ul>
+<li>Prévoir un balisage sémantique (strong, em, etc.) ;</li>
+<li>Ajouter des hachures, motifs, bordures, etc. dans les cartes et les graphiques.
+</li>
+</ul>
+"]
+Controle: ["La vérification nécessite de comparer visuellement deux types d’affichage du livre : un affichage normal et un affichage où les couleurs seront désactivées (rendu sur écran d’ordinateur et rendu sur liseuse avec écran en niveaux de gris).
+", "La vérification nécessite de comparer visuellement deux types d’affichage du livre : un affichage normal et un affichage où les couleurs seront désactivées (rendu sur écran d’ordinateur et rendu sur liseuse avec écran en niveaux de gris).
+"]
 Source: ["Opquast"]
 Referentiel: [""]
-Steps: ["", ""]
+Steps: ["conception", ""]
 ---

content/french/rules/057.md

@@ -3,8 +3,8 @@ N: '177'
 Rubrique: Présentation
 title: Les contenus sont présentés avec un contraste suffisant par rapport à leur
   arrière-plan.
-detail: Les contenus sont présentés avec un contraste suffisant par rapport  à leur arrière-plan.
-abstract: 
+detail: 
+abstract: Comme pour la photographie, le contraste rend plus lisible le contenu représenté.
 categories: [" Présentation"]
 agrege: O4177-E057
 opquast: '4 177'
@@ -15,13 +15,21 @@ weight: "057"
 after: "058"
 actif: '1'
 layout: rules
-date: 2023-09-28
-tags: ["", ""]
-objectif: ["", ""]
-Meo: [""]
-Controle: [""
+date: 2024-07-22
+tags: ["accessibilité", ""]
+objectif: ["Permettre une bonne lisibilité des contenus.", "Limiter la décharge mentale lors de la consultation.", "Améliorer l’accessibilité des contenus aux personnes handicapées."]
+Meo: ["Veiller à conserver un ratio de contraste minimal de 3:1 entre le texte et son arrière-plan, tel qu'il peut être mesuré via l'algorithme WCAG2.0"]
+Controle: ["Soit en amont (au moment de la conception du livre numérique) :
+Repérer les contenus dont la différence de contraste/luminosité avec leur arrière-plan est potentiellement insuffisante ;
+Utiliser un outil du type Colour Contrast Analyzer pour calculer le ratio de contraste : cliquer sur Luminosité et relever la couleur du premier plan puis celle du second plan dans les champs dédiés ;
+Vérifier que le ratio de contraste relevé est supérieur ou égal à 3:1
+", "Soit en aval :
+Utiliser ACE et son rapport d’erreur. Vérifier le cas échéant l’onglet « Erreurs » et chercher « color-contrast ».
+Suivre la procédure décrite ci-dessus.
+", ""
 ]
 Source: ["Opquast"]
-Referentiel: [""]
-Steps: ["", ""]
+Referentiel: 
+  - <a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">WCAG 2.1 Contrast (Minimum)"</a>
+Steps: ["conception", ""]
 ---

content/french/rules/058.md

@@ -3,8 +3,8 @@ N: '178'
 Rubrique: Présentation
 title: Le contenu et le sens de chaque page ne sont pas altérés lorsque les styles
   sont désactivés.
-detail: Le contenu et le sens de chaque Document de Contenu (Content Document)  ne sont pas altérés lorsque les styles sont désactivés.
-abstract: 
+detail: 
+abstract: Les styles permettent de donner une forme au fond. Les contenus doivent rester lisibles et compréhensibles lorsque cette forme ne peut pas se voir ou s’afficher.
 categories: [" Présentation"]
 agrege: O4178-E058
 opquast: '4 178'
@@ -15,13 +15,12 @@ weight: "058"
 after: "059"
 actif: '1'
 layout: rules
-date: 2023-09-28
-tags: ["", ""]
-objectif: ["", ""]
-Meo: [""]
-Controle: [""
-]
+date: 2024-07-22
+tags: ["accessibilité", ""]
+objectif: ["Permettre la compréhension des contenus par les lecteurs dont le logiciel de lecture / liseuse  n'appliquera pas les feuilles de styles embarquées dans le livre numérique ou dont le mode d'accès n'est pas visuel.", "Améliorer l’accessibilité des contenus aux personnes handicapées."]
+Meo: ["On veillera à conserver la cohérence des contenus dans les fichiers HTML (i. e. les balises de structuration : h1, h2, p, et sémantiques :  em, strong…), pour les présenter dans le même ordre et avec le même sens avec ou sans mise en forme CSS."]
+Controle: ["Utiliser ACE pour vérifier la structure logique du contenu (onglet « Structures » du rapport ACE).", "Vérifier que les contenus restent lisibles, par exemple dans le cas d’une image HTML transparente dont la lisibilité dépendra de la couleur d’arrière-plan appliquée avec la propriété background-color"]
 Source: ["Opquast"]
 Referentiel: [""]
-Steps: ["", ""]
+Steps: ["conception", ""]
 ---

content/french/rules/059.md

@@ -3,8 +3,8 @@ N: '179'
 Rubrique: Présentation
 title: Un contenu n'est pas désigné uniquement par sa forme ou par sa position à
   l'écran.
-detail: Un contenu n'est pas désigné uniquement par sa forme ou par sa position  à l'écran.
-abstract: 
+detail: 
+abstract: La séparation du fond et de la forme étant le principe fondamental de |’accessibilité, la désignation d’un contenu par sa forme ou sa position préjuge de la capacité du lecteur à distinguer cette forme ou à trouver cet emplacement.
 categories: [" Présentation"]
 agrege: O4179-E059
 opquast: '4 179'
@@ -15,13 +15,12 @@ weight: "059"
 after: "060"
 actif: '1'
 layout: rules
-date: 2023-09-28
-tags: ["", ""]
-objectif: ["", ""]
-Meo: [""]
-Controle: [""
-]
+date: 2024-07-22
+tags: ["accessibilité", ""]
+objectif: ["Permettre la compréhension de l'information sans l'accès au support visuel ou lorsque le rendu de celui-ci est altéré.", "Améliorer l’accessibilité des contenus aux personnes handicapées"]
+Meo: ["Lorsqu'un contenu est désigné dans la version physique du livre par une référence à sa forme ou à sa position, l'information dans la version numérique du même ouvrage doit être également disponible par une mention textuelle comportant un hyperlien."]
+Controle: ["Cette vérification concerne une large variété de cas potentiels, notamment dans le fil d'un texte où il est fait référence à une illustration, un graphique ou à un tableau. Pour chaque contenu concerné, il faut s'assurer que les références à la forme ou à la position à l'écran de celui-ci ne sont pas le seul moyen de l’identifier. On utilisera alors une référence explicite à un identifiant (exemple « Voir la figure n°1 »), un lien vers une ancre, etc."]
 Source: ["Opquast"]
 Referentiel: [""]
-Steps: ["", ""]
+Steps: ["conception", ""]
 ---

content/french/rules/060.md

@@ -3,8 +3,8 @@ N: '180'
 Rubrique: Présentation
 title: Un contenu qui doit être restitué dans un lecteur d'écran ne lui est pas
   dissimulé.
-detail: Un contenu qui doit être restitué dans un lecteur d'écran ne lui  est pas dissimulé.
-abstract: 
+detail: 
+abstract: Certaines propriétés CSS permettent de rendre certains contenus invisibles à l’écran. Le problème est que ces contenus risquent de disparaître aussi pour des utilisateurs qui ont besoin de les consulter. Sachez donc les masquer avec les bons outils.
 categories: [" Présentation"]
 agrege: O4180-E060
 opquast: '4 180'
@@ -15,11 +15,20 @@ weight: "060"
 after: "061"
 actif: '1'
 layout: rules
-date: 2023-09-28
+date: 2024-07-22
 tags: ["", ""]
-objectif: ["", ""]
-Meo: [""]
-Controle: [""
+objectif: ["Faciliter l’adaptation du rendu au media (mobile ou autre) ou aux besoins de l’utilisateur (agrandissement de la taille des caractères, modification des couleurs, de la police, de la graisse, de la justification, etc.).", "Améliorer l’accessibilité des contenus aux personnes handicapées"]
+Meo: ["Sauf si le contenu concerné est destiné à être rendu visible et perceptible sur action de l’utilisateur (onglets, menus déroulants, etc.) :
+<ul>
+<li>Ne pas utiliser les propriétés display et visibility pour masquer le contenu.</li>
+<li>Ne pas utiliser l’attribut HTML hidden pour masquer le contenu.</li>
+<li>Ne pas donner au contenu un attribut ARIA aria-hidden true.
+</li></ul>
+Utiliser: 
+<ul><li>les propriétés CSS permettant de positionner le contenu en dehors de la zone d’affichage du navigateur (position, text- indent) ou de le rogner (clip) ;</li>
+<li>les propriétés ARIA permettant d’associer un libellé à un contenu (aria-label, aria-labelledby, aria-describedby) ;</li>
+<li>ou, dans le cas d’une étiquette de champ de formulaire, l’attribut title de celui-ci.</li></ul>"]
+Controle: ["Dans le code généré et dans les feuilles de styles CSS des pages examinées : <ul><li>Détecter, à l’aide d’un inspecteur de code, des contenus qui seraient masqués à l’affichage (en dehors de ceux destinés à être rendus visibles sur action de l’utilisateur).</li><li>Vérifier qu’aucun de ces contenus n’utilise les techniques indiquées dans la mise en œuvre s’ils sont destinés à être restitués dans un lecteur d’écran.</li></ul>"
 ]
 Source: ["Opquast"]
 Referentiel: [""]

content/french/rules/061.md

@@ -2,8 +2,8 @@
 N: '181'
 Rubrique: Présentation
 title: La taille des éléments cliquables est suffisante. 
-detail: La taille des éléments cliquables est suffisante. 
-abstract: 
+detail: 
+abstract: Les écrans tactiles ont apporté leur lot de contraintes. Parmi celles-ci, le fait de pouvoir cliquer sans difficultés avec les doigts n’est pas la moindre. Il se trouve que les standards internationaux en matière d’accessibilité des contenus Web aux personnes handicapées précisent même une valeur numérique pour la taille minimum des éléments cliquables. Comme dans le cas des contrastes, cela nous permet de proposer une règle qui s’appuie sur l’existence de cette valeur numérique.
 categories: [" Présentation"]
 agrege: O4181-E061
 opquast: '4 181'
@@ -14,13 +14,14 @@ weight: "061"
 after: "062"
 actif: '1'
 layout: rules
-date: 2023-09-28
-tags: ["", ""]
-objectif: ["", ""]
-Meo: [""]
-Controle: [""
+date: 2024-07-22
+tags: ["accessibilité", ""]
+objectif: ["Permettre à l’utilisateur de cliquer sur les éléments interactifs.
+", "Limiter les fausses manipulations et les manipulations inutiles.", "Améliorer la compatibilité avec les terminaux mobiles.", "Améliorer l’accessibilité des contenus aux personnes handicapées."]
+Meo: ["Donner à chaque élément cliquable (boutons, liens) une taille par défaut d'au moins 44 par 44 pixels"]
+Controle: ["vérifier que la taille par défaut de chaque élément cliquable (boutons, liens) est au moins de 44 par 44 pixels"
 ]
 Source: ["Opquast"]
 Referentiel: [""]
-Steps: ["", ""]
+Steps: ["conception", ""]
 ---

content/french/rules/062.md

@@ -3,8 +3,8 @@ N: '182'
 Rubrique: Présentation
 title: Les textes pouvant être mis en forme via des styles ne sont pas remplacés
   par des images.
-detail: Les textes pouvant être mis en forme via des styles ne sont pas remplacés  par des images.
-abstract: 
+detail: 
+abstract: La multiplication des polices destinées à l’affichage sur écran permet d’obtenir un rendu typographique de qualité. Il n’est donc pas nécessaire d’utiliser une image à la place de certains textes.
 categories: [" Présentation"]
 agrege: O4182-E062
 opquast: '4 182'
@@ -15,13 +15,17 @@ weight: "062"
 after: "063"
 actif: '1'
 layout: rules
-date: 2023-09-28
-tags: ["", ""]
-objectif: ["", ""]
-Meo: [""]
-Controle: [""
+date: 2024-07-22
+tags: ["conception", ""]
+objectif: ["Faciliter l’adaptation du rendu au media (mobile ou autre) ou aux besoins de l’utilisateur (agrandissement de la taille des caractères, modification des couleurs, de la police, de la graisse, de la justification, etc.).", "Améliorer l’accessibilité des contenus aux personnes handicapées.", "Améliorer la prise en compte des contenus par les moteurs de recherche propres aux logiciels de lecture."]
+Meo: ["Utiliser des textes HTML mis en forme à l’aide des styles CSS (et en particulier les polices de caractères téléchargeables ou Web fonts)"]
+Controle: ["Cette vérification nécessite l’examen visuel des pages pour identifier les images ne contenant que du texte et évaluer si une mise en forme via CSS aurait permis d’obtenir un rendu équivalent. Pour chaque page contenant des textes mis en images :
+Passer en revue les images (images HTML et éventuelles images d’arrière-plan CSS utilisées pour simuler une texture particulière : parchemin, feuille de cahier, etc.).
+Vérifier que les textes mis en image correspondent uniquement à des mises en forme ne pouvant être obtenues via les styles CSS.
+Sont exclus de cette exigence : les logos, les éléments graphiques de promotion.
+"
 ]
 Source: ["Opquast"]
 Referentiel: [""]
-Steps: ["", ""]
+Steps: ["conception", ""]
 ---

content/french/rules/063.md

@@ -2,8 +2,8 @@
 N: '183'
 Rubrique: Présentation
 title: Les contenus générés via les styles sont dotés d'une alternative  appropriée. 
-detail: Les contenus générés via les styles sont dotés d'une alternative appropriée. 
-abstract: 
+detail: 
+abstract: Certaines instructions CSS permettent d’afficher des textes et des images qui sont de fait invisibles pour les utilisateurs et les outils qui ne prennent pas en charge les feuilles de styles. Par exemple, en cas de désactivation des couleurs ou des styles CSS, une image CSS (propriété background-image) ne sera pas visible alors qu’une image HTML (élément <img>) l’aurait été.
 categories: [" Présentation"]
 agrege: O4183-E063
 opquast: '4 183'
@@ -14,13 +14,17 @@ weight: "063"
 after: "064"
 actif: '1'
 layout: rules
-date: 2023-09-28
-tags: ["", ""]
-objectif: ["", ""]
-Meo: [""]
-Controle: [""
+date: 2024-07-22
+tags: ["accessibilité", ""]
+objectif: ["Permettre aux utilisateurs placés dans des contextes où les styles ne sont pas restitués (navigateur texte, lecteur d'écran, navigateur avec styles désactivés) d’accéder à l’information présente sous forme de contenus générés en CSS (images d’arrière-plan notamment). ", "Améliorer l’accessibilité des contenus aux personnes handicapées."]
+Meo: ["Fournir un contenu masqué à l’affichage via CSS : <ul>
+<li>pour chaque information portée par les propriétés CSS background-image ou content ;</li>
+<li>pour chaque information affichée via un pseudo-élément CSS :before ou :after ;</li>
+<li>et plus généralement, pour chaque information absente par ailleurs de la page et dont la restitution dépend du support des styles.</li></ul>
+"]
+Controle: ["Le contrôle se fait au moment de la conception du livre numérique en faisant particulièrement attention à l’utilisation des pseudo-éléments CSS :before ou :after et des CSS background-image. On comparera visuellement l’affichage normal de la page concernée avec son rendu après désactivation des images d’arrière-plan. On comparera l’affichage avec et sans images d’arrière-plan."
 ]
 Source: ["Opquast"]
 Referentiel: [""]
-Steps: ["", ""]
+Steps: ["conception", ""]
 ---

content/french/rules/064.md

@@ -2,8 +2,8 @@
 N: '184'
 Rubrique: Présentation
 title: Les pictogrammes typographiques sont dotés d'une alternative appropriée. 
-detail: Les pictogrammes typographiques sont dotés d'une alternative appropriée. 
-abstract: 
+detail: 
+abstract: "Le recours aux web fonts (polices de caractères téléchargeables) a considérablement facilité le recours à une astuce technique très appréciée du point de vue des performances : remplacer les images de diverses icônes par un caractère UTF-8 graphique obtenu grâce à une police spécifique. Ceci comporte cependant des risques importants, notamment en matière d’accessibilité, si vous ne veillez pas à ménager une alternative textuelle à ce caractère détourné de son sens par défaut."
 categories: [" Présentation"]
 agrege: O4184-E064
 opquast: '4 184'
@@ -14,13 +14,12 @@ weight: "064"
 after: "065"
 actif: '1'
 layout: rules
-date: 2023-09-28
-tags: ["", ""]
-objectif: ["", ""]
-Meo: [""]
-Controle: [""
-]
+date: 2024-07-22
+tags: ["accessibilité", ""]
+objectif: ["Améliorer l’accessibilité des contenus aux personnes handicapées."]
+Meo: ["Tester le texte comportant le ou les caractères concernés avec le rendu sonore du logiciel de lecture.", "Si le logiciel ne reconnait pas le caractère, alors on utilisera un contenu masqué à l’affichage via la CSS."]
+Controle: ["Examiner directement le code pour vérifier que chaque icône affichée via une police de caractères est dotée le cas échéant d’une alternative dans le contenu HTML."]
 Source: ["Opquast"]
 Referentiel: [""]
-Steps: ["", ""]
+Steps: ["conception", ""]
 ---