Créer des tableaux complexes accessibles dans des formulaires HTML5 create-accessible-complex-tables-in-html-forms

CAUTION
AEM 6.4 a atteint la fin de la prise en charge étendue et cette documentation n’est plus mise à jour. Pour plus d’informations, voir notre période de support technique. Rechercher les versions prises en charge here.

L’implémentation par défaut des tableaux dans HTML5 Forms utilise des éléments DIV de HTML pour effectuer le rendu d’un tableau. Le rendu implique l’utilisation de rôles ARIA pour répondre aux exigences d’accessibilité.

Pour éviter des problèmes d’accessibilité avec les lecteurs d’écran qui ne prennent pas totalement en charge les rôles ARIA utilisés avec des tableaux de données, les formulaires HTML5 fournissent un rendu alternatif pour les tableaux. Ces tableaux sont basés sur le nouveau format de tableau introduit dans Designer qui prend également en charge :

  • En-têtes de ligne
  • portée de ligne

Pour utiliser le nouveau format dans HTML5 Forms, marquez le tableau comme complexe. Pour marquer le tableau en tant que tel, ajoutez la balise extras dans la source XML du sous-formulaire du tableau comme suit :

</extras>
 <text name="complexTable">1</text>
 </extras>

Les tableaux qui sont marqués en tant que complexTable  suivent le rendu HTML natif, et fournissent une meilleure prise en charge de l’accessibilité pour certains lecteurs d’écran. Pour créer une étendue de ligne, sélectionnez les cellules consécutives d’un tableau dans la même colonne, cliquez avec le bouton droit de la souris sur la sélection, puis cliquez sur l’option Fusionner les cellules.

Remarque : ​La création d’une étendue de ligne fonctionne uniquement pour les cellules les plus à gauche.

Pour marquer une ligne comme en-tête de ligne, sélectionnez toutes les cellules de la ligne, cliquez avec le bouton droit de la souris sur la sélection, puis cliquez sur En-tête de marque.

Pour marquer une cellule comme en-tête de colonne, sélectionnez une cellule de la colonne, cliquez avec le bouton droit de la souris sur la sélection, puis cliquez sur En-tête de marque.

Limitations dans le nouveau format AccessibleTable  :

  • Manque de prise en charge des champs extensibles si l’étendue de ligne est utilisée dans le tableau
  • Pas de prise en charge des tableaux imbriqués (tableaux dans des cellules de tableau)
  • La prise en charge de l’étendue de ligne est limitée aux lignes d’en-tête et aux cellules d’en-tête.
  • La prise en charge est limitée aux tableaux standard.
  • Pas de prise en charge des préremplissages de données dans les tableaux dont l’étendue de ligne est supérieure à 1
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da