diff --git a/README.md b/README.md new file mode 100644 index 0000000..1535be0 --- /dev/null +++ b/README.md @@ -0,0 +1,21 @@ +# Référentiel pour une rédaction de contenus alternatifs en langage simplifié + +## Présentation + +Ce guide 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). + +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. + +## Consultation + +Cette ressource est également [consultable en ligne](https://disic.github.io/referentiel_redaction-langage-simplifie) sans avoir à télécharger le dépôt. + +Ce document a été établi dans le cadre des ressources venant accompagner la prise en main de la version 3 du référentiel général d'accessibilité pour les administrations (RGAA 3 2016). + +Le référentiel pour une rédaction en langage simplifié est destiné à toute personne désirant créer ou évaluer des contenus textuels alternatifs en version facile à lire et à comprendre, à destination des personnes handicapées intellectuelles. + +Ce référentiel ne concerne que la production de contenus en facile à lire et à comprendre qui se présentent comme une alternative au contenu principal. Il n'évalue pas les éléments d'interfaces (menu de navigation, widgets annexes, etc.). + +Ce document s'inscrit dans le prolongement du RGAA et notamment, de son référentiel technique, sans lequel la prise en compte de l'accessibilité ne peut pas être mesurée. Les références entre ces deux référentiels sont nombreuses, le lecteur devrait donc avoir une certaine expérience du RGAA 3. Tous les critères de niveau AAA du RGAA qui concernent le handicap mental sont donc à prendre en compte. diff --git a/css/img/bg__dotted.png b/css/img/bg__dotted.png new file mode 100644 index 0000000..de62d48 Binary files /dev/null and b/css/img/bg__dotted.png differ diff --git a/css/img/home--hover.png b/css/img/home--hover.png new file mode 100644 index 0000000..7508172 Binary files /dev/null and b/css/img/home--hover.png differ diff --git a/css/img/home.png b/css/img/home.png new file mode 100644 index 0000000..dcd1cd2 Binary files /dev/null and b/css/img/home.png differ diff --git a/css/img/minus-sm.png b/css/img/minus-sm.png new file mode 100644 index 0000000..a8acdb4 Binary files /dev/null and b/css/img/minus-sm.png differ diff --git a/css/img/minus.png b/css/img/minus.png new file mode 100644 index 0000000..823bfca Binary files /dev/null and b/css/img/minus.png differ diff --git a/css/img/plus-sm.png b/css/img/plus-sm.png new file mode 100644 index 0000000..bf7dc30 Binary files /dev/null and b/css/img/plus-sm.png differ diff --git a/css/img/plus.png b/css/img/plus.png new file mode 100644 index 0000000..6a34daf Binary files /dev/null and b/css/img/plus.png differ diff --git a/css/rgaa.main.css b/css/rgaa.main.css new file mode 100644 index 0000000..6a03bc8 --- /dev/null +++ b/css/rgaa.main.css @@ -0,0 +1,920 @@ +body{ + font-size: 100%; + color: #111; + background-color:#fff; + margin:0; + font-family: sans-serif;/** ??**/ + position:relative; +} + +*{ + box-sizing:border-box; +} + +.sr{ + position:absolute; + top:-100000px +} + +@font-face { + font-family: "AvenirLTStd-Black"; + font-style: normal; + font-weight: 400; + src: url("../fonts/AvenirLTStd-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/AvenirLTStd-Black.woff") format("woff"), url("../fonts/AvenirLTStd-Black.ttf") format("truetype"); +} + +@font-face { + font-family: "AvenirLTStd-Heavy"; + font-style: normal; + font-weight: 400; + src: url("../fonts/AvenirLTStd-Heavy.eot?#iefix") format("embedded-opentype"), url("../fonts/AvenirLTStd-Heavy.woff") format("woff"), url("../fonts/AvenirLTStd-Heavy.ttf") format("truetype"); +} + +@font-face { + font-family: "AvenirLTStd-Medium"; + font-style: normal; + font-weight: 400; + src: url("../fonts/AvenirLTStd-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/AvenirLTStd-Medium.woff") format("woff"), url("../fonts/AvenirLTStd-Medium.ttf") format("truetype"); +} + +@font-face { + font-family: "AvenirLTStd-BookOblique"; + font-style: normal; + font-weight: 400; + src: url("../fonts/AvenirLTStd-BookOblique.otf") format("opentype"); +} + +/** + * +**/ + +.is-invisible{ + display:none; +} + +a{ + color:#2868C9; + text-decoration:none; +} + + +/** + * LAYOUT +**/ + #wrapper, + footer, + .main-header, + #menu, + #nav, + .inside{ + width:100%; + max-width:70em; + margin:auto; + } + + @media screen and (max-width:64em){ + #wrapper, + footer, + .main-header, + #menu, + #nav, + .inside{ + width:98%; + margin:auto; + } + } + + /** + * SKIP LINKS + **/ + + .skiplinks{ + background-color: rgba(239, 239, 239, 1); + border:1px solid rgba(204, 204, 204, 1); + border-top:0; + padding:0.5em 0 0.3em 0; + font-family:AvenirLTStd-Medium, 'sans-serif'; + } + + .skiplinks:after{ + content:''; + display:block; + clear:both; + } + .skiplinks p{ + text-transform:uppercase; + } + + .skiplinks p, + .skiplinks ul{ + margin:0; + float:left; + } + .skiplinks ul{ + position:relative; + top:-4px; + padding:0 + } + + .skiplinks p, + .skiplinks a{ + font-size: 0.8em; + color: #545454; + text-decoration:none + } + + .skiplinks li{ + float:left; + list-style:none; + } + + .skiplinks a{ + padding:0 1em; + } + + @media screen and (min-width:64em){ + p.version{ + float:right; + text-align:right; + } + p.version a{ + display:block; + padding:0; + } + } + p.version{ + text-transform:initial; + } + + p.version a{ + font-size:1em; + text-decoration:underline; + } + /** + * HEADER + **/ + + .rgaa-header{ + font-family:AvenirLTStd-Medium, 'sans-serif'; + } + + .main-header{ + background-color:#fff; + padding:3em 0 1em 0; + } + + + .main-header a{ + text-decoration:none; + } + + .rgaa-header:after{ + content:""; + display:block; + clear:both; + width:100%; + } + +/* .main-header p{*/ +/* margin:0;*/ +/* }*/ +/* */ +/* .main-header .img{*/ +/* float:left;*/ +/* position:relative;*/ +/* top:-1.5em;*/ +/* }*/ + +/* @media screen and (min-width:64em){*/ +/* .main-header .slogan{*/ +/* width:55%*/ +/* } */ +/* }*/ + + .main-header .slogan{ +/* text-align:right;*/ + font-size: 1.8em; + text-transform:uppercase; + line-height: 1em; + margin: 0; + font-family: AvenirLTStd-Heavy; + color: #333; + } + + .main-header .slogan a{ + color:#333; + } + + .main-header .slogan a:hover, + .main-header .slogan a:focus{ + color:#fff; + } + + .main-header .ss-titre{ + font-size:0.7em; + display:block; + text-transform:initial; + font-family: AvenirLTStd-BookOblique, 'sans-serif'; + color: #111; + } + + .main-header .slogan .ss-titre a, + .main-header .slogan .ss-titre a:hover, + .main-header .slogan .ss-titre a:focus{ + color:#2868C9; + } + + .main-header .ss-titre a:hover, + .main-header .ss-titre a:focus{ + text-decoration:underline; + background:none; + } + + /** + * MENU général + **/ + + #menu{ + background-color:#2868C9; + color:#fff + } + + #menu ul{ + margin:0; + padding:0; + } + + #menu li{ + float: left; + padding:0; + text-transform: uppercase; + cursor: pointer; + list-style:none; + margin:0; + } + + #menu li + li { + background: url('img/bg__dotted.png') left center no-repeat; + } + + #menu a{ + color: #fff; + display: block; + padding:1.3em 30px; + text-decoration: none; + font-weight:normal; + font-size:0.9em; + } + #menu a:hover, + #menu a:focus, + #menu a.active{ + background:#fff; + color:#2868C9; + } + + #menu .link-home a { + display: block; + width: 1.2em; + background: url('img/home.png') center no-repeat; + text-indent: -99999px; + overflow: hidden; + line-height: 0.7em; + padding: 1.3em 30px; + min-height: 3.75em; + } + + #menu .link-home:hover a { + background: url('img/home--hover.png') center no-repeat #fff; + } + + @media screen and (max-width:55em){ + #menu li{ + width:50%; + text-align:center; + border-top:1px solid #fff; + } + #menu .link-home a { + width:100%; + } + } + + @media screen and (max-width:35em){ + #menu li{ + width:100%; + } + } + + #menu:after, + .main-header:after, + #nav:after{ + content:""; + clear:both; + display:block; + } + +/** + * Navigation contextuelle +**/ + +#nav{ + background:#f5f5f5 +} + +#nav ul{ + margin:0; + padding:0; + background:#fff +} + +#nav li{ + list-style:none; +} + +@media screen and (min-width:64em){ + #nav li{ + float:left; + width:50%; + text-align:center; + } +} + +#nav li a, +#nav li span{ + font-size:0.8em; + display:block; + padding:0.5em 2em 0.5em 1em; + border-bottom:1px solid #2868C9; + border-left:1px solid #2868C9; + border-top:1px solid #2868C9; + background:#fff; +} + +#nav li:nth-child(2n) *{ + border-right:1px solid #2868C9; +} + +@media screen and (max-width:64em){ + #nav li *{ + border-right:1px solid #2868C9; + } + #nav li:first-child a, + #nav li:first-child span{ + border-top:1px solid #2868C9; + } +} + +#nav li a:hover, +#nav li a:focus{ + background:#2868C9 +} + + +/** + * MAIN CONTENT +**/ + + #wrapper{ + background:#F5F5F5; + padding-top:2em; + padding-bottom:2em; + } + + #wrapper:after{ + content:''; + display:block; + clear:both; + } + + @media screen and (min-width:64em) and (min-height:36em){ + .left{ + width:27%; + float:left; + } + + .sticky{ + position:fixed; + top:0; + width:auto; + } + + .right{ + width:73%; + float:right; + } + + } + main{ + padding:0 1em; + } + + #sommaire li{ + line-height:1em + } + #sommaire a{ + font-size:0.9em; + } + /** + * FOOTER + **/ + + footer{ + background-color: #f5f5f5; + padding:1em 2em; + margin-top:3em; + } + + footer:after{ + content:''; + display:block; + clear:both; + } + + footer p, + footer li{ + font-size: 0.8125em/**13px**/; + } + + footer a{ + color:#333; + text-decoration: underline; + } + /* adaptation menu fixed */ + .adapted{ +/* padding-left:20em;*/ + } + + footer p:after{ + content:""; + clear:both; + display:block; + + } + + .legal-info{ + padding:1em 0; + } + + .legal-info ul, + .legal-info p{ + margin:0; + padding:0; + } + + @media screen and (min-width:64em){ + .legal-info ul{ + margin-left:3em; + } + } + + .legal-info p, + .legal-info ul, + .legal-info li{ + float:left; + } + + .legal-info li{ + list-style:none; + margin:0 1em; + } + + .legal-info a{ + list-style:none; + padding:0 0.3em; + text-decoration:none; + } + + + .sgmap-logo{ + float:left; + margin-right:15px; + } + + footer hr{ + clear:both; + margin-top:2em; + } + /** + * FILTRES + **/ + + @media screen and (min-width:64em) and (min-height:36em){ + .bloc-lateral{ + margin-left:1.7em; + width: 16em; + } + } + + .bloc-lateral{ + background-color: rgba(239, 239, 239, 1); + } + + .bloc-lateral:first-child{ + margin-top:1em; + } + + .bloc-lateral button{ + text-align:center; + padding:0.5em; + text-transform:uppercase; + font-weight:bold; + display:block; + width:100%; + border:0; + margin-bottom:0.5em; + background:url('img/minus.png') no-repeat 97% center; + background-color:rgba(215, 215, 215, 1); + } + + .bloc-lateral button.is-inactive{ + background:url('img/plus.png') no-repeat 97% center; + background-color:rgba(215, 215, 215, 1); + } + + @media screen and (min-width:64em){ + .bloc-lateral div{ + width:80%; + margin:auto; + } + } + + .bloc-lateral div{ + margin:auto; + margin-left:0.5em; + margin-bottom:0 + } + + .bloc-lateral label{ + font-size: 0.825em/**13px**/; + padding-left:0.8em; + line-height:0.8em; + } + + + .bloc-lateral input{ + position:relative; + top:3px; + } + + .bloc-lateral ol{ + width:90%; + padding-bottom:1em; + padding-left:2em; + } + + #elt-filtres{ + padding-bottom:1em; + } + + + .bloc-lateral li{ + font-size: 0.825em/**13px**/; + margin-bottom:1.2em; + } + + @media screen and (max-height : 80em){ + + .bloc-lateral li{ + margin-bottom:0.6em; + } + + } + + .bloc-lateral li a{ + display:block; + text-decoration:none; + } + + + + @media screen and (max-width:64em){ + .bloc-lateral li{ + margin:0; + } + + .bloc-lateral li a{ + padding:0.8em; + } + } + + #log-node{ + margin-left:5px + } + + #log-node:before{ + content:" : "; + } + + #log-node span{ + padding:0 + } + + #log-node span:after{ + content:"| "; + } + + #log-node span:last-child:after{ + content:""; + } + +/** + * HEADINGS +**/ + +h1,h2,h3,h4,h5,h6{ + font-family: "AvenirLTStd-Black"; + font-weight: normal; +} + +h1{ + color: #2868C9; + font-size: 210%; + font-family: AvenirLTStd-Heavy; + text-transform: uppercase; + margin: 15px 0 30px; +} + +h2{ + text-transform: uppercase; + font-size: 100%; + font-family: AvenirLTStd-Black; + margin: 35px 0; + text-align: center; + /**font-size: 1.5em24px; + color:#2868C9**/ +} + + header h2, + h2#guide{ + margin-bottom:0; + text-align:left; + font-size:120%; + } + + footer h2{ + text-transform: uppercase; + color: #DE1735; + font-size: 100%; + font-family: AvenirLTStd-Black; + margin-bottom: 15px; + text-align: left; + } + +h3{ + font-size: 1.125em /**18px**/; +} + + h3.reco{ + margin-bottom:0 + } + +h4{ + font-size: 0.9375em /**15px**/; +} + +h5{ + font-size: 0.875em /**14px**/; +} + +h6{ + font-size: 0.8125em /**13px**/; +} + +/** + * GENERAL TYPO +**/ + +main p, +main ul>li, +ol>li{ + font-size: 0.9375em /**15px**/; + line-height:1.5em; + position:relative; +} + +main ul>li li, +ol>li li{ + font-size:1em; + margin-bottom:1em; +} + +main ul>li, +ol>li{ + margin-bottom:1.5em; +} + +main ol li{ + margin-bottom:0.5em +} + +main ul li{ + list-style:none; +} +main p{ + margin-bottom:1em; +} + + +li ul, +li ol{ + margin-top:1em +} + + +article[data-level]>ul{ + padding:0; +} + + +article[data-level]>ul>li li{ + font-weight:normal; +} + +main ul li:before{ + content: "\2022"; + position: absolute; + left: -0.7em; + top:0.2em; + color: #2868C9; + font-size: 2em; + line-height: .3em; +} + +article[data-level]>ul>li{ + font-weight:bold; +} +article[data-level]>ul>li:before{ + display:none +} +article aside a{ + color:#333; +} + + +code,kbd{ + + background:#eee; + padding:2px 3px; + border-radius:3px; + position:relative; + top:-1px; + font-size:1.1em; +} + +a:hover code, +a:focus code, +a:hover kbd, +a:focus kbd{ + background:#333; + +} + +pre code{ + display:block; + padding:10px; +} +/**TABLE**/ + +table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + margin-bottom:2.5em; +} + +caption{ + text-align:left; + font-weight:bold; + padding-bottom:0.5em +} + +th,td { + border: 1px solid #ddd; + padding: 6px 13px; +} + +th{ + font-weight:bold; +} + +tr{ + background-color: #fff; + border-top: 1px solid #ccc; +} + +tr:nth-child(2n) { + background-color: #f8f8f8; +} + +td{ + border: 1px solid #ccc; +} + + +/** + * BLOC +**/ + +article[data-level]{ + border:1px solid rgba(215, 215, 215, 1); + padding:0 1.5% 0 1.5%; + margin-bottom:3em; + background:#fff; +} + + article[data-level] aside{ + background-color: rgba(215, 215, 215, 1); + width:103.2%; + margin-left:-1.6%; + padding:1.5%; + } + + + .particulier{ + background:#fff; + padding:1em; + margin-top:2em; + } + .particulier h1{ + font-size:1.4em; + } + .particulier h2{ + text-align:left; + } + + .critere, + #guide{ + position:relative; + padding-right:35px; + } + #titre-sommaire{ + position:relative; + } + + .critere button, + #guide button, + #titre-sommaire button{ + text-indent:-10000px; + border:1px solid #333; + background:none; + position:absolute; + right:0; + top:0; + height:24px; + width:21px; + background:url('img/minus-sm.png') no-repeat center center; + } + + .critere button.is-inactive, + #guide button.is-inactive, + #titre-sommaire button.is-inactive{ + background:url('img/plus-sm.png') no-repeat center center; + } + + .principe, + .niveau{ + font-size:0.9em; + margin:0; + font-style:italic; + } + + .niveau{ + margin-bottom:1em; + } + + .reco+p{ + margin-top:0; + } + +.footnotes{ + border-top:3px solid #de1b3e; + padding-top:1em; + padding-right:1em; + margin-top:2em; + font-size:0.85em; +} + +.footnotes li:target { + background:yellow; +} + + +/** + * +**/ + +body a:hover, +body a:focus{ + background: #333; + text-decoration:underline; + color:#fff; +} + +button:hover, +button:focus, +button.is-inactive:hover, +button.is-inactive:focus{ + cursor:pointer; + background-color: #999; + color:#fff; +} + diff --git a/fonts/AvenirLTStd-Black.eot b/fonts/AvenirLTStd-Black.eot new file mode 100644 index 0000000..3d9d568 Binary files /dev/null and b/fonts/AvenirLTStd-Black.eot differ diff --git a/fonts/AvenirLTStd-Black.ttf b/fonts/AvenirLTStd-Black.ttf new file mode 100644 index 0000000..b1b9f27 Binary files /dev/null and b/fonts/AvenirLTStd-Black.ttf differ diff --git a/fonts/AvenirLTStd-Black.woff b/fonts/AvenirLTStd-Black.woff new file mode 100644 index 0000000..3b04b24 Binary files /dev/null and b/fonts/AvenirLTStd-Black.woff differ diff --git a/fonts/AvenirLTStd-BookOblique.otf b/fonts/AvenirLTStd-BookOblique.otf new file mode 100644 index 0000000..945a8c7 Binary files /dev/null and b/fonts/AvenirLTStd-BookOblique.otf differ diff --git a/fonts/AvenirLTStd-Heavy.eot b/fonts/AvenirLTStd-Heavy.eot new file mode 100644 index 0000000..baa8f83 Binary files /dev/null and b/fonts/AvenirLTStd-Heavy.eot differ diff --git a/fonts/AvenirLTStd-Heavy.ttf b/fonts/AvenirLTStd-Heavy.ttf new file mode 100644 index 0000000..02d6f4a Binary files /dev/null and b/fonts/AvenirLTStd-Heavy.ttf differ diff --git a/fonts/AvenirLTStd-Heavy.woff b/fonts/AvenirLTStd-Heavy.woff new file mode 100644 index 0000000..44c7a01 Binary files /dev/null and b/fonts/AvenirLTStd-Heavy.woff differ diff --git a/fonts/AvenirLTStd-Medium.eot b/fonts/AvenirLTStd-Medium.eot new file mode 100644 index 0000000..9081edd Binary files /dev/null and b/fonts/AvenirLTStd-Medium.eot differ diff --git a/fonts/AvenirLTStd-Medium.ttf b/fonts/AvenirLTStd-Medium.ttf new file mode 100644 index 0000000..2d7cd22 Binary files /dev/null and b/fonts/AvenirLTStd-Medium.ttf differ diff --git a/fonts/AvenirLTStd-Medium.woff b/fonts/AvenirLTStd-Medium.woff new file mode 100644 index 0000000..391812f Binary files /dev/null and b/fonts/AvenirLTStd-Medium.woff differ diff --git a/glossaire.html b/glossaire.html new file mode 100644 index 0000000..85fa68b --- /dev/null +++ b/glossaire.html @@ -0,0 +1,181 @@ + + + + + Glossaire - Référentiel pour une rédaction de contenus alternatifs en langage simplifié + + + + + + + + + +
+ +
+ + + +
+
+
+

