Améliore l'accessibilité des sites web pour les utilisateurs malvoyants.
目前為
// ==UserScript==
// @name AccesSight
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Améliore l'accessibilité des sites web pour les utilisateurs malvoyants.
// @author YGL, Benjamin Moine
// @include *
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_deleteValue
// @license Gnu GPL 3.0.
// ==/UserScript==
(function() {
'use strict';
// Ressources de traduction pour les différentes langues
const translations = {
fr: {
appTitle: "AccesSight",
functionality1: "Fonctionnalité 1",
functionality2: "Fonctionnalité 2",
functionality3: "Fonctionnalité 3",
// Ajoutez les autres traductions ici...
},
en: {
appTitle: "AccesSight",
functionality1: "Functionality 1",
functionality2: "Functionality 2",
functionality3: "Functionality 3",
// Ajoutez les autres traductions ici...
},
// Ajoutez les autres langues ici...
};
// Fonction pour détecter la langue de l'utilisateur
function detectUserLanguage() {
const userLanguage = navigator.language || navigator.userLanguage;
return userLanguage.split("-")[0];
}
// Langue par défaut
const defaultLanguage = 'fr';
// Langue de l'utilisateur
const userLanguage = detectUserLanguage();
// Initialisation de i18next avec la langue détectée
i18next.init({
lng: userLanguage || defaultLanguage,
resources: translations,
fallbackLng: defaultLanguage
});
// Fonction pour changer la langue
function changeLanguage(lang) {
i18next.changeLanguage(lang);
}
// Création du menu pour choisir la langue
const languageMenu = document.createElement('div');
languageMenu.innerHTML = `
<select id="languageSelect">
<option value="fr">Français</option>
<option value="en">English</option>
<!-- Ajoutez les autres langues ici -->
</select>
`;
languageMenu.style.position = 'fixed';
languageMenu.style.top = '20px';
languageMenu.style.right = '20px';
document.body.appendChild(languageMenu);
// Événement pour changer la langue lorsque l'utilisateur choisit une option
document.getElementById('languageSelect').addEventListener('change', function() {
const selectedLanguage = this.value;
changeLanguage(selectedLanguage);
});
// Styles pour l'interface utilisateur
const styles = `
/* Fond sombre pour l'application */
body {
background-color: #0f1c29;
color: #fff; /* Couleur du texte */
}
/* Menu utilisateur */
header {
background-color: #1f364d;
border-radius: 10px;
padding: 20px;
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
}
/* Liens du menu */
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
nav ul li a:hover {
background-color: #2e4a62;
}
/* Contenu principal */
main {
margin-top: 100px; /* Pour éviter que le contenu ne soit caché par le header */
}
/* Pied de page */
footer {
background-color: #1f364d;
text-align: center;
padding: 20px;
color: #fff;
clear: both;
}
`;
// Injecter les styles dans la page
const styleElement = document.createElement('style');
styleElement.textContent = styles;
document.head.appendChild(styleElement);
// Balises sémantiques pour améliorer l'accessibilité
const headerElement = document.createElement('header');
headerElement.innerHTML = `
<h1>${i18next.t('appTitle')}</h1>
<nav>
<ul>
<li><a href="#fonctionnalite1">${i18next.t('functionality1')}</a></li>
<li><a href="#fonctionnalite2">${i18next.t('functionality2')}</a></li>
<li><a href="#fonctionnalite3">${i18next.t('functionality3')}</a></li>
</ul>
</nav>
`;
document.body.prepend(headerElement);
const mainElement = document.createElement('main');
mainElement.innerHTML = `
<section id="fonctionnalite1">
<h2>${i18next.t('functionality1')}</h2>
<p>Description de la fonctionnalité 1.</p>
</section>
<section id="fonctionnalite2">
<h2>${i18next.t('functionality2')}</h2>
<p>Description de la fonctionnalité 2.</p>
</section>
<section id="fonctionnalite3">
<h2>${i18next.t('functionality3')}</h2>
<p>Description de la fonctionnalité 3.</p>
</section>
`;
document.body.appendChild(mainElement);
const footerElement = document.createElement('footer');
footerElement.innerHTML = `<p>${i18next.t('appTitle')} - Tous droits réservés</p>`;
document.body.appendChild(footerElement);
})();