Come posso nascondere una legenda del modulo HTML dai browser visivi, utilizzando i CSS, in modo accessibile?Nascondi la legenda del modulo HTML utilizzando i CSS
legend { display: none; }
non è un'opzione perché, a quanto ho capito, questo "nasconde" la legenda agli screen reader. Altri tentativi che ho fatto non rimuovono la legenda dal layout, cioè continua a occupare spazio.
Aggiunto come risposta invece di un commento, così posso ottenere più punti. :-)
Se vuoi davvero delle leggende, hai provato a inserire una spanna nella legenda ea posizionarla/manipolarla?
Capisco questo funziona in IE7 e Firefox ...
Anche se non è perfettamente "semanticamente pulito", questa sembra essere l'opzione migliore quindi lontano-upvoted. FYI, non so quanto tu sia serio, ma aggiungerlo come una vera risposta è perfettamente valido e altruista: gli altri trarranno beneficio da questa informazione, ed è questo che SO è tutto! –
Sono solo semi seriamente sarcastico. Cerco solo di aggiungere davvero le risposte che * so * hanno funzionato. Inizialmente questa era un'idea fuori dal comune, finché non hai confermato che funzionava, quindi non mi sembra che sia completamente mio. Sono comunque felice che funzioni (ho anche imparato qualcosa) e che le informazioni sono ora disponibili qui per gli altri. Va tutto bene :-) – edeverett
http://www.tyssendesign.com.au/articles/css/legends-of-style/è una risorsa importante per questa tecnica – morewry
Si potrebbe provare:
legend
{
position: absolute;
top: -1000px;
}
ho fatto - non ha funzionato. cambiare la posizione della legenda, almeno, non in Firefox. Non so perché sia - qualcosa di "speciale" sull'elemento legend? –
Questo non funzionerà in Firefox – rahul
Se vuoi davvero delle leggende, hai ho provato a mettere una spanna nella legenda ea posizionarla/manipolarla? – edeverett
Non si può fare questo in Firefox, perché è un bug nel browser.
Si possono trovare maggiori qui
Grande risorsa - grazie. Suppongo di essere bloccato con "display: none". –
Ok. Fatto. Grazie – rahul
Per quel che vale - e sono sicuro che vado a prendere in malo modo perché questo - tag leggenda sono uno dei pochi posti ho deliberatamente rompo le specifiche da lasciandoli fuori. Li sostituisco con un'intestazione del livello appropriato che fornisce le stesse informazioni all'utente ma senza i bug del browser.
(Sono felice di sentir parlare degli aspetti negativi del mondo reale di questo se chiunque può vedere un po ')
edit: Oh, e ci si dovrebbe chiedere perché gli utenti di tecnologie assistive vorrebbero ascoltare le leggende quando il browser usando gli utenti no. Se la risposta è semplicemente quella di soddisfare le specifiche HTML, usa display: none e con esso, non ostacolare l'esperienza utente di un gruppo fornendo informazioni inutili solo per una formalità.
Approccio interessante. Posso, ovviamente, vedere i benefici, anche se non sono sicuro di come reagirebbero i lettori di schermo. Immagino che potresti anche aggiungere una legenda vuota se è richiesta la convalida; Trovo utile essere valido al 100%, se non altro per evitare di pensare se sono invalido in un modo "accettabile" o meno. –
"per evitare di pensare se non sono valido in un modo" accettabile "o meno." Questa è una buona ragione, ma le leggende sembrano un pessimo aspetto delle specifiche e mal implementate nei browser, quindi penso che in questo caso non valga il mio tempo. (Ho aggiornato la mia risposta con un po 'di più del mio pensiero mentre stavate lasciando il commento.) – edeverett
Ottimo punto - dovrò pensarci! Non sono sicuro se questa domanda potrebbe finire per essere "non valida" o se c'è sempre una ragione giustificabile per fare ciò che pensavo dovessi fare ... –
Sì, c'è qualcosa di speciale. È un elemento sostituito come molti elementi del modulo. I browser hanno una formattazione predefinita molto specifica. Inoltre, non può essere costretto a comportarsi come un elemento normale usando display: block o display: inline, causando tentativi di sovrascrittura con CSS per ... non funziona bene.
Esistono alcune tecniche ben documentate che possono aiutare a realizzare ALCUNI effetti con legende, anche se sono necessarie soluzioni per una parvenza di compatibilità tra browser.
Molte versioni di Firefox ignorano specificamente entrambe le visualizzazioni: nessuna e posizionamento assoluto.
So che questo è di 2 anni di ritardo, ma utilizzando visibility: hidden sembra funzionare 'in modo accessibile' in FF.
Risolto e testato in IE7, IE8, IE9, FF, Opera, Safari e Chrome.La leggenda sarà letto dai lettori di schermo, e gli utenti non lo vedranno:
<legend><span class="accessibility">Your description</span></legend>
e poi, in CSS:
legend span.accessibility {
position:absolute;
left:-9999px;
width:100px;
height:auto;
overflow:hidden;
}
Aggiornato con sostituzione per mod -9999px (http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/):
HTML:
<legend><span>Your description</span></legend>
CSS:
legend span {
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Qual è il tuo scopo dietro questo? – rahul
Voglio avere una legenda (a quanto ho capito, è necessaria per un rigoroso HTML valido, ed è probabilmente buona pratica di accessibilità in ogni caso) ma non voglio che venga mostrata ai visual browser: è una duplicazione di contenuti. –
Non è una leggenda del fieldset? – rahul