nous choisissons d’utiliser des tableaux pour mettre en forme des formulaires Web: (comment) pouvons-nous les rendre valides / accessibles?
nous construisons un site avec des dizaines de formes très complexes et nous avons décidé que la meilleure solution pour nous consiste à les créer à l'aide de <table>
mais nous sommes préoccupés par l'accessibilité et les normes.
ce que je pense est qu'un formulaire peut soit totalement accessible et conforme aux normes s'il est rédigé de manière appropriée
par exemple:
<table>
<tr>
<th rowspan="2">Your informations</th>
<th><label for="name">Name</label></th>
<td><input id="name"></td>
</tr>
<tr>
<th><label for="surname">Surname</label></th>
<td><input id="surname"></td>
</tr>
</table>
pour moi c'est une forme parfaitement valable et accessible aussi. mais je peux me tromper. suis-je?
que dois-je faire, là où mon attention doit aller, afin de rendre les formulaires/normes accessibles valides aujourd'hui?
je suis également intéressé par une perspective de référencement.
p.s. nos tables ne sont pas de simples tables, nous utilisons rangspan, colspan beaucoup, mais la structure (signification des colonnes et des lignes, les en-têtes, etc. est parfaitement correcte)
L’accessibilité en général peut varier en fonction du type de document HTML i.e:
- XHTML 1.0 Transitional
- HTML 4.01 Transitional
- HTML5
Cela est dû au fait que le W3C a de nombreux attributs d'accessibilité obsolètes dans HTML5. Votre première décision doit donc être de savoir quel DOC tapez votre support. L’accessibilité n’est pas mon domaine de prédilection et ne doit pas être prise en compte, mais j’ai décidé de tenter ma chance et j’ai utilisé HTML5 et utilisé Directives W3C HTML pour l’accessibilité des contenus Web 1. que vous devriez utiliser si Accessibilité est important sur votre conception de sites Web.
Quoi qu'il en soit, passer à HTML5 avec une bonne accessibilité à l'aide de tableaux ressemblera à ceci:
<table>
<CAPTION>Please Input Your information</CAPTION>
<tr>
<th><label for="firstname" accesskey="n">Name</label></th>
<td><input id="firstname" tabindex="1"></td>
</tr>
<tr>
<th><label for="surname" >Surname</label></th>
<td><input id="surname" tabindex="2"></td>
</tr>
</table>
Fondamentalement, vous devez vous assurer que les choses sont bien décrites, comme vous le savez, le champ Légende fonctionne bien dans les synthétiseurs de parole et il devrait lire exactement en quoi consiste le tableau. Pour les utilisateurs avec facultés affaiblies, dans cet exemple, "Veuillez saisir vos informations" est une bonne description, mais vous pouvez également indiquer quelque part sur la page les raisons pour lesquelles vous avez besoin de ces informations pour une accessibilité encore meilleure.
La tabindexsets l'ordre des tabulations, les aveugles et les autres utilisateurs avec facultés affaiblies l'utiliseront très souvent, ce qui en fait une excellente clé pour la navigation.
La accesskey définit le point AF sur la table. Dans ce cas, si vous appuyez sur N, la table sera mise au point.
En HTML4, vous pouvez utiliser des éléments tels que ABBR que les synthétiseurs de parole liront sur les étiquettes comme méthode préférée. Pour des raisons inconnues, je ne suis pas sûr de la raison pour laquelle cela a été supprimé en HTML5, mais HTML5 échoue néanmoins à la validation lors de son utilisation.
L’autre domaine utile que j’ai rencontré est <table summary="I am a input table for user information">, qui est à nouveau obsolète dans la version HTML5 et qui, encore une fois, ne sait pas pourquoi, car il semble assez utile d’ajouter des informations supplémentaires.
Il est fortement recommandé de ne pas utiliser de tableau pour la mise en page.
Mais disons que vous voulez toujours utiliser tableau pour la mise en page et être accessible à ce sujet, vous devriez:
- NE PAS utiliser une balise
<caption> - PAS utiliser
<th> - Si vous utilisez HTML5, n'utilisez pas l'attribut summary car il est obsolète.
Ceci est dû à critère de succès 1.3.1 et pour être conforme, vous devez éviter les échecs courants. Spécifiquement commun numéro d'échec 46 . Vous n'êtes pas conforme si vous utilisez une défaillance commune.
L'utilisation de CSS pour la présentation est considérée comme une technique consultative (ce qui signifie qu'elle améliore l'accessibilité existante). La principale raison pour laquelle ce n'est pas une technique suffisante est que la technologie d'assistance ignore complètement la feuille de style pour afficher le contenu. Et c'est vraiment vraiment une bonne chose.
Je peux garantir, sans même regarder le formulaire complet, qu'il n'est pas conforme à 508 ou à WCAG.
De plus, si vous pensez du point de vue d’un utilisateur de lecteur d’écran, votre formulaire ressemblera à
Table avec 2 colonnes et 2 rangées. Entrez vos informations. Ligne 1 colonne 1 nom colonne 2 modifier ligne 2 colonne 1 nom de famille colonne 2 modifier
Ceci est seulement pour 2 champs dans une table très simple. Si vous ajoutez rowspan, votre table risque en réalité de provoquer un autre échec ( FR49 ).
Vous devriez absolument éviter cette technique.
PS En ce qui concerne le référencement, le balisage n’est pas vraiment important, mais Google a annoncé il y a quelque temps que la vitesse de la page aura une incidence sur votre classement et que les tableaux alourdissent définitivement votre code HTML.
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" id="name" name="name" /></td>
</tr>
Est beaucoup plus long à coder et à charger que
<label class="cssClass" for="name">Name:
<input type="text" name="name" id="name" />
</label>
L'utilisation de CSS pour la présentation est définitivement préférable à l'utilisation du balisage de tableau HTML pour la présentation. Dans les cas où il faudrait beaucoup d'efforts pour convertir les tableaux de présentation existants en CSS, une technique alternative consiste à attribuer à la table de présentation un rôle de présentation ARIA .
Le rôle de présentation ARIA indique à AT agents utilisateurs que cet élément est présentationnel et peut être ignoré en toute sécurité.