textbox accessibile

Question

Ho una pagina HTML con molte caselle di testo. Devo etichettarli per l'accessibilità purpose.But, non voglio etichetta per visible.Is possibile? Oppure, c'è qualche altra alternativa di design?

Answer 1

Ci sono vari modi per mettere il testo in una pagina e farlo nascosto agli utenti visive mentre accessibile agli utenti di screen reader (come ad alta negativo text-trattino).

Tuttavia, "l'accessibilità" non è una linea di demarcazione tra "Le persone che non hanno problemi ad usare il web" e "persone non vedenti". Ci sono un sacco di persone che rientrano in nessuno dei due gruppi, ed è troppo facile e troppo comune per gli autori di dimenticare che l'accessibilità è di più di rendere i contenuti a disposizione di persone che non possono vedere.

Answer 2

Utilizzando display: none è male per questo, e sostengo la query sul motivo per cui si desidera nascondere tutte le etichette - c'è probabilmente qualche tag che si sta utilizzando per informare gli utenti che cosa textarea è quello di contenere, quindi basta contrassegnare che come un marchio e lo stile di conseguenza.

Se si desidera continuare a nascondere l'etichetta, posizionandolo fuori campo è meglio. V'è un recente href="http://www.456bereastreet.com/archive/200905/hiding_with_css_problems_and_solutions/" di questo al 456 Berea via blog .

Answer 3

Il punto di un'etichetta è descrivere scopo dell'ingresso, un po 'come dandogli un'intestazione. Se non si utilizza un'etichetta, come faranno gli utenti vedenti sapere cosa mettere in ingresso?

Qualunque sia dà l'indizio visivo agli utenti vedenti dovrebbe essere anche l'etichetta per gli utenti di tecnologie assistive.

Answer 4

Che dire di una casella di testo in filigrana?

es. http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ TextBoxWatermark / TextBoxWatermark.aspx

Answer 5

Prova CSS:

label {
    display: none;
}

Assicurarsi di applicare questo foglio di stile al mezzo "schermata" solo:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Answer 6

Come accennato, è sempre preferibile avere un'etichetta visibile per tutti gli elementi di input - questo aiuterà sia gli utenti vedenti e non vedenti. Detto questo, ci sono alcune situazioni in cui ciò non sia possibile, che sto cercando di indovinare il tuo caso rientra. Per queste situazioni si dispone di un paio di opzioni.

Il primo è quello di utilizzare l'attributo "title", che ha il vantaggio di visualizzazione di un tool-tip per gli utenti vedenti:

<input type="text" title="first name" />

Un paio altri hanno già detto la seconda opzione, che prevede il posizionamento dell'etichetta fuori dallo schermo utilizzando CSS:

<label for="first_name" 
  style="position:absolute;left:-1000px;width:1px;overflow:hidden;" />
<input type="text" id="first_name" />

A differenza di "display: none", i lettori di schermo sarà ancora leggere l'etichetta. E 'anche elegante che gli utenti che scelgono di disabilitare CSS vedranno l'etichetta.

Non importa ciò che si va con, vi consiglio caldamente il download di una copia di prova di JAWS da Freedom Scientific e testare la soluzione fuori.