1174 sujets

Accessibilité du Web

[avis] sur l'accessibilité de ce formulaire

Bonjour,
Pouvez-vous s'ils vous plaît me donner un avis sur l'accessibilité de ce formulaire (il n'est pas terminé pas encore de submit) mais c'est pour le principe des infobulles sans javascript récupérés ici
J'ai remarqué quelques problème en créant ce formulaire.
1° IE n'execute le :hover uniquement sur la balise <a> du coup ça créer de
2° Gros problèmes de tabindex
3° IE et :focus ça marchera jamais (uncool)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Add Media</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style media="screen" type="text/css">
body{
background-color:#336699;
font-family:Arial, Helvetica, sans-serif;
font-size:x-small;
}
input, textarea{
border:1px solid #444;
background-color:#dedede;
}
input:focus, textarea:focus{
border:1px solid #f00;
background-color:#eee;
}
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
font-size:x-small;
}
.radio{
background:none;
border:none;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}
.radio{
width:20px;
}

a.info {
position: relative;
text-decoration: none;
color: black;
}
a.info span {
display: none;
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
cursor:help;
}
a.info:hover span {
display: inline;
position: absolute;
top: -5px;
right: -360px;
width:140px;
background-color:#efefef ;
text-align: center;
color: #444;
padding: 2px;
-moz-border-radius:4px;
border:1px solid #ccc;
filter:alpha(opacity=60);
opacity: 0.6;
-moz-opacity:0.6;
}
a.cols2:hover span{
right:-240px;
}
</style>
</head>

<body>
<form action="med_actions.php?SID">
    <label for="img"><a href="#" class="info">image<span>Cochez cette case si le fichier<br />est de type image</span></a></label><input type="radio"  class="radio"  tabindex="1" name="med_type" id="img" value="img" checked="checked" />
    <label for="video"><a href="#" class="info cols2">vid&eacute;o<span>Cochez cette case si le fichier<br />est de type vid&eacute;o</span></a></label><input type="radio" class="radio"  name="med_type" id="video" value="video" /><br />
    <label for="web"><a href="#" class="info">web<span>Cochez cette case si le fichier<br />est de type site web</span></a></label><input type="radio" class="radio" name="med_type" id="web" value="web" />
    <label for="son"><a href="#" class="info cols2">son<span>Cochez cette case si le fichier<br />est de type son</span></a></label><input type="radio" class="radio" name="med_type" id="son" value="son" /><br />
    <label for="med_name"><a href="#" class="info">Nom du media<span>Indiquez le nom du fichier souhait&eacute;</span></a></label>
    <input tabindex="2" id="med_name" name="med_name" /><br />
    <label for="med_file"><a href="#" class="info">Fichier<span>S&eacute;lectionnez le fichier sur votre ordinateur</span></a></label>
    <input tabindex="3" type="file" id="med_file" size="13" /><br />
    <label for="med_thumbnails"><a href="#" class="info">Mini<span>Choisir l'aper&ccedil;u. <strong style="text-transform:uppercase;">Laissez vide pour la cr&eacute;ation automatique</strong></span></a></label>
    <input tabindex="4" type="file" id="med_thumbnails" size="13" /><br />
    <label for="med_url_website"><a href="#" class="info">Url<span>Indiquez l'url pour atteindre le site</span></a></label>
    <input tabindex="5" id="med_url_website" name="url_url_website" /><br />
    <label for="med_keyword"><a href="#" class="info">Mots-Clés<span>Saisissez quelques mots-clés pour la recherche séparés par des virgules (sans espaces)</span></a></label>
    <input tabindex="6" id="med_keyword" name="med_keyword" /><br />
    <label for="med_desc"><a href="#" class="info">Description<span>Description du m&eacute;dia</span></a></label>
    <textarea  tabindex="7" name="med_desc" id="med_desc"></textarea>
</form>
</body>
</html>



MERCI d'avance
---
Smiley para http://tax.ocgov.com/taxpaycart/images/ie.gif
Modifié par michael (06 Dec 2005 - 13:11)
Bonjour,
Bof, j'aime personnellement pas du tout les liens qui ne mènent nulle part (<a href="#">...</a>), je te conseillerais presque d'utiliser du javascript pour tes info-bulles. Ca rajoute des pressions supplémentaires sur tab qui sont complètement inutiles.

N'oublie cependant pas que quelque soit la manière de présenter tes info-bulles, un lecteur d'écran ne les lira jamais.

Pour finir, je te déconseille très très très très fortement les tabindex, ça fait bugger IE quelque chose d'en ordre et c'est lourd à maintenir.
Salut, Merci de la réponse. Je me disais aussi que ces liens inutiles n'étaient pas vraiment pratiques / propres / accessibles ... C'est pour une console d'admin donc pas de gros soucis d'accessibilités mais j'aime bien faire juste.
Eh tu connaitrais pas par hasard un lien pour une infobulle javascript PROPRE?
Non, mais c'est pas très compliqué : Tu gardes tes span comme ils sont là, tu supprimes les liens, et tu fais apparaître les infos du span au survol grâce à l'évènement onmouseover et tu les enlèves lorsque la souris quitte la zone au moyen de l'évènement onmouseout. Positionne tes span grâce au CSS.
Bonjour Romain,

Ce changement de couleur de bordure d'input text est particulièrement appréciable quand on navigue dans la page avec le clavier.

A noter: le même effet peut être obtenu en CSS grâce à :focus, sauf dans IE 5.x-6.0 Windows. Raison pour laquelle, sans doute, :focus est encore largement sous-employé...
Laurent Denis a écrit :
Bonjour Romain,

Ce changement de couleur de bordure d'input text est particulièrement appréciable quand on navigue dans la page avec le clavier.

A noter: le même effet peut être obtenu en CSS grâce à :focus, sauf dans IE 5.x-6.0 Windows. Raison pour laquelle, sans doute, :focus est encore largement sous-employé...


Que me conseilles-tu alors ? Rester tel quel, ou utiliser :focus ?
Bonjour,

je me garderais bien de conseiller quoi que ce soit Smiley lol

Pour ma part, et dans des projets strictement personnels, je m'arrêterais à focus, pour ne pas avoir à gérer un javascript qui m'encombrera peut-être demain. Mais il faut dire que je suis un gros paresseux partisan du moindre effort.

Pour un client qui souhaiterait cette fonctionnalité, j'utiliserais le javascript sans état d'âmes. ça n'est pas moi qui paie.
Modifié par Laurent Denis (14 Dec 2005 - 15:09)
Ou alors combiner javascript et CSS...


CSS :
.inputNormal, input { ... }
.inputFocus, input:focus { ... }

JavaScript :
if (window.external) // Test pour savoir si c'est IE 
{
var tab = document.getElementsByTagName('input');
for (var i=0; i < tab.length; i++) {
tab[ i].onfocus = function () { this.className = 'inputFocus'; };
tab[ i].onblur = function () { this.className = 'inputNormal'; };
}

}


EDIT : Mince, j'avais oublié l'italique
Modifié par QuentinC (14 Dec 2005 - 17:43)
Sujet clos
Aller à