Tableaux de données adaptatifs et accessibles avec jQuery

L'article d'expert d'aujourd'hui est rédigé par Dylan Barrell, vice-président du développement produit chez Deque. Dylan possède près de 20 ans d'expérience dans les domaines du développement technologique, de la vente technique, de la gestion de produits, du marketing produit et du développement d'entreprise. Dylan est convaincu que c'est en montrant l'exemple qu'on crée de la valeur pour les actionnaires et la communauté.

Tableaux de données adaptatifs et accessibles grâce à un plugin jQuery

Il existe quelques articles de blog consacrés aux tables accessibles, dont le meilleur se trouve sur le site Accessible Culture. Mais tous finissent par nous laisser face à deux problèmes :

Lorsque les tableaux sont affichés au format adapté aux appareils de la taille d'un smartphone, ils ne sont plus reconnus comme des tableaux par le lecteur d'écran, ce qui prive l'utilisateur de fonctionnalités essentielles lui permettant de naviguer facilement d'une colonne à l'autre et d'une ligne à l'autre dans le tableau.
Les tableaux adaptatifs ne peuvent être présentés que sous forme de lignes ; en d'autres termes, il n'est pas possible de créer un tableau adaptatif s'affichant sous forme de colonnes sur un ordinateur de bureau et sous forme de colonnes séquentielles sur un appareil de la taille d'un smartphone.

La solution CSS proposée par « Accessible Culture » constitue déjà un bon point de départ ; je m’en suis donc inspiré pour la développer tout en résolvant les deux problèmes mentionnés ci-dessus. Le code a été intégré au plugin jQuery « a11yfy ». Ce plugin utilise JavaScript pour rendre un tableau existant adaptatif et génère automatiquement le code CSS si nécessaire. Le code est disponible sur la page GitHub d’a11yfy. Voici un résumé des éléments importants :

Lorsque les tableaux sont affichés au format iPhone, ils ne sont plus reconnus comme tels par VoiceOver, ce qui prive l'utilisateur de fonctionnalités essentielles lui permettant de naviguer facilement d'une colonne à l'autre et d'une ligne à l'autre. Le point essentiel ici est la navigation d'une ligne à l'autre à l'aide du rotor.
Étant donné que le CSS adaptatif organise généralement les éléments trop grands en les empilant verticalement, les éléments qui apparaissent côte à côte doivent être placés l’un à côté de l’autre dans le tableau. Cela signifie que les tableaux adaptatifs ne peuvent être mis en page que sous forme de lignes ; en d’autres termes, il n’est pas possible de créer un tableau adaptatif présenté sous forme de colonnes sur un ordinateur de bureau et sous forme de colonnes séquentielles sur un appareil de la taille d’un smartphone en utilisant uniquement du CSS.

Afin de résoudre les problèmes susmentionnés, le plugin jQuery a11yfy doit :

Faites en sorte que l'AT considère un tableau présenté sous forme séquentielle comme un tableau, et
Configurez les tableaux en colonnes pour qu'ils passent du format en colonnes sur ordinateur au format en lignes sur smartphone au niveau du point de rupture responsive

Modifications CSS pour permettre un réagencement accessible d'un tableau

It turns out that ATs look at the display property when deciding whether or not to treat a table as a table. This does not make any sense to me, but it is the current situation. So the CSS generated by the a11yfy plugin (based on the Accessible Culture CSS) changes the td and th cells to display:block. Also, in order for the AT to recognize the table as a table, it needs to have both a <thead> element and a <tbody> element. Omitting either of these will cause the AT to not recognize the table correctly. However, when the responsive CSS is applied, the <thead> elements will not be interpreted properly by the AT (at least not consistently). For this reason, the generated CSS also hides any <tr> elements inside the <thead> These two changes allow the table to be flowed responsively and still be recognized by the AT as a table – maintaining the header announcement and table navigation in both layouts.

Code CSS généré pour un point de rupture de 980 px de largeur

@media
(max-width: 980px) {
  /* Force table to not be like tables anymore but still be navigable as a table */
  table, thead, tbody, tr {
    width: 100%;
  }
  td, th {
    display: block;
  }

  /* Hide table headers with display: none because accessibility APIs do not pick up reliably on these headers anyway */
  thead tr {
    display:none;
  }
  tr { border: 1px solid #ccc; }
  td, th {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
  }
  td:before, th:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }
}

Passage de la disposition en colonnes à celle en lignes aux points de rupture

Le problème du passage d'une structure en colonnes à une structure en lignes au point de rupture approprié est résolu par a11yfy à l'aide de JavaScript, qui :

Détecte la taille de la fenêtre lorsque le tableau est « a11yfied » et affiche la structure de tableau appropriée, et
Se connecte aux événements de redimensionnement de la fenêtre, puis actualise l'affichage du tableau en fonction des nouvelles dimensions de la fenêtre

Voici un extrait de code illustrant les éléments importants de cette fonctionnalité. Vous remarquerez également que `a11yfy` définit un délai d'expiration qui est annulé lors de l'événement de redimensionnement suivant, de sorte que le tableau ne soit pas rafraîchi tant que des événements de redimensionnement continuent d'être générés pendant au moins 50 millisecondes. Cela permet d'éviter des rafraîchissements constants lorsque l'utilisateur fait glisser la fenêtre pour la redimensionner.

dimensions = getDimensions();
drawTable( $table, data, headers, dimensions, opts);
jQuery(window).on("resize", function () {
    newDimensions = getDimensions();
    if (!equalDimensions(newDimensions, dimensions)) {
        if (resizeTimer) {
            clearTimeout(resizeTimer);
            resizeTimer = undefined;
        }
        dimensions = newDimensions;
        resizeTimer = setTimeout(function () {
            drawTable( $table, data, headers, newDimensions, opts);
        }, 50);
    }
});

L'utilisation de a11yfy sur un tableau existant est assez simple et bien documentée. Voici un extrait de code illustrant son utilisation avec un petit exemple de tableau.

<!DOCTYPE html>
<html>

<head>
<script src="../tests/jquery.min.js"></script>
<script src="../a11yfy/jquery.a11yfy.core.js"></script>
<script src="jquery.a11yfy.tables.js"></script>
<script src="../i18n/jquery.a11yfy.i18n-de.js"></script>
</head>

<body>
<table id="responsive">
    <thead>
        <tr>
            <th scope="col">Nelson Mandela</th>
            <th scope="col">Steve Nash</th>
            <th scope="col">Sasha Pieterse</th>
            <th scope="col">J.R.R. Tolkien</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>95</td>
            <td>39</td>
            <td>17</td>
            <td>81</td>
        </tr>
        <tr>
            <td>Former political prisoner who upon his release was elected president of South Africa in 1994.</td>
            <td>NBA legend who won the MVP in 2005 and 2006 with the Phoenix Suns, and played in eight NBA All-Star games.</td>
            <td>Teen actress who played Alison DiLaurentis on the hit ABC Family series Pretty Little Liars.</td>
            <td>English author, poet, and professor who created The Hobbit and The Lord of the Rings trilogy.</td>
        </tr>
    </tbody>
</table>

<script>
jQuery(document).ready(function (e) {
    jQuery('#responsive').tables({
        sortFilter: 'none',
        responsive: {
            breakPoint: 980,
            css: true
        }
    });
});
</script>

</body>
</html>

Le plugin a11yfy offre bien d'autres fonctionnalités ; par exemple, il met également en œuvre un tableau triable et filtrable qui n'encombre pas les annonces de l'en-tête, dispose de fonctions permettant des annonces « aria-live » portables et de gérer le focus de manière fiable lorsque VoiceOver est activé sur un appareil iOS, propose une implémentation du menu ARIA, et bien plus encore.

Cet article de blog s'inspire de deux articles que j'ai publiés sur mon blog personnel : « Tableaux de données adaptatifs et accessibles » et « Le plugin jQuery a11yfy permet de créer des tableaux de données adaptatifs et accessibles ».

Vous pourriez tout de même vouloir lire l'article d'Accessible Culture, car cette solution utilise le contenu :before pour ajouter des en-têtes visibles à chaque cellule, et cette technique pourrait vous intéresser. Si vous modifiez le plugin jQuery a11yfy pour prendre en charge le contenu :before, n'oubliez pas d'envoyer une pull request afin que je puisse intégrer vos modifications. Sinon, si vous avez des suggestions pour l'améliorer mais que vous n'avez ni le temps ni les compétences nécessaires pour le faire, contactez-moi sur GitHub, @unobfuscator ou @dylanbarrell.