accessible textbox

Question

J'ai une page HTML avec beaucoup de zones de texte. Je dois les étiqueter pour purpose.But d'accessibilité, je ne veux pas l'étiquette pour visible.Is-il possible? Ou, est-il une autre solution de conception?

Answer 1

Il existe différentes façons de mettre du texte dans une page et ont caché aux utilisateurs visuels tout en étant accessible aux utilisateurs de lecteurs d'écran (tels que haut texte retrait négatif).

Cependant, « l'accessibilité » est pas une ligne de démarcation entre « Les gens qui ont aucun problème en utilisant le web » et « Les gens qui sont aveugles ». Il y a beaucoup de gens qui entrent dans aucun des deux groupes, et il est trop facile et trop commun pour les auteurs d'oublier que l'accessibilité est de plus de rendre disponible pour les personnes qui ne peuvent pas voir.

Answer 2

Utilisation display: none est mauvais pour cela, et je soutiens la question de savoir pourquoi vous souhaitez masquer toutes les étiquettes - il est susceptible d'être une étiquette que vous utilisez pour informer les utilisateurs ce que le textarea doit contenir, donc marquer juste que comme une étiquette et le style en conséquence.

Si vous voulez toujours cacher l'étiquette, son positionnement est offscreen mieux. Il y a un href="http://www.456bereastreet.com/archive/200905/hiding_with_css_problems_and_solutions/" récemment de ce au 456 blog Berea Street.

Answer 3

Le point d'une étiquette est de décrire but de l'entrée, un peu comme lui donnant un en-tête. Si vous n'utilisez pas une étiquette, comment vos utilisateurs voyants savoir quoi mettre dans l'entrée?

Quelle que soit l'indice visuel donne aux utilisateurs malvoyants devrait également être l'étiquette pour les utilisateurs de technologie d'assistance.

Answer 4

Qu'en est-il une zone de texte filigrané?

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

Answer 5

Essayez CSS:

label {
    display: none;
}

Assurez-vous d'appliquer cette feuille de style au milieu « écran » seulement:

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

Answer 6

Comme mentionné précédemment, il est toujours préférable d'avoir une étiquette visible pour tous les éléments d'entrée - cela vous aidera les utilisateurs malvoyants et non-voyants. Cela dit, il y a certains scénarios où cela est impossible, que je devine votre cas relève. Pour ces situations, vous avez deux options.

La première consiste à utiliser l'attribut « title », qui a l'avantage d'afficher une pointe d'outil pour les voyants:

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

A couple d'autres ont mentionné la deuxième option, qui consiste à positionner l'étiquette de l'écran en utilisant le CSS:

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

Contrairement à l'utilisation « display: none », les lecteurs d'écran toujours lire l'étiquette. Il est aussi élégant que les utilisateurs qui choisissent de désactiver CSS voir l'étiquette.

Peu importe ce que vous allez avec, je recommande vivement télécharger une copie d'essai de JAWS de Freedom Scientific et tester votre solution sur.