"Scopri il Nostro Nuovo Progetto!" - YOUR SITE

Vai ai contenuti
TESTI E CONTRASTO
Trucchi ed esempi software Incomedia ®
TESTI E CONTRASTO
Trucchi ed esempi software Incomedia ®
BOX ACCESSIBILITÁ TESTI
VISIBILE SOLO DA PC

SEMPLICE BOX
accessibilità testi e Contrasto
Caratteristiche:
  • Agisce sul body della pagina e i suoi contenuti
  • Non influisce sui content slider che mantengono la transizione e la loro immagine
  • Agisce pagina per pagina.
  • Codice all'occorrenza modificabile per personalizzazione varie  
  • Il codice va inserito in un normale oggetto html e posto sulla sticky bar
  • Il controllo della posizione dell'oggetto html avviene da codice
  • L'aumento dei testi e circoscritto ad un aumento caratteri nell'ordine di  1/20 esimo ma può essere portato anche al 30% (non consigliato)
  • L'oggetto è facilmente occultabile con le opzioni incomedia a partire dalla risoluzione 960Px o a quella che ritenete opportuno adottare.
PRO
Se non piace può essere non installato ☺
CONTRO
Può essere fastidioso l'apparizione di strisce blu sui menu header e stiky-bar nel momento in cui ci si clicca sopra.
Non mantiene le modifiche tra il cambio pagina
Particolari layout potrebbero rendere inefficace il codice.Da provare!!!
CODICE DA INSERIRE:▼

INSERISCI IN OGGETTO TESTO HTML "CODICE HTML"

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- Pulsante per aprire il pannello -->
<button id="accessibilityToggle" aria-label="Apri pannello accessibilità">⚙️</button>

<!-- Pannello di accessibilità -->
<div id="accessibilityPanel" role="dialog" aria-labelledby="accessibilityTitle">
  <h3 id="accessibilityTitle" class="static-text">
      <i class="fas fa-universal-access"></i> Accessibilità Testi
  </h3>
  
  <!-- Controlli per il testo e contrasto -->
  <button class="access-btn" id="zoomInBtn">Aumenta testo</button>
  <button class="access-btn" id="zoomOutBtn">Diminuisci testo</button>
  <button class="access-btn" id="highContrastBtn">Modalità Alto Contrasto</button>
  
   <!-- Selettori di colore personalizzati
  <div class="color-container">
      <label for="bgColorPicker" class="static-text">Sfondo Pannello:</label>
      <input type="color" id="bgColorPicker" class="color-picker">
  </div>
  
  <div class="color-container">
      <label for="btnColorPicker" class="static-text">Colore Pulsanti:</label>
      <input type="color" id="btnColorPicker" class="color-picker">
  </div>-->
 
  
  <button class="access-btn" id="closePanelBtn">Chiudi il Box (ESC)</button>
  
  <button class="access-btn" id="resetBtn">Reset (Ricarica Pagina)</button>
  
  <!-- Footer con la frase desiderata -->
  <footer class="access-footer static-text">
      Your Site
  </footer>
</div>

<style>
  /* Pulsante per aprire il pannello */
  #accessibilityToggle {
      position: fixed;
      top: 28px;
      right: 20px;
      width: 40px;
      height: 40px;
      background-color: yellow;
      color: white;
      border: none;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1001;
      font-size: 18px;
  }

  /* Pannello accessibilità */
  #accessibilityPanel {
      position: fixed;
      top: 20px;
      right: 80px;
      width: 250px;
      background: rgba(124, 156, 232, 0.9);
      backdrop-filter: blur(6px);
      padding: 15px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      display: none;
      z-index: 1000;
      transition: all 0.3s ease-in-out;
  }
  /* Escludere il titolo e le label dall'ingrandimento */
  .static-text {
      font-size: 18px !important;
  }

  /* Stile pulsanti */
  .access-btn {
      width: 100%;
      padding: 10px;
      margin: 5px 0;
      border: none;
      background-color: #0078D7;
      color: white;
      font-size: 16px;
      cursor: pointer;
      border-radius: 5px;
      transition: background 0.3s;
  }

  .access-btn:hover {
      background-color: #0056b3;
  }

  /* Modalità alto contrasto */
  .high-contrast {
      background-color: black !important;
      color: white !important;
  }

  .high-contrast *:not(#accessibilityPanel, #accessibilityPanel *, #accessibilityToggle) {
      background-color: transparent !important;
      color: white !important;
  }
  
  /* Stile del footer */
  .access-footer {
      margin-top: 15px;
      font-size: 14px;
      text-align: center;
  }

  /* Alta visibilità del cursore */
  *:focus {
      outline: 3px solid #0078D7;
  }

</style>

<script>
  let fontSizeMultiplier = 1;
  const maxMultiplier = 1.2;
  const minMultiplier = 0.8;
  
  function changeFontSize(multiplier) {
      let newMultiplier = fontSizeMultiplier * multiplier;
      if (newMultiplier > maxMultiplier || newMultiplier < minMultiplier) return;
      fontSizeMultiplier = newMultiplier;
      
      document.querySelectorAll("body *:not(#accessibilityPanel, #accessibilityPanel *, #accessibilityToggle)").forEach(el => {
          let currentSize = window.getComputedStyle(el, null).getPropertyValue('font-size');
          el.style.fontSize = (parseFloat(currentSize) * multiplier) + "px";
      });
      localStorage.setItem("fontSizeMultiplier", fontSizeMultiplier);
  }

  document.getElementById("zoomInBtn").addEventListener("click", function() {
      changeFontSize(1.1);
  });

  document.getElementById("zoomOutBtn").addEventListener("click", function() {
      changeFontSize(0.9);
  });

  document.getElementById("accessibilityToggle").addEventListener("click", function() {
      let panel = document.getElementById("accessibilityPanel");
      panel.style.display = panel.style.display === "block" ? "none" : "block";
  });

  document.getElementById("highContrastBtn").addEventListener("click", function() {
      document.body.classList.toggle("high-contrast");
      localStorage.setItem("highContrast", document.body.classList.contains("high-contrast"));
  });

  document.getElementById("closePanelBtn").addEventListener("click", function() {
      document.getElementById("accessibilityPanel").style.display = "none";
  });

  document.getElementById("resetBtn").addEventListener("click", function() {
      localStorage.clear();
      location.reload();
  });

   /* Cambio colore dinamico */
  document.getElementById("bgColorPicker").addEventListener("input", function() {
      document.getElementById("accessibilityPanel").style.backgroundColor = this.value;
      localStorage.setItem("bgColor", this.value);
  });

  document.getElementById("btnColorPicker").addEventListener("input", function() {
      document.querySelectorAll(".access-btn").forEach(btn => {
          btn.style.backgroundColor = this.value;
      });
      localStorage.setItem("btnColor", this.value);
 
  });
</script>

Torna ai contenuti