├── LICENSE.md ├── README.md ├── css ├── accessconfig.css ├── accessconfig.min.css └── fonts │ ├── opendyslexic-regular-webfont.woff │ └── opendyslexic-regular-webfont.woff2 └── js ├── accessconfig.min.js └── src └── accessconfig.js /LICENSE.md: -------------------------------------------------------------------------------- 1 | # License MIT 2 | 3 | Copyright © 2019, Access42. 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | The Software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders X be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the Software. 9 | 10 | Except as contained in this notice, the name of Access42 shall not be used in advertising or otherwise to promote the sale, use or other dealings in this Software without prior written authorization from Access42. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | AccessConfig 2 | ============ 3 | 4 | **Avertissement – 18/07/2023 : AccessConfig est en pause, car il a besoin d’évolutions techniques que nous ne sommes pas en mesure de réaliser pour l’instant. Merci pour votre compréhension !** 5 | 6 | Un sélecteur de styles, simple et open source, pour permettre aux personnes en situation de handicap d’adapter votre site à leurs besoins. 7 | 8 | [Contribuer sur GitHub](https://github.com/access42/AccessConfig) et [découvrez nos autres outils](https://access42.net/outils). 9 | 10 | Nous vous invitons à lire la documentation détaillée sur le [site dédié à AccessConfig](https://accessconfig.a11y.fr). 11 | 12 | Présentation 13 | ------------ 14 | 15 | AccessConfig est un composant JavaScript offrant plusieurs options pour **personnaliser l’affichage des contenus web**, et les rendre plus faciles à lire pour les utilisateurs ayant besoin de contrastes forts, les personnes dyslexiques, ainsi que pour les personnes déficientes visuelles ayant besoin de remplacer les images-textes par leur alternative. 16 | 17 | Le script insère, à l’intérieur de l’attribut `class` de la balise `body`, des classes CSS spécifiques en fonction des paramètres sélectionnés par l’utilisateur : 18 | 19 | * **Contrastes** 20 | * Défaut : `.a42-ac-default-contrast` 21 | * Renforcés : `.a42-ac-high-contrast` 22 | * Inversés : `.a42-ac-inv-contrast` 23 | * **Interlignage** 24 | * Défaut : `.a42-ac-default-spacing` 25 | * Adapté : `.a42-ac-dys-spacing` 26 | * **Police** 27 | * Défaut : `.a42-ac-default-font` 28 | * Adapté : `.a42-ac-dys-font` 29 | * **Justification** 30 | * Défaut : `.a42-ac-default-justify` 31 | * Adapté : `.a42-ac-cancel-justify` 32 | * **Remplacement d’image** 33 | * Défaut : `.a42-ac-default-img` 34 | * Adaptée : `.a42-ac-text-img` 35 | * Note : le remplacement s’effectue par un traitement JavaScript. 36 | 37 | Installation 38 | ------------ 39 | 40 | Pour installer AccessConfig, copier le dossier `/accessconfig` à la racine de votre projet. 41 | 42 | Ce dossier contient notamment : 43 | 44 | * un dossier `/js` où sont rangés les fichiers JavaScript (JS) d’AccessConfig (version minifiée et version non minifiée) ; 45 | * un dossier `/css` où sont rangés : 46 | * les feuilles de styles CSS d’AccessConfig (version minifiée et version non minifiée), 47 | * le sous-dossier `/fonts`, contenant les fichiers `.woff` et `.woff2` utilisés pour la police adaptée à la dyslexie. 48 | 49 | ### Installation des CSS 50 | 51 | Appeler la feuille de styles `accessconfig.min.css` **après** vos styles personnels, de sorte que ceux-ci soient écrasés lorsqu’AccessConfig est actif. 52 | 53 | 54 | 55 | #### Classes `CSS` adaptées 56 | 57 | La feuille de styles d’AccessConfig contient les styles de la fenêtre modale ainsi que quelques styles déjà configurés pour fonctionner avec les options proposées par AccessConfig. 58 | 59 | **Vous pouvez bien sûr modifier ou surcharger ces styles selon vos besoins.** 60 | 61 | ### Installation du script 62 | 63 | Appeler le script `accessconfig.min.js` dans votre document HTML dans la balise `head` de la page. 64 | 65 | 66 | 67 | ### Initialisation d’AccessConfig 68 | 69 | Une fois que le script, les CSS et les polices sont installés, il faut initialiser AccessConfig dans votre page HTML. 70 | 71 | Pour cela, copiez le code suivant et collez-le à l’endroit où vous souhaitez faire apparaître le bouton permettant de lancer AccessConfig : 72 | 73 |
74 | 75 | AccessConfig met à votre disposition un certain nombre de paramètres, disponibles depuis ce code HTML. Il n’est pas nécessaire d’aller modifier le script pour les modifier. Nous les détaillons ci-après. 76 | 77 | #### Modification du préfixe 78 | 79 | Par défaut, les classes et les identifiants relatifs à AccessConfig et de ses cookies sont préfixés par `a42-ac`. 80 | 81 | Mais il vous est possible de définir votre propre préfixe en modifiant le code d’initialisation d’AccessConfig : `data-accessconfig-params='{ "Prefix": "xxx" … }'`. 82 | 83 | #### Autres options de personnalisation 84 | 85 | Vous pouvez également configurer les paramètres suivants : 86 | 87 | * `ContainerClass` : la valeur de la classe de la fenêtre modale ; 88 | * `ModalCloseButton` : la valeur de la classe du bouton de fermeture de la fenêtre modale ; 89 | * `ModalTitle` : la valeur de la classe du titre de la fenêtre modale ; 90 | * `FormFieldset` : la valeur de la classe des éléments `fieldset` à l’intérieur de la fenêtre modale ; 91 | * `FormFieldsetLegend` : la valeur de la classe des éléments `legend` à l’intérieur de la fenêtre modale ; 92 | * `FormRadio` : la valeur de la classe des `input[type="radio"]` à l’intérieur de la fenêtre modale. -------------------------------------------------------------------------------- /css/accessconfig.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! AccessConfig | Access42 | accessconfig.a11y.fr */ 4 | 5 | /** 6 | *************************** 7 | * AccessConfig modal window 8 | *************************** 9 | */ 10 | #a42-ac { 11 | position: fixed; 12 | z-index: 9999; 13 | width: 100%; 14 | top: 0; 15 | right: 0; 16 | bottom: 0; 17 | left: 0; 18 | padding: .75rem 1.5rem 1.5rem; 19 | background-color: #fff; 20 | border: 1px solid #fff; 21 | overflow: auto; 22 | font-size: 1rem; 23 | 24 | /* Hide AccessConfig by default */ 25 | display: none; 26 | 27 | /* Access42 colors */ 28 | color: #0b1b34; 29 | } 30 | 31 | @media screen and (max-width: 29.9em) { 32 | 33 | #a42-ac { 34 | border: 0; 35 | padding: .75rem; 36 | } 37 | } 38 | 39 | #a42-ac, 40 | #a42-ac *, 41 | #a42-ac *::after, 42 | #a42-ac *::before { 43 | box-sizing: border-box; 44 | } 45 | 46 | @media screen and (min-width: 50em) { 47 | #a42-ac{ 48 | width: 90%; 49 | top: 10%; 50 | left: 50%; 51 | right: auto; 52 | bottom: auto; 53 | margin-left: -45%; 54 | } 55 | } 56 | 57 | @media screen and (min-width: 64em) { 58 | #a42-ac{ 59 | width: 58.750em; 60 | margin-left: -29.375rem; 61 | } 62 | } 63 | 64 | 65 | /** 66 | * AccessConfig main title 67 | */ 68 | #a42-ac h1 { 69 | margin: 0 3rem 0 0; 70 | font-size: 1.75em; 71 | line-height: 1.3; 72 | 73 | /* Access42 colors */ 74 | color: #0b1b34; 75 | } 76 | 77 | 78 | /** 79 | * Improved .sr-only 80 | * Copyright (c) 2019 by ffoodd (https://codepen.io/ffoodd/pen/gwKZyq) 81 | * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 82 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 83 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 84 | */ 85 | 86 | #a42-ac .sr-only { 87 | border: 0 !important; 88 | clip: rect(1px, 1px, 1px, 1px) !important; 89 | -webkit-clip-path: inset(50%) !important; 90 | clip-path: inset(50%) !important; 91 | height: 1px !important; 92 | margin: -1px !important; 93 | overflow: hidden !important; 94 | padding: 0 !important; 95 | position: absolute !important; 96 | width: 1px !important; 97 | white-space: nowrap !important; 98 | } 99 | 100 | #a42-ac .sr-only-focusable:focus, 101 | #a42-ac .sr-only-focusable:active { 102 | clip: auto !important; 103 | -webkit-clip-path: none !important; 104 | clip-path: none !important; 105 | height: auto !important; 106 | margin: auto !important; 107 | overflow: visible !important; 108 | width: auto !important; 109 | white-space: normal !important; 110 | } 111 | 112 | 113 | /** 114 | * AccessConfig close button 115 | */ 116 | #a42-ac-close { 117 | position: absolute; 118 | top: .625rem; 119 | right: 1.5rem; 120 | width: 2.75rem; 121 | height: 2.75rem; 122 | cursor: pointer; 123 | border: 0; 124 | } 125 | 126 | #a42-ac-close, 127 | #a42-ac #a42-ac-close{ 128 | overflow: hidden; 129 | } 130 | 131 | #a42-ac-close::after { 132 | content: ''; 133 | position: absolute; 134 | top: 0; 135 | left: 0; 136 | display: block; 137 | width: 100%; 138 | height: 100%; 139 | background: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjQgNC4yLTQuMS00LjFoLS4xbC03LjggNy43LTcuOC03LjhoLS4xbC00LjEgNC4xIDcuOSA3LjktNy45IDcuOCA0LjEgNC4yaC4xbDcuOC03LjggNy44IDcuN2MwIC4xIDAgLjEuMSAwbDQuMS00LjEtNy44LTcuOHoiIGZpbGw9IiMzMTQ4NmUiLz48L3N2Zz4=') no-repeat 50% 50%; 140 | } 141 | 142 | 143 | #a42-ac-close:hover, 144 | #a42-ac-close:focus, 145 | #a42-ac-close:active { 146 | opacity: .6; 147 | background-color: transparent !important; 148 | } 149 | 150 | @media screen and (max-width: 29.9em) { 151 | 152 | #a42-ac-close { 153 | right: .75rem; 154 | } 155 | } 156 | 157 | 158 | /** 159 | * AccessConfig forms 160 | */ 161 | 162 | /* First, some normalize.css imports */ 163 | #a42-ac button, 164 | #a42-ac input, 165 | #a42-ac optgroup, 166 | #a42-ac select, 167 | #a42-ac textarea { 168 | font-family: inherit; 169 | font-size: 100%; 170 | line-height: 1.15; 171 | margin: 0; 172 | } 173 | 174 | #a42-ac button, 175 | #a42-ac input { 176 | overflow: visible; 177 | } 178 | 179 | #a42-ac button, 180 | #a42-ac select { 181 | text-transform: none; 182 | } 183 | 184 | #a42-ac button, 185 | #a42-ac [type="button"], 186 | #a42-ac [type="submit"] { 187 | -webkit-appearance: button; 188 | } 189 | 190 | #a42-ac button::-moz-focus-inner, 191 | #a42-ac [type="button"]::-moz-focus-inner, 192 | #a42-ac [type="reset"]::-moz-focus-inner, 193 | #a42-ac [type="submit"]::-moz-focus-inner { 194 | border-style: none; 195 | padding: 0; 196 | } 197 | 198 | #a42-ac button:-moz-focusring, 199 | #a42-ac [type="button"]:-moz-focusring, 200 | #a42-ac [type="reset"]:-moz-focusring, 201 | #a42-ac [type="submit"]:-moz-focusring { 202 | outline: 1px dotted ButtonText; 203 | } 204 | 205 | #a42-ac legend { 206 | box-sizing: border-box; 207 | color: inherit; 208 | display: table; 209 | max-width: 100%; 210 | padding: 0; 211 | white-space: normal; 212 | } 213 | 214 | #a42-ac [type="checkbox"], 215 | #a42-ac [type="radio"] { 216 | box-sizing: border-box; 217 | padding: 0; 218 | } 219 | 220 | /* Then, AccessConfig custom styles */ 221 | #a42-ac fieldset { 222 | margin: 1em 0 0 0; 223 | padding: 1em .5em .5em 1em; 224 | border-width: 0 0 0 .625em; 225 | border-style: solid; 226 | 227 | /* Access42 colors */ 228 | border-color: #cedae6; 229 | background-color: #e3ebf2; 230 | } 231 | 232 | @media screen and (min-width: 50em) { 233 | 234 | #a42-ac .a42-ac-content { 235 | display: flex; 236 | align-items: flex-start; 237 | flex-wrap: wrap; 238 | } 239 | 240 | #a42-ac fieldset { 241 | width: 45%; 242 | width: calc(50% - .5em); 243 | align-self: stretch; 244 | } 245 | 246 | #a42-ac fieldset:nth-child(odd) { 247 | clear: left; 248 | margin-right: .5em; 249 | } 250 | 251 | #a42-ac fieldset:nth-child(even) { 252 | margin-left: .5em; 253 | } 254 | } 255 | 256 | @media screen and (max-width: 29.9em) { 257 | 258 | #a42-ac fieldset { 259 | font-size: .875em; /* 14px */ 260 | padding: .5em; 261 | border-left-width: .357em; 262 | } 263 | } 264 | 265 | #a42-ac legend { 266 | float: left; 267 | width: 100%; 268 | margin: 0; 269 | font-weight: bold; 270 | font-size: 1.375em; 271 | 272 | /* Access42 colors */ 273 | color: #0b1b34; 274 | } 275 | 276 | #a42-ac legend + *:first-child { 277 | clear: left; 278 | } 279 | 280 | #a42-ac label { 281 | margin: 0 1em .533em .5em; 282 | padding-top: .067em; 283 | padding-bottom: .067em; 284 | font-size: 0.938em; /* 15px */ 285 | line-height: 1.6; 286 | } 287 | 288 | /* Fake radios */ 289 | #a42-ac input[type="radio"] 290 | { 291 | border: 0 !important; 292 | clip: rect(1px, 1px, 1px, 1px) !important; 293 | -webkit-clip-path: inset(50%) !important; 294 | clip-path: inset(50%) !important; 295 | height: 1px !important; 296 | margin: -1px !important; 297 | overflow: hidden !important; 298 | padding: 0 !important; 299 | position: absolute !important; 300 | width: 1px !important; 301 | white-space: nowrap !important; 302 | } 303 | 304 | #a42-ac input[type="radio"] + label { 305 | position: relative; 306 | display: inline-block; 307 | vertical-align: middle; 308 | margin-left: 0; 309 | padding: .625rem 0 .625rem 2.267em; 310 | } 311 | 312 | @media screen and (max-width: 29.9em) { 313 | 314 | #a42-ac input[type="radio"] + label { 315 | padding-top: .786em; 316 | padding-bottom: .786em; 317 | } 318 | } 319 | 320 | #a42-ac input[type="radio"] + label::after, 321 | #a42-ac input[type="radio"] + label::before { 322 | content: ''; 323 | position: absolute; 324 | display: block; 325 | border-radius: 100%; 326 | } 327 | 328 | #a42-ac input[type="radio"] + label::after 329 | { 330 | top: 1em; /* 5px + 10px */ 331 | left: .33334em; /* 5px */ 332 | width: .933em; /* 14px */ 333 | height: .933em; /* 14px */ 334 | transition: all 0.2s; 335 | 336 | /* Access42 colors */ 337 | background-color: #31486e; 338 | } 339 | 340 | #a42-ac input[type="radio"] + label::before { 341 | top: .625rem; 342 | left: 0; 343 | width: 1.6em; /* 24px */ 344 | height: 1.6em; /* 24px */ 345 | border-width: .2em; 346 | border-style: solid; 347 | 348 | /* Access42 colors */ 349 | border-color: #7d829a; 350 | background-color: #f9fcff; 351 | } 352 | 353 | @media screen and (max-width: 29.9em) { 354 | 355 | #a42-ac label{ 356 | font-size: 1em; 357 | } 358 | 359 | #a42-ac input[type="radio"] + label::after { 360 | top: 1.071em; 361 | left: .357em; 362 | width: 1em; 363 | height: 1em; 364 | } 365 | 366 | #a42-ac input[type="radio"] + label::before { 367 | width: 1.714em; 368 | height: 1.714em; 369 | } 370 | } 371 | 372 | #a42-ac input[type="radio"]:focus + label { 373 | outline: 1px dotted; 374 | } 375 | 376 | #a42-ac input[type="radio"]:checked + label::before { 377 | /* Access42 colors */ 378 | border-color: #31486e; 379 | } 380 | 381 | #a42-ac input[type="radio"]:not(:checked) + label::after { 382 | opacity: 0; 383 | -webkit-transform: scale(0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ 384 | -ms-transform: scale(0); /* IE 9 */ 385 | transform: scale(0); /* IE 10, Fx 16+, Op 12.1+ */ 386 | } 387 | 388 | #a42-ac input[type="radio"]:disabled + label { 389 | opacity: .5; 390 | } 391 | 392 | #a42-ac input[type="radio"]:disabled + label:hover { 393 | cursor: not-allowed; 394 | } 395 | 396 | 397 | /** 398 | ***************************** 399 | * When AccessConfig is active 400 | ***************************** 401 | */ 402 | body.a42-ac-active { 403 | overflow: hidden; 404 | } 405 | 406 | 407 | /** 408 | *************************** 409 | * AccessConfig page overlay 410 | *************************** 411 | */ 412 | .a42-ac-overlay { 413 | position: fixed; /* could also be absolute */ 414 | top: 0; 415 | left: 0; 416 | height: 100%; 417 | width: 100%; 418 | background-color: rgba(11,27,52,0.8); 419 | z-index: 998; 420 | display: none; 421 | } 422 | 423 | .a42-ac-active .a42-ac-overlay{ 424 | display: block; 425 | } 426 | 427 | .a42-ac-inv-contrast .a42-ac-overlay { 428 | background-color: rgba(0,13,99,0.8) !important; 429 | } 430 | 431 | .a42-ac-high-contrast .a42-ac-overlay { 432 | background-color: rgba(32,33,41,0.8) !important; 433 | } 434 | 435 | 436 | /** 437 | ****************************************** 438 | * AccessConfig accessibility user settings 439 | ****************************************** 440 | */ 441 | 442 | /** 443 | * Common styles to enforced and inverted contrasts 444 | */ 445 | 446 | /* Cancel background images and image borders which may cause contrast problems */ 447 | .a42-ac-high-contrast *, 448 | .a42-ac-inv-contrast *, 449 | .a42-ac-high-contrast *::after, 450 | .a42-ac-inv-contrast *::after, 451 | .a42-ac-high-contrast *::before, 452 | .a42-ac-inv-contrast *::before { 453 | border-image: none !important; 454 | text-shadow: none !important; 455 | } 456 | 457 | /* Let SVG elements adapt to the chosen color scheme */ 458 | .a42-ac-high-contrast path, 459 | .a42-ac-high-contrast polygon, 460 | .a42-ac-high-contrast svg, 461 | .a42-ac-high-contrast svg *, 462 | .a42-ac-inv-contrast path, 463 | .a42-ac-inv-contrast polygon, 464 | .a42-ac-inv-contrast svg, 465 | .a42-ac-inv-contrast svg * { 466 | fill: currentColor; 467 | } 468 | 469 | /* Add a border on form elements when custom contrasts are on */ 470 | .a42-ac-high-contrast input, 471 | .a42-ac-high-contrast textarea, 472 | .a42-ac-high-contrast select, 473 | .a42-ac-high-contrast form button, 474 | .a42-ac-inv-contrast input, 475 | .a42-ac-inv-contrast textarea, 476 | .a42-ac-inv-contrast select, 477 | .a42-ac-inv-contrast form button{ 478 | border-width: 1px !important; 479 | border-style: solid !important; 480 | } 481 | 482 | /* Change color of ::first-letter pseudo-elements if needed */ 483 | .a42-ac-high-contrast *::first-letter, 484 | .a42-ac-inv-contrast *::first-letter{ 485 | color: inherit !important; 486 | } 487 | 488 | /* input[type="range"] */ 489 | .a42-ac-high-contrast input[type="range"], 490 | .a42-ac-inv-contrast input[type="range"]{ 491 | border: 0 !important; 492 | } 493 | 494 | .a42-ac-high-contrast input[type="range"]::-webkit-slider-thumb, 495 | .a42-ac-inv-contrast input[type="range"]::-webkit-slider-thumb { 496 | margin-top: -.25em; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ 497 | } 498 | 499 | @supports (-ms-ime-align: auto) { /* Dirty hack to target Edge only */ 500 | .a42-ac-high-contrast input[type="range"]::-webkit-slider-thumb, 501 | .a42-ac-inv-contrast input[type="range"]::-webkit-slider-thumb { 502 | margin-top: 0; 503 | } 504 | } 505 | 506 | .a42-ac-high-contrast input[type="range"]::-webkit-slider-runnable-track, 507 | .a42-ac-inv-contrast input[type="range"]::-webkit-slider-runnable-track { 508 | height: 0.313em; 509 | } 510 | 511 | 512 | /** 513 | * Enforced contrast (.a42-ac-high-contrast) 514 | */ 515 | .a42-ac-high-contrast, 516 | .a42-ac-high-contrast *{ 517 | background-color: #343643 !important; 518 | color: white !important; 519 | text-decoration-color: currentColor !important; /* #125 */ 520 | } 521 | 522 | .a42-ac-high-contrast, 523 | .a42-ac-high-contrast *, 524 | .a42-ac-high-contrast *::before, 525 | .a42-ac-high-contrast *::after{ 526 | border-color: white !important; 527 | } 528 | 529 | .a42-ac-high-contrast #a42-ac-close::after { 530 | background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjQgNC4yLTQuMS00LjFoLS4xbC03LjggNy43LTcuOC03LjhoLS4xbC00LjEgNC4xIDcuOSA3LjktNy45IDcuOCA0LjEgNC4yaC4xbDcuOC03LjggNy44IDcuN2MwIC4xIDAgLjEuMSAwbDQuMS00LjEtNy44LTcuOHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4='); 531 | } 532 | 533 | .a42-ac-high-contrast #a42-ac input[type="radio"] + label::before { 534 | border-color: #f9fcff !important; 535 | background-color: transparent !important; 536 | } 537 | 538 | .a42-ac-high-contrast #a42-ac input[type="radio"] + label::after 539 | { 540 | background-color: #f9fcff !important; 541 | } 542 | 543 | /* Add a border on form elements when high contrast is on */ 544 | .a42-ac-high-contrast input, 545 | .a42-ac-high-contrast textarea, 546 | .a42-ac-high-contrast select{ 547 | border-color: #f9fcff !important; 548 | color: inherit !important; 549 | } 550 | 551 | /* High contrast placeholder */ 552 | .a42-ac-high-contrast *::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 553 | color: white !important; 554 | } 555 | 556 | .a42-ac-high-contrast *::-moz-placeholder { /* Firefox 19+ */ 557 | color: white !important; 558 | opacity: 1 !important; 559 | } 560 | 561 | .a42-ac-high-contrast *:-ms-input-placeholder { /* IE 10+ */ 562 | color: white !important; 563 | } 564 | 565 | .a42-ac-high-contrast *:-moz-placeholder { /* Firefox 18- */ 566 | color: white !important; 567 | opacity: 1 !important; 568 | } 569 | 570 | /* High contrast for input[type="date"] */ 571 | .a42-ac-high-contrast *::-webkit-datetime-edit-text { 572 | color: white !important; 573 | } 574 | 575 | .a42-ac-high-contrast *::-webkit-datetime-edit-month-field { 576 | color: white !important; 577 | } 578 | 579 | .a42-ac-high-contrast *::-webkit-datetime-edit-day-field { 580 | color: white !important; 581 | } 582 | 583 | .a42-ac-high-contrast *::-webkit-datetime-edit-year-field { 584 | color: white !important; 585 | } 586 | 587 | .a42-ac-high-contrast ::-webkit-calendar-picker-indicator { 588 | background: #343643 !important; 589 | } 590 | 591 | /* High contrast for input[type="range"] */ 592 | .a42-ac-high-contrast input[type="range"]::-webkit-slider-runnable-track { /* Webkit */ 593 | background: white !important; 594 | } 595 | 596 | .a42-ac-high-contrast input[type="range"]::-moz-range-track { /* Firefox */ 597 | background: white !important; 598 | } 599 | .a42-ac-high-contrast input[type="range"]::-moz-range-thumb { 600 | background: black !important; 601 | border: .15em solid white !important; 602 | } 603 | 604 | .a42-ac-high-contrast input[type="range"]::-ms-fill-lower { /* IE/Edge */ 605 | background: white !important; 606 | } 607 | .a42-ac-high-contrast input[type="range"]::-ms-fill-upper { 608 | background: white !important; 609 | } 610 | .a42-ac-high-contrast input[type="range"]:focus::-ms-fill-lower { 611 | background: white !important; 612 | } 613 | .a42-ac-high-contrast input[type="range"]:focus::-ms-fill-upper { 614 | background: white !important; 615 | } 616 | 617 | .a42-ac-high-contrast input[type="range"]::-ms-thumb { 618 | background: black !important; 619 | border: .15em solid white !important; 620 | } 621 | 622 | 623 | /** 624 | * Inverted contrast (.a42-ac-inv-contrast) 625 | */ 626 | .a42-ac-inv-contrast, 627 | .a42-ac-inv-contrast *{ 628 | background-color: #000080 !important; 629 | color: #FFFF00 !important; 630 | text-decoration-color: currentColor !important; /* #125 */ 631 | } 632 | 633 | .a42-ac-inv-contrast, 634 | .a42-ac-inv-contrast *, 635 | .a42-ac-inv-contrast *::before, 636 | .a42-ac-inv-contrast *::after{ 637 | border-color: #FFFF00 !important; 638 | } 639 | 640 | .a42-ac-inv-contrast #a42-ac-close::after { 641 | background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjQgNC4yLTQuMS00LjFoLS4xbC03LjggNy43LTcuOC03LjhoLS4xbC00LjEgNC4xIDcuOSA3LjktNy45IDcuOCA0LjEgNC4yaC4xbDcuOC03LjggNy44IDcuN2MwIC4xIDAgLjEuMSAwbDQuMS00LjEtNy44LTcuOHoiIGZpbGw9IiNmZjAiLz48L3N2Zz4='); 642 | } 643 | 644 | .a42-ac-inv-contrast #a42-ac input[type="radio"] + label::before { 645 | border-color: #FFFF00 !important; 646 | background-color: transparent !important; 647 | } 648 | 649 | .a42-ac-inv-contrast #a42-ac input[type="radio"] + label::after 650 | { 651 | background-color: #FFFF00 !important; 652 | } 653 | 654 | /* Add a border on form elements when high contrast is on */ 655 | .a42-ac-inv-contrast input, 656 | .a42-ac-inv-contrast textarea, 657 | .a42-ac-inv-contrast select{ 658 | border-color: #FFFF00 !important; 659 | } 660 | 661 | /* Inverted contrast placeholder */ 662 | .a42-ac-inv-contrast *::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 663 | color: #FFFF00 !important; 664 | } 665 | 666 | .a42-ac-inv-contrast *::-moz-placeholder { /* Firefox 19+ */ 667 | color: #FFFF00 !important; 668 | opacity: 1 !important; 669 | } 670 | 671 | .a42-ac-inv-contrast *:-ms-input-placeholder { /* IE 10+ */ 672 | color: #FFFF00 !important; 673 | } 674 | 675 | .a42-ac-inv-contrast *:-moz-placeholder { /* Firefox 18- */ 676 | color: #FFFF00 !important; 677 | opacity: 1 !important; 678 | } 679 | 680 | /* Inverted contrast for input[type="date"] */ 681 | .a42-ac-inv-contrast *::-webkit-datetime-edit-text { 682 | color: #FFFF00 !important; 683 | } 684 | 685 | .a42-ac-inv-contrast *::-webkit-datetime-edit-month-field { 686 | color: #FFFF00 !important; 687 | } 688 | 689 | .a42-ac-inv-contrast *::-webkit-datetime-edit-day-field { 690 | color: #FFFF00 !important; 691 | } 692 | 693 | .a42-ac-inv-contrast *::-webkit-datetime-edit-year-field { 694 | color: #FFFF00 !important; 695 | } 696 | 697 | .a42-ac-inv-contrast ::-webkit-calendar-picker-indicator { 698 | background: #000080 !important; 699 | } 700 | 701 | /* Inverted contrast for input[type="range"] */ 702 | .a42-ac-inv-contrast input[type="range"]::-webkit-slider-runnable-track { 703 | background: #FFFF00 !important; 704 | } 705 | 706 | .a42-ac-inv-contrast input[type="range"]::-moz-range-track { /* Firefox */ 707 | background: #FFFF00 !important; 708 | } 709 | .a42-ac-inv-contrast input[type="range"]::-moz-range-thumb { 710 | background: #000080 !important; 711 | border: .15em solid #FFFF00 !important; 712 | } 713 | 714 | .a42-ac-inv-contrast input[type="range"]::-ms-fill-lower { /* IE/Edge */ 715 | background: #FFFF00 !important; 716 | } 717 | .a42-ac-inv-contrast input[type="range"]::-ms-fill-upper { 718 | background: #FFFF00 !important; 719 | } 720 | .a42-ac-inv-contrast input[type="range"]:focus::-ms-fill-lower { 721 | background: #FFFF00 !important; 722 | } 723 | .a42-ac-inv-contrast input[type="range"]:focus::-ms-fill-upper { 724 | background: #FFFF00 !important; 725 | } 726 | 727 | .a42-ac-inv-contrast input[type="range"]::-ms-thumb { 728 | background: #000080 !important; 729 | border: .15em solid #FFFF00 !important; 730 | } 731 | 732 | 733 | /** 734 | * Dyslexia font 735 | */ 736 | @font-face { 737 | font-family: 'opendys'; 738 | src: url('fonts/opendyslexic-regular-webfont.woff2') format('woff2'), 739 | url('fonts/opendyslexic-regular-webfont.woff') format('woff'); 740 | font-weight: normal; 741 | font-style: normal; 742 | } 743 | 744 | body.a42-ac-dys-font, 745 | body.a42-ac-dys-font *{ 746 | font-family: 'opendys' !important; 747 | } 748 | 749 | 750 | /** 751 | * Dyslexia line-spacing 752 | */ 753 | .a42-ac-dys-spacing, 754 | .a42-ac-dys-spacing *{ 755 | line-height: 1.5 !important; 756 | } 757 | 758 | 759 | /** 760 | * Dyslexia justification 761 | */ 762 | .a42-ac-cancel-justification, 763 | .a42-ac-cancel-justification *{ 764 | text-align: left !important; 765 | } 766 | 767 | 768 | /** 769 | * Replace images by their alternatives 770 | */ 771 | .a42-ac-replace-style{ 772 | border: 5px solid !important; 773 | padding: .2em; 774 | } -------------------------------------------------------------------------------- /css/accessconfig.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";/*! AccessConfig | Access42 | accessconfig.a11y.fr */#a42-ac{position:fixed;z-index:9999;width:100%;top:0;right:0;bottom:0;left:0;padding:.75rem 1.5rem 1.5rem;background-color:#fff;border:1px solid #fff;overflow:auto;font-size:1rem;display:none;color:#0b1b34}@media screen and (max-width:29.9em){#a42-ac{border:0;padding:.75rem}}#a42-ac,#a42-ac *,#a42-ac ::after,#a42-ac ::before{box-sizing:border-box}@media screen and (min-width:50em){#a42-ac{width:90%;top:10%;left:50%;right:auto;bottom:auto;margin-left:-45%}}@media screen and (min-width:64em){#a42-ac{width:58.750em;margin-left:-29.375rem}}#a42-ac h1{margin:0 3rem 0 0;font-size:1.75em;line-height:1.3;color:#0b1b34}#a42-ac .sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}#a42-ac .sr-only-focusable:focus,#a42-ac .sr-only-focusable:active{clip:auto!important;-webkit-clip-path:none!important;clip-path:none!important;height:auto!important;margin:auto!important;overflow:visible!important;width:auto!important;white-space:normal!important}#a42-ac-close{position:absolute;top:.625rem;right:1.5rem;width:2.75rem;height:2.75rem;cursor:pointer;border:0}#a42-ac-close,#a42-ac #a42-ac-close{overflow:hidden}#a42-ac-close::after{content:'';position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjQgNC4yLTQuMS00LjFoLS4xbC03LjggNy43LTcuOC03LjhoLS4xbC00LjEgNC4xIDcuOSA3LjktNy45IDcuOCA0LjEgNC4yaC4xbDcuOC03LjggNy44IDcuN2MwIC4xIDAgLjEuMSAwbDQuMS00LjEtNy44LTcuOHoiIGZpbGw9IiMzMTQ4NmUiLz48L3N2Zz4=) no-repeat 50% 50%}#a42-ac-close:hover,#a42-ac-close:focus,#a42-ac-close:active{opacity:.6;background-color:transparent!important}@media screen and (max-width:29.9em){#a42-ac-close{right:.75rem}}#a42-ac button,#a42-ac input,#a42-ac optgroup,#a42-ac select,#a42-ac textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}#a42-ac button,#a42-ac input{overflow:visible}#a42-ac button,#a42-ac select{text-transform:none}#a42-ac button,#a42-ac [type=button],#a42-ac [type=submit]{-webkit-appearance:button}#a42-ac button::-moz-focus-inner,#a42-ac [type=button]::-moz-focus-inner,#a42-ac [type=reset]::-moz-focus-inner,#a42-ac [type=submit]::-moz-focus-inner{border-style:none;padding:0}#a42-ac button:-moz-focusring,#a42-ac [type=button]:-moz-focusring,#a42-ac [type=reset]:-moz-focusring,#a42-ac [type=submit]:-moz-focusring{outline:1px dotted ButtonText}#a42-ac legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}#a42-ac [type=checkbox],#a42-ac [type=radio]{box-sizing:border-box;padding:0}#a42-ac fieldset{margin:1em 0 0;padding:1em .5em .5em 1em;border-width:0 0 0 .625em;border-style:solid;border-color:#cedae6;background-color:#e3ebf2}@media screen and (min-width:50em){#a42-ac .a42-ac-content{display:flex;align-items:flex-start;flex-wrap:wrap}#a42-ac fieldset{width:45%;width:calc(50% - .5em);align-self:stretch}#a42-ac fieldset:nth-child(odd){clear:left;margin-right:.5em}#a42-ac fieldset:nth-child(even){margin-left:.5em}}@media screen and (max-width:29.9em){#a42-ac fieldset{font-size:.875em;padding:.5em;border-left-width:.357em}}#a42-ac legend{float:left;width:100%;margin:0;font-weight:700;font-size:1.375em;color:#0b1b34}#a42-ac legend+:first-child{clear:left}#a42-ac label{margin:0 1em .533em .5em;padding-top:.067em;padding-bottom:.067em;font-size:.938em;line-height:1.6}#a42-ac input[type=radio]{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}#a42-ac input[type=radio]+label{position:relative;display:inline-block;vertical-align:middle;margin-left:0;padding:.625rem 0 .625rem 2.267em}@media screen and (max-width:29.9em){#a42-ac input[type=radio]+label{padding-top:.786em;padding-bottom:.786em}}#a42-ac input[type=radio]+label::after,#a42-ac input[type=radio]+label::before{content:'';position:absolute;display:block;border-radius:100%}#a42-ac input[type=radio]+label::after{top:1em;left:.33334em;width:.933em;height:.933em;transition:all .2s;background-color:#31486e}#a42-ac input[type=radio]+label::before{top:.625rem;left:0;width:1.6em;height:1.6em;border-width:.2em;border-style:solid;border-color:#7d829a;background-color:#f9fcff}@media screen and (max-width:29.9em){#a42-ac label{font-size:1em}#a42-ac input[type=radio]+label::after{top:1.071em;left:.357em;width:1em;height:1em}#a42-ac input[type=radio]+label::before{width:1.714em;height:1.714em}}#a42-ac input[type=radio]:focus+label{outline:1px dotted}#a42-ac input[type=radio]:checked+label::before{border-color:#31486e}#a42-ac input[type=radio]:not(:checked)+label::after{opacity:0;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}#a42-ac input[type=radio]:disabled+label{opacity:.5}#a42-ac input[type=radio]:disabled+label:hover{cursor:not-allowed}body.a42-ac-active{overflow:hidden}.a42-ac-overlay{position:fixed;top:0;left:0;height:100%;width:100%;background-color:rgba(11,27,52,.8);z-index:998;display:none}.a42-ac-active .a42-ac-overlay{display:block}.a42-ac-inv-contrast .a42-ac-overlay{background-color:rgba(0,13,99,.8)!important}.a42-ac-high-contrast .a42-ac-overlay{background-color:rgba(32,33,41,.8)!important}.a42-ac-high-contrast *,.a42-ac-inv-contrast *,.a42-ac-high-contrast ::after,.a42-ac-inv-contrast ::after,.a42-ac-high-contrast ::before,.a42-ac-inv-contrast ::before{border-image:none!important;text-shadow:none!important}.a42-ac-high-contrast path,.a42-ac-high-contrast polygon,.a42-ac-high-contrast svg,.a42-ac-high-contrast svg *,.a42-ac-inv-contrast path,.a42-ac-inv-contrast polygon,.a42-ac-inv-contrast svg,.a42-ac-inv-contrast svg *{fill:currentColor}.a42-ac-high-contrast input,.a42-ac-high-contrast textarea,.a42-ac-high-contrast select,.a42-ac-high-contrast form button,.a42-ac-inv-contrast input,.a42-ac-inv-contrast textarea,.a42-ac-inv-contrast select,.a42-ac-inv-contrast form button{border-width:1px!important;border-style:solid!important}.a42-ac-high-contrast ::first-letter,.a42-ac-inv-contrast ::first-letter{color:inherit!important}.a42-ac-high-contrast input[type=range],.a42-ac-inv-contrast input[type=range]{border:0!important}.a42-ac-high-contrast input[type=range]::-webkit-slider-thumb,.a42-ac-inv-contrast input[type=range]::-webkit-slider-thumb{margin-top:-.25em}@supports (-ms-ime-align:auto){.a42-ac-high-contrast input[type=range]::-webkit-slider-thumb,.a42-ac-inv-contrast input[type=range]::-webkit-slider-thumb{margin-top:0}}.a42-ac-high-contrast input[type=range]::-webkit-slider-runnable-track,.a42-ac-inv-contrast input[type=range]::-webkit-slider-runnable-track{height:.313em}.a42-ac-high-contrast,.a42-ac-high-contrast *{background-color:#343643!important;color:#fff!important;text-decoration-color:currentColor!important}.a42-ac-high-contrast,.a42-ac-high-contrast *,.a42-ac-high-contrast ::before,.a42-ac-high-contrast ::after{border-color:#fff!important}.a42-ac-high-contrast #a42-ac-close::after{background-image:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjQgNC4yLTQuMS00LjFoLS4xbC03LjggNy43LTcuOC03LjhoLS4xbC00LjEgNC4xIDcuOSA3LjktNy45IDcuOCA0LjEgNC4yaC4xbDcuOC03LjggNy44IDcuN2MwIC4xIDAgLjEuMSAwbDQuMS00LjEtNy44LTcuOHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=)}.a42-ac-high-contrast #a42-ac input[type=radio]+label::before{border-color:#f9fcff!important;background-color:transparent!important}.a42-ac-high-contrast #a42-ac input[type=radio]+label::after{background-color:#f9fcff!important}.a42-ac-high-contrast input,.a42-ac-high-contrast textarea,.a42-ac-high-contrast select{border-color:#f9fcff!important;color:inherit!important}.a42-ac-high-contrast ::-webkit-input-placeholder{color:#fff!important}.a42-ac-high-contrast ::-moz-placeholder{color:#fff!important;opacity:1!important}.a42-ac-high-contrast :-ms-input-placeholder{color:#fff!important}.a42-ac-high-contrast :-moz-placeholder{color:#fff!important;opacity:1!important}.a42-ac-high-contrast ::-webkit-datetime-edit-text{color:#fff!important}.a42-ac-high-contrast ::-webkit-datetime-edit-month-field{color:#fff!important}.a42-ac-high-contrast ::-webkit-datetime-edit-day-field{color:#fff!important}.a42-ac-high-contrast ::-webkit-datetime-edit-year-field{color:#fff!important}.a42-ac-high-contrast ::-webkit-calendar-picker-indicator{background:#343643!important}.a42-ac-high-contrast input[type=range]::-webkit-slider-runnable-track{background:#fff!important}.a42-ac-high-contrast input[type=range]::-moz-range-track{background:#fff!important}.a42-ac-high-contrast input[type=range]::-moz-range-thumb{background:#000!important;border:.15em solid #fff!important}.a42-ac-high-contrast input[type=range]::-ms-fill-lower{background:#fff!important}.a42-ac-high-contrast input[type=range]::-ms-fill-upper{background:#fff!important}.a42-ac-high-contrast input[type=range]:focus::-ms-fill-lower{background:#fff!important}.a42-ac-high-contrast input[type=range]:focus::-ms-fill-upper{background:#fff!important}.a42-ac-high-contrast input[type=range]::-ms-thumb{background:#000!important;border:.15em solid #fff!important}.a42-ac-inv-contrast,.a42-ac-inv-contrast *{background-color:navy!important;color:#FF0!important;text-decoration-color:currentColor!important}.a42-ac-inv-contrast,.a42-ac-inv-contrast *,.a42-ac-inv-contrast ::before,.a42-ac-inv-contrast ::after{border-color:#FF0!important}.a42-ac-inv-contrast #a42-ac-close::after{background-image:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjQgNC4yLTQuMS00LjFoLS4xbC03LjggNy43LTcuOC03LjhoLS4xbC00LjEgNC4xIDcuOSA3LjktNy45IDcuOCA0LjEgNC4yaC4xbDcuOC03LjggNy44IDcuN2MwIC4xIDAgLjEuMSAwbDQuMS00LjEtNy44LTcuOHoiIGZpbGw9IiNmZjAiLz48L3N2Zz4=)}.a42-ac-inv-contrast #a42-ac input[type=radio]+label::before{border-color:#FF0!important;background-color:transparent!important}.a42-ac-inv-contrast #a42-ac input[type=radio]+label::after{background-color:#FF0!important}.a42-ac-inv-contrast input,.a42-ac-inv-contrast textarea,.a42-ac-inv-contrast select{border-color:#FF0!important}.a42-ac-inv-contrast ::-webkit-input-placeholder{color:#FF0!important}.a42-ac-inv-contrast ::-moz-placeholder{color:#FF0!important;opacity:1!important}.a42-ac-inv-contrast :-ms-input-placeholder{color:#FF0!important}.a42-ac-inv-contrast :-moz-placeholder{color:#FF0!important;opacity:1!important}.a42-ac-inv-contrast ::-webkit-datetime-edit-text{color:#FF0!important}.a42-ac-inv-contrast ::-webkit-datetime-edit-month-field{color:#FF0!important}.a42-ac-inv-contrast ::-webkit-datetime-edit-day-field{color:#FF0!important}.a42-ac-inv-contrast ::-webkit-datetime-edit-year-field{color:#FF0!important}.a42-ac-inv-contrast ::-webkit-calendar-picker-indicator{background:navy!important}.a42-ac-inv-contrast input[type=range]::-webkit-slider-runnable-track{background:#FF0!important}.a42-ac-inv-contrast input[type=range]::-moz-range-track{background:#FF0!important}.a42-ac-inv-contrast input[type=range]::-moz-range-thumb{background:navy!important;border:.15em solid #FF0!important}.a42-ac-inv-contrast input[type=range]::-ms-fill-lower{background:#FF0!important}.a42-ac-inv-contrast input[type=range]::-ms-fill-upper{background:#FF0!important}.a42-ac-inv-contrast input[type=range]:focus::-ms-fill-lower{background:#FF0!important}.a42-ac-inv-contrast input[type=range]:focus::-ms-fill-upper{background:#FF0!important}.a42-ac-inv-contrast input[type=range]::-ms-thumb{background:navy!important;border:.15em solid #FF0!important}@font-face{font-family:opendys;src:url(fonts/opendyslexic-regular-webfont.woff2) format('woff2'),url(fonts/opendyslexic-regular-webfont.woff) format('woff');font-weight:400;font-style:normal}body.a42-ac-dys-font,body.a42-ac-dys-font *{font-family:opendys!important}.a42-ac-dys-spacing,.a42-ac-dys-spacing *{line-height:1.5!important}.a42-ac-cancel-justification,.a42-ac-cancel-justification *{text-align:left!important}.a42-ac-replace-style{border:5px solid!important;padding:.2em} -------------------------------------------------------------------------------- /css/fonts/opendyslexic-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/access42/AccessConfig/1c01cf4dd4bcc37ce5cbe84d193bd6782d93e855/css/fonts/opendyslexic-regular-webfont.woff -------------------------------------------------------------------------------- /css/fonts/opendyslexic-regular-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/access42/AccessConfig/1c01cf4dd4bcc37ce5cbe84d193bd6782d93e855/css/fonts/opendyslexic-regular-webfont.woff2 -------------------------------------------------------------------------------- /js/accessconfig.min.js: -------------------------------------------------------------------------------- 1 | var AccessConfig=function(){"use strict ";var e={Setup:{id:"accessconfig"},Setting:{useExtendContrast:!0},BodyActive:{classSetting:"active"},Overlay:{classSetting:"overlay"},ModalButton:{id:"button"},ModalContainer:{classSetting:"modal",titleLang:{en:"Accessibility setting",fr:"Paramètres d’accessibilité"},titleId:"title",titleClass:"title"},CloseButton:{id:"close",classSetting:"close",lang:{en:"close",fr:"fermer"},hiddenTextClass:"sr-only"},InlineContentContainer:{id:"inline-c"},FormFieldsetContent:{classSetting:"content"},FormFieldset:{classSetting:"fieldset"},LegendFieldset:{classSetting:"legend"},FormRadio:{classSetting:"radio"},ContrastFieldset:{id:"contrast"},ContrastLegend:{lang:{en:"Contrast",fr:"Contrastes"}},DefaultContrastCheckbox:{id:"default-contrast",value:"default-contrast",groupName:"contrast",lang:{en:"Default",fr:"Défaut"}},HighContrastCheckbox:{id:"high-contrast",value:"high-contrast",groupName:"contrast",lang:{en:"Reinforce",fr:"Renforcer"}},InvertContrastCheckbox:{id:"inv-contrast",value:"inv-contrast",groupName:"contrast",lang:{en:"Reverse",fr:"Inverser"}},DyslexiaFieldset:{id:"font"},DyslexiaLegend:{lang:{en:"Font (dyslexia)",fr:"Police (dyslexie)"}},DefaultFontCheckbox:{id:"default-font",value:"default-font",groupName:"font",lang:{en:"Default",fr:"Défaut"}},DyslexiaFontCheckbox:{id:"dys-font",value:"dys-font",groupName:"font",lang:{en:"Adapt",fr:"Adapter"}},LineSpacingFieldset:{id:"line-spacing"},LineSpacingLegend:{lang:{en:"Line spacing",fr:"Interlignage"}},DefaultLineSpacingCheckbox:{id:"default-spacing",value:"default-spacing",groupName:"line-spacing",lang:{en:"Default",fr:"Défaut"}},DyslexiaLineSpacingCheckbox:{id:"dys-spacing",value:"dys-spacing",groupName:"line-spacing",lang:{en:"Increase",fr:"Augmenter"}},JustificationFieldset:{id:"justification"},JustificationLegend:{lang:{en:"Justification",fr:"Justification"}},DefaultJustificationCheckbox:{id:"default-justification",value:"default-justification",groupName:"justification",lang:{en:"Default",fr:"Défaut"}},DyslexiaJustificationCheckbox:{id:"cancel-justification",value:"cancel-justification",groupName:"justification",lang:{en:"Remove",fr:"Supprimer"}},ImageReplacementFieldset:{id:"image"},ImageReplacementCSS:{replacementCss:"replace-img",replacementStyle:"replace-style"},ImageReplacementLegend:{lang:{en:"Images",fr:"Images"}},DefaultImageReplacementCheckbox:{id:"default-img",value:"default-img",groupName:"image",lang:{en:"Default",fr:"Défaut"}},ImageReplacementCheckbox:{id:"text-img",value:"text-img",groupName:"image",lang:{en:"Replace with text",fr:"Remplacer par du texte"}}},a={mode:null,cookieName:null,openObj:null,imgTab:null,imgSpan:null};function t(){var t=document.querySelector("body"),s=document.getElementById(a.mode).querySelectorAll("input");for(i=0,len=s.length;i0?s.indexOf("-"):3,s.substring(0,o)):"en"),r=t({tagName:"div",id:userPrefix,class:userPrefix}),l=t({tagName:"div",class:userPrefix+"-"+e.FormFieldsetContent.classSetting});var s,o;if(1==a.userParams.Modal||void 0===a.userParams.Modal){r.setAttribute("role","dialog"),r.setAttribute("aria-labelledby",userPrefix+"-"+e.ModalContainer.titleId),r.setAttribute("tabindex","-1"),a.userParams.ContainerClass?r.classList.add(userPrefix+"-"+a.userParams.ContainerClass):r.classList.add(userPrefix+"-"+e.ModalContainer.classSetting);var d=t({tagName:"h1",id:userPrefix+"-"+e.ModalContainer.titleId});a.userParams.ModalTitle?d.classList.add(userPrefix+a.userParams.ModalTitle):d.classList.add(userPrefix+"-"+e.ModalContainer.titleClass);var c=document.createTextNode(e.ModalContainer.titleLang[n]);d.appendChild(c),r.appendChild(d);var u=t({tagName:"button",type:"button",id:userPrefix+"-"+e.CloseButton.id});a.userParams.ModalCloseButton?u.classList.add(userPrefix+a.userParams.ModalCloseButton):u.classList.add(userPrefix+"-"+e.CloseButton.classSetting);var m=t({tagName:"span",class:e.CloseButton.hiddenTextClass}),f=document.createTextNode(e.CloseButton.lang[n]);m.appendChild(f),u.appendChild(m),r.appendChild(u),r.appendChild(l)}else{var g=document.getElementById(e.Setup.id);g.appendChild(r),r.classList.add(userPrefix+"accessconfig-inline"),r.appendChild(l)}if(0!=a.userParams.Contrast){var p=t({tagName:"fieldset",id:userPrefix+"-"+e.ContrastFieldset.id}),x=document.createElement("legend"),C=document.createTextNode(e.ContrastLegend.lang[n]);x.appendChild(C),p.appendChild(x);var h=t({tagName:"input",type:"radio",checked:"checked",id:userPrefix+"-"+e.DefaultContrastCheckbox.id,value:userPrefix+"-"+e.DefaultContrastCheckbox.value,name:userPrefix+"-"+e.DefaultContrastCheckbox.groupName}),b=t({tagName:"label",for:userPrefix+"-"+e.DefaultContrastCheckbox.id}),v=document.createTextNode(e.DefaultContrastCheckbox.lang[n]);if(b.appendChild(v),p.appendChild(h),p.appendChild(b),e.Setting.useExtendContrast){var h=t({tagName:"input",type:"radio",id:userPrefix+"-"+e.HighContrastCheckbox.id,value:userPrefix+"-"+e.HighContrastCheckbox.value,name:userPrefix+"-"+e.HighContrastCheckbox.groupName}),b=t({tagName:"label",for:userPrefix+"-"+e.HighContrastCheckbox.id}),v=document.createTextNode(e.HighContrastCheckbox.lang[n]);b.appendChild(v),p.appendChild(h),p.appendChild(b)}var h=t({tagName:"input",type:"radio",id:userPrefix+"-"+e.InvertContrastCheckbox.id,value:userPrefix+"-"+e.InvertContrastCheckbox.value,name:userPrefix+"-"+e.InvertContrastCheckbox.groupName}),b=t({tagName:"label",for:userPrefix+"-"+e.InvertContrastCheckbox.id}),v=document.createTextNode(e.InvertContrastCheckbox.lang[n]);b.appendChild(v),p.appendChild(h),p.appendChild(b),l.appendChild(p)}if(0!=a.userParams.Font){var p=t({tagName:"fieldset",id:userPrefix+"-"+e.DyslexiaFieldset.id}),x=document.createElement("legend"),C=document.createTextNode(e.DyslexiaLegend.lang[n]);x.appendChild(C),p.appendChild(x);var h=t({tagName:"input",type:"radio",checked:"checked",id:userPrefix+"-"+e.DefaultFontCheckbox.id,value:userPrefix+"-"+e.DefaultFontCheckbox.value,name:userPrefix+"-"+e.DefaultFontCheckbox.groupName}),b=t({tagName:"label",for:userPrefix+"-"+e.DefaultFontCheckbox.id}),v=document.createTextNode(e.DefaultFontCheckbox.lang[n]);b.appendChild(v),p.appendChild(h),p.appendChild(b);var h=t({tagName:"input",type:"radio",id:userPrefix+"-"+e.DyslexiaFontCheckbox.id,value:userPrefix+"-"+e.DyslexiaFontCheckbox.value,name:userPrefix+"-"+e.DyslexiaFontCheckbox.groupName}),b=t({tagName:"label",for:userPrefix+"-"+e.DyslexiaFontCheckbox.id}),v=document.createTextNode(e.DyslexiaFontCheckbox.lang[n]);b.appendChild(v),p.appendChild(h),p.appendChild(b),l.appendChild(p)}if(0!=a.userParams.LineSpacing){var p=t({tagName:"fieldset",id:userPrefix+"-"+e.LineSpacingFieldset.id}),x=document.createElement("legend"),C=document.createTextNode(e.LineSpacingLegend.lang[n]);x.appendChild(C),p.appendChild(x);var h=t({tagName:"input",type:"radio",checked:"checked",id:userPrefix+"-"+e.DefaultLineSpacingCheckbox.id,value:userPrefix+"-"+e.DefaultLineSpacingCheckbox.value,name:userPrefix+"-"+e.DefaultLineSpacingCheckbox.groupName}),b=t({tagName:"label",for:userPrefix+"-"+e.DefaultLineSpacingCheckbox.id}),v=document.createTextNode(e.DefaultLineSpacingCheckbox.lang[n]);b.appendChild(v),p.appendChild(h),p.appendChild(b);var h=t({tagName:"input",type:"radio",id:userPrefix+"-"+e.DyslexiaLineSpacingCheckbox.id,value:userPrefix+"-"+e.DyslexiaLineSpacingCheckbox.value,name:userPrefix+"-"+e.DyslexiaLineSpacingCheckbox.groupName}),b=t({tagName:"label",for:userPrefix+"-"+e.DyslexiaLineSpacingCheckbox.id}),v=document.createTextNode(e.DyslexiaLineSpacingCheckbox.lang[n]);b.appendChild(v),p.appendChild(h),p.appendChild(b),l.appendChild(p)}if(0!=a.userParams.Justification){var p=t({tagName:"fieldset",id:userPrefix+"-"+e.JustificationFieldset.id}),x=document.createElement("legend"),C=document.createTextNode(e.JustificationLegend.lang[n]);x.appendChild(C),p.appendChild(x);var h=t({tagName:"input",type:"radio",checked:"checked",id:userPrefix+"-"+e.DefaultJustificationCheckbox.id,value:userPrefix+"-"+e.DefaultJustificationCheckbox.value,name:userPrefix+"-"+e.DefaultJustificationCheckbox.groupName}),b=t({tagName:"label",for:userPrefix+"-"+e.DefaultJustificationCheckbox.id}),v=document.createTextNode(e.DefaultJustificationCheckbox.lang[n]);b.appendChild(v),p.appendChild(h),p.appendChild(b);var h=t({tagName:"input",type:"radio",id:userPrefix+"-"+e.DyslexiaJustificationCheckbox.id,value:userPrefix+"-"+e.DyslexiaJustificationCheckbox.value,name:userPrefix+"-"+e.DyslexiaJustificationCheckbox.groupName}),b=t({tagName:"label",for:userPrefix+"-"+e.DyslexiaJustificationCheckbox.id}),v=document.createTextNode(e.DyslexiaJustificationCheckbox.lang[n]);b.appendChild(v),p.appendChild(h),p.appendChild(b),l.appendChild(p)}if(0!=a.userParams.ImageReplacement){var p=t({tagName:"fieldset",id:userPrefix+"-"+e.ImageReplacementFieldset.id}),x=document.createElement("legend"),C=document.createTextNode(e.ImageReplacementLegend.lang[n]);x.appendChild(C),p.appendChild(x);var h=t({tagName:"input",type:"radio",checked:"checked",id:userPrefix+"-"+e.DefaultImageReplacementCheckbox.id,value:userPrefix+"-"+e.DefaultImageReplacementCheckbox.value,name:userPrefix+"-"+e.DefaultImageReplacementCheckbox.groupName}),b=t({tagName:"label",for:userPrefix+"-"+e.DefaultImageReplacementCheckbox.id}),v=document.createTextNode(e.DefaultImageReplacementCheckbox.lang[n]);b.appendChild(v),p.appendChild(h),p.appendChild(b);var h=t({tagName:"input",type:"radio",id:userPrefix+"-"+e.ImageReplacementCheckbox.id,value:userPrefix+"-"+e.ImageReplacementCheckbox.value,name:userPrefix+"-"+e.ImageReplacementCheckbox.groupName}),b=t({tagName:"label",for:userPrefix+"-"+e.ImageReplacementCheckbox.id}),v=document.createTextNode(e.ImageReplacementCheckbox.lang[n]);b.appendChild(v),p.appendChild(h),p.appendChild(b),l.appendChild(p)}for(allFieldset=r.querySelectorAll("fieldset"),i=0,len=allFieldset.length;i 0 ) ? ndx = lang.indexOf( '-' ) : ndx = 3; 633 | return lang.substring( 0, ndx ); 634 | } 635 | else { 636 | return 'en'; 637 | } 638 | } 639 | 640 | /** Setting managers **/ 641 | function setEvent(){ 642 | var body = document.querySelector( 'body' ); 643 | var fieldset = document.getElementById( global.mode ); 644 | var checkBoxList = fieldset.querySelectorAll( 'input' ); 645 | for (i = 0, len = checkBoxList.length; i < len; i++ ){ 646 | checkBoxList[i].addEventListener( 'click', function(){ 647 | setAdaptive( this ); 648 | }, false); 649 | } 650 | var target = readCookie( global.cookieName ); 651 | if( target ){ 652 | 653 | body.classList.add( target ); 654 | for (i = 0, len = checkBoxList.length; i < len; i++ ){ 655 | checkBoxList[i].removeAttribute( 'checked' ); 656 | } 657 | document.getElementById( target ).setAttribute( 'checked', 'checked'); 658 | } 659 | //Setting image replacement 660 | if( body.classList.contains( userPrefix+'-'+config.DefaultImageReplacementCheckbox.value ) ){ 661 | replaceImgSpan(); 662 | } 663 | if( body.classList.contains( userPrefix+'-'+config.ImageReplacementCheckbox.value ) ){ 664 | replaceImg(); 665 | } 666 | } 667 | /**Set adaptive mode**/ 668 | function setAdaptive( obj ){ 669 | global.mode = obj.getAttribute( 'name' ); 670 | global.cookieName = obj.getAttribute( 'name' ); 671 | var fieldset = document.getElementById( global.mode ); 672 | 673 | var checkBoxList = fieldset.querySelectorAll( 'input' ); 674 | var body = document.querySelector( 'body' ); 675 | for (i = 0, lenx = checkBoxList.length; i < lenx; i++ ){ 676 | var value = checkBoxList[i].getAttribute( 'value' ); 677 | checkBoxList[i].removeAttribute('checked'); 678 | if( value === userPrefix+'-'+config.DefaultImageReplacementCheckbox.value){ 679 | replaceImgSpan(); 680 | } 681 | body.classList.remove( value ); 682 | 683 | } 684 | var newClass = obj.getAttribute( 'value' ); 685 | obj.setAttribute( 'checked', 'checked' ); 686 | var value = obj.getAttribute( 'value' ); 687 | if( value === userPrefix+'-'+config.ImageReplacementCheckbox.value){ 688 | replaceImg(); 689 | } 690 | body.classList.add( newClass ); 691 | createCookie(global.cookieName, newClass,'180'); 692 | } 693 | 694 | /** 695 | Image replacement helpers 696 | **/ 697 | 698 | function setImgtab(){ 699 | global.imgSpan = new Array; 700 | var selector = '.'+ userPrefix+'-'+config.ImageReplacementCSS.replacementCss; 701 | global.imgTab = document.querySelectorAll( selector ); 702 | for (j = 0, len = global.imgTab.length; j < len; j++ ){ 703 | var imgPReplacement = document.createElement( 'span' ); 704 | var imgAlt = global.imgTab[j].getAttribute( 'alt' ); 705 | var imgTxtReplacement = document.createTextNode( imgAlt ); 706 | imgPReplacement.appendChild( imgTxtReplacement ); 707 | imgPReplacement.classList.add( userPrefix+'-'+config.ImageReplacementCSS.replacementCss ); 708 | imgPReplacement.classList.add( userPrefix+'-'+config.ImageReplacementCSS.replacementStyle ); 709 | global.imgSpan[j] = imgPReplacement; 710 | } 711 | } 712 | function replaceImg(){ 713 | for (j = 0, len = global.imgTab.length; j < len; j++ ){ 714 | if( global.imgTab[j].parentNode ){ 715 | var parent = global.imgTab[j].parentNode; 716 | global.imgTab[j] = parent.replaceChild( global.imgSpan[j], global.imgTab[j] ); 717 | } 718 | } 719 | } 720 | function replaceImgSpan(){ 721 | for (j = 0, len = global.imgSpan.length; j < len; j++ ){ 722 | if( global.imgSpan[j].parentNode ){ 723 | var parent = global.imgSpan[j].parentNode; 724 | global.imgSpan[j] = parent.replaceChild( global.imgTab[j], global.imgSpan[j] ); 725 | } 726 | } 727 | } 728 | 729 | /** 730 | Modal manager 731 | **/ 732 | 733 | function dialog( returnTo ) { 734 | //on ajoute une classe au body 735 | document.body.classList.add(userPrefix+'-'+config.BodyActive.classSetting); 736 | var overlay = document.createElement( 'div' ); 737 | overlay.classList.add( userPrefix+'-'+config.Overlay.classSetting ); 738 | document.body.appendChild(overlay); 739 | 740 | //open 741 | global.openObj = document.getElementById( userPrefix ); 742 | global.openObj.style.display = 'block'; 743 | document.getElementById( userPrefix+'-'+config.CloseButton.id ).focus(); 744 | //Init events 745 | //escape close 746 | document.addEventListener( 'keydown', escClose, false ); 747 | //button close 748 | var closeButton = document.getElementById( userPrefix+'-'+config.CloseButton.id ); 749 | closeButton.addEventListener( 'click', buttonClose, false ); 750 | //trappingFocus 751 | document.addEventListener( 'focus', trappingFocus, true ); 752 | //close functions 753 | function escClose( event ){ 754 | if( event.keyCode === 27 ){ 755 | global.openObj.style.display = 'none'; 756 | returnTo.focus(); 757 | //reset listener and object trapping focus 758 | document.removeEventListener( 'keydown', escClose , false ); 759 | //on retire la classe du body 760 | document.body.classList.remove(userPrefix+'-'+config.BodyActive.classSetting); 761 | var overlay = document.querySelector( '.'+userPrefix+'-'+config.Overlay.classSetting ); 762 | if(overlay){ 763 | overlay.remove(); 764 | } 765 | //global.openObj = null; 766 | } 767 | } 768 | function buttonClose(){ 769 | global.openObj.style.display = 'none'; 770 | returnTo.focus(); 771 | //reset listener and object trapping focus 772 | closeButton.removeEventListener( 'click', buttonClose, false ); 773 | //on retire la classe du body 774 | document.body.classList.remove(userPrefix+'-'+config.BodyActive.classSetting); 775 | var overlay = document.querySelector( '.'+userPrefix+'-'+config.Overlay.classSetting ); 776 | if(overlay){ 777 | overlay.remove(); 778 | } 779 | //reset object trapping focus 780 | //global.openObj = null 781 | } 782 | } 783 | /* Generic trapping focus function (based on global.openObj setting) */ 784 | function trappingFocus( event ){ 785 | if ( global.openObj && !global.openObj.contains( event.target ) ) { 786 | event.stopPropagation(); 787 | global.openObj.focus(); 788 | } 789 | } 790 | 791 | /** 792 | Cookies 793 | **/ 794 | function createCookie( name, value, days ) { 795 | if ( days ) { 796 | var datetime = new Date(); 797 | datetime.setTime( datetime.getTime() + ( days * 24 * 60 * 60 * 1000 ) ); 798 | var expires = "; expires=" + datetime.toGMTString(); 799 | } 800 | else var expires = ""; 801 | document.cookie = name + "=" + value + expires + "; path=/"; 802 | } 803 | function readCookie( name ) { 804 | var nameEQ = userPrefix+'-'+name + "="; 805 | var ca = document.cookie.split( ';' ); 806 | for(var i = 0; i < ca.length; i++ ) { 807 | var c = ca[i]; 808 | while ( c.charAt(0) == ' ' ) c = c.substring( 1, c.length ); 809 | if ( c.indexOf( nameEQ ) == 0 ) return c.substring( nameEQ.length, c.length ); 810 | } 811 | return null; 812 | } 813 | function eraseCookie( name ) { 814 | createCookie( name , "", -1 ); 815 | } 816 | } )(); 817 | 818 | //Polyfill pour la méthode remove non disponible dans InternetExplorer 819 | //Credit : https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md 820 | 821 | (function (arr) { 822 | arr.forEach(function (item) { 823 | if (item.hasOwnProperty('remove')) { 824 | return; 825 | } 826 | Object.defineProperty(item, 'remove', { 827 | configurable: true, 828 | enumerable: true, 829 | writable: true, 830 | value: function remove() { 831 | if (this.parentNode !== null) 832 | this.parentNode.removeChild(this); 833 | } 834 | }); 835 | }); 836 | })([Element.prototype, CharacterData.prototype, DocumentType.prototype]); --------------------------------------------------------------------------------