¿Dónde terminan los elementos HTML tabindex="0" en el orden de tabulación?
¿En qué orden se enfocan los elementos con un valor tabindex de 0 cuando se tabula la página web?
4 answers
La especificación HTML establece:
Elementos que tienen tabindex idéntico los valores deben ser navegados en el orden en que aparecen en el personaje flujo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-11-07 00:52:06
tabindex las asignaciones se manejan de la siguiente manera (para los elementos que soportan el atributo tabindex):
- números Positivos (1,2,3...32767) se manejan en orden de pestañas.
- 0 se maneja en orden fuente (el orden que aparece en el DOM)
- -1 se ignora durante la tabulación, pero es enfocable.
Esta información se toma de: http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-18 18:29:51
Es un poco más complicado que la respuesta de Alan Haggai Alavi.
Después de analizar, IE8 y Opera hacen lo que dice la especificación HTML4. Firefox y Chrome sin embargo utilizar el orden DOM. Esto importa con un marcado mal formado como este.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test case 1</title>
</head>
<body>
<form>
<table>
<tr><td><input id="first" value="first in the character stream" tabindex="0"></td></tr>
<div><input id="second" value="second in the character stream" tabindex="0"></div>
</table>
<form>
</body>
</html>
Bien podría argumentar que con el marcado malformado todas las apuestas están fuera de todos modos, así que ¿qué pasa con JavaScript?
Considere este caso:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test case 2</title>
<script type="text/javascript">
moveFirst = function()
{
var f = document.getElementById("first");
f.parentNode.removeChild(f);
document.body.appendChild(f);
}
</script>
</head>
<body>
<form>
<table>
<tr><td><input id="first" value="first in the character stream" tabindex="0"></td></tr>
<tr><td><div><input id="second" value="second in the character stream" tabindex="0"></div></td></tr>
</table>
<form>
<div onclick="moveFirst()">move</div>
</body>
</html>
En este caso, cuando un usuario hace clic en "mover", IE8, Firefox, Chrome y Opera todos usan orden DOM, no carácter orden de transmisión.
Finalmente HTML5 no ofrece prácticamente ninguna garantía sobre el orden de tabulación entre los elementos que tienen un tabindex de 0, simplemente indicando que debe seguir las convenciones de la plataforma.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-11-07 01:54:48
tabindex="0" puede incluir pestañas en elementos que no son páginas del navegador web, como la barra de direcciones URL.
Probado para ser el caso de Firefox 32.03.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-13 02:38:04