🎉 Nuovo strumento: Lingua semplice. Fate clic sul pulsante e provatelo dal vivo

Incorporare Eye-Able direttamente nella pagina

Questa immagine mostra una scrivania con molti schermi in un ambiente fresco.

Condividi post:

Per impostazione predefinita, il software di assistenza Eye-Able® è integrato in una pagina web come icona fissa rispetto alla finestra di visualizzazione.
Questa immagine mostra una scrivania con molti schermi in un ambiente fresco.

Incorporare Eye-Able direttamente nella pagina

Condividi questo post:

Questa immagine mostra una scrivania con molti schermi in un ambiente fresco.
Per impostazione predefinita, il software di assistenza Eye-Able® è integrato in una pagina web come icona fissa rispetto alla finestra di visualizzazione.

Per impostazione predefinita, il software di assistenza Eye-Able® è integrato in un sito web come icona fissa rispetto al viewport. Questa posizione prominente, insieme alle icone ad alto contrasto, si è dimostrata facile da usare nei test degli utenti, anche per gli utenti con gravi disabilità visive. Tuttavia, Eye-Able® può anche essere incorporato direttamente nel sito web senza problemi. Ciò consente l'integrazione nella barra di navigazione o in altri contenitori esistenti.

Qualsiasi elemento della pagina può essere utilizzato come alternativa all'icona normale. Le funzioni di "apertura e chiusura" dell'icona normale sono collegate a questo elemento. Il nuovo elemento di destinazione deve essere creato o personalizzato per questo!

Per creare il collegamento, è necessario aggiungere l'ID CSS"eyeAble_customToolOpenerID" al nuovo elemento di destinazione. Non appena un elemento con questo ID esiste in una pagina, il logo abituale viene nascosto e a questo evento viene aggiunto un EventListener corrispondente. La posizione della barra degli strumenti rimane quella del logo normale.


Se devono essere incorporati più pulsanti di apertura/chiusura, la classe CSS "eyeAble_customToolOpenerClass" può essere utilizzata. Il comportamento è identico a quello del metodo CSS ID.

 

Nota: in tutte le sottopagine in cui non è presente un elemento con l'ID eyeAble_customToolOpenerID o la classe classe eyeAble_customToolOpenerClass il logo normale continuerà a essere visualizzato!

Se Eye-Able deve essere collegato a un elemento della pagina senza nascondere il logo principale, il parametro "eyeAble_customToolOpenerNoHideClass" può essere utilizzata.


È anche possibile aprire la barra degli strumenti di Eye-Able direttamente tramite un link. Per farlo, è sufficiente impostare "javascript:EyeAbleAPI.toggleToolbar()" come destinazione del collegamento


Assicurarsi che il punto di accesso per Eye-Able sia raggiungibile con la tastiera e abbia un testo accessibile agli screen reader. Un'eventuale dicitura potrebbe essere: "Aprire il software di assistenza visiva. Accessibile con la tastiera tramite ALT + 1".


A scopo dimostrativo, questo incorporamento viene effettuato su questa pagina con il seguente logo:

È possibile scaricare e incorporare il logo Eye-Able qui (o come SVG qui):

Logo Eye-Able - uomo su sfondo nero

Facile per tutti

Siete interessati? Saremo lieti di aiutarvi.

Con oltre 25 funzioni relative all'accessibilità digitale, Eye-Able vi aiuta anche a ridurre le vostre barriere a lungo termine. Potrete rendere le vostre informazioni accessibili a tutti e non escludere alcun visitatore, in breve: potrete attingere a un nuovo gruppo target senza elevati volumi di marketing.

L'icona mostra la figura di accessibilità

Colloquio di consulenza

Consultazione non vincolante sull'accessibilità digitale in generale

L'icona mostra la figura di accessibilità

Analisi

Discussione sul possibile potenziale di ottimizzazione del vostro sito web

L'icona mostra la figura di accessibilità

Demo dal vivo

Presentazione del software di assistenza direttamente sul vostro sito web

Ulteriori contributi

Se volete un po' di più: