AccesSight

Améliore l'accessibilité des sites web pour les utilisateurs malvoyants.

当前为 2024-03-16 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name AccesSight
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.1
  5. // @description Améliore l'accessibilité des sites web pour les utilisateurs malvoyants.
  6. // @author YGL, Benjamin Moine
  7. // @include *
  8. // @grant GM_getValue
  9. // @grant GM_setValue
  10. // @grant GM_deleteValue
  11. // @license Gnu GPL 3.0.
  12. // ==/UserScript==
  13.  
  14. (function() {
  15. 'use strict';
  16.  
  17. // Ressources de traduction pour les différentes langues
  18. const translations = {
  19. fr: {
  20. appTitle: "AccesSight",
  21. functionality1: "Fonctionnalité 1",
  22. functionality2: "Fonctionnalité 2",
  23. functionality3: "Fonctionnalité 3",
  24. // Ajoutez les autres traductions ici...
  25. },
  26. en: {
  27. appTitle: "AccesSight",
  28. functionality1: "Functionality 1",
  29. functionality2: "Functionality 2",
  30. functionality3: "Functionality 3",
  31. // Ajoutez les autres traductions ici...
  32. },
  33. // Ajoutez les autres langues ici...
  34. };
  35.  
  36. // Fonction pour détecter la langue de l'utilisateur
  37. function detectUserLanguage() {
  38. const userLanguage = navigator.language || navigator.userLanguage;
  39. return userLanguage.split("-")[0];
  40. }
  41.  
  42. // Langue par défaut
  43. const defaultLanguage = 'fr';
  44.  
  45. // Langue de l'utilisateur
  46. const userLanguage = detectUserLanguage();
  47.  
  48. // Initialisation de i18next avec la langue détectée
  49. i18next.init({
  50. lng: userLanguage || defaultLanguage,
  51. resources: translations,
  52. fallbackLng: defaultLanguage
  53. });
  54.  
  55. // Fonction pour changer la langue
  56. function changeLanguage(lang) {
  57. i18next.changeLanguage(lang);
  58. }
  59.  
  60. // Création du menu pour choisir la langue
  61. const languageMenu = document.createElement('div');
  62. languageMenu.innerHTML = `
  63. <select id="languageSelect">
  64. <option value="fr">Français</option>
  65. <option value="en">English</option>
  66. <!-- Ajoutez les autres langues ici -->
  67. </select>
  68. `;
  69. languageMenu.style.position = 'fixed';
  70. languageMenu.style.top = '20px';
  71. languageMenu.style.right = '20px';
  72. document.body.appendChild(languageMenu);
  73.  
  74. // Événement pour changer la langue lorsque l'utilisateur choisit une option
  75. document.getElementById('languageSelect').addEventListener('change', function() {
  76. const selectedLanguage = this.value;
  77. changeLanguage(selectedLanguage);
  78. });
  79.  
  80. // Styles pour l'interface utilisateur
  81. const styles = `
  82. /* Fond sombre pour l'application */
  83. body {
  84. background-color: #0f1c29;
  85. color: #fff; /* Couleur du texte */
  86. }
  87.  
  88. /* Menu utilisateur */
  89. header {
  90. background-color: #1f364d;
  91. border-radius: 10px;
  92. padding: 20px;
  93. position: fixed;
  94. top: 20px;
  95. right: 20px;
  96. z-index: 1000;
  97. }
  98.  
  99. /* Liens du menu */
  100. nav ul {
  101. list-style-type: none;
  102. padding: 0;
  103. }
  104.  
  105. nav ul li {
  106. display: inline;
  107. margin-right: 10px;
  108. }
  109.  
  110. nav ul li a {
  111. color: #fff;
  112. text-decoration: none;
  113. padding: 5px 10px;
  114. border-radius: 5px;
  115. transition: background-color 0.3s ease;
  116. }
  117.  
  118. nav ul li a:hover {
  119. background-color: #2e4a62;
  120. }
  121.  
  122. /* Contenu principal */
  123. main {
  124. margin-top: 100px; /* Pour éviter que le contenu ne soit caché par le header */
  125. }
  126.  
  127. /* Pied de page */
  128. footer {
  129. background-color: #1f364d;
  130. text-align: center;
  131. padding: 20px;
  132. color: #fff;
  133. clear: both;
  134. }
  135. `;
  136.  
  137. // Injecter les styles dans la page
  138. const styleElement = document.createElement('style');
  139. styleElement.textContent = styles;
  140. document.head.appendChild(styleElement);
  141.  
  142. // Balises sémantiques pour améliorer l'accessibilité
  143. const headerElement = document.createElement('header');
  144. headerElement.innerHTML = `
  145. <h1>${i18next.t('appTitle')}</h1>
  146. <nav>
  147. <ul>
  148. <li><a href="#fonctionnalite1">${i18next.t('functionality1')}</a></li>
  149. <li><a href="#fonctionnalite2">${i18next.t('functionality2')}</a></li>
  150. <li><a href="#fonctionnalite3">${i18next.t('functionality3')}</a></li>
  151. </ul>
  152. </nav>
  153. `;
  154. document.body.prepend(headerElement);
  155.  
  156. const mainElement = document.createElement('main');
  157. mainElement.innerHTML = `
  158. <section id="fonctionnalite1">
  159. <h2>${i18next.t('functionality1')}</h2>
  160. <p>Description de la fonctionnalité 1.</p>
  161. </section>
  162. <section id="fonctionnalite2">
  163. <h2>${i18next.t('functionality2')}</h2>
  164. <p>Description de la fonctionnalité 2.</p>
  165. </section>
  166. <section id="fonctionnalite3">
  167. <h2>${i18next.t('functionality3')}</h2>
  168. <p>Description de la fonctionnalité 3.</p>
  169. </section>
  170. `;
  171. document.body.appendChild(mainElement);
  172.  
  173. const footerElement = document.createElement('footer');
  174. footerElement.innerHTML = `<p>${i18next.t('appTitle')} - Tous droits réservés</p>`;
  175. document.body.appendChild(footerElement);
  176. })();