Glossaire

+

A

+

Abréviation et contraction

+

On distingue les acronymes et les abréviations. Les acronymes sont des réductions desquelles résulte généralement un mot (CAF, RATP), qui devient souvent l'emploi d'usage plutôt que l'expression entière. Les abréviations et les contractions sont des réductions de mots obtenues en retirant certaines lettres (généralement des voyelles) : « par ex. » pour « par exemple », « cad » pour « c'est-à-dire », « Mr » pour « Monsieur ». Ce sont ces dernières qui sont à éviter, il est toujours préférable d'écrire les mots en entier.

+

Adapté au public

+

Un contenu (texte ou illustration) est adapté au public lorsqu'il est choisi en fonction de l'âge, du niveau de scolarité, de la culture du public cible. Par exemple, un texte à destination des enfants ne sera pas rédigé avec les mêmes termes ou illustrations qu'un texte pour les adultes. De même, pour les enfants, il sera par exemple préférable d'utiliser des illustrations de type pictogramme ou dessin plutôt que des photographies.

+

Enfin, une évaluation qualitative de la lisibilité et du niveau de lecture requis peut être faite.

+

Apparence d'une liste

+

Il est important pour les utilisateurs de pouvoir identifier les éléments de liste en tant que tels. Même s'il est possible de personnaliser les listes, leur apparence (succession verticale, retrait éventuel, présence visible des puces ou des numéros) est essentielle pour leur permettre de comprendre l'énumération. Les listes linéarisées ou dont le style s'écarte trop de leur apparence par défaut sont à proscrire.

+

Aucune décoration

+

Les textes ne doivent comporter aucune décoration qui dégrade leur lisibilité. Par exemple, l'utilisation de la propriété CSS text-shadow, ou encore la propriété CSS text-decoration avec la valeur line-through est interdite.

De même, toutes les transformations spatiales de texte sont interdites. Ainsi, la propriété CSS transform ne doit pas s'appliquer à du texte.

+

Il en va de même pour les textes en images : ils ne doivent comporter aucun effet qui vise à dégrader la lisibilité (couleurs, déformations, etc.).

+

L'auteur s'adresse directement au lecteur.

+

Il faut éviter le style impersonnel dans la mesure du possible. Préférer construire des phrases qui s'adressent directement au lecteur (« tu, vous, nous », emploi de l'impératif). Par exemple, « Il faut se couvrir lorsqu'il fait froid » pourra être remplacé par « Couvrez-vous lorsqu'il fait froid ».

+

Au moins égale à 14px

+

Pour une même taille de police calculée, il peut y avoir des variations de grandeur. La police de référence ici est la police Arial. La taille des caractères rendue doit donc être au moins égale à la taille des caractères en police Arial 14 px.

+ +

C

+

Caractères spéciaux

+

Les caractères spéciaux (caractères non alphabétiques) sont proscrits. Par exemple : &, >, #.

+

Césure

+

Une césure est la coupure d'un mot par un trait d'union à la fin d'une ligne. Avec une césure, un mot est donc écrit sur deux lignes.

+ +

D

+

Document en téléchargement

+

Un document en téléchargement est un document édité dans un outil externe au site web (à l'aide d'une suite bureautique par exemple), dans un format bureautique : .doc, .pdf, .xls, .odt etc.

+

Les documents en téléchargements concernés dans ce référentiel sont les documents déclarés comme étant rédigés selon les règles du « Facile à lire ».

+

Les documents imprimés depuis l'interface web (fonction « Imprimer » du navigateur) ne constituent pas des documents en téléchargement. Ainsi, les feuilles de styles destinées à l'impression (print) ne sont pas prises en compte dans les tests. Il existe trop de différences d'implémentation des propriétés CSS entre les agents utilisateurs et trop de paramètres utilisateurs incontrôlables. Il n'est donc pas possible de prévoir de manière certaine les résultats des effets de présentation.

+ +

E

+

Écrits en chiffres arabes

+

Les nombres etchiffres doivent être écrit en chiffres arabes, c'est-à-dire que le texte ne doit pas employer de chiffres romains par exemple (X, V …), ni écrire les chiffres et nombres en toutes lettres (un, deux, trois…).

+

Écrit en majuscules

+

Les textes ou les mots écrits en majuscules peuvent être plus difficiles à lire. Il est donc nécessaire d'écrire les textes exclusivement en minuscules dans le code HTML, ou le document bureautique.

+

Pour les pages web, on ne doit pas trouver de directives CSS visant à présenter ces textes en majuscules, notamment text-transform: uppercase, font-variant: small-caps. De même, écrire des mots en majuscules dans le code HTML et les présenter en minuscules par l'intermédiaire de la directive CSS text-transform: lowercase est proscrit.

+

Pour les documents bureautiques, on ne doit pas trouver de mots écrits en majuscules dans le document, ni de mots mis en forme en majuscules à l'aide des propriétés de caractères, notamment, les effets « Majuscules » et « Petites majuscules ».

+

Cela ne concerne que des mots ou des passages de textes entiers, l'utilisation d'une majuscule en début de phrase ou pour un nom ne pose pas de problème.

+ +

F

+

Forme affirmative

+

Il est souhaitable de toujours utiliser des phrases à la forme affirmative plutôt que négative. Par exemple : « N'arrivez pas trop tard » pourra être remplacé par « Arrivez tôt ».

+ +

G

+

Grands nombres

+

On considère qu'un nombre est grand lorsqu'il dépasse le millier. Par exemple : 1000000 est un grand nombre. Dans le cas où le texte emploie des grands nombres, il est préférable de les remplacer par des adjectifs ou comparatifs.

+

Par exemple : « Marseille compte près de 850 000 habitants et Lyon en compte 480 000 ». Ici l'intérêt de la phrase n'est pas tant dans les nombres que dans la comparaison. On pourra donc réécrire sur le modèle : « Il y a plus d'habitants à Marseille qu'à Lyon ».

+ +

H

+

Hiérarchie de titres profonde

+

Une hiérarchie de titres profonde est une imbrication de nombreux niveaux et sous-niveaux de titres. Il faut conserver une hiérarchie simple (un ou deux niveaux d'imbrication maximum) et éviter les numérotations difficiles à comprendre, comme « 2.4.5a ».

+

I

+

Interlettrage

+

Lorsque l'espace entre les lettres est réduit ou supprimé, certaines personnes peuvent avoir des difficultés à lire.

+

L'interlettrage est la distance qui sépare deux lettres consécutives d'un même mot. Il dépend de la police utilisée, des effets de graisse et de typographie.

+

Il n'y a pas de valeur spécifique puisqu'elle peut être variable.

+

En revanche, dans une page web, l'utilisation de directives CSS telles que font-stretch: [ultra-condensed | extra-condensed | condensed | semi-condensed] et letter-spacing avec des valeurs négatives (lorsque cela aboutit à ce que les lettres se touchent et ne soient plus facilement discernables les unes des autres) est à proscrire.

+

De même, pour les documents bureautiques, il est également proscrit d'appliquer des propriétés d'espacement des caractères telles que « Condensé » en appliquant des valeurs qui réduisent tellement l'interlettrage que les lettres se touchent et ne sont plus facilement discernables les unes des autres.

+

L'utilisation de polices spécifiques qui pourrait avoir le même résultat est également proscrite, par exemple des polices comme Dorsa sont des polices avec un interlettrage trop réduit pour être suffisamment lisible.

+

Introduction

+

Un texte doit, si nécessaire, posséder une introduction qui permet au lecteur de savoir :

+
    +
  • à qui s'adresse le texte, quels publics sont visés ;
  • +
  • quel est le sujet principal du texte.
  • +
+

Une introduction est nécessaire, surtout pour les textes longs. Un texte de 2 ou 3 paragraphes ne nécessite pas toujours une introduction. Une introduction doit permettre au lecteur, en quelques lignes, de savoir s'il est utile pour lui d'engager une lecture plus longue.

+

Les éléments énoncés sont à inclure dans l'introduction si nécessaire. Par exemple, présenter le public visé par le texte est nécessaire, surtout pour un texte long et technique (par exemple une notice).

+

L

+

Lisibilité des textes

+

La lisibilité des textes et le niveau de lecture sont difficiles à appréhender de manière stricte. Il existe dans la littérature plusieurs tests qui visent à donner un indice de lisibilité ; malheureusement, la plupart des tests sont basés sur des corpus en langue anglaise. Par exemple :

+
    +
  • L'indice Gunning fog donne une évaluation du niveau de scolarité nécessaire pour comprendre un texte. L'indice est calculé en prenant en compte la longueur moyenne des phrases, le nombre de mots complexes (3 syllabes ou plus).
  • +
  • Le test de lisibilité Flesch-Kincaid donne un score de lisibilité des textes qui correspond à un niveau scolaire. Le score est calculé en prenant en compte le nombre de mots, le nombre de phrases et le nombre total de syllabes par texte.
  • +
+

Il existe des outils en ligne qui permettent d'évaluer certains aspects de lisibilité des textes :

+
    +
  • Translated (outil pour la langue française) est un analyseur de lisibilité. Il donne une évaluation du niveau de lecture (difficile, moyen, facile) et liste les termes potentiellement difficiles à comprendre et qui nécessiteraient donc, soit d'être remplacés par des synonymes plus simples, soit d'être explicités.
  • +
  • Readability score (outil pour la langue anglaise) effectue de nombreux calculs d'indices sur les textes, notamment les tests cités précédemment. Il peut être utilisé pour la langue française pour les statistiques sur le nombre de phrases, de mots ou de syllabes.
  • +
+

Pour déterminer le niveau de complexité de certains mots, il peut être important de vérifier leur fréquence dans la langue française. Il existe des listes de fréquence lexicale, par exemple, les listes établies par l'Université de Savoie.

+

Pour évaluer le niveau de langage d'un texte ou sa complexité, aucun outil n'est réellement en mesure de le faire. La meilleure méthode reste de le faire évaluer par des personnes handicapées intellectuelles.

+

Logo « Facile à lire »

+

Le logo à apposer est le logo fourni par Inclusion Europe. Vous pouvez le télécharger et consulter les conditions d'utilisation du logo sur le site dédié.

+ +

M

+

Mise en page simple et facile à parcourir

+

L'appréciation du caractère « simple et facile à parcourir » des documents est qualitative, il est difficile de faire une liste de recommandations strictes à respecter. Néanmoins, quelques éléments peuvent orienter le jugement pour les formats bureautique et web.

+

Une mise en page simple et facile à parcourir est une mise en page linéaire : une seule colonne de texte. Les contenus annexes ne doivent pas être placés dans une colonne latérale, mais après le contenu principal, afin d'éviter la confusion entre les informations et permettre aux lecteurs concernés de focaliser leur attention sur un seul contenu à la fois.

+

Enfin, les mises en page élaborées (effet typographique particulier pour des titres par exemple, images d'illustration trop prégnante, etc.) sont à exclure, car elles sont également susceptibles de perturber l'attention du lecteur pour le détourner du contenu utile.

+

Concernant les pages web, il est à noter qu'on ne s'intéresse ici qu'aux textes (contenu principal) et non à l'interface entière.

+

Mot étranger suffisamment répandu

+

La plupart des termes étrangers entrés dans le dictionnaire de l'Académie française peuvent être considérés comme suffisamment répandus pour être compris par tous. Il faut par contre veiller à ne pas utiliser les termes techniques issus de vocabulaire métier, tels que management, coaching

+ +

P

+

Peu de texte

+

La quantité est à apprécier par l'auditeur (voir la note sur l'évaluation qualitative du document). Dans le cas d'une page web, on évalue uniquement le contenu principal (hors éléments de navigation par exemple).

+

L'objectif sur une page web est de limiter, autant que possible, l'utilisation du scroll (défilement vertical de l'écran) pour parcourir le texte.

+

Police sans empattements

+

Les empattements sont des extensions qui forment la terminaison des caractères de certaines polices d'écriture.

+

Les caractères sans empattements sont des « caractères bâtons ». En CSS, on déclare une police générale sans empattements par la valeur sans-serif. La police sans empattements la plus connue est la police Arial.

+

Empattement (Wikipédia)

+

Police suffisamment grasse

+

Les polices possèdent souvent plusieurs styles. À partir d'une base (« roman »), une police est parfois déclinée en version plus fine (« light ») ou plus grasse (« bold »). Les versions « light » sont à proscrire.

+

Parfois, c'est la police dans sa forme basique qui est trop fine. La graisse minimale d'une police doit être la même que la police Arial.

+ +

R

+

Rédigé en collaboration avec des personnes handicapées intellectuelles

+

Rédiger un texte en langage simplifié peut être complexe, car, contrairement aux handicaps sensoriels (cécité, surdité par exemple), ces handicaps ne peuvent pas être simulés. Il est donc difficile de prévoir les comportements ou les compétences de lecture. Ainsi, pour s'assurer que le texte est suffisamment simple à lire, seule la participation du public intéressé est un gage de la pertinence du texte.

+

Certains établissements spécialisés proposent ce service. Nous vous renvoyons vers l'UNAPEI pour plus d'informations.

+

Représentation simple des données

+

Les graphiques de représentation de données peuvent aider à la compréhension s'ils sont simples. Une représentation simple de données est une représentation qui ne comporte pas beaucoup de données. Il est préférable de limiter à chaque fois le nombre d'informations qui sont comparées dans ces schéma ou graphique.

+

Une représentation simple est aussi une représentation dont la légende est facile à assimiler pour la compréhension du graphique ou du schéma.

+ +

S

+

Style roman

+

Le style roman caractérise les polices droites, par opposition aux polices italiques, pour lesquelles les caractères sont inclinés vers la droite. Le style roman est généralement le style par défaut d'une police.

+ +

T

+

Transmet un seul message

+

Une illustration doit transmettre un seul message, c'est-à-dire qu'elle ne doit représenter qu'une seule idée, qu'un seul concept. Par exemple, si l'illustration est une photographie, il faut qu'elle soit cadrée de telle sorte que les détails environnants, non importants, ne soient pas ou peu visibles.

+

Tableau simple

+

Un tableau de données simple est un tableau qui ne contient aucune cellule fusionnée, c'est-à-dire aucune cellule qui nécessite plusieurs en-têtes de colonnes ou de lignes pour être interprétée. Lorsqu’un tableau de données contient des en-têtes qui ne sont pas répartis uniquement sur la première ligne et/ou la première colonne de la grille ou dont la portée n’est pas valable pour l’ensemble de la colonne ou de la ligne, on parle de tableau de données complexe. Ces derniers sont donc à éviter.

+

Un tableau de données simple, dans le cas d'un texte en langage simplifié, devrait également être limité dans son nombre d'en-têtes et de cellules. Un nombre fixe est difficile à émettre, mais limiter le tableau à environ 5 en-têtes semble satisfaisant.

+ +

U

+

Une seule police

+

Une police peut être déclinée en plusieurs styles (light, bold, italic…). Le critère ne demande pas à ce qu'un seul style de police soit utilisé, mais une seule police. Il est tout à fait acceptable de trouver dans un même texte une police avec plusieurs styles, par exemple un texte qui mélangerait les styles roman, bold, etc.

+

V

+

Voix active

+

Il est préférable de rédiger des phrases à la voix active plutôt que passive. Par exemple : « La souris est mangée par le chat » pourra être remplacée par « Le chat mange la souris ». Ou encore « Votre amie va vous offrir un cadeau » pourra être remplacé par « Vous recevrez un cadeau de votre amie ».

+
+
+
+ + + + + diff --git a/img/marianne_0.ico b/img/marianne_0.ico new file mode 100644 index 0000000..a724cad Binary files /dev/null and b/img/marianne_0.ico differ diff --git a/img/modernisation-logo.jpg b/img/modernisation-logo.jpg new file mode 100644 index 0000000..5823da0 Binary files /dev/null and b/img/modernisation-logo.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..83b974e --- /dev/null +++ b/index.html @@ -0,0 +1,552 @@ + + + + + Critères - Référentiel pour une rédaction de contenus alternatifs en langage simplifié + + + + + + + + + +
+ +
+ + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+ +
+
+
+

Critères

+

Introduction

+
+

Le référentiel pour une rédaction en langage simplifié est destiné à toute personne désirant créer ou évaluer des contenus textuels alternatifs en version facile à lire, à destination des personnes handicapées intellectuelles. Ce référentiel ne concerne que la production de contenus en facile à lire qui se présentent comme une alternative au contenu principal. Il n'évalue pas les éléments d'interfaces (menu de navigation, widgets annexes, etc.). À ce titre, il ne reprend que les directives relatives aux « Contenus » des recommandations facile à lire des documents de référence. En effet, ces documents contiennent d'autres recommandations destinées à produire des contenus web, comme un site web entier, ou sur support informatique, comme des DVD par exemple, destinés spécifiquement aux handicapés intellectuels.

+

Le référentiel pour une rédaction en langage simplifié s'appuie sur les publications de l'Unapei (Fédération d'associations françaises de représentation et de défense des intérêts des personnes handicapées mentales et de leurs familles), notamment, sur le guide « L'information pour tous - Règles européennes pour une information facile à lire et à comprendre (PDF, 840ko) ». La publication du « Guide de rédaction pour une information accessible » (pdf, 4Mo) de l'Université du Québec est également prise en compte.

+

Enfin, ce document s'inscrit dans le prolongement du Référentiel Général d’Accessibilité des Administrations (RGAA) et notamment, de son référentiel technique, sans lequel la prise en compte de l'accessibilité ne peut pas être mesurée. Les références entre ces deux référentiels sont nombreuses, le lecteur devrait donc avoir une certaine expérience du RGAA 3. Tous les critères de niveau triple A du RGAA qui concernent le handicap mental sont donc à prendre en compte.

+

Certains des critères du RGAA (critères de présentation notamment) acceptent des mécanismes de remplacement alors que les documents de référence exigent que les textes répondent aux caractéristiques de présentation sans manipulation de l'utilisateur. Par exemple, les contrastes de couleurs des textes doivent être conformes sans que l'utilisateur n'ait à sélectionner des options dans un mécanisme de remplacement mis à disposition sur le site. Certains critères peuvent donc sembler être repris du RGAA, mais c'est uniquement parce que les exigences sont différentes.

+

Mode d'emploi

+

Cette liste reprend les formulations du RGAA 3. Elle a été élaborée en respectant les mêmes règles d'écriture et propose le même fonctionnement de validation par l'utilisation des 5 statuts du RGAA 3 :

+
    +
  1. conforme ;
  2. +
  3. non conforme ;
  4. +
  5. non applicable ;
  6. +
  7. non testé ;
  8. +
  9. dérogé.
  10. +
+

Vous pouvez consulter, à ce sujet, le guide d’accompagnement : Comment vérifie-t-on la conformité au RGAA ?

+

La liste des critères du référentiel est pensée comme une extension du RGAA 3, indépendante du reste du référentiel technique et non obligatoire. Nous numéroterons les critères de cette thématique par le préfixe RLS (rédaction en langage simplifié). Ce référentiel est découpé, à l'image du RGAA 3, en thématiques.

+

Note importante

+

Sauf mention contraire, les critères et les tests s'appliquent dans tous les contextes (web et documents en téléchargement). Chaque fois que nécessaire, des critères ou des tests spécifiques ont été créés lorsqu'ils ne s'appliquaient qu'à l'un ou l'autre de ces contextes.

+

Une grille d'évaluation est mise à votre disposition : Grille d'évaluation (.ods, 81 ko) ou (.xls, 227ko)

+
+ +
+
+

RLS-1. Présentation des textes

+

Recommandations :

+

Pour chaque texte, utiliser une police uniforme, foncée, suffisamment grande et grasse pour favoriser la lecture et l'impression des documents. Réaliser une mise en forme des textes simple, sans colonnes ni césures.

+
+
+

Critère RLS-1.1 [] Pour chaque texte, la taille de la police est-elle suffisante ?

+ +
+
+

Critère RLS-1.2 [] Pour chaque texte, la police est-elle claire et facile à lire ?

+
    +
  • Test RLS-1.2.1 : Chaque texte utilise-t-il une police sans empattements ?
  • +
  • Test RLS-1.2.2 : Chaque texte utilise-t-il une police suffisamment grasse ?
  • +
  • Test RLS-1.2.3 : La police utilisée pour les textes vérifie-t-elle ces conditions ? + +
  • +
  • Test RLS-1.2.4 : Les textes ne sont pas en italique. Cette règle est-elle respectée ?
  • +
  • Test RLS-1.2.5 : Les textes ne possèdent aucune décoration (soulignement, ombre portée, contour, etc.), autre que la mise en gras ou le soulignement pour les liens. Cette règle est-elle respectée ?
  • +
+
+ +
+

Critère RLS-1.4 [] Pour chaque texte, la couleur de police et le contraste ne diminuent pas la lisibilité. Cette règle est-elle respectée ?

+
    +
  • Test RLS-1.4.1 : Les textes vérifient-ils ces conditions ? +
      +
    • Les textes sont en couleur foncée sur un fond clair ;
    • +
    • Le rapport de contraste entre le texte et son arrière-plan est de 7:1, au moins.
    • +
    +
  • +
  • Test RLS-1.4.2 : À l'exception des liens, pour chaque texte, y a-t-il une seule déclaration de couleur de police ? +
+
+
+

Critère RLS-1.5 [] Pour chaque texte, le contenu n'est pas présenté en colonnes. Cette règle est-elle respectée ?

+
    +
  • Test RLS-1.5.1 : Pour chaque texte, le contenu n'est pas présenté en colonnes. Cette règle est-elle respectée ?
  • +
+
+
+

Critère RLS-1.6 [] Pour chaque texte, les mots ne sont pas écrits en majuscules (hors cas particuliers). Cette règle est-elle respectée ?

+
    +
  • Test RLS-1.6.1 : Pour chaque texte, les mots ne sont pas écrits en majuscules (hors cas particuliers). Cette règle est-elle respectée ?
  • +
+
+
+

Critère RLS-1.7 [] Pour chaque texte, chaque phrase débute-t-elle sur une nouvelle ligne ?

+
    +
  • Test RLS-1.7.1 : Pour chaque texte, chaque phrase débute-t-elle sur une nouvelle ligne ?
  • +
+
+
+

Critère RLS-1.8 [] Pour chaque texte, les mots ne possèdent pas de césures. Cette règle est-elle respectée ?

+
    +
  • Test RLS-1.8.1 : Chaque texte vérifie-t-il ces conditions ? +
      +
    • Les mots ne possèdent pas de césures ;
    • +
    • Les mots n'utilisent pas la déclaration CSS word-wrap : break-word ou overflow-wrap : break-word ;
    • +
    • Les mots n'utilisent pas la déclaration CSS hyphens : auto ou hyphens : manual.
    • + +
    +
  • +
+
+
+

Critère RLS-1.9 [] Pour chaque texte, la première ligne de chaque paragraphe n'est pas en retrait. Cette règle est-elle respectée ?

+
    +
  • Test RLS-1.9.1 : Pour chaque texte, la première ligne de chaque paragraphe n'est pas en retrait. Cette règle est-elle respectée ?
  • +
+
+ +
+

Critère RLS-1.11 [] Pour chaque document en téléchargement, les marges extérieures sont-elles suffisantes ?

+ +
+ +
+

Critère RLS-1.13 [] Pour chaque texte, l’espace entre les lignes et les paragraphes est-il suffisant ?

+
    +
  • Test RLS-1.13.1 : Pour chaque texte, la valeur de l’interligne est-elle au moins égale à 1,5 fois la taille du texte ?
  • +
  • Test RLS-1.13.2 : Pour chaque texte, la valeur de l'espacement entre deux paragraphes est-elle au moins égale à 1,5 fois la taille du texte ?
  • +
+
+
+

Critère RLS-1.14 [] Chaque texte est-il aligné à gauche ?

+
    +
  • Test RLS-1.14.1 : Chaque texte est-il aligné à gauche ?
  • +
+
+
+ +
+
+

RLS-2. Documents

+

Recommandations :

+

Intégrer le logo « Facile à lire et à comprendre » à proximité des textes. Utiliser des marges extérieures suffisamment larges. Numéroter les pages des documents en téléchargement. Simplifier la mise en page des textes.

+
+ + + +
+ +
+
+

RLS-3. Illustrations

+

Recommandations :

+

Utiliser des illustrations simples pour favoriser la compréhension des textes. Utiliser des jeux d'illustrations homogènes pour un même texte, toujours utiliser la même illustration pour illustrer la même idée. Réaliser des tableaux et graphiques simples et toujours les accompagner d'une description textuelle adjacente.

+
+
+

Critère RLS-3.1 [] Pour chaque texte, des illustrations (photographies, dessins, symboles) sont-elles présentes pour aider à la compréhension ?

+
    +
  • Test RLS-3.1.1 : Pour chaque texte, des illustrations (photographies, dessins, symboles) sont-elles présentes pour aider à la compréhension ?
  • +
  • Test RLS-3.1.2 : Chaque illustration (photographies, dessins, symboles) utilisée pour aider à la compréhension du texte auquel elle est associée est-elle pertinente ?
  • +
+
+ + +
+

Critère RLS-3.3 [] Chaque illustration utilisée pour aider à la compréhension du texte est-elle adaptée au public concerné par le texte ?

+
    +
  • Test RLS-3.3.1 : Chaque illustration utilisée pour aider à la compréhension du texte est-elle adaptée au public concerné par le texte ?
  • +
+
+
+

Critère RLS-3.4 [] Pour chaque texte, les illustrations utilisées pour aider à la compréhension du texte ont-elles un style homogène ?

+
    +
  • Test RLS-3.4.1 : Pour chaque texte, les illustrations utilisées pour aider à la compréhension du texte ont-elles un style homogène ?
  • +
+
+
+

Critère RLS-3.5 [] Pour chaque texte, une même illustration est-elle utilisée dans le même contexte à chaque fois ?

+
    +
  • Test RLS-3.5.1 : Pour chaque texte, une même illustration est-elle utilisée dans le même contexte à chaque fois ?
  • +
+
+
+

Critère RLS-3.6 [] Les représentations de données sont-elles simples ?

+
    +
  • Test RLS-3.6.1 : Les tableaux sont-ils des tableaux simples ?
  • +
  • Test RLS-3.6.2 : Les graphiques sont-ils des représentations simples des données ?
  • +
  • Test RLS-3.6.3 : Pour chaque tableau ou graphique, un texte adjacent décrit-il son contenu ?
  • +
  • Test RLS-3.6.4 : Chaque texte décrivant un tableau ou un graphique est-il pertinent ?
  • +
+
+
+ +
+
+

RLS-4. Structuration de l'information

+

Recommandations :

+

Utiliser une ponctuation simple et des listes à puces. Ne pas utiliser de notes de bas de page.

+
+
+

Critère RLS-4.1 [] Les phrases sont-elles courtes ?

+
    +
  • Test RLS-4.1.1 : Chaque phrase vérifie-t-elle une de ces conditions ? +
      +
    • Chaque phrase véhicule une seule idée ;
    • +
    • Chaque phrase traite d'une seule action.
    • +
    +
  • +
  • Test RLS-4.1.2 : Chaque phrase est-elle construite, si possible, sur le modèle : un sujet, un verbe et un complément ?
  • +
+
+
+

Critère RLS-4.2 [] Pour chaque phrase, la ponctuation est-elle simple ?

+
    +
  • Test RLS-4.2.1 : Chaque phrase vérifie-t-elle ces conditions ? +
      +
    • Le point-virgule « ; » n'est pas employé ;
    • +
    • Les parenthèses « ( ) » ne sont pas employées ;
    • +
    • Les crochets « [ ] » ne sont pas employés ;
    • +
    • Les points de suspension « … » ne sont pas employés ;
    • +
    • Le tiret « - » n'est pas employé.
    • +
    +
  • +
+
+
+

Critère RLS-4.3 [] L'apparence de chaque liste d'éléments n'est pas modifiée. Cette règle est-elle respectée ?

+ +
+
+

Critère RLS-4.4 [] Les textes ne renvoient pas à des notes de bas de page. Cette règle est-elle respectée ?

+
    +
  • Test RLS-4.4.1 : Les textes ne renvoient pas à des notes de bas de page. Cette règle est-elle respectée ?
  • +
+
+
+ +
+
+

RLS-5. Contenus

+

Recommandations :

+

Écrire les nombres en chiffres arabes et les dates en toutes lettres. Ne pas utiliser de pourcentages, de grands nombres ou de chiffres romains. Ne pas utiliser de caractères spéciaux ou de mots de langue étrangère, sauf s'ils sont courants.

+
+ +
+

Critère RLS-5.2 [] Pour chaque texte, les pourcentages ou grands nombres ne sont pas utilisés. Cette règle est-elle respectée ?

+
    +
  • Test RLS-5.2.1 : Pour chaque texte, les pourcentages ou grands nombres ne sont pas utilisés. Cette règle est-elle respectée ?
  • +
+
+
+

Critère RLS-5.3 [] Pour chaque texte, les dates sont-elles écrites en toutes lettres ?

+
    +
  • Test RLS-5.3.1 : Pour chaque texte, les dates vérifient-elles ces conditions ? +
      +
    • La date n'utilise pas le format « jj/mm/aaaa » ;
    • +
    • Le mois est écrit en toutes lettres.
    • +
    +
  • +
+
+
+

Critère RLS-5.4 [] Pour chaque texte, les caractères spéciaux ne sont pas utilisés. Cette règle est-elle respectée ?

+
    +
  • Test RLS-5.4.1 : Pour chaque texte, les caractères spéciaux ne sont pas utilisés. Cette règle est-elle respectée ?
  • +
+
+ +
+ +
+
+

RLS-6. Compréhension

+

Recommandations :

+

Présenter les informations dans un ordre logique ou chronologique, regrouper les informations d'un même sujet, placer les informations importantes en début de texte, expliciter et donner des exemples pour les idées et termes compliqués.

+
+ +
+

Critère RLS-6.1 [] Pour chaque texte, les informations sont-elles présentées dans un ordre logique ou chronologique ?

+
    +
  • Test RLS-6.1.1 : Pour chaque texte, les informations sont-elles présentées dans un ordre logique ou chronologique ?
  • +
+
+
+

Critère RLS-6.2 [] Pour chaque texte, les informations sont-elles organisées clairement ?

+
    +
  • Test RLS-6.2.1 : Pour chaque texte, les informations importantes sont-elles placées au début du texte ?
  • +
  • Test RLS-6.2.2 : Pour chaque texte, les informations qui traitent d'un même sujet sont-elles regroupées ?
  • +
+
+
+

Critère RLS-6.3 [] Chaque texte possède-t-il, si nécessaire, une introduction pertinente ?

+
    +
  • Test RLS-6.3.1 : Chaque texte possède-t-il, si nécessaire, une introduction ?
  • +
  • Test RLS-6.3.2 : Chaque introduction est-elle pertinente ?
  • +
+
+
+

Critère RLS-6.4 [] Pour chaque texte, le jargon, les expressions idiomatiques, métaphores ou constructions complexes ne sont pas employés. Cette règle est-elle respectée ?

+
    +
  • Test RLS-6.4.1 : Chaque texte vérifie-t-il ces conditions ? +
      +
    • Des termes issus d'un jargon ne sont pas présents ;
    • +
    • Les abréviations et les contractions ne sont pas présentes ;
    • +
    • Les métaphores ne sont pas présentes ;
    • +
    • Les concepts abstraits ne sont pas présents ;
    • +
    • Les jeux de mots ne sont pas présents ;
    • +
    • Toute expression idiomatique ou autre figure de style complexe n'est pas présente.
    • +
    +
  • +
+
+ +
+

Critère RLS-6.6 [] Chaque texte est-il compréhensible ?

+
    +
  • Test RLS-6.6.1 : Pour chaque texte, le sujet est-il expliqué clairement ?
  • +
  • Test RLS-6.6.2 : Le texte ne comporte pas d'informations inutiles créant la confusion dans la compréhension. Cette règle est-elle respectée ?
  • +
  • Test RLS-6.6.3 : Pour chaque texte, les pronoms sont-ils suffisamment explicites ?
  • +
  • Test RLS-6.6.4 : Pour chaque texte les titres sont-ils clairs et faciles à comprendre ?
  • +
  • Test RLS-6.6.5 : Pour chaque texte, la hiérarchie des titres n'est pas trop profonde. Cette règle est-elle respectée ?
  • +
+

Lire la note concernant l'évaluation qualitative.

+
+
+

Critère RLS-6.7 [] Pour chaque texte, les éléments (concept, idée, terme…) qui nécessitent un niveau de lecture plus avancé que le premier cycle de l’enseignement secondaire sont-ils explicités ?

+
    +
  • Test RLS-6.7.1 : Pour chaque texte, chaque élément qui nécessite un niveau de lecture plus avancé que le premier cycle de l’enseignement secondaire vérifie-t-il une de ces conditions ? +
      +
    • L'élément est accompagné d'une définition en langage simplifié ;
    • +
    • L'élément est accompagné d'une explication.
    • +
    +
  • +
  • Test RLS-6.7.2 : Chaque élément explicité vérifie-t-il une de ces conditions ? +
      +
    • La définition en langage simplifié est pertinente ;
    • +
    • L'explication est pertinente.
    • +
    +
  • +
+
+
+

Critère RLS-6.8 [] Pour chaque texte, chaque élément (concept, idée, terme…) qui nécessite un niveau de lecture plus avancé que le premier cycle de l’enseignement secondaire est-il accompagné d'un exemple de la vie quotidienne ?

+
    +
  • Test RLS-6.8.1 : Pour chaque texte, chaque élément (concept, idée, terme…) qui nécessite un niveau de lecture plus avancé que le premier cycle de l’enseignement secondaire est-il accompagné d'un exemple de la vie quotidienne ?
  • +
  • Test RLS-6.8.2 : Chaque exemple de la vie quotidienne est-il pertinent ?
  • +
+
+
+

Critère RLS-6.9 [] Pour chaque texte, les informations importantes sont-elles répétées ?

+
    +
  • Test RLS-6.9.1 : Pour chaque texte, les informations importantes sont-elles répétées ?
  • +
+

Lire la note concernant l'évaluation qualitative.

+
+
+

Critère RLS-6.10 [] Pour chaque texte, chaque élément complexe est-il explicité plus d'une fois ?

+
    +
  • Test RLS-6.10.1 : Pour chaque texte, chaque élément complexe est-il explicité plus d'une fois ?
  • +
+

Lire la note concernant l'évaluation qualitative.

+
+
+ +
+
+

RLS-7. Syntaxe, grammaire, conjugaison

+

Recommandations :

+

Écrire les textes au présent. Utiliser uniquement la forme active et des phrases affirmatives. S'adresser directement au lecteur. Ne pas utiliser de synonymes pour désigner plusieurs fois une même chose.

+
+ +
+

Critère RLS-7.1 [] Chaque texte doit si possible être écrit au présent ?

+
    +
  • Test RLS-7.1.1 : Chaque texte vérifie-t-il ces conditions ? +
      +
    • Les verbes sont conjugués au présent, si possible ;
    • +
    • Le passé n'est pas employé ;
    • +
    • Le subjonctif n'est pas employé ;
    • +
    • Les participes présents ne sont pas employés.
    • +
    +
  • +
+
+
+

Critère RLS-7.2 [] Pour chaque phrase, la forme affirmative doit si possible être employée ?

+
    +
  • Test RLS-7.2.1 : Pour chaque phrase, la forme affirmative doit si possible,être employée ?
  • +
+
+
+

Critère RLS-7.3 [] Pour chaque phrase, la voix active doit si possible être employée ?

+
    +
  • Test RLS-7.3.1 : Pour chaque phrase, la voix active doit si possible être employée ?
  • +
+
+
+

Critère RLS-7.4 [] Pour chaque texte, l'auteur s'adresse-t-il, si nécessaire, directement au lecteur ?

+ +
+
+

Critère RLS-7.5 [] Pour chaque texte, le même mot est-il utilisé pour désigner une même chose ?

+
    +
  • Test RLS-7.5.1 : Pour chaque texte, le même mot est-il utilisé pour désigner une même chose ?
  • +
+
+
+ +
+

Note concernant l'évaluation qualitative

+

Certains critères n'ont pas pu être rendus opérationnels en raison de la nature qualitative de leur évaluation. Aucune méthode stricte de mesure ne peut être mise en place et aucune référence ou échelle d'évaluation n'existe pour les évaluer. C'est à l'auditeur d'évaluer la validité de ces critères lors de la lecture du texte et de soumettre le texte à des personnes handicapées intellectuelles pour valider la compréhension et la lisibilité, selon les critères visés.

+

+
+ +
+

Cas particuliers

+

Critère RLS-1.6

+

Il existe une gestion de cas particuliers lorsque le mot est un sigle, par exemple, UNAPEI, SNCF, RGAA... Dans cette situation, le critère est non applicable.

+
+
+
+
+
+ + + + + diff --git a/js/filtres.js b/js/filtres.js new file mode 100644 index 0000000..1933637 --- /dev/null +++ b/js/filtres.js @@ -0,0 +1,328 @@ +/** + Ce document est un document de l'État placé sous licence ouverte 1.0 ou ultérieure (https://www.etalab.gouv.fr/licence-ouverte-open-licence), + comme tous les documents hébergés sur references.modernisation.gouv.fr. + Voir les conditions d'utilisation de la licence dans les mentions légales (http://references.modernisation.gouv.fr/mentions-legales). +**/ + +var Config = ( function(){ + + 'use strict'; + + /**** SET ***/ + //lang + var cfgLang = { + testOn:{ + en: ' Display tests ', + fr: ' Afficher les tests ' + }, + testOff:{ + en: ' Collapse tests', + fr: ' Masquer les tests ' + }, + guideOn:{ + en: ' Display guide ', + fr: ' Afficher le mode d\'emploi ' + }, + guideOff:{ + en: ' Collapse guide ', + fr: ' Masquer le mode d\'emploi ' + }, + levelSelect:{ + en: ' Selected ', + fr: ' Sélectionné ' + }, + summaryOn:{ + en: ' Display summary ', + fr: ' Afficher le sommaire ' + }, + summaryOff:{ + en: ' Collapse summary ', + fr: ' Masquer le sommaire ' + } + } + // parameters + var inputNiveau = document.getElementById( 'filtre-niveau' ); + var summaryCover = document.getElementById( 'titre-sommaire' ); + console.log( summaryCover ) + if( inputNiveau ){ + //togglelevel + var bloc = document.getElementsByTagName( 'article' ); + var inputA = document.getElementById( 'filtre-A' ); + var inputAA = document.getElementById( 'filtre-AA' ); + var inputAAA = document.getElementById( 'filtre-AAA' ); + //toggletest + var inputtests = document.getElementById( 'filtre-tests' ); + //setTitle + var bloctitle = document.getElementsByClassName( 'critere' ); + var filtres = document.getElementById( 'filtres' ); + //toggleGuide + var buttonGuide = document.getElementById( 'guide' ); + var displayGuide = document.getElementById( 'display-guide' ); + //Fixed filter + var origOffsetY = filtres.offsetTop; + //setFiltres + var filtresbtn = document.getElementById( 'titre-filtres' ); + var thembtn = document.getElementById( 'titre-thematiques' ); + var footerAdapt = document.getElementById( 'footer' ); + //setLog + var log = document.getElementById( 'log' ); + var logA = document.getElementById( 'log-a' ); + var logAA = document.getElementById( 'log-aa' ); + var logAAA = document.getElementById( 'log-aaa' ); + } + else if( summaryCover ){ + var summaryContent = document.getElementById( 'list-sommaire' ); + } + //setLang + var lang = setdefaultLang(); + /*** DO ***/ + //init + if( inputNiveau){ + inputA.checked = true; + inputAA.checked = true; + inputAAA.checked = true; + setTitle(); + setFiltres(); + setGuide() + //collapse + togglelevel(); + toggletest(); + togglefiltres(); + togglethem(); + /*** Events ***/ + inputtests.addEventListener('click',toggletest, false ); + inputA.addEventListener( 'click' , togglelevel , false ); + inputAA.addEventListener( 'click' , togglelevel , false ); + inputAAA.addEventListener( 'click', togglelevel , false); + document.addEventListener('scroll', onScroll); + } + else if( summaryCover ){ + setCover(); + } + /*** Functions ***/ + //togglelevel + function togglelevel(){ + for( var i = 0, len = bloc.length; i < len; i++ ) { + switch ( bloc[i].dataset.level ){ + case 'A' : + inputA.checked ? bloc[i].className = 'is-visible' : bloc[i].className = 'is-invisible'; + break; + case 'AA': + inputAA.checked ? bloc[i].className = 'is-visible' : bloc[i].className = 'is-invisible'; + break; + case 'AAA': + inputAAA.checked ? bloc[i].className = 'is-visible' : bloc[i].className = 'is-invisible'; + break; + } + } + setLog(); + } + //setTitle + function setTitle(){ + for( var j = 0, len = bloctitle.length; j < len; j++) { + var elt = document.createElement( 'button' ); + elt.className = 'is-inactive'; + if( elt.className === 'is-inactive' ){ + var text = document.createTextNode( cfgLang.testOn[lang] ); + } + else{ + var text = document.createTextNode( cfgLang.testOff[lang] ); + } + elt.appendChild( text ); + bloctitle[j].appendChild( elt ); + + elt.onclick = function(){ + this.parentNode.parentNode.getElementsByTagName( 'ul' )[0].classList.toggle( 'is-invisible' ); +// this.parentNode.parentNode.getElementsByTagName( 'aside' )[0].classList.toggle( 'is-invisible' ); + this.classList.toggle( 'is-inactive' ); + if( this.className === 'is-inactive' ){ + this.textContent = cfgLang.testOn[lang]; + } + else{ + this.textContent = cfgLang.testOff[lang]; + } + } + } + + } + //toggleGuide + function setGuide(){ + var elt = document.createElement( 'button' ); + if( elt.className === 'is-inactive' ){ + var text = document.createTextNode( cfgLang.guideOn[lang] ); + } + else{ + var text = document.createTextNode( cfgLang.guideOff[lang] ); + } + elt.appendChild( text ); + buttonGuide.appendChild( elt ); + + elt.onclick = function(){ + displayGuide.classList.toggle( 'is-invisible' ); + this.classList.toggle( 'is-inactive' ); + if( this.className === 'is-inactive' ){ + this.textContent = cfgLang.guideOn[lang]; + } + else{ + this.textContent = cfgLang.guideOff[lang]; + } + } + } + //toggletest + function toggletest(){ + for( var i = 0, len = bloc.length; i < len; i++) { + if( ( bloc[i].dataset.level ) && ( inputtests.checked )){ + bloc[i].getElementsByTagName( 'ul' )[0].className = 'is-visible'; +// bloc[i].getElementsByTagName( 'aside' )[0].className = 'is-visible'; + bloc[i].getElementsByTagName( 'button' )[0].textContent = cfgLang.testOff[lang]; + bloc[i].getElementsByTagName( 'button' )[0].removeAttribute('class'); + } + + else if( ( bloc[i].dataset.level ) && ( !inputtests.checked ) ){ + bloc[i].getElementsByTagName( 'ul' )[0].className = 'is-invisible'; +// bloc[i].getElementsByTagName( 'aside' )[0].className = 'is-invisible'; + bloc[i].getElementsByTagName( 'button' )[0].textContent = cfgLang.testOn[lang]; + bloc[i].getElementsByTagName( 'button' )[0].className = 'is-inactive'; + } + } + } + //fixed filters + function onScroll(e) { + window.scrollY >= origOffsetY ? filtres.classList.add( 'sticky' ) : + filtres.classList.remove( 'sticky' ); + } + //setFiltres + function setFiltres(){ + filtresbtn.setAttribute( 'aria-expanded' , 'true' ); + thembtn.setAttribute( 'aria-expanded' , 'true' ); + filtresbtn.setAttribute( 'aria-owns' , 'elt-filtres' ); + thembtn.setAttribute( 'aria-owns' , 'nav-thematiques' ); + } + function togglefiltres(){ + filtresbtn.onclick = function(){ + this.nextElementSibling.classList.toggle( 'is-invisible' ); + this.classList.toggle( 'is-inactive' ); + if( this.className === 'is-inactive' ){ + this.setAttribute( 'aria-expanded' , 'false' ); + document.getElementById( 'log-node' ).style.display = 'inline-block'; + } + else{ + this.setAttribute( 'aria-expanded' , 'true' ); + document.getElementById( 'log-node' ).style.display = 'none'; + } + }; + }; + function togglethem(){ + thembtn.onclick = function(){ + this.nextElementSibling.classList.toggle( 'is-invisible' ); + this.classList.toggle( 'is-inactive' ); + if( this.className === 'is-inactive' ){ + this.setAttribute( 'aria-expanded' , 'false' ); + footerAdapt.classList.toggle( 'adapted'); + } + else{ + this.setAttribute( 'aria-expanded' , 'true' ); + footerAdapt.classList.toggle( 'adapted'); + } + }; + }; + //setLog + function setLog(){ + //reset + var target = filtresbtn.childNodes[1]; + if( target ) { + filtresbtn.removeChild( target ); + } + var log = document.createElement( 'span' ); + log.setAttribute( 'id', 'log-node' ); + //A ? + if( inputA.checked ){ + setLevel( log, 'A ' ); + } + else{ + var nolevel = span(); + nolevel.appendChild( setText( '\u00a0\u00a0\u00a0' ) ); + log.appendChild( nolevel ); + } + //AA ? + if( inputAA.checked ){ + setLevel( log, 'AA ' ); + + } + else{ + var nolevel = span(); + nolevel.appendChild( setText( '\u00a0\u00a0\u00a0\u00a0\u00a0' ) ); + log.appendChild( nolevel ); + } + //AAA ? + if( inputAAA.checked ){ + setLevel( log, 'AAA ' ); + } + else{ + var nolevel = span(); + nolevel.appendChild( setText( '\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0' ) ); + log.appendChild( nolevel ); + } + //depedencie + function setLevel( log, levelRef ){ + var spanNode = span() + spanNode.appendChild( setText( cfgLang.levelSelect[lang] ) ); + spanNode.classList.add( 'sr' ); + log.appendChild( spanNode ); + var level = span(); + level.appendChild( setText ( levelRef) ); + log.appendChild( level ); + } + //append + filtresbtn.appendChild( log ); + //Set display + ( filtresbtn.getAttribute( 'aria-expanded' ) === 'true' ) ? + document.getElementById( 'log-node' ).style.display = 'none' + : + document.getElementById( 'log-node' ).style.display = 'inline-block'; + } + //setCover + function setCover(){ + var elt = document.createElement( 'button' ); + if( elt.className === 'is-inactive' ){ + var text = document.createTextNode( cfgLang.summaryOn[lang] ); + } + else{ + var text = document.createTextNode( cfgLang.summaryOff[lang] ); + } + elt.appendChild( text ); + summaryCover.appendChild( elt ); + elt.onclick = function(){ + summaryContent.classList.toggle( 'is-invisible' ); + this.classList.toggle( 'is-inactive' ); + if( this.className === 'is-inactive' ){ + this.textContent = cfgLang.summaryOn[lang]; + } + else{ + this.textContent = cfgLang.summaryOff[lang]; + } + } + } + //helpers + function span(){ + var span = document.createElement('span'); + return span; + } + function setText( content ){ + var node = document.createTextNode(content); + return node; + } + // get default language (based on lang attribute) + function setdefaultLang(){ + var lang = document.querySelector( 'html' ).getAttribute( 'lang' ); + if( lang ){ + var ndx; + ( lang.indexOf( '-' ) > 0 ) ? ndx = lang.indexOf( '-' ) : ndx = 3; + return lang.substring( 0, ndx ); + } + else { + return 'en'; + } + } +})(); + diff --git a/js/filtres.js~ b/js/filtres.js~ new file mode 100644 index 0000000..8a814c8 --- /dev/null +++ b/js/filtres.js~ @@ -0,0 +1,328 @@ +/** + Ce document est un document de l'État placé sous licence ouverte 1.0 ou ultérieure (https://www.etalab.gouv.fr/licence-ouverte-open-licence), + comme tous les documents hébergés sur references.modernisation.gouv.fr. + Voir les conditions d'utilisation de la licence dans les mentions légales (http://references.modernisation.gouv.fr/mentions-legales). +**/ + +var Config = ( function(){ + + 'use strict'; + + /**** SET ***/ + //lang + var cfgLang = { + testOn:{ + en: ' Display tests ', + fr: ' Afficher les tests ' + }, + testOff:{ + en: ' Collapse tests', + fr: ' Masquer les tests ' + }, + guideOn:{ + en: ' Display guide ', + fr: ' Afficher le mode d\'emploi ' + }, + guideOff:{ + en: ' Collapse guide ', + fr: ' Masquer le mode d\'emploi ' + }, + levelSelect:{ + en: ' Selected ', + fr: ' Sélectionné ' + }, + summaryOn:{ + en: ' Display summary ', + fr: ' Afficher le sommaire ' + }, + summaryOff:{ + en: ' Collapse summary ', + fr: ' Masquer le sommaire ' + } + } + // parameters + var inputNiveau = document.getElementById( 'filtre-niveau' ); + var summaryCover = document.getElementById( 'titre-sommaire' ); + console.log( summaryCover ) + if( inputNiveau ){ + //togglelevel + var bloc = document.getElementsByTagName( 'article' ); + var inputA = document.getElementById( 'filtre-A' ); + var inputAA = document.getElementById( 'filtre-AA' ); + var inputAAA = document.getElementById( 'filtre-AAA' ); + //toggletest + var inputtests = document.getElementById( 'filtre-tests' ); + //setTitle + var bloctitle = document.getElementsByClassName( 'critere' ); + var filtres = document.getElementById( 'filtres' ); + //toggleGuide + var buttonGuide = document.getElementById( 'guide' ); + var displayGuide = document.getElementById( 'display-guide' ); + //Fixed filter + var origOffsetY = filtres.offsetTop; + //setFiltres + var filtresbtn = document.getElementById( 'titre-filtres' ); + var thembtn = document.getElementById( 'titre-thematiques' ); + var footerAdapt = document.getElementById( 'footer' ); + //setLog + var log = document.getElementById( 'log' ); + var logA = document.getElementById( 'log-a' ); + var logAA = document.getElementById( 'log-aa' ); + var logAAA = document.getElementById( 'log-aaa' ); + } + else if( summaryCover ){ + var summaryContent = document.getElementById( 'list-sommaire' ); + } + //setLang + var lang = setdefaultLang(); + /*** DO ***/ + //init + if( inputNiveau){ + inputA.checked = true; + inputAA.checked = true; + inputAAA.checked = true; + setTitle(); + setFiltres(); + setGuide() + //collapse + togglelevel(); + toggletest(); + togglefiltres(); + togglethem(); + /*** Events ***/ + inputtests.addEventListener('click',toggletest, false ); + inputA.addEventListener( 'click' , togglelevel , false ); + inputAA.addEventListener( 'click' , togglelevel , false ); + inputAAA.addEventListener( 'click', togglelevel , false); + document.addEventListener('scroll', onScroll); + } + else if( summaryCover ){ + setCover(); + } + /*** Functions ***/ + //togglelevel + function togglelevel(){ + for( var i = 0, len = bloc.length; i < len; i++ ) { + switch ( bloc[i].dataset.level ){ + case 'A' : + inputA.checked ? bloc[i].className = 'is-visible' : bloc[i].className = 'is-invisible'; + break; + case 'AA': + inputAA.checked ? bloc[i].className = 'is-visible' : bloc[i].className = 'is-invisible'; + break; + case 'AAA': + inputAAA.checked ? bloc[i].className = 'is-visible' : bloc[i].className = 'is-invisible'; + break; + } + } + setLog(); + } + //setTitle + function setTitle(){ + for( var j = 0, len = bloctitle.length; j < len; j++) { + var elt = document.createElement( 'button' ); + elt.className = 'is-inactive'; + if( elt.className === 'is-inactive' ){ + var text = document.createTextNode( cfgLang.testOn[lang] ); + } + else{ + var text = document.createTextNode( cfgLang.testOff[lang] ); + } + elt.appendChild( text ); + bloctitle[j].appendChild( elt ); + + elt.onclick = function(){ + this.parentNode.parentNode.getElementsByTagName( 'ul' )[0].classList.toggle( 'is-invisible' ); +// this.parentNode.parentNode.getElementsByTagName( 'aside' )[0].classList.toggle( 'is-invisible' ); + this.classList.toggle( 'is-inactive' ); + if( this.className === 'is-inactive' ){ + this.textContent = cfgLang.testOn[lang]; + } + else{ + this.textContent = cfgLang.testOff[lang]; + } + } + } + + } + //toggleGuide + function setGuide(){ + var elt = document.createElement( 'button' ); + if( elt.className === 'is-inactive' ){ + var text = document.createTextNode( cfgLang.guideOn[lang] ); + } + else{ + var text = document.createTextNode( cfgLang.guideOff[lang] ); + } + elt.appendChild( text ); + buttonGuide.appendChild( elt ); + + elt.onclick = function(){ + displayGuide.classList.toggle( 'is-invisible' ); + this.classList.toggle( 'is-inactive' ); + if( this.className === 'is-inactive' ){ + this.textContent = cfgLang.guideOn[lang]; + } + else{ + this.textContent = cfgLang.guideOff[lang]; + } + } + } + //toggletest + function toggletest(){ + for( var i = 0, len = bloc.length; i < len; i++) { + if( ( bloc[i].dataset.level ) && ( inputtests.checked )){ + bloc[i].getElementsByTagName( 'ul' )[0].className = 'is-visible'; +// bloc[i].getElementsByTagName( 'aside' )[0].className = 'is-visible'; + bloc[i].getElementsByTagName( 'button' )[0].textContent = cfgLang.testOff[lang]; + bloc[i].getElementsByTagName( 'button' )[0].removeAttribute('class'); + } + + else if( ( bloc[i].dataset.level ) && ( !inputtests.checked ) ){ + bloc[i].getElementsByTagName( 'ul' )[0].className = 'is-invisible'; + bloc[i].getElementsByTagName( 'aside' )[0].className = 'is-invisible'; + bloc[i].getElementsByTagName( 'button' )[0].textContent = cfgLang.testOn[lang]; + bloc[i].getElementsByTagName( 'button' )[0].className = 'is-inactive'; + } + } + } + //fixed filters + function onScroll(e) { + window.scrollY >= origOffsetY ? filtres.classList.add( 'sticky' ) : + filtres.classList.remove( 'sticky' ); + } + //setFiltres + function setFiltres(){ + filtresbtn.setAttribute( 'aria-expanded' , 'true' ); + thembtn.setAttribute( 'aria-expanded' , 'true' ); + filtresbtn.setAttribute( 'aria-owns' , 'elt-filtres' ); + thembtn.setAttribute( 'aria-owns' , 'nav-thematiques' ); + } + function togglefiltres(){ + filtresbtn.onclick = function(){ + this.nextElementSibling.classList.toggle( 'is-invisible' ); + this.classList.toggle( 'is-inactive' ); + if( this.className === 'is-inactive' ){ + this.setAttribute( 'aria-expanded' , 'false' ); + document.getElementById( 'log-node' ).style.display = 'inline-block'; + } + else{ + this.setAttribute( 'aria-expanded' , 'true' ); + document.getElementById( 'log-node' ).style.display = 'none'; + } + }; + }; + function togglethem(){ + thembtn.onclick = function(){ + this.nextElementSibling.classList.toggle( 'is-invisible' ); + this.classList.toggle( 'is-inactive' ); + if( this.className === 'is-inactive' ){ + this.setAttribute( 'aria-expanded' , 'false' ); + footerAdapt.classList.toggle( 'adapted'); + } + else{ + this.setAttribute( 'aria-expanded' , 'true' ); + footerAdapt.classList.toggle( 'adapted'); + } + }; + }; + //setLog + function setLog(){ + //reset + var target = filtresbtn.childNodes[1]; + if( target ) { + filtresbtn.removeChild( target ); + } + var log = document.createElement( 'span' ); + log.setAttribute( 'id', 'log-node' ); + //A ? + if( inputA.checked ){ + setLevel( log, 'A ' ); + } + else{ + var nolevel = span(); + nolevel.appendChild( setText( '\u00a0\u00a0\u00a0' ) ); + log.appendChild( nolevel ); + } + //AA ? + if( inputAA.checked ){ + setLevel( log, 'AA ' ); + + } + else{ + var nolevel = span(); + nolevel.appendChild( setText( '\u00a0\u00a0\u00a0\u00a0\u00a0' ) ); + log.appendChild( nolevel ); + } + //AAA ? + if( inputAAA.checked ){ + setLevel( log, 'AAA ' ); + } + else{ + var nolevel = span(); + nolevel.appendChild( setText( '\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0' ) ); + log.appendChild( nolevel ); + } + //depedencie + function setLevel( log, levelRef ){ + var spanNode = span() + spanNode.appendChild( setText( cfgLang.levelSelect[lang] ) ); + spanNode.classList.add( 'sr' ); + log.appendChild( spanNode ); + var level = span(); + level.appendChild( setText ( levelRef) ); + log.appendChild( level ); + } + //append + filtresbtn.appendChild( log ); + //Set display + ( filtresbtn.getAttribute( 'aria-expanded' ) === 'true' ) ? + document.getElementById( 'log-node' ).style.display = 'none' + : + document.getElementById( 'log-node' ).style.display = 'inline-block'; + } + //setCover + function setCover(){ + var elt = document.createElement( 'button' ); + if( elt.className === 'is-inactive' ){ + var text = document.createTextNode( cfgLang.summaryOn[lang] ); + } + else{ + var text = document.createTextNode( cfgLang.summaryOff[lang] ); + } + elt.appendChild( text ); + summaryCover.appendChild( elt ); + elt.onclick = function(){ + summaryContent.classList.toggle( 'is-invisible' ); + this.classList.toggle( 'is-inactive' ); + if( this.className === 'is-inactive' ){ + this.textContent = cfgLang.summaryOn[lang]; + } + else{ + this.textContent = cfgLang.summaryOff[lang]; + } + } + } + //helpers + function span(){ + var span = document.createElement('span'); + return span; + } + function setText( content ){ + var node = document.createTextNode(content); + return node; + } + // get default language (based on lang attribute) + function setdefaultLang(){ + var lang = document.querySelector( 'html' ).getAttribute( 'lang' ); + if( lang ){ + var ndx; + ( lang.indexOf( '-' ) > 0 ) ? ndx = lang.indexOf( '-' ) : ndx = 3; + return lang.substring( 0, ndx ); + } + else { + return 'en'; + } + } +})(); + diff --git a/rls-rgaa-grille-eval.ods b/rls-rgaa-grille-eval.ods new file mode 100755 index 0000000..e8715c7 Binary files /dev/null and b/rls-rgaa-grille-eval.ods differ diff --git a/rls-rgaa-grille-eval.xls b/rls-rgaa-grille-eval.xls new file mode 100644 index 0000000..d8f400a Binary files /dev/null and b/rls-rgaa-grille-eval.xls differ