Comment rendre `` accessible au clavier (pas de javascript)

Contexte: j'utilise bootstrap 4.1 dans une application vue.js.

J'ai un tableau qui montre les résultats d'une recherche effectuée par un utilisateur.

Les utilisateurs peuvent "voir les détails du mode" en cliquant sur n'importe quelle ligne de ce tableau de résultats. Jusqu'ici tout va bien avec la souris.

Comment rendre la même table accessible avec le clavier?

Résultat attendu:

1. les utilisateurs effectuent une recherche
2. les données sont affichées dans le tableau
3. en appuyant sur TAB , ils concentrent le
   (la "ligne actuelle" est mise en surbrillance)
   en appuyant sur ENTER , ils peuvent "voir plus de détails" de la ligne en surbrillance donnée

   < gagnantQuestions:

   • Existe-t-il un moyen natif pour le navigateur d'y parvenir?
   • Y a-t-il un moyen de le faire sans JavaScript?

   ---

   ---

   Jusqu'à présent:

   Cela se fait en utilisant un élément

   avec tabindex = "0" sur chaque élément . J'ajoute maintenant de la magie javascript pour déclencher l'interaction utilisateur par clic / entrée pour afficher plus de détails dans un autre div. Merci à tous pour l'aide.
   html bootstrap-4 accessibility

   ---

   4 commentaires

   encapsule chaque résultat dans un - il ira dans le tabindex naturel, et vous pouvez ajuster l'ordre en définissant tabindex

   ---

   Je ne peux pas envelopper chaque

   de la table avec une ancre. Cela brisera la table. : /

   ---

   La réponse courte est: vous avez besoin de javascript. Vue js devrait en fait vous aider ici. Vous pouvez être capable de pirater quelque chose avec des tableaux CSS (pas des tableaux HTML) en utilisant comme tableau -row ..... peut-être

   ---

   Intéressant. Je vais essayer.

   ---

   4 Réponses :

   ---

   0
   votes

   Je ne peux pas imaginer une autre façon sans utiliser javascript! Voici la réponse à votre question!

   Vous devez utiliser tabindex = "0" . Mais pour vous concentrer, vous devrez utiliser javascript

   <div>
   <a href="#" tabindex="0">
         <p>hi</p>
   </a>
   <a href="#">
      <p>hello</p>
   </a>
   <a href="#">
      <p>woah</p>
   </a>
   <a href="#">
      <p>oops</p>
   </a>
   <a href="#">
      <p>Love</p>
   </a>
   </div>

   ---

   0 commentaires

   ---

   0
   votes

   Vous pouvez utiliser tabindex pour la table, cela fonctionne parfaitement bien

   <form>
     First: <input tabindex="1" type="text">
     Third: <input tabindex="3" type="text"> <br>
     Second : <input tabindex="2" type="text">
     Forth : <input tabindex="4" type="text"><br>
   </form>
   

   ---

   1 commentaires

   Ack! Veuillez ne pas utiliser de valeurs positives pour tabindex . Cela rend l'ordre de tabulation tout bancal. Du point de vue de l'accessibilité, les seules valeurs que vous devez utiliser pour tabindex sont 0 et -1.

   ---

   ---

   4
   votes

   C'est à peu près aussi proche que je pense que vous pouvez obtenir sans JavaScript.

   Vous devez utiliser des tableaux css et non des tableaux HTML et définir la balise a comme une ligne de tableau . Ensuite, définissez le "href" de la balise a sur un div caché avec plus d'informations. Utilisez la classe : target psuedo pour rendre les informations cachées visibles.

   Vous pouvez maintenant tabuler à travers les lignes. Cependant, vous devez appuyer sur Retour pour activer le lien (au moins dans Chrome)

   <div class="table">
     <div class="head">
       <span>Id</span>
       <span>Name</span>
       <span>Date</span>
     </div>
     <a href="#data1">
       <span>1</span>
       <span>Some Name</span>
       <span>9 Jan 2019</span>
     </a>
     <a href="#data2">
       <span>2</span>
       <span>Another Name</span>
       <span>10 Jan 2019</span>
     </a>
   
   </div>
   <div class="moreInfo">
     <div id="data1">Some more info on the first item</div>
     <div id="data2">Some more info on the second item</div>
   </div>

   .table {
     display: table;
   }
   
   .table>.head,
   .table>a {
     display: table-row;
   }
   
   .table>.head>span,
   .table>a>span {
     display: table-cell;
     padding: 5px;
   }
   
   .table>a:focus {
     background-color: #CCC;
   }
   
   .moreInfo>div {
     display: none;
   }
   
   .moreInfo>div:target {
     display: block;
   }

   ---

   8 commentaires

   J'aime celui la. Et comme je comprends qu'il n'y a pas de moyen simple de le faire de manière native, je pense peut-être aussi y injecter du javascript. Merci :)

   ---

   La solution CSS est au mieux rudimentaire, JavaScript la rendrait BEAUCOUP meilleure.

   ---

   bon ou mauvais que cela soit, le faire en CSS est BEAUCOUP mieux! - bootstrap l'aurait géré aussi - bonne réponse

   ---

   @Adriano, puisque vous avez marqué votre OP avec la balise accessibilité , je suppose que l'accessibilité est importante pour vous. Cette solution, bien que créative, sera totalement inutilisable pour un utilisateur de lecteur d'écran. Visuellement, vous avez une table d'informations avec des en-têtes de colonne, mais l'exemple ci-dessus n'utilise aucune sémantique de table. Si les éléments

   natifs ne sont pas utilisés, vous devez compléter le code avec des rôles ARIA. role = "table" sur le premier
   , chaque a besoin d'un conteneur

   avec role = "row" , et un autre

   ou < span> avec role = "cell" . Également role = "columnheader" pour ID / NAME.

   ---

   @Adriano Je suis d'accord avec slugolicious. Je ne vois pas comment un lecteur d'écran va comprendre qu'il s'agit d'un tableau car il n'utilise pas de balisage de tableau. Certains lecteurs d'écran passent en mode de navigation dans les tableaux lorsqu'ils rencontrent un balisage de tableau. Ils ne le font pas lorsqu'ils rencontrent des éléments div et span imbriqués.

   ---

   Oui, j'ai complètement raté la balise accessibilité . Les rôles ARIA pourraient aider. La meilleure option accessible est peut-être une table avec un lien "plus d'informations" dans une cellule comme colonne finale. Si vous le souhaitez, cette colonne peut être définie sur display: none en utilisant des requêtes multimédias lorsqu'elle est affichée à l'écran, mais rendue normalement pour les lecteurs d'écran.

   ---

   @slugolicious J'ai vérifié que la réponse de Jon P était correcte car elle était "techniquement" correcte même si elle ne permet pas une accessibilité élevée (ou n'importe laquelle, peut-être). Jetez un œil à la partie inférieure de ma question, j'ai implémenté une combinaison de la réponse de Jon P et de l'élément

   , et cela fonctionne assez bien. J'ai encore besoin d'utiliser du javascript pour permettre la navigation avec les touches fléchées, mais je crois qu'avec une method () en vue, je pourrai y parvenir. :)

   ---

   @Jon P - l'utilisation de display: none empêchera le contenu d'être transmis à un lecteur d'écran.

   ---

   ---

   3
   votes

   Je suis presque sûr que la solution CSS ne sera pas accessible.

   En fait, la solution CSS va même probablement rendre l'accessibilité moins bonne que si vous avez utilisé une

   même sans JavaScript ou ARIA.

   Si vous ne pouvez vraiment pas utiliser JavaScript pour une raison quelconque, je vous conseille quand même de conserver le

   Si les données présentées sont vraiment des données tabulaires, les utilisateurs de lecteurs d'écran ne comprendront rien si vous n'utilisez pas un véritable

   .

   Certains lecteurs d'écran essaient de présenter des tableaux CSS comme s'il s'agissait de véritables tableaux HTML, mais souvent ils échouent à le faire très bien, et de nombreux lecteurs d'écran ne font rien de spécial, de sorte que l'utilisateur voit une série de divs et d'étendues.

   De plus, les utilisateurs de clavier et de lecteur d'écran sont habitués à: - onglet une fois pour entrer dans le tableau, onglet une fois de plus pour en sortir - flèche haut / bas pour se déplacer de ligne en ligne à l'intérieur du tableau - flèche gauche / droite pour se déplacer entre les colonnes si cela est pertinent dans votre cas

   SI vous voulez vraiment quelque chose d'accessible, c'est ce que vous devez faire. Et c'est parfaitement annulable sans JavaScript.

   Pourquoi ne voulez-vous pas utiliser JavaScript?

   ---

   8 commentaires

   Merci pour votre point, et oui, je me soucie de l'accessibilité. jetez un œil au fichier que j'ai joint à la question. C'est là que je suis si loin.

   ---

   Désolé mais je trouve "La solution CSS est une pure blague" assez insultante. Je ne peux pas contester la déclaration d'accessibilité. Cependant, cela ressemble plus à un commentaire détaillé et non à une réponse réelle.

   ---

   Bonjour QuentinC, pouvez-vous aussi développer un peu ce que vous entendez par Et c'est parfaitement annulable sans JavaScript. ? J'apprécierais que :)

   ---

   Jon P: Mozahler: Vous êtes peut-être vrai qu'il s'agit d'un commentaire prolongé, mais dans un commentaire pour autant que je sache, je ne peux pas être aussi long. Cependant, la question inclut toujours la balise a11y, vous devez donc être conscient que sans JavaScript, il n'y a pas de solution vraiment accessible. Ou la question n'est pas liée à a11y, auquel cas vous devriez peut-être supprimer la balise. Adriano: Je ne vois pas quoi ajouter d'autre. Vous ne pouvez tout simplement pas faire ce que je dis sans JavaScript. Jon P: Désolé, je vais reformuler.

   ---

   De plus, dans un commentaire, les paragraphes sont totalement supprimés. Désolé

   ---

   @QuentinC - "Les utilisateurs de clavier et de lecteur d'écran sont habitués à:" est un peu trompeur. Le comportement que vous décrivez est celui que vous obtenez lorsque vous utilisez un lecteur d'écran à l'aide d'un clavier . Les utilisateurs de clavier sans lecteur d'écran n'obtiennent pas ce comportement avec un tableau HTML. Il serait peut-être préférable de reformuler ceci en disant "les lecteurs d'écran fournissent des outils pour interagir avec les tableaux:"

   ---

   @andrewmacpherson: En fait, lorsque j'ai posté, j'ai pensé à un tableau conçu comme une liste à plusieurs colonnes où vous pouvez interagir avec les différentes lignes, comme celles que vous pouvez trouver pour un e-mail ou une liste de fichiers. J'ai supposé que c'était ce que le demandeur allait faire plus ou moins compte tenu de sa question. Vous avez raison, ce n'est peut-être pas clair. Je vais voir ce que je pourrais faire pour clarifier.

   ---

   @QuentinC - aha, cela ressemble plus au modèle de grille ARIA. Il a une sémantique différente de celle d'une table, mais cela peut convenir au design d'Adriano, bien sûr.

   ---

   ---

   Articles qui pourrait vous intéresser :

   Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO

   ---

   Select2 ne s'affiche pas correctement dans le mode bootstrap

   ---

   Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?

   ---

   Comment puis-je définir un format pour les nombres d'entrée dans Blazor

   ---