Discussion :

[jadey]

Est il possible de renseigner un tabindex pour un span ?
Merci d'avance.

[Bisûnûrs]

tabindex sert à donner le focus à un élément lors de la navigation clavier. Un span ne peut pas avoir de focus. Donc non.

[jadey]

Le fait est que sur cette appli, les lien sont sur des span et j'ai besoin (souci d'ergonomie) de mettre le focus justement sur certains de ces span.
Les liens sont sous forme de:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span onclick="window.open(..."

[Bisûnûrs]

Sauf que ce n'est pas possible ...

[Erwan31]

Pour savoir quels éléments peuvent accepter tel ou tel attribut, se référer à ce tableau http://www.la-grange.net/w3c/html4.0...ttributes.html

[jadey]

Sauf que ce n'est pas possible ...

ArrGGghh!!..

[Macmillenium]

Bonjour,

On prend le cas de la feuille de style de FF (html.css dans le répertoire d'installation Mozilla Firefox) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* focusable content: anything w/ tabindex >=0 is focusable */
abbr:focus, acronym:focus, address:focus, applet:focus, b:focus, 
base:focus, big:focus, blockquote:focus, br:focus, canvas:focus, caption:focus,
center:focus, cite:focus, code:focus, col:focus, colgroup:focus, dd:focus,
del:focus, dfn:focus, dir:focus, div:focus, dl:focus, dt:focus, em:focus,
fieldset:focus, font:focus, form:focus, h1:focus, h2:focus, h3:focus, h4:focus,
h5:focus, h6:focus, hr:focus, i:focus, img:focus, ins:focus, 
kbd:focus, label:focus, legend:focus, li:focus, link:focus, menu:focus, 
object:focus, ol:focus, p:focus, pre:focus, q:focus, s:focus, samp:focus, 
small:focus, span:focus, strike:focus, strong:focus, sub:focus, sup:focus, 
table:focus, tbody:focus, td:focus, tfoot:focus, th:focus, thead:focus, 
tr:focus, tt:focus, u:focus, ul:focus, var:focus {
  /* Don't specify the outline-color, we should always use initial value. */
   outline: 1px dotted;
}

Donc ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<span tabindex="0">text</span>

fonctionne correctement.
Excepté l'invalidé syntaxique, je ne vois pas le problème.

[jadey]

On prend le cas de la feuille de style de FF :

Tu veux que je demande à chacun des utilisateur de renter dans la feuille de style et de la modifier comme suggéré ?

[Macmillenium]

C'est une feuille de style que les navigateurs intègrent par défaut afin de servir le contenu en cas d'absence d'une feuille de style auteur ou utilisateur, il n y a rien à changer.

Mais as-tu essayé avant de poser la question

[jadey]

A vrai dire non, je n'avais bien compris. D'où ma question. Je reviens la première soluce du <a
Merci.

[Macmillenium]

Est il possible de renseigner un tabindex pour un span ?

A vrai dire non, je n'avais bien compris. D'où ma question. Je reviens la première soluce du <a
Merci.

ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<span tabindex="0">text</span>

fonctionne correctement.

Il suffit d'essayer.

[Erwan31]

Attention, avant de passer outre les invalidités HTML4, il vaut mieux connaître les raisons exactes de cette invalidités (sans doute historique) et s'assurer des implémentations (absentes ou présentes) actuelles sur tout les type d'UA. Si c'est totalement implémenté on pourra donc faire l'impasse sur cette erreur.

[Macmillenium]

Un simple test suffit pour vérifier les implémentations dans les différents UA (pour les types, dans ce cas précis à part les UA graphiques je ne vois pas autre chose) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<span tabindex="0" onfocus="alert('focus reçu')">text</span>

[Macmillenium]

J'en profite au passage pour donner quelques informations supplémentaires à ce sujet :

• Malgré son interdiction dans HTML4, les navigateurs intègrent ce comportement depuis leurs anciennes versions (FF1.5 et IE6 en font partie) ;
• Sur la quasi totalité des navigateurs, la valeur 0 de tabindex est neutre et n'a aucun impact sur l'ordre des éléments dans le flux normal (navigation tabulaire) ;
• Finalement, HTML5 autorise et décrit ces deux comportements ;
• Le reste des éléments décrits dans HTML4 (A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA) restent focusable par défaut.

D'autre part, tabindex fait partie des attributs aidant à améliorer l'accessibilité des interfaces RIA.

[Erwan31]

L'invalidité du tabindex peut venir d'une absence d'implémentation de cet attribut sur les principaux navigateurs lors de la rédaction de ces specs

[*]Le reste des éléments décrits dans HTML4 restent focusable par défaut.[/LIST]

Quel reste? Oui mais pas forcément accessibles en navigation séquentiel (via la touche tab)
S'agissant d'IE et en complément d'info:

The following elements can have focus by default but are not tab stops. These elements can be set as tab stops by setting the tabIndex property to a positive integer. applet, div, frameSet, span, table, td.

[Macmillenium]

Quel reste? Oui mais pas forcément accessibles en navigation séquentiel (via la touche tab)

Je parle des éléments sur lesquels l'attribut tabindex est autorisé au sens des specs HTML4 et qui sont focusables par défaut (quand je dis focusable, je parle bien de la réception/déclenchement du focus via la touche TAB et/ou lors du clique) :

The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.

La même chose en HTML5 sauf que tabindex n'est plus réservé a ces éléments :

User agents should make the following elements focusable, unless platform conventions dictate otherwise:

* a elements that have an href attribute
* area elements that have an href attribute
* link elements that have an href attribute
* button elements that are not disabled
* input elements whose type attribute are not in the Hidden state and that are not disabled
* select elements that are not disabled
* textarea elements that are not disabled
* command elements that do not have a disabled attribute
* Elements with a draggable attribute set, if that would enable the user agent to allow the user to begin a drag operations for those elements without the use of a pointing device

S'agissant d'IE et en complément d'info:

Il me semble que ce n'est plus le cas pour IE8 ...

Mais attention à ce point :

These elements can be set as tab stops by setting the tabIndex property to a positive integer. applet, div, frameSet, span, table, td.

Cela signifie que la valeur de tabindex doit être supérieur à 0 ce qui n'est pas vraiment le cas (Même sous IE5 et 0 n'est ni positif ni négatif).
Le simple fait d'attribuer tabindex="0" rend l'élément focusable et heureusement car une valeur supérieur peut poser des problèmes d'ordre de tabulation.

Les interfaces riches envahissent le web (Une bonne partie en AJAX et HTML5 dans un future proche) et tabindex se présente comme l'un des attributs les plus pratiques pour améliorer l'accessibilité de ces interfaces.

Et le standard WAI-ARIA en parle.