teste11.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="pt-BR">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Teste11: aria-labelledby vs aria-activedescendant</title>
    <link rel="stylesheet" type="text/css" href="teste11.css">
</head>

<body>

<h1>Teste <code>aria-labelledby</code> vs <code>aria-activedescendant</code></h1>

<div id="texto">

<p>Este teste visa verificar o comportamento do leitor de tela quando um
<span lang="en">widget</span> com subitens (e.g. menu, grid) rotulado por
um atributo <code>aria-labelledby</code> e com indicação do item ativo dada
pelo atributo <code>aria-activedescendant</code> recebe foco. O
comportamento esperado é que o rótulo deveria ser anunciado antes e depois
o item selecionado. Na prática, somente o item selecionado está sendo
anunciado/lido.</p>

<p>Outro teste é verificar o comportamento do leitor mediante alterações
dinâmicas no conteúdo do elemento usado como rótulo (elemento referenciado
pelo atributo <code>aria-labelledby</code>).</p>

</div>

<div id="exemplos" role="application">

<h2 id="spwMenuTeste1Label">Menu teste 1: usando <code>ul</code> e <code>li</code></h2>

<ul id="spwMenuTeste1" role="menu" tabindex="0" aria-labelledby="spwMenuTeste1Label"
        aria-activedescendant="item-0-0">
    <li id="item-0-0" role="menuitem">Um</li>
    <li id="item-0-1" role="menuitem">Dois</li>
    <li id="item-0-2" role="menuitem">Três</li>
</ul>

<!-- ================================================================================= -->

<h2 id="spwMenuTeste2Label">Menu teste 2: usando <code>ul</code> e <code>li</code> com
        <code>aria-labelledby</code> nos itens</h2>

<ul id="spwMenuTeste2" role="menu" tabindex="0" aria-activedescendant="item-1-0">
    <li id="item-1-0" role="menuitem" aria-labelledby="spwMenuTeste2Label">Um</li>
    <li id="item-1-1" role="menuitem" aria-labelledby="spwMenuTeste2Label">Dois</li>
    <li id="item-1-2" role="menuitem" aria-labelledby="spwMenuTeste2Label">Três</li>
</ul>

<!-- ================================================================================= -->

<h2 id="spwMenuTeste3Label">Menu teste 3: usando <code>div</code></h2>

<div id="spwMenuTeste3" role="menu" tabindex="0" aria-labelledby="spwMenuTeste3Label"
        aria-activedescendant="item-2-0">
    Alguma coisa
    <div id="item-2-0" role="menuitem">Um</div>
    <div id="item-2-1" role="menuitem">Dois</div>
    <div id="item-2-2" role="menuitem">Três</div>
</div>

<!-- ================================================================================= -->

<h2 id="spwMenuTeste4Label">Menu teste 4: usando <code>div</code> com
        <code>aria-labelledby</code> nos itens</h2>

<div id="spwMenuTeste4" role="menu" tabindex="0" aria-activedescendant="item-3-0">
    Alguma coisa
    <div id="item-3-0" role="menuitem" aria-labelledby="spwMenuTeste4Label">Um</div>
    <div id="item-3-1" role="menuitem" aria-labelledby="spwMenuTeste4Label">Dois</div>
    <div id="item-4-2" role="menuitem" aria-labelledby="spwMenuTeste4Label">Três</div>
</div>

</div>

</body>

</html>