tabindex sur un span

Version imprimable

11/09/2009, 01h03
jadey

tabindex sur un span

Est il possible de renseigner un tabindex pour un span ?
Merci d'avance.
11/09/2009, 10h08
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.
11/09/2009, 11h39
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:

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

:?
11/09/2009, 11h47
Bisûnûrs

Sauf que ce n'est pas possible ...
11/09/2009, 11h55
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
11/09/2009, 11h58
jadey

Citation:

Sauf que ce n'est pas possible ...

ArrGGghh!!.. :aie:

Bonjour,

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

Code:

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:

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

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

11/09/2009, 12h59
jadey

Citation:

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é ? 8O
11/09/2009, 14h41
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 :koi:
11/09/2009, 15h50
jadey

A vrai dire non, je n'avais bien compris. D'où ma question. Je reviens la première soluce du <a
Merci.
11/09/2009, 16h01
Macmillenium
Citation:

Envoyé par jadey

Est il possible de renseigner un tabindex pour un span ?

Citation:

Envoyé par jadey

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

ce code :

Code:

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

fonctionne correctement.
Il suffit d'essayer.
11/09/2009, 17h29
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.
11/09/2009, 18h04
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:

1 2 <span tabindex="0" onfocus="alert('focus reçu')">text</span>
11/09/2009, 21h45
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.
13/09/2009, 12h19
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

Citation:

Envoyé par Macmillenium

[*]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:

Citation:

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.
13/09/2009, 12h32
Macmillenium

Citation:

Envoyé par Erwan31

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) :

Citation:

Envoyé par HTML4

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 :

Citation:

Envoyé par HTML5

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

Citation:

Envoyé par Erwan31

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 :

Citation:

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.

Citation:

Envoyé par Macmillenium

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.