KITKAT. NEOTOKIO! / italian interactive design studio. Making accessible icon buttons. Last week, Pamela Fox tweeted a question to me: As tends to happen on Twitter, we fruitlessly exchanged 140 character messages trying to get some resolution before I finally offered to write a blog post explaining my view. Along the way, I discovered that I had misunderstood the original question (yay 140 character responses) and needed to do a little research. And so here it is. Simple icon buttons In the beginning, there <input type="image">. Many seem to have forgotten this part of HTML. Early on, web developers wanted to use images as submit buttons rather than the plain submit button and <input type="image"> allowed you to create an image that actually works like a button. In this case, the major screen readers (JAWS, NVDA, VoiceOver) announce “Email button” in all major browsers, reading the alt text and identifying the image as a button.
This example uses a single transparent GIF as the src of the image. Using <button> Font Awesome Do I use hiding text off screen periodically? Fade Image With Sprite. L'attribut tabindex et la navigation au clavier. Laissez-moi vous conter l'histoire d'une fonctionnalité que tout bon webmaster, en quête d'accessibilité dans ses habitudes de développement, a forcément cherché à implémenter : l'attribut "tabindex"... De quoi s'agit-il ? La touche "tabulation" permet, dans la grande partie des navigateurs, de parcourir les liens et contrôles de formulaires dans l'ordre où ils apparaissent dans le code HTML et constitue donc une alternative de navigation à l'aide du clavier.
L'attribut tabindex permet de modifier ce parcours "naturel". Cet attribut s'applique aux éléments <a>, <area>, <button>, <input>, <object>, <select>, <textarea> de la manière suivante : "n" étant un numéro définissant l'ordre du lien dans la série de liens et de contrôles de la page. La "tabulation" commence par l'élément portant le tabindex le plus petit, puis elle suit l'ordre croissant des tabindex. Remarque importante concernant la numérotation Mais, quel est l'intérêt de modifier le parcours naturel de l'ordre de tabulation ?