Présentation d'un widget accordéon accessible - SitePoint

Cet article présente A11yCordion, un widget accordéon accessible conçu pour améliorer l'expérience utilisateur pour les personnes handicapées. Il traite des lacunes d'accessibilité communes de widgets similaires, en particulier de l'accordéon jQuery.

Caractéristiques et améliorations clés:

• Navigation de clavier améliorée: A11yalCordion permet une navigation par clavier transparente pour les utilisateurs qui ne peuvent pas utiliser de souris. Les utilisateurs peuvent facilement admirer les en-têtes du widget.
• Compatibilité des lecteurs d'écran: Les lecteurs d'écran lisent avec précision tout le contenu, y compris les titres mis à jour dynamiquement basés sur les résultats de recherche.
• open source et personnalisable: Le code source du widget est disponible sur GitHub, encourageant les contributions et la personnalisation communautaires. Il comprend une API JavaScript pour le contrôle programmatique.
• résout les problèmes d'accessibilité courants: Le widget aborde directement les problèmes trouvés dans les widgets d'accordéon existants, tels que l'incapacité d'ongler à travers les en-têtes et le manque de prise en charge du lecteur d'écran pour le contenu dans les sections effondrées.

Contexte de développement:

L'A11YCORDION provient d'un besoin dans le projet Atutor, un système de gestion de l'apprentissage open source. L'objectif était de créer un accordéon accessible pour gérer les données du cours, assurant le respect des normes d'accessibilité.

PRENDRE:

L'A11YCORDION est disponible sur GitHub. Incluez les fichiers CSS (dist/css/a11yAccordion.css) et JavaScript (dist/js/a11yAccordion-0.2.2.min.js) dans votre projet. Un exemple simple utilisant le widget est illustré ci-dessous:

<ul class="a11yAccordion" id="Accordion1">
  <li class="a11yAccordionItem">
    <div class="a11yAccordionItemHeader">
      <strong>></strong>Random Months<strong>></strong>
    </div>
    <div class="a11yAccordionHideArea">
      <ul>
        <li>January</li>
        <li>June</li>
        <li>February</li>
        <li>November</li>
      </ul>
    </div>
  </li>
  <!-- ... more accordion items ... -->
</ul>

Initialisation JavaScript:

var myAccordion = a11yAccordion({
  parentSelector: '#Accordion1'
});

Un exemple visuel de l'accordéon résultant est illustré ici:

Options du widget & api:

Le widget offre plusieurs options de configuration, y compris les sélecteurs pour les conteneurs parents, les en-têtes et les zones cachées; options de style; vitesse d'animation; et la fonctionnalité de recherche. Une API JavaScript fournit des fonctions pour l'effondrement, l'expansion et le bascule des lignes individuelles.

Développement et contributions futures:

Bien que considérablement améliorée, un développement supplémentaire est prévu, notamment en ajoutant une invalidation de lignes programmatiques. Les contributions des développeurs et des concepteurs sont les bienvenues.

Questions fréquemment posées (FAQ): (celles-ci sont résumées pour la concision)

Les FAQ couvrent des sujets tels que l'amélioration de l'expérience utilisateur, le rôle de l'ARIA, l'accessibilité au clavier, les erreurs courantes à éviter, les méthodes de test, les avantages SEO, le style CSS, les différences entre les accordéons et les onglets, la conception réactive et les améliorations JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!