L'uso dell'attributo alt per text-as-graphics è ok?
Esistono diversi modi per presentare il testo sulla tua pagina web esattamente nel carattere che il tuo designer ha deciso; come immagine, un flash hack, alcuni hack javascript, caratteri dinamici. Ma fino ad oggi, l'unica cosa che sembra funzionare su tutte le piattaforme è la vecchia soluzione di testo come grafica. Questo è un kludge, ovviamente, ma per scopi di accessibilità, usare un'immagine che contiene il testo come attributo alt è considerato ok? Gli utenti con problemi di vista otterrebbero il testo, così come i motori di ricerca. Oppure mi sfugge qualcosa?
Con alcuni avvertimenti.
- Se si modifica l'immagine in futuro, è necessario mantenere anche alt attributo.
- Sembrerebbe che i motori di ricerca assegnano un valore più alto al testo reale rispetto a un'immagine con un attributo alt.
- IMO, se lo stai usando per la navigazione, sarebbe meglio usare @ font-face o JavaScript per migliorare un menu di testo piuttosto che sostituirlo con immagini dall'inizio.
Ecco a cosa serve alt, per screen reader e robot
Se includi le immagini (tramite img) in HTML, sempre usa alt attributo ( a volte con valore vuoto).
Se l'immagine contiene del testo e questo testo è (parte di) il contenuto pertinente che desideri trasmettere, includi questo testo in alt valore.
ma ai fini dell'accessibilità, l'utilizzo di un'immagine contenente il testo come attributo alt è considerato corretto?
No. Sebbene non sia una barriera per un utente non vedente o di un browser di testo, gli utenti dislessici o ipovedenti (che hanno le immagini abilitate) potrebbero avere problemi con le immagini di testo:
- Gli utenti non possono regolare la dimensione del carattere, l'altezza della linea, la spaziatura delle lettere.
- Gli utenti non possono cambiare la famiglia di caratteri.
- Gli utenti non possono cambiare i colori/il contrasto.
- Gli utenti non possono selezionare il testo (ad es. Per copia e incolla). (come annotato di Kit Grose)
Probabilmente non è un grosso problema per il testo breve (una sola parola, titolo molto breve, pulsante di invito all'azione, ...), ma può essere una barriera di accessibilità se usato per un testo più lungo.
Uno dei maggiori svantaggi del testo come grafica è la loro incapacità di ridimensionare con le dimensioni del testo (nota: dimensioni del testo, non zoom). Dimensionare l'immagine in ems potrebbe aiutare a mitigare questo.
Inoltre, tieni presente che la manutenibilità soffre molto quando si usano le immagini, a meno che non siano generate dinamicamente.
Ed è abbastanza inefficiente pubblicare un'immagine quando tutto ciò che desideri è un carattere personalizzato: la dimensione del file di un'immagine è MOLTO maggiore del testo equivalente.
Non ci vedo alcun problema. Non ho mai sentito nessuno dire che è una cattiva idea. Ma cerca di evitare o eseguire le seguenti operazioni:
- trasformare l'intero contenuto di una pagina in un'immagine (errore comune commesso da persone che non sanno cosa stanno facendo) - questo rende difficile analizzare praticamente qualsiasi cosa, inclusi i motori di ricerca
- cerca di evitarlo il più possibile - è sempre meglio avere del testo per cose che immagini; semplifica semplicemente tutto (copiare un pezzo di testo, SEO, ecc. ecc.)
- aggiungi sia una proprietà alt che title - questo assicura che quando le persone passano sopra l'immagine vedranno il suggerimento (perché diversi browser ne mostrano diversi); La maggior parte lo faccio su immagini che sono collegamenti
Come altri hanno già detto, se si utilizza questo approccio, è necessario fornire un testo alternativo, tuttavia, consiglio vivamente di non farlo.
Lo zoom verrà interrotto - Le immagini raster non sono scalabili in dimensioni maggiori.
Le immagini occupano più spazio del testo, ciò aumenterà drasticamente il tempo di caricamento della pagina.
Visualizzatori che cambiano i colori del browser, ad es. per motivi di leggibilità, passare alla luce ad alto contrasto su oscurità, non vedrà le immagini correttamente e non vedrà l'alt.
La funzionalità Copia incolla verrà interrotta (gli utenti non saranno in grado di copiare alcun testo e incollarlo in un documento come testo).
Layout e reattività - La leggibilità sul dispositivo mobile potrebbe essere interrotta - Se il testo non è testo, i browser potrebbero non essere in grado di suddividerlo in modo diverso in righe per adattarlo a schermi più piccoli.
Se si posiziona ogni parola o frase nella propria immagine, è possibile migliorare il layout, tuttavia, è possibile interrompere l'analisi del testo (SEO).
Esistono metodi comunemente supportati per imporre i caratteri di visualizzazione utilizzando CSS e file di caratteri. Se alcuni browser antichi non lo supportano, non dovresti far soffrire tutti gli utenti dei browser moderni per il loro bene.
Il valore del testo alternativo sta diminuendo dal punto di vista SEO, quindi sembra che tutti possiamo concentrarci sull'accessibilità e ottimizzare i testi alternativi per gli screen reader.
Per quanto ne so, ha solo una certa influenza percentuale sulla tua classifica SERP