Archives de la catégorie Accessibilité
Champ texte avec indice (Textbox hint) de façon accessible
Posté par Jimmy dans Accessibilité, Bonnes pratiques le 29 juin 2010
Il est question ici du texte qui est affiché lorsqu’une zone de texte est vide et disparaît lorsque cette zone est sélectionnée ou si elle contient du texte.
Il existe plusieurs solutions sur le web mais la majorité du temps ça consiste à modifier la valeur de la zone de texte. Ceci cause un problème pour les lecteurs d’écran car l’indice ne sera pas lu comme un texte d’aide tel un label html mais plutôt comme la valeur de la zone de texte. En plus ces solutions demandent une gestion supplémentaire de la valeur de la zone de texte lorsque le formulaire est soumit au serveur.
En html5 ce problème sera résolu avec l’attribut placeholder. Voici un exemple avec placeholder.
Par contre voici, pour l’instant, une alternative qui utilise un label html pour créer l’indice sur la zone de texte.
Le fonctionnement
Le principe est simple. Il suffit de déplacer le label html par dessu la zone de texte. Lorsque la zone est sélectionnée l’indice est caché. Quand la zone perd sa sélection et que celle-ci est vide on ré-affiche l’indice.
Puisqu’un clique sur le label sélectionne la zone de texte il n’est pas nécessaire de gérer le clique sur le label.
Le code
Html
<div>
<label for="emailName">Nom</label>
<input type="text" id="emailName" />
</div>
<div>
<label for="emailaddress">Adresse</label>
<input type="text" id="emailaddress" />
</div>
Javascript (jQuery) et Explications
$("label").each(function () {
//Aller chercher le label et la boîte de texte
var lbl = $(this);
var inputText = $("#" + lbl.attr("for"));
//Créer un conteneur "DIV" qui permettra de positionner correctement le label et la zone de texte
var textboxDivWrapper = $("<div></div>");
textboxDivWrapper.css("position", "relative");
textboxDivWrapper.css("display", inputText.css("display"));
inputText.wrap(textboxDivWrapper);
inputText.before(lbl);
lbl.css("position", "absolute");
lbl.css("left", "0");
//Un peu d'esthétisme
lbl.css({ "color": "#888", "padding": "2px 0px 0px 10px" });
//Simuler du texte lors du "mouse-over" sur le label
lbl.css("cursor", "text");
//Utilisé "left: "-9999" au lieu du "hide()" : Afin que les lecteurs d'écran puisse dicter l'indice.
//La méthode "hide()" à pour résultat d'assigné "display: none" ce qui à pour effet
// de cacher l'indice autant pour le visuel que pour les lecteurs d'écran.
// Donc dans le but que l'indice puisse être lu par les lecteurs d'écran
// il faut simplement sortir le label de l'écran.
inputText.focus(function () {
lbl.css("left", "-9999");
});
inputText.blur(function () {
if ($(this).val().length == 0) {
lbl.css("left", "0");
}
});
});
Plugin jQuery
Voici le même code javascript en version plugin jQuery.
(function ($) {
$.fn.labelToHint = function (options) {
var defaults = {
hintCss: { "color": "#888", "padding": "2px 0px 0px 10px" }
};
var options = $.extend(defaults, options);
return this.each(function () {
var lbl = $(this);
var inputText = $("#" + lbl.attr("for"));
var textboxDivWrapper = $("<div></div>");
textboxDivWrapper.css("position", "relative");
textboxDivWrapper.css("display", inputText.css("display"));
inputText.wrap(textboxDivWrapper);
inputText.after(lbl);
lbl.css("position", "absolute");
lbl.css("left", "0");
lbl.css(options.hintCss);
lbl.css("cursor", "text");
inputText.focus(function () { lbl.css("left", -9999); });
inputText.blur(function () {
if ($(this).val().length == 0) {
lbl.css("left", "0");
}
});
});
};
})(jQuery);
Cliquer ici pour voir un exemple.
Conclusion
Vous pouvez faire votre propre code pour le positionnement et l’apparence du libellé. Ce que je voulais démontrer ici est qu’il est possible d’afficher un indice sur un zone de texte sans modifier la valeur du texte.
La détection de l’utilisation de matériel d’adaptation : discrimination ou simple statistique?
Posté par Samuel Sirois dans Accessibilité le 24 novembre 2009
Les périphériques de sortie adaptés (comme les lecteurs d’écrans) et les périphériques d’entrée adaptés (comme les pointeurs de souris dirigés par le mouvement de la tête) n’étant pas des agents-utilisateurs du Web, ils n’apparaissent pas à dans l’entête User-Agent du protocole HTTP. Serait-il souhaitable que ces périphériques altèrent l’entête du protocole HTTP en s’ajoutant, par exemple, en tant qu’agent utilisateur (User-Agent ne serait évidemment pas le bon endroit puisqu’on parle ici de périphériques de sortie et non d’agents utilisateurs)?
Les statistiques
Les statistiques de fréquentation d’un site Web sont très importantes aux différents paliers organisationnels d’une organisation.
Ces statistiques permettent au département des communications de rédiger des textes mieux adaptés à la culture des visiteurs, et aux designers et ergonomes d’adapter les outils de navigations, le plan de site et même les maquettes du site Web en analysant le temps passé sur différentes sections du site et les clics de souris. Ces statistiques permettent également aux stratèges Web de maximiser le retour sur investissement (RSI) d’un site Web.
Les statistiques recueillies ont toutes une chose en commun : l’anonymat. Bien entendu, l’adresse IP permet de connaître l’emplacement de la connexion Internet utilisée de façon assez précise, mais il n’est pas possible de connaître l’âge, le sexe ou si le visiteur porte des lunettes afin d’être en mesure de lire les petits caractères inscrits sur son écran.
L’accès à l’information sans discrimination : un droit!
Bien qu’il n’y ait encore aucun précédent en la matière au Canada, il n’y a qu’un pas à franchir pour qu’une personne handicapée évoque la Charte des Droits et Libertés pour illustrer le caractère discriminatoire d’un site Web non accessible.
AccessibilitéWeb, 29 septembre 2008 — http://federales-2008.accessibiliteweb.com/
En effet, l’ONU adoptait en décembre 2006 la Convention relative aux droits des personnes handicapées qui prévoit le droit à l’information accessible (voir article 9 de la Convention relative aux droits des personnes handicapées).
Si, de toutes façons tout site Web doit être accessible, pourquoi tenter d’obtenir des métriques qui permettraient de calculer le RSI d’une refonte accessible d’un site Web? Qu’une seule ou que des milliers de personnes dépendantes de technologies d’adaptation visitent un site Web quotidiennement, l’accès à l’information sans discrimination est un droit; il est inutile de séparer en deux groupes statistiques les visiteurs en se basant sur l’utilisation d’une technologie d’adaptation.
Pourquoi détecter l’utilisation d’une technologie d’adaptation?
La détection de l’utilisation d’une technologie d’adaptation pourrait servir l’accessibilité d’un site Web en facilitant l’identification de problématiques d’accessibilité sur une section, une page ou un passage diffusé sur le site Web. Si la moyenne du temps de consultation d’une page est de quatre minutes, mais que les visiteurs utilisant une technologie d’adaptation ont une moyenne de consultation d’au plus quelques secondes pour cette même page : un webmestre pourrait auditer cette page afin de s’assurer qu’il n’y a pas une grossière erreur d’intégration qui rendrait le contenu de la page inaccessible.
Une question d’éthique
Nous l’avons vu, le fait de pouvoir détecter l’utilisation d’une technologie d’adaptation comporte ses inconvénients :
- Contrevient au droit à la navigation anonyme – semi anonyme;
- Potentielle discrimination sur la base d’une déficience ou d’un handicap;
- Mauvais investissement de ressources humaines et matérielles lors de l’analyse statistique de cette métrique puisqu’il existe un droit d’accès à l’information pour les personnes handicapées;
- Tous les champs de déficiences ne seraient, de toutes façons, pas pris en comptes – pensons aux personnes avec une déficience intellectuelle et à celles vivant avec un problème de santé mentale qui n’utilisent pas de périphériques d’adaptation;
Nous avons également vu que des avantages existent :
- Obtention de statistiques au service de l’accessibilité;
- Facilitations de la détection d’anomalies;
- Réaction plus rapide du webmestre afin de corriger les problèmes d’accessibilités spontanés;
La détection de l’utilisation de matériel d’adaptation, discrimination ou simple statistique? La question reste ouverte et vos commentaires sont les bienvenus!