éléments HTML pour JavaScript crochets

Question

La plupart de ma vie de développement, je l'ai fait un code JavaScript généré bouton comme ceci:

<span>Open/hide</span> 

Avec CSS comme

span { 
    cursor: pointer; 
} 

Cela semblait fonctionner pour moi, et de l'OMI , il semble et semble mieux que

<a href="(#|javascript:void(0);|javascript:;|return false)">open/hide</a> 

Cependant, je commence à penser que les gens pourraient utiliser des liens parce qu'ils sont mieux acce ssible de filtrer les lecteurs. Il est également logique que le navigateur vous permette de tabuler un lien - mais pas nécessairement un span avec un style CSS (comme mon exemple précédent).

Existe-t-il un moyen d'obtenir le meilleur des deux mondes? C'est-à-dire, un bouton qui peut être tabulé, accessible aux lecteurs d'écran et n'impliquant pas non plus un lien sémantique vers un autre document, et ne pas avoir à utiliser des moyens hacky pour empêcher le lien d'aller n'importe où?

Remarque: Il ne s'agit que de boutons insérés JS, pas de liens existants dont le comportement est modifié avec JS.

Answer 1

C'est un bouton qui peut être tabulé à, accessible aux lecteurs d'écran et pas non plus ce qui implique un lien sémantique à un autre document

Oui, et curieusement, ça s'appelle juste ça: <button>. Ou <input type="button"> si vous avez seulement besoin de contenu textuel. Vous pouvez ensuite ajouter un chargement de CSS pour l'arrêter de ressembler à un bouton de formulaire par défaut si vous préférez.

Le seul problème est IE, qui ajoute un couple supplémentaire de pixels de rembourrage inamovible pour les widgets de bouton, et déplace le contenu du bouton vers le bas et vers la droite un pixel lorsqu'il est cliqué. Souvent, cela n'a pas d'importance.Si vous n'avez pas besoin de remplissage nul, vous pouvez également compenser en ajoutant un remplissage sur tous les navigateurs sauf IE.

Une autre possibilité sémantiquement saine consiste à utiliser un <input type="image">, bien que cela nécessite évidemment que le contenu soit une image. S'appuyer sur le texte alt à la place ne fonctionne pas en raison du rendu d'IE des icônes d'image brisées. Bien que les boutons soient sémantiquement de loin l'élément le plus approprié, si vous ne voulez pas ce problème de style, vous pouvez continuer à utiliser un span ou un autre élément sans signification (comme le fait SO), mais au moins améliorer l'accessibilité du clavier en donnant c'est une valeur tabindex. Il sera alors focalisable comme un lien, même si malheureusement vous avez besoin de scripts supplémentaires si vous voulez le rendre activable depuis le clavier (attraper au moins les codes de touches 13 et 32). Vous pouvez également étiqueter un élément comme un bouton avec ARIA pour l'accessibilité, bien que pour être honnête, je ne suis pas convaincu que cela fasse vraiment quelque chose de très utile pour les outils d'aujourd'hui. Parfois, lorsque l'action est liée à un autre élément de la page, comme avec le bouton "ouvrir/masquer" suggéré, il me semble légitime d'utiliser un lien interne vers cet élément. (Avec un JS attribué onclick cependant, aucun de ces pseudo-URL en ligne JS ou horribles javascript:.)

.hidden { display: none; } 

<a href="#foo" class="toggler">open/hide</a> 
<div id="foo"> blah </div> 

for (var i= document.links.length; i-->0;) 
    if (document.links[i].className==='toggler') 
     document.links[i].onclick= toggle; 

function toggle() { 
    var el= document.getElementById(this.hash.substring(1)); 
    el.className= el.className==='hidden'? 'hidden' : ''; 
} 

ou langage similaire dans votre bibliothèque de choix. Cela fera quelque chose d'utile dans les navigateurs non-JavaScript; vous pouvez également ajouter une règle pour vérifier le hachage de l'emplacement actuel, de sorte que si quelqu'un ouvre votre show-link dans un nouvel onglet, ce document affichera l'élément en question.

Answer 2

Il semble faire

<span tabIndex="n">foo</span> 

vous permet de l'onglet il. Cependant, si vous appuyez sur Entrée alors que la mise au point est en cours, vous ne pourrez pas cliquer dessus. Ce que j'imagine que l'on peut facilement y remédier en y mettant aussi un événement keydown.

Answer 3

Je dirais que le bouton correspond à vos besoins ...

<input type="button" class="js_button" value="Javascript Button" /> 

CSS:

.js_button, .js_button:active, js_button:focus { 
    background-color: #FFF; 
    border: none; 
    margin: 0 0; 
    padding: 0 0; 
} 

Les boutons peuvent être à onglets, sont sémantiques, ont automatiquement des index de tabulation et les actions keypress et n'implique pas de liens vers d'autres documents. La seule difficulté est de supprimer l'animation mousedown - je vais regarder autour et voir s'il y a quelque chose là pour supprimer cette animation sans hacks.

Answer 4

Vous pouvez créer un lien vers n'importe quel objet de la page si vous fournissez le id ou le name de l'élément.

Par exemple:

https://stackoverflow.com/questions/1659137/html-elements-for-javascript-hooks#comments-1659137 

HTML elements for JavaScript hooks