"Scopri il Nostro Nuovo Progetto!" - YOUR SITE

Vai ai contenuti
TESTI E AUMENTO
Trucchi ed esempi software Incomedia ®
TESTI E AUMENTO
Trucchi ed esempi software Incomedia ®
BOX ACCESSIBILITÁ TESTI

SEMPLICE BOX
accessibilità testi
Aumenta o diminuisci i caratteri del tuo sito web
VISIBILE SOLO DA PC
Caratteristiche:
  • Agisce sul body della pagina e i suoi contenuti
  • Non influisce sui content slider che mantengono la transizione e la loro immagine
  • nessun richiamo a CSS esterni
  • Mantiene le modifiche iniziali
  • Codice all'occorrenza modificabile per personalizzazione varie  
  • Il codice va inserito in un normale oggetto html e posto sulla sticky bar
  • L'aumento dei testi non è circoscritto ad un numero predefinito
  • 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 e utilizzare la semplice combinazione dei tasti CTR+ e CTRL- che fa la stessa cosa.
CONTRO
Può essere fastidioso l'apparizione di strisce blu sui menu header e stiky-bar nel momento in cui ci si clicca sopra.
CODICE DA INSERIRE:▼


<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à Testo
  </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>
  
  <!-- 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">Mantieni Modifiche (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: 30px;
      right: 20px;
      width: 40px;
      height: 40px;
      background-color: red;
      color: white;
      border: none;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1001;
      font-size: 18px; /* Fisso, non deve cambiare */
  }

  /* Pannello accessibilità */
  #accessibilityPanel {
      position: fixed;
      top: 20px;
      right: 80px;
      width: 250px;
      background: rgba(255, 255, 255, 0.8);
      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;
  }

  /* 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;
  }

  /* Contenitore per i selettori colore */
  .color-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
  }

  .color-picker {
      border: none;
      width: 40px;
      height: 30px;
      cursor: pointer;
  }

  /* 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>
  function changeFontSize(factor) {
      let baseSize = parseFloat(localStorage.getItem("baseFontSize")) || 16; // Base di partenza
      let newSize = baseSize + factor;

      if (newSize < 10) newSize = 10;
      if (newSize > 32) newSize = 32;

      document.querySelectorAll("body *:not(.access-btn):not(.static-text):not(#accessibilityToggle)").forEach(el => {
          el.style.fontSize = newSize + "px";
      });

      localStorage.setItem("baseFontSize", newSize);
  }

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

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

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

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

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

  document.getElementById("bgColorPicker").addEventListener("input", function() {
      let color = this.value;
      document.getElementById("accessibilityPanel").style.backgroundColor = color;
      localStorage.setItem("panelBgColor", color);
  });

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

  window.addEventListener("load", function() {
      // Applica i colori salvati
      const savedBgColor = localStorage.getItem("panelBgColor");
      const savedBtnColor = localStorage.getItem("btnColor");
      if (savedBgColor) document.getElementById("accessibilityPanel").style.backgroundColor = savedBgColor;
      if (savedBtnColor) document.querySelectorAll(".access-btn").forEach(btn => btn.style.backgroundColor = savedBtnColor);

      // Applica la dimensione del testo salvata
      let savedFontSize = parseFloat(localStorage.getItem("baseFontSize"));
      if (savedFontSize) {
          document.querySelectorAll("body *:not(.access-btn):not(.static-text):not(#accessibilityToggle)").forEach(el => {
              el.style.fontSize = savedFontSize + "px";
          });
      }
  });
</script>
Torna ai contenuti