Scritto da Chris Schmidt il 20 dicembre 2022

Eye-Able Adatta manualmente al tuo sito web

Accessibilità

Eye-Able esegue manualmente il passaggio del proprio sito WebLaptopbildschirm auf dem Programmiersprache zu sehen ist.

Grazie alla possibilità di controllare autonomamente la configurazione, puoi adattare Eye-Able, andando oltre le funzionalità del configuratore, al tuo sito web.

Crediti fotografici : Any IP Ltd, il collegamento all'autore è Simplex - Web Design Sydney 

In caso di controllo autonomo sulla configurazione, è possibile adattare Eye-Able, oltre al configuratore, al proprio sito web. I vantaggi di tale personalizzazione sono descritti nell'articolo "Quali sono i vantaggi di una personalizzazione iniziale?". Per effettuare queste personalizzazioni è necessaria una conoscenza avanzata di HTML e CSS. Pertanto, per ogni sito web offriamo la possibilità di un test e un'ottimizzazione completi di Eye-Able. Tuttavia, alcune opzioni di questa personalizzazione sono disponibili in qualsiasi momento anche per gli utenti non gestiti di Eye-Able. Le impostazioni disponibili sono presentate di seguito.

Nota: le seguenti configurazioni rappresentano solo un sottoinsieme dei parametri disponibili per un'ottimizzazione completa tramite Eye-Able.

Per estendere la configurazione di Eye-Able, è necessario aggiungere ulteriori coppie chiave-valore alla variabile eyeAble_pluginConfig. Un esempio di configurazione è disponibile qui. (https://www.eye-able-cdn.com/example.js ).

Oltre all'integrazione della configurazione direttamente in linea, le modifiche alla configurazione Eye-Able possono essere eseguite anche tramite una funzione separata. Per poter apportare autonomamente modifiche alla configurazione, il metodo tramite Il metodo eyeAble_updateConfig() pertanto si raccomanda:

<script type="text/javascript" >
    function eyeAble_updateConfig() {
        eyeAble_pluginConfig.topPosition = "200px"; //Verändere die Top-Position des Icons
        eyeAble_pluginConfig.maxMagnification = 10;
        if(eyeAble_pluginConfig.blacklistContrast){
            //append to the existing rules, otherwise they get overwritten
            eyeAble_pluginConfig.blacklistContrast += ".myClass";
        } else {
            eyeAble_pluginConfig.blacklistContrast = ".myClass";
        }
    }
</script>

I parametri che non devono essere modificati possono essere commentati.

Ingrandimento:

I seguenti parametri limitano l'ingrandimento:

  • ingrandimento massimo : [int] Descrive l'ingrandimento massimo (predefinito: 21)

  • maxMobileMagnification : [int] Descrive l'ingrandimento mobile massimo (predefinito: 3).

Posizione:

Sono disponibili i seguenti parametri per modificare la posizione dell'icona principale:

  • topPosition: [Stringa] Imposta la posizione superiore dell'icona sul desktop in % o px (Predefinito: "10%")

  • posizione destra: [Stringa] Imposta la posizione destra dell'icona sul desktop in px. Se sidePosition è impostato su "left", verrà impostata la posizione sinistra (predefinito: "10px").

  • mobileBottomPosition : [Stringa] Imposta la posizione inferiore dell'icona mobile in % o px (predefinito: "15%").

  • mobileRightPosition : [Stringa] Imposta la posizione corretta dell'icona mobile in px (predefinito: "10px").

  • posizione laterale : [Stringa] Imposta il lato in cui appare l'icona: "sinistra" o "destra" (Predefinito: "destra")

Aspetto:

Esistono i seguenti parametri per modificare l'aspetto:

  • mainIconAlt: [int] Cambia l'icona principale scegliendo tra tre varianti: 0, 1 o 2 (predefinito: 0)

  • iconaDimensione: [int] Modifica le dimensioni dell'icona sul desktop, valori consigliati tra 50 e 70 pixel (predefinito: 70px)

  • Dimensioni icona mobile: [int] Modifica le dimensioni dell'icona mobile, valori consigliati tra 35 e 50 pixel (predefinito: 50px).

Lettore di schermo:

Per modificare le classi CSS di personalizzazione è possibile utilizzare i seguenti parametri:

  • CSS personalizzato per la lista nera di SR: [String] Modifica la classe CSS degli elementi da escludere (predefinito: eyeAble_SrSkip).

  • customSrStartCSS: [String] Modifica la classe CSS per il nuovo elemento di avvio (predefinito: eyeAble_SrStart).

  • CSS personalizzato per SrText: [String] Modifica la classe CSS del blocco da leggere (predefinito: eyeAble_SrText).

Escludi elementi dalle funzioni:

I seguenti parametri possono essere utilizzati per escludere determinati elementi dalle funzioni di Eye-Able. Ciò è utile per il testo che fuoriesce dal suo contenitore quando si ingrandisce, o per gli elementi i cui colori non devono essere modificati dal contrasto o dalla modalità notturna. Gli elementi possono essere selezionati utilizzando i selettori CSS nativi. Ulteriori informazioni Qui I selettori CSS multipli sono separati da virgole. L'eccezione si applica anche a tutti gli elementi figli degli elementi selezionati!

  • lista neraContrasto : [Stringa] Escludi gli elementi dalla regolazione del colore del contrasto o della modalità notturna.


Per esempioEs ist Code zu sehen.

  • blacklistFontsize : [Stringa] Escludi elementi dall'ingrandimento del carattere.

Per esempio

  • forza Sfondo Bianco : [Stringa] Forza uno sfondo bianco quando è abilitata la modalità notturna o la modalità contrasto.

Sebastian Fjeld

Sebastian Fjeld has been part of the team as a professional voiceover artist and copywriter at Eye-Able® since the beginning. He studied voice acting at a university and was trained by actors. Currently he is completing his education as an interpreter for various languages.

Altri contributi

Se può essere un po' di più

Filtro

Filtra per categoria

Conferma la tua selezione con il pulsante alla fine dell'elenco dopo aver scelto le categorie.

Reimposta filtri

Il nuovo design di HubSpot dice addio all'arancione: le ragioni legate all’accessibilità

Leggi la storia

AC Monza sceglie Eye-Able per l'accessibilità digitale

Leggi la storia

Carrefour multata per sito non accessibile: la sentenza del 2026 dimostra che l’European Accessibility Act è ormai una realtà concreta per e-commerce e servizi digitali.

Leggi la storia

Eye‑Able al Netcomm Forum 2026: l’accessibilità digitale come nuovo paradigma del digital commerce

Leggi la storia

Hai bisogno di maggiori informazioni?

Contattaci e saremo lieti di aiutarti.

a man with down syndrome shows a woman something on the computer. they both laugh