Download as
Browse Code »

Commit f7a5375b39a956e397971738c07f59988d43463f

Authored by higo.gomes
1 parent 80f6203b
Exists in master and in 1 other branch Desenvolvimento-Ases-Web

layout css criado 

git-svn-id: https://svn.bento.ifrs.edu.br/default/ASES/ASES%20-%20Web/ASES%20-%20Web/Fontes/avaliador-web@10653 c2178572-b5ca-4887-91d2-9e3a90c7d55b
Showing 1 changed file with 425 additions and 382 deletions   Show diff stats
src/main/webapp/WEB-INF/jsp/institucional/criteriosSucesso.jsp
  Diff comments   View file @f7a5375
... ... @@ -31,1019 +31,1062 @@
31 31  
32 32  
33 33 <hr class="hr_linhaDupla">
34   - <h3 class="subtitulo">Recomendação 1.1 - Respeitar os padrões Web</h3>
  34 + <h3 class="subtitulo">Recomendação 1.1 - Respeitar os padrões <span lang="en">Web</span></h3>
35 35  
36 36 <p class="criterios">
37   - Os padrões Web são recomendações do W3C (World Wide Web Consortium), as quais
  37 + Os padrões <span lang="en">Web</span> são recomendações do W3C (<span lang="en">World Wide Web Consortium</span>), as quais
38 38 são destinadas a orientar os desenvolvedores para o uso de boas práticas que tornam a
39   - web acessivel para todos, permitindo assim que os desenvolvedores criem experiências
  39 + <span lang="en">web</span> acessivel para todos, permitindo assim que os desenvolvedores criem experiências
40 40 ricas, alimentadas por um vasto armazenamento de dados, os quais estão disponiveis
41 41 para qualquer dispositivo e compatíveis com atuais e futuros agentes de usuário (ex: navegadores).</p>
42 42  
43 43  
44 44 <table class="tabelaCriterioSucesso">
45   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 1.1</caption>
  45 + <caption>Critérios de Avaliação e como avaliar Recomendação 1.1</caption>
46 46 <thead>
47 47 <tr>
48   - <th id="numero_11" class="topo indice0">Número</th>
49   - <th id="criterio_11" class="topo indice1">Critério</th>
50   - <th id="como_avaliar_11" class="topo indice2">Como avaliar</th>
  48 + <th id="numero_11" class="topoCriterios indice0">Número</th>
  49 + <th id="criterio_11" class="topoCriterios indice1">Critério</th>
  50 + <th id="como_avaliar_11" class="topoCriterios indice2">Como avaliar</th>
51 51 </tr>
52 52 </thead>
53 53 <tbody>
54 54  
55 55 <tr id="criterio_111">
56   - <td headers="numero_11" class="celula">1.1.1</td>
57   - <td headers="criterio_11" class="celula">Não foram respeitados os Padrões Web CSS</td>
58   - <td headers="como_avaliar_11" class="celula">Verificar relatório no anexo do documento de avaliação de erros e avisos apresentados pela ferramenta de avaliação de HTML do W3C: <a
59   - href="https://validator.w3.org/nu/">https://validator.w3.org/nu/ (link para um novo sitio)</a>.</td>
  56 + <td headers="numero_11" class="celulaCriterios">1.1.1</td>
  57 + <td headers="criterio_11" class="celulaCriterios">Não foram respeitados os Padrões <span lang="en">Web</span> HTML</td>
  58 + <td headers="como_avaliar_11" class="celulaCriterios">Verificar erros e avisos apresentados pela ferramenta de avaliação de HTML do W3C: <a
  59 + href="https://validator.w3.org/nu/">https://validator.w3.org/nu/ (<span lang="en">link</span> para um novo sítio)</a>.</td>
60 60 </tr>
61 61 <tr id="criterio_112">
62   - <td headers="numero_11" class="celula">1.1.2</td>
63   - <td headers="criterio_11" class="celula">Não foram respeitados os Padrões Web CSS</td>
64   - <td headers="como_avaliar_11" class="celula">Verificar relatório no anexo do documento de avaliação de erros e avisos apresentados pela ferramenta da avaliação de HTML do W3C: <a
65   - href="https://jigsaw.w3.org/css-validator/">https://jigsaw.w3.org/css-validator/ (link para um novo sitio)</a>.</td>
  62 + <td headers="numero_11" class="celulaCriterios">1.1.2</td>
  63 + <td headers="criterio_11" class="celulaCriterios">Não foram respeitados os Padrões <span lang="en">Web</span> CSS</td>
  64 + <td headers="como_avaliar_11" class="celulaCriterios">Verificar erros e avisos apresentados pela ferramenta da avaliação de CSS do W3C: <a
  65 + href="https://jigsaw.w3.org/css-validator/">https://jigsaw.w3.org/css-validator/ (<span lang="en">link</span> para um novo sítio)</a>.</td>
66 66 </tr>
67 67 <tr id="criterio_113">
68   - <td headers="numero_11" class="celula">1.1.3</td>
69   - <td headers="criterio_11" class="celula">Presença de CSS(s) in-line</td>
70   - <td headers="como_avaliar_11" class="celula">Verificar a presença do atributo "style" no código das páginas HTML.</td>
  68 + <td headers="numero_11" class="celulaCriterios">1.1.3</td>
  69 + <td headers="criterio_11" class="celulaCriterios">Presença de CSS(s) <span lang="en">in-line</span></td>
  70 + <td headers="como_avaliar_11" class="celulaCriterios">Verificar a presença do atributo "<span lang="en">style</span>" no código das páginas HTML.</td>
71 71 </tr>
72 72 <tr id="criterio_114">
73   - <td headers="numero_11" class="celula">1.1.4</td>
74   - <td headers="criterio_11" class="celula">Presença de CSS(s) interno</td>
75   - <td headers="como_avaliar_11" class="celula">Verificar a presença da tag HTML &lt;style&gt; no código das páginas HTML.</td>
  73 + <td headers="numero_11" class="celulaCriterios">1.1.4</td>
  74 + <td headers="criterio_11" class="celulaCriterios">Presença de CSS(s) interno</td>
  75 + <td headers="como_avaliar_11" class="celulaCriterios">Verificar a presença da tag HTML &lt;<span lang="en">style</span>&gt; no código das páginas HTML.</td>
76 76 </tr>
77 77 <tr id="criterio_115">
78   - <td headers="numero_11" class="celula">1.1.5</td>
79   - <td headers="criterio_11" class="celula">Presença de javascript(s) in-line</td>
80   - <td headers="como_avaliar_11" class="celula">Verificar a presença de código javascript dentro dos atributos de eventos no código HTML a serem avaliados: onload, onunload, onblur, onchange, onfocus, onsearch, onselect, onsubmit, onkeydown, onkeypress, onkeyup, onclick, ondblclick, onmousedown, onmousesemove, onmouseout, onmouseover, onmouseup, onmousewheel, oncopy, oncut, onpaste, onabort.</td>
  78 + <td headers="numero_11" class="celulaCriterios">1.1.5</td>
  79 + <td headers="criterio_11" class="celulaCriterios">Presença de <span lang="en">javascript</span>(s) <span lang="en">in-line</span></td>
  80 + <td headers="como_avaliar_11" class="celulaCriterios">Verificar a presença de código <span lang="en">javascript</span> dentro dos atributos de eventos no código HTML a serem avaliados:<span lang="en"> onload, onunload, onblur, onchange, onfocus, onsearch, onselect, onsubmit, onkeydown, onkeypress, onkeyup, onclick, ondblclick, onmousedown, onmousesemove, onmouseout, onmouseover, onmouseup, onmousewheel, oncopy, oncut, onpaste e onabort.</span></td>
81 81 </tr>
82 82 <tr id="criterio_116">
83   - <td headers="numero_11" class="celula">1.1.6</td>
84   - <td headers="criterio_11" class="celula">Presença de javascript(s) interno</td>
85   - <td headers="como_avaliar_11" class="celula">Verificar a presença de código javascript dentro da tag &lt;script&gt;.</td>
  83 + <td headers="numero_11" class="celulaCriterios">1.1.6</td>
  84 + <td headers="criterio_11" class="celulaCriterios">Presença de <span lang="en">javascript</span>(s) interno</td>
  85 + <td headers="como_avaliar_11" class="celulaCriterios">Verificar a presença de código <span lang="en">javascript</span> dentro da tag &lt;<span lang="en">script</span>&gt;.</td>
86 86 </tr>
87 87 </tbody>
88 88 </table>
89 89  
  90 + <hr class="hr_linhaDupla">
90 91 <h3 class="subtitulo">Recomendação 1.2 - Organizar o código HTML de forma lógica e semântica</h3>
91 92 <p class="criterios">O código HTML deve ser organizado de forma lógica e semântica, ou seja, apresentando os elementos em uma ordem compreensível e correspondendo ao conteúdo desejado. Cada elemento HTML deve ser utilizado para o fim que ele foi criado.</p>
92 93  
93 94 <table class="tabelaCriterioSucesso">
94   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 1.2</caption>
  95 + <caption>Critérios de Avaliação e como avaliar Recomendação 1.2</caption>
95 96 <thead>
96 97 <tr>
97   - <th id="numero_12" class="topo indice0">Número</th>
98   - <th id="criterio_12" class="topo indice1">Critério</th>
99   - <th id="como_avaliar_12" class="topo indice2">Como avaliar</th>
  98 + <th id="numero_12" class="topoCriterios indice0">Número</th>
  99 + <th id="criterio_12" class="topoCriterios indice1">Critério</th>
  100 + <th id="como_avaliar_12" class="topoCriterios indice2">Como avaliar</th>
100 101 </tr>
101 102 </thead>
102 103 <tbody>
103 104  
104 105 <tr id="criterio_121">
105   - <td headers="numero_12" class="celula">1.2.1</td>
106   - <td headers="criterio_12" class="celula">Presença de tags HTML sem atributo e conteúdo de texto</td>
107   - <td headers="como_avaliar_12" class="celula">Verificar a presença de tags HTML que apresentem inicio e fechamento, mas sem conteúdo de texto. Possível exemplo seria &lt;a&gt;&lt;/a&gt; ou &lt;div&gt;&lt;/div&gt;.</td>
  106 + <td headers="numero_12" class="celulaCriterios">1.2.1</td>
  107 + <td headers="criterio_12" class="celulaCriterios">Presença de tags HTML sem atributo e conteúdo de texto</td>
  108 + <td headers="como_avaliar_12" class="celulaCriterios">Verificar a presença de tags HTML que apresentem inicio e fechamento, mas sem conteúdo de texto. Possível exemplo seria &lt;a&gt;&lt;/a&gt; ou &lt;div&gt;&lt;/div&gt;.</td>
108 109 </tr>
109 110 <tr id="criterio_122">
110   - <td headers="numero_12" class="celula">1.2.2</td>
111   - <td headers="criterio_12" class="celula">Elementos utilizados de forma não semântica</td>
112   - <td headers="como_avaliar_12" class="celula">Verificar a presença de tags HTML com uso distinto da finalidade. Exemplo: tag &lt;p&gt; parágrafo sendo utilizada para simular quebra de linha, sendo a utilização correta a delimitação de texto.</td>
  111 + <td headers="numero_12" class="celulaCriterios">1.2.2</td>
  112 + <td headers="criterio_12" class="celulaCriterios">Elementos utilizados de forma não semântica</td>
  113 + <td headers="como_avaliar_12" class="celulaCriterios">Verificar a presença de tags HTML com uso distinto da finalidade. Exemplo: tag &lt;p&gt; parágrafo sendo utilizada para simular quebra de linha, sendo a utilização correta a delimitação de texto.</td>
113 114 </tr>
114 115 </tbody>
115 116 </table>
116 117  
  118 + <hr class="hr_linhaDupla">
117 119 <h3 class="subtitulo">Recomendação 1.3 - Utilizar corretamente os níveis de cabeçalho</h3>
118 120 <p class="criterios">Os níveis de cabeçalho (elementos HTML H1 a H6) devem ser utilizados de forma hierárquica, pois organizam a ordem de importância e subordinação dos conteúdos, facilitando a leitura e compreensão.</p>
119 121  
120 122 <table class="tabelaCriterioSucesso">
121   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 1.3</caption>
  123 + <caption>Critérios de Avaliação e como avaliar Recomendação 1.3</caption>
122 124 <thead>
123 125 <tr>
124   - <th id="numero_13" class="topo indice0">Número</th>
125   - <th id="criterio_13" class="topo indice1">Critério</th>
126   - <th id="como_avaliar_13" class="topo indice2">Como avaliar</th>
  126 + <th id="numero_13" class="topoCriterios indice0">Número</th>
  127 + <th id="criterio_13" class="topoCriterios indice1">Critério</th>
  128 + <th id="como_avaliar_13" class="topoCriterios indice2">Como avaliar</th>
127 129 </tr>
128 130 </thead>
129 131 <tbody>
130 132  
131 133 <tr id="criterio_131">
132   - <td headers="numero_13" class="celula">1.3.1</td>
133   - <td headers="criterio_13" class="celula">Os niveis de título não foram utilizados</td>
134   - <td headers="como_avaliar_13" class="celula">Verificar a ausência dos níveis de cabeçalho (&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, &lt;h6&gt;) nas páginas HTML.</td>
  134 + <td headers="numero_13" class="celulaCriterios">1.3.1</td>
  135 + <td headers="criterio_13" class="celulaCriterios">Os niveis de título não foram utilizados</td>
  136 + <td headers="como_avaliar_13" class="celulaCriterios">Verificar a ausência dos níveis de cabeçalho (&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt; e &lt;h6&gt;) nas páginas HTML.</td>
135 137 </tr>
136 138 <tr id="criterio_132">
137   - <td headers="numero_13" class="celula">1.3.2</td>
138   - <td headers="criterio_13" class="celula">A hierarquia dos níveis de título está incorreta</td>
139   - <td headers="como_avaliar_13" class="celula">Verificar a falta de ordem sequencial da presença de níveis de cabeçalho. Exemplo: a presença do nível &lt;h3&gt; depende do nível anterior &lt;h2&gt;.</td>
  139 + <td headers="numero_13" class="celulaCriterios">1.3.2</td>
  140 + <td headers="criterio_13" class="celulaCriterios">A hierarquia dos níveis de título está incorreta</td>
  141 + <td headers="como_avaliar_13" class="celulaCriterios">Verificar a falta de ordem sequencial da presença de níveis de cabeçalho. Exemplo: a presença do nível &lt;h3&gt; depende do nível anterior &lt;h2&gt;.</td>
140 142 </tr>
141 143 <tr id="criterio_133">
142   - <td headers="numero_13" class="celula">1.3.3</td>
143   - <td headers="criterio_13" class="celula">Foi utilizado somente o nível &lt;h1&gt;</td>
144   - <td headers="como_avaliar_13" class="celula">Verificar a presença do nível da cabeçalho &lt;h1&gt; sem categorizar outros assuntos da página em níveis de cabeçalho.</td>
  144 + <td headers="numero_13" class="celulaCriterios">1.3.3</td>
  145 + <td headers="criterio_13" class="celulaCriterios">Foi utilizado somente o nível H1</td>
  146 + <td headers="como_avaliar_13" class="celulaCriterios">Verificar a presença do nível da cabeçalho &lt;h1&gt; sem categorizar outros assuntos da página em níveis de cabeçalho.</td>
145 147 </tr>
146 148 <tr id="criterio_134">
147   - <td headers="numero_13" class="celula">1.3.4</td>
148   - <td headers="criterio_13" class="celula">Presença de mais de 1 cabeçalho</td>
149   - <td headers="como_avaliar_13" class="celula">Verificar a presença de níveis de cabeçalho &lt;h1&gt; sendo utilizados de forma repetida.</td>
  149 + <td headers="numero_13" class="celulaCriterios">1.3.4</td>
  150 + <td headers="criterio_13" class="celulaCriterios">Presença de mais de 1 cabeçalho</td>
  151 + <td headers="como_avaliar_13" class="celulaCriterios">Verificar a presença de níveis de cabeçalho &lt;h1&gt; sendo utilizados de forma repetida.</td>
150 152 </tr>
151 153 </tbody>
152 154 </table>
153 155  
  156 + <hr class="hr_linhaDupla">
154 157 <h3 class="subtitulo">Recomendação 1.4 - Ordenar de forma lógica e intuitiva a leitura e tabulação</h3>
155 158 <p class="criterios">Deve-se criar o código HTML com uma sequência lógica de leitura para percorrer links, controles de formulários e objetos. Essa sequência é determinada pela ordem em que se encontra no código HTML.</p>
156 159  
157 160 <table class="tabelaCriterioSucesso">
158   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 1.4</caption>
  161 + <caption>Critérios de Avaliação e como avaliar Recomendação 1.4</caption>
159 162 <thead>
160 163 <tr>
161   - <th id="numero_14" class="topo indice0">Número</th>
162   - <th id="criterio_14" class="topo indice1">Critério</th>
163   - <th id="como_avaliar_14" class="topo indice2">Como avaliar</th>
  164 + <th id="numero_14" class="topoCriterios indice0">Número</th>
  165 + <th id="criterio_14" class="topoCriterios indice1">Critério</th>
  166 + <th id="como_avaliar_14" class="topoCriterios indice2">Como avaliar</th>
164 167 </tr>
165 168 </thead>
166 169 <tbody>
167 170  
168 171 <tr id="criterio_141">
169   - <td headers="numero_14" class="celula">1.4.1</td>
170   - <td headers="criterio_14" class="celula">O bloco de conteúdo não esta antes do bloco de menu no HTML</td>
171   - <td headers="como_avaliar_14" class="celula">Verificar se a presença do código da página que representa o menu está posicionado depois do código que representa o conteúdo da página HTML.</td>
  172 + <td headers="numero_14" class="celulaCriterios">1.4.1</td>
  173 + <td headers="criterio_14" class="celulaCriterios">O bloco de conteúdo não esta antes do bloco de menu no HTML</td>
  174 + <td headers="como_avaliar_14" class="celulaCriterios">Verificar se a presença do código da página que representa o menu está posicionado depois do código que representa o conteúdo da página HTML.</td>
172 175 </tr>
173 176 <tr id="criterio_142">
174   - <td headers="numero_14" class="celula">1.4.2</td>
175   - <td headers="criterio_14" class="celula">Presença do atributo "tabindex"</td>
176   - <td headers="como_avaliar_14" class="celula">Verificar a presença de utilização do tabindex nas páginas HTML.</td>
  177 + <td headers="numero_14" class="celulaCriterios">1.4.2</td>
  178 + <td headers="criterio_14" class="celulaCriterios">Presença do atributo <span lang="en">TABINDEX</span></td>
  179 + <td headers="como_avaliar_14" class="celulaCriterios">Verificar a presença de utilização do atributo "<span lang="en">tabindex</span>" nas páginas HTML.</td>
177 180 </tr>
178 181 <tr id="criterio_143">
179   - <td headers="numero_14" class="celula">1.4.3</td>
180   - <td headers="criterio_14" class="celula">Uso incorreto do "tabindex"</td>
181   - <td headers="como_avaliar_14" class="celula">Verificar a presença do conteúdo -1 do atributo "tabindex" com o intuito de não influenciar a ordem do código da página, ou verificar se a presença de conteúdo do tabindex esta superior a 32767 e inferior a 0.</td>
  182 + <td headers="numero_14" class="celulaCriterios">1.4.3</td>
  183 + <td headers="criterio_14" class="celulaCriterios">Uso incorreto do <span lang="en">TABINDEX</span></td>
  184 + <td headers="como_avaliar_14" class="celulaCriterios">Verificar a presença do conteúdo -1 do atributo "<span lang="en">tabindex</span>" com o intuito de não influenciar a ordem do código da página, ou verificar se a presença de conteúdo do atributo "<span lang="en">tabindex</span>" esta superior a 32767 e inferior a 0.</td>
182 185 </tr>
183 186  
184 187 </tbody>
185 188 </table>
186 189  
  190 + <hr class="hr_linhaDupla">
187 191 <h3 class="subtitulo">Recomendação 1.5 - Fornecer âncoras para ir direto a um bloco de conteúdo </h3>
188   - <p class="criterios">Devem ser fornecidas âncoras, disponíveis na barra de acessibilidade, que apontem para links relevantes presentes na mesma página. Assim, é possivel ir ao bloco do conteúdo desejado. Os links devem ser colocados em lugares estratégicos da página, como no início e fim do conteúdo e início e fim do menu. É importante ressaltar que o primeiro link da página deve ser o: "ir para o conteúdo".</p>
  192 + <p class="criterios">Devem ser fornecidas âncoras, disponíveis na barra de acessibilidade, que apontem para links relevantes presentes na mesma página. Assim, é possivel ir ao bloco do conteúdo desejado. Os links devem ser colocados em lugares estratégicos da página, como no início e fim do conteúdo e início e fim do menu. É importante ressaltar que o primeiro <span lang="en">link</span> da página deve ser o: "ir para o conteúdo".</p>
189 193  
190 194 <table class="tabelaCriterioSucesso">
191   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 1.5</caption>
  195 + <caption>Critérios de Avaliação e como avaliar Recomendação 1.5</caption>
192 196 <thead>
193 197 <tr>
194   - <th id="numero_15" class="topo indice0">Número</th>
195   - <th id="criterio_15" class="topo indice1">Critério</th>
196   - <th id="como_avaliar_15" class="topo indice2">Como avaliar</th>
  198 + <th id="numero_15" class="topoCriterios indice0">Número</th>
  199 + <th id="criterio_15" class="topoCriterios indice1">Critério</th>
  200 + <th id="como_avaliar_15" class="topoCriterios indice2">Como avaliar</th>
197 201 </tr>
198 202 </thead>
199 203 <tbody>
200 204  
201 205 <tr id="criterio_151">
202   - <td headers="numero_15" class="celula">1.5.1</td>
203   - <td headers="criterio_15" class="celula">Não foram encontradas âncoras que permitam saltar pelas diferentes seções da página</td>
204   - <td headers="como_avaliar_15" class="celula">Verificar a ausência de links com conteúdo do atributo "href" que comecem com "#".</td>
  206 + <td headers="numero_15" class="celulaCriterios">1.5.1</td>
  207 + <td headers="criterio_15" class="celulaCriterios">Não foram encontradas âncoras que permitam saltar pelas diferentes seções da página</td>
  208 + <td headers="como_avaliar_15" class="celulaCriterios">Verificar a ausência de links com conteúdo de atributo "href" que comecem com "#".</td>
205 209 </tr>
206 210 <tr id="criterio_152">
207   - <td headers="numero_15" class="celula">1.5.2</td>
208   - <td headers="criterio_15" class="celula">Foram encontradas âncoras que permitem saltar pelas diferentes seções da página, porém algumas não possuem um destino correspondente</td>
209   - <td headers="como_avaliar_15" class="celula">Verificar a presença de links com conteúdo do atributo "href" que comecem com "#", porém não há o destino da âncora na página HTML.</td>
  211 + <td headers="numero_15" class="celulaCriterios">1.5.2</td>
  212 + <td headers="criterio_15" class="celulaCriterios">Foram encontradas âncoras que permitem saltar pelas diferentes seções da página, porém algumas não possuem um destino correspondente</td>
  213 + <td headers="como_avaliar_15" class="celulaCriterios">Verificar a presença de links com conteúdo de atributo "href" que comecem com "#", porém não há o destino da âncora na página HTML.</td>
210 214 </tr>
211 215 <tr id="criterio_153">
212   - <td headers="numero_15" class="celula">1.5.3</td>
213   - <td headers="criterio_15" class="celula">Não existem atalhos</td>
214   - <td headers="como_avaliar_15" class="celula">Verificar a ausência de tags HTML com atributo "accesskey" na página.</td>
  216 + <td headers="numero_15" class="celulaCriterios">1.5.3</td>
  217 + <td headers="criterio_15" class="celulaCriterios">Não existem atalhos</td>
  218 + <td headers="como_avaliar_15" class="celulaCriterios">Verificar a ausência de tags HTML com atributo "<span lang="en">accesskey</span>" na página.</td>
215 219 </tr>
216 220 <tr id="criterio_154">
217   - <td headers="numero_15" class="celula">1.5.4</td>
218   - <td headers="criterio_15" class="celula">O primeiro link é uma âncora para o conteúdo da página</td>
219   - <td headers="como_avaliar_15" class="celula">Verificar a presença de link com conteúdo do atributo "href" que comece com "#", e o destino da âncora seja um conteúdo específico da página HTML.</td>
  221 + <td headers="numero_15" class="celulaCriterios">1.5.4</td>
  222 + <td headers="criterio_15" class="celulaCriterios">O primeiro <span lang="en">link</span> é uma âncora para o conteúdo da página</td>
  223 + <td headers="como_avaliar_15" class="celulaCriterios">Verificar a presença de <span lang="en">link</span> com conteúdo de atributo "href" que comece com "#", e o destino da âncora seja um conteúdo específico da página HTML.</td>
220 224 </tr>
221 225 <tr id="criterio_155">
222   - <td headers="numero_15" class="celula">1.5.5</td>
223   - <td headers="criterio_15" class="celula">O primeiro link é uma âncora válida para o conteúdo principal da página</td>
224   - <td headers="como_avaliar_15" class="celula">Verificar a presença de link com conteúdo do atributo "href" que comece com "#", e o destino da âncora seja para o conteúdo principal da página HTML.</td>
  226 + <td headers="numero_15" class="celulaCriterios">1.5.5</td>
  227 + <td headers="criterio_15" class="celulaCriterios">Presença de atributo <span lang="en">ACCESSKEY</span> com conteúdo repetido</td>
  228 + <td headers="como_avaliar_15" class="celulaCriterios">Verificar a presença do atributo <span lang="en">"accesskey"</span> e conteúdo repetido em outros <span lang="en">"accesskeys"</span> da página HTML.</td>
225 229 </tr>
226 230 </tbody>
227 231 </table>
228 232  
  233 + <hr class="hr_linhaDupla">
229 234 <h3 class="subtitulo">Recomendação 1.6 - Não utilizar tabelas para diagramação</h3>
230 235 <p class="criterios">As tabelas devem ser utilizadas apenas para dados tabulares e não para efeitos de disposição dos elementos da página.</p>
231 236  
232 237 <table class="tabelaCriterioSucesso">
233   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 1.6</caption>
  238 + <caption>Critérios de Avaliação e como avaliar Recomendação 1.6</caption>
234 239 <thead>
235 240 <tr>
236   - <th id="numero_16" class="topo indice0">Número</th>
237   - <th id="criterio_16" class="topo indice1">Critério</th>
238   - <th id="como_avaliar_16" class="topo indice2">Como avaliar</th>
  241 + <th id="numero_16" class="topoCriterios indice0">Número</th>
  242 + <th id="criterio_16" class="topoCriterios indice1">Critério</th>
  243 + <th id="como_avaliar_16" class="topoCriterios indice2">Como avaliar</th>
239 244 </tr>
240 245 </thead>
241 246 <tbody>
242 247  
243 248 <tr id="criterio_161">
244   - <td headers="numero_16" class="celula">1.6.1</td>
245   - <td headers="criterio_16" class="celula">Foram utizadas tabelas</td>
246   - <td headers="como_avaliar_16" class="celula">Verificar a presença da tag &lt;table&gt; na página HTML.</td>
  249 + <td headers="numero_16" class="celulaCriterios">1.6.1</td>
  250 + <td headers="criterio_16" class="celulaCriterios">Foram utizadas tabelas</td>
  251 + <td headers="como_avaliar_16" class="celulaCriterios">Verificar a presença da tag &lt;<span lang="en">table</span>&gt; na página HTML.</td>
247 252 </tr>
248 253  
249 254 <tr id="criterio_162">
250   - <td headers="numero_16" class="celula">1.6.2</td>
251   - <td headers="criterio_16" class="celula">Há formulário construído dentro de tabela</td>
252   - <td headers="como_avaliar_16" class="celula">Verificar a presença da tag &lt;form&gt; entre a tag &lt;table&gt;.</td>
  255 + <td headers="numero_16" class="celulaCriterios">1.6.2</td>
  256 + <td headers="criterio_16" class="celulaCriterios">Há formulário construído dentro de tabela</td>
  257 + <td headers="como_avaliar_16" class="celulaCriterios">Verificar a presença da tag &lt;<span lang="en">form</span>&gt; entre a tag &lt;<span lang="en">table</span>&gt;.</td>
253 258 </tr>
254 259 </tbody>
255 260 </table>
256 261  
  262 + <hr class="hr_linhaDupla">
257 263 <h3 class="subtitulo">Recomendação 1.7 - Separar links adjacentes</h3>
258   - <p class="criterios">Links adjacentes devem ser separados por mais do que simples espaços, para que não fiquem confusos, em especial para usuários que utilizam leitor de tela. Para isso, é recomendado o uso de listas, onde cada elemento dentro da lista é um link. As listas podem ser estilizadas visualmente com CSS para que os itens sejam mostrados da maneira desejada, como um ao lado do outro.</p>
  264 + <p class="criterios">Links adjacentes devem ser separados por mais do que simples espaços, para que não fiquem confusos, em especial para usuários que utilizam leitor de tela. Para isso, é recomendado o uso de listas, onde cada elemento dentro da lista é um <span lang="en">link</span>. As listas podem ser estilizadas visualmente com CSS para que os itens sejam mostrados da maneira desejada, como um ao lado do outro.</p>
259 265  
260 266 <table class="tabelaCriterioSucesso">
261   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 1.7</caption>
  267 + <caption>Critérios de Avaliação e como avaliar Recomendação 1.7</caption>
262 268 <thead>
263 269 <tr>
264   - <th id="numero_17" class="topo indice0">Número</th>
265   - <th id="criterio_17" class="topo indice1">Critério</th>
266   - <th id="como_avaliar_17" class="topo indice2">Como avaliar</th>
  270 + <th id="numero_17" class="topoCriterios indice0">Número</th>
  271 + <th id="criterio_17" class="topoCriterios indice1">Critério</th>
  272 + <th id="como_avaliar_17" class="topoCriterios indice2">Como avaliar</th>
267 273 </tr>
268 274 </thead>
269 275 <tbody>
270 276  
271 277 <tr id="criterio_171">
272   - <td headers="numero_17" class="celula">1.7.1</td>
273   - <td headers="criterio_17" class="celula">Há links adjacentes sem nenhum tipo de separação ou separação por espaços em branco</td>
274   - <td headers="como_avaliar_17" class="celula">Verificar a presença de links dispostos numa forma sequencial sem separação explicita (caracteres especiais) ou separação explicita por espaços em branco.</td>
  278 + <td headers="numero_17" class="celulaCriterios">1.7.1</td>
  279 + <td headers="criterio_17" class="celulaCriterios">Há links adjacentes sem nenhum tipo de separação ou separação por espaços em branco</td>
  280 + <td headers="como_avaliar_17" class="celulaCriterios">Verificar a presença de links dispostos numa forma sequencial sem separação explícita (caracteres especiais) ou separação explícita por espaços em branco.</td>
275 281 </tr>
276 282  
277 283  
278 284 </tbody>
279 285 </table>
280 286  
  287 + <hr class="hr_linhaDupla">
281 288 <h3 class="subtitulo">Recomendação 1.8 - Dividir as áreas de informação</h3>
282 289 <p class="criterios">Áreas de informação devem ser divididas em grupos fáceis de gerenciar. As divisões mais comuns são: "topo", "conteúdo", "menu" e "rodapé". Nas páginas internas deve-se manter uma mesma divisão para que o usuário se familiarize mais rapidamente com a estrutura do sítio. É importante destacar, entretanto, que a página inicial pode ter uma divisão diferente das páginas internas, pois ela normalmente contém mais elementos.</p>
283 290  
284 291 <table class="tabelaCriterioSucesso">
285   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 1.8</caption>
  292 + <caption>Critérios de Avaliação e como avaliar Recomendação 1.8</caption>
286 293 <thead>
287 294 <tr>
288   - <th id="numero_18" class="topo indice0">Número</th>
289   - <th id="criterio_18" class="topo indice1">Critério</th>
290   - <th id="como_avaliar_18" class="topo indice2">Como avaliar</th>
  295 + <th id="numero_18" class="topoCriterios indice0">Número</th>
  296 + <th id="criterio_18" class="topoCriterios indice1">Critério</th>
  297 + <th id="como_avaliar_18" class="topoCriterios indice2">Como avaliar</th>
291 298 </tr>
292 299 </thead>
293 300 <tbody>
294 301  
295 302 <tr id="criterio_181">
296   - <td headers="numero_18" class="celula">1.8.1</td>
297   - <td headers="criterio_18" class="celula">Ausência de divisão de áreas quando do uso HTML 5</td>
298   - <td headers="como_avaliar_18" class="celula">Verificar a ausência das tags: &lt;header&gt;, &lt;footer&gt;, &lt;section&gt;, &lt;aside&gt;, &lt;nav&gt; e &lt;article&gt;.</td>
  303 + <td headers="numero_18" class="celulaCriterios">1.8.1</td>
  304 + <td headers="criterio_18" class="celulaCriterios">Ausência de divisão de áreas quando do uso do HTML 5</td>
  305 + <td headers="como_avaliar_18" class="celulaCriterios">Verificar a ausência das tags: <span lang="en">&lt;header&gt;, &lt;footer&gt;, &lt;section&gt;, &lt;aside&gt;, &lt;nav&gt; e &lt;article&gt;</span>.</td>
299 306 </tr>
300 307  
301 308 <tr id="criterio_182">
302   - <td headers="numero_18" class="celula">1.8.2</td>
303   - <td headers="criterio_18" class="celula">Ausência de divisão de áreas quando do uso de LANDMARKS de HTML</td>
304   - <td headers="como_avaliar_18" class="celula">Verificar a ausência do atributo "role" nas tags HTML com os conteúdos: "banner", "complementary", "contentinfo", "main", "navigation" e "search".</td>
  309 + <td headers="numero_18" class="celulaCriterios">1.8.2</td>
  310 + <td headers="criterio_18" class="celulaCriterios">Ausência de divisão de áreas quando do uso de <span lang="en">LANDMARKS</span> de HTML</td>
  311 + <td headers="como_avaliar_18" class="celulaCriterios">Verificar a ausência do atributo "role" nas tags HTML com os conteúdos: <span lang="en">"banner", "complementary", "contentinfo", "main", "navigation" e "search"</span>.</td>
305 312 </tr>
306 313  
307 314  
308 315 </tbody>
309 316 </table>
310 317  
  318 + <hr class="hr_linhaDupla">
311 319 <h3 class="subtitulo">Recomendação 1.9 - Não abrir novas instâncias sem a solicitação do usuário</h3>
312 320 <p class="criterios">A decisão de utilizar-se de novas instâncias - por exemplo abas ou janelas - para acesso a páginas, serviços ou qualquer informação, deve ser de escolha do usuário.</p>
313 321  
314 322 <table class="tabelaCriterioSucesso">
315   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 1.9</caption>
  323 + <caption>Critérios de Avaliação e como avaliar Recomendação 1.9</caption>
316 324 <thead>
317 325 <tr>
318   - <th id="numero_19" class="topo indice0">Número</th>
319   - <th id="criterio_19" class="topo indice1">Critério</th>
320   - <th id="como_avaliar_19" class="topo indice2">Como avaliar</th>
  326 + <th id="numero_19" class="topoCriterios indice0">Número</th>
  327 + <th id="criterio_19" class="topoCriterios indice1">Critério</th>
  328 + <th id="como_avaliar_19" class="topoCriterios indice2">Como avaliar</th>
321 329 </tr>
322 330 </thead>
323 331 <tbody>
324 332  
325 333 <tr id="criterio_191">
326   - <td headers="numero_19" class="celula">1.9.1</td>
327   - <td headers="criterio_19" class="celula">Há link que abre nova página ou aba</td>
328   - <td headers="como_avaliar_19" class="celula">Verificar a presença de links com atributo "target" preenchido com "_blank".</td>
  334 + <td headers="numero_19" class="celulaCriterios">1.9.1</td>
  335 + <td headers="criterio_19" class="celulaCriterios">Há <span lang="en">link</span> que abre nova página ou aba</td>
  336 + <td headers="como_avaliar_19" class="celulaCriterios">Verificar a presença de links com atributo "<span lang="en">target</span>" preenchido com "_<span lang="en">blank</span>".</td>
329 337 </tr>
330 338  
331 339 </tbody>
332 340 </table>
333 341  
  342 + <hr class="hr_linhaDupla">
334 343 <h3 class="subtitulo">Recomendação 2.1 - Disponibilizar todas as funções da página via teclado</h3>
335   - <p class="criterios">Todas as funções da página que utilizam linguagens de script (javascript) devem ser programadas, primeiramente, para o uso com o teclado. O foco não deverá estar bloqueado ou fixado em um elemento da página, para que o usuário possa mover-se pelo teclado por todos os elementos. Isso inclui movimentação em janelas modais (abertura de janela de dialogo que bloqueia qualquer interação com a janela principal). </p>
  344 + <p class="criterios">Todas as funções da página que utilizam linguagens de <span lang="en">script</span> (<span lang="en">javascript</span>) devem ser programadas, primeiramente, para o uso com o teclado. O foco não deverá estar bloqueado ou fixado em um elemento da página, para que o usuário possa mover-se pelo teclado por todos os elementos. Isso inclui movimentação em janelas modais (abertura de janela de dialogo que bloqueia qualquer interação com a janela principal). </p>
336 345  
337 346 <table class="tabelaCriterioSucesso">
338   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 2.1</caption>
  347 + <caption>Critérios de Avaliação e como avaliar Recomendação 2.1</caption>
339 348 <thead>
340 349 <tr>
341   - <th id="numero_21" class="topo indice0">Número</th>
342   - <th id="criterio_21" class="topo indice1">Critério</th>
343   - <th id="como_avaliar_21" class="topo indice2">Como avaliar</th>
  350 + <th id="numero_21" class="topoCriterios indice0">Número</th>
  351 + <th id="criterio_21" class="topoCriterios indice1">Critério</th>
  352 + <th id="como_avaliar_21" class="topoCriterios indice2">Como avaliar</th>
344 353 </tr>
345 354 </thead>
346 355 <tbody>
347 356  
348 357 <tr id="criterio_211">
349   - <td headers="numero_21" class="celula">2.1.1</td>
350   - <td headers="criterio_21" class="celula">Há funcionalidade que só funciona pelo mouse usuário</td>
351   - <td headers="como_avaliar_21" class="celula">Verificar a presença dos eventos nas tags HTML (onmousedown, onmouseup, onmouseover, onmouseout) e a ausência de evento para permitir a manipulação por teclado.</td>
  358 + <td headers="numero_21" class="celulaCriterios">2.1.1</td>
  359 + <td headers="criterio_21" class="celulaCriterios">Há funcionalidade que só funciona pelo <span lang="en">mouse</span></td>
  360 + <td headers="como_avaliar_21" class="celulaCriterios">Verificar a presença dos eventos (<span lang="en">onmousedown, onmouseup, onmouseover, onmouseout</span>) nas tags HTML e a ausência de evento para permitir a manipulação por teclado.</td>
352 361 </tr>
353   -
  362 +
354 363 <tr id="criterio_212">
355   - <td headers="numero_21" class="celula">2.1.2</td>
356   - <td headers="criterio_21" class="celula"> Presença de eventos associados a elementos não interativos</td>
357   - <td headers="como_avaliar_21" class="celula">Verificar a presença de eventos HTML a elementos estáticos da página HTML. Um exemplo é a presença de mudança de contexto no nível de cabeçalho.</td>
  364 + <td headers="numero_21" class="celulaCriterios">2.1.2</td>
  365 + <td headers="criterio_21" class="celulaCriterios">Presença de evento <span lang="en">DBLCLICK</span> ou <span lang="en">ONDBCLICK</span> no elemento HTML</td>
  366 + <td headers="como_avaliar_21" class="celulaCriterios">Verificar a presença do evento "<span lang="en">ondblclick</span>" nas tags HTML.</td>
  367 + </tr>
  368 +
  369 + <tr id="criterio_213">
  370 + <td headers="numero_21" class="celulaCriterios">2.1.3</td>
  371 + <td headers="criterio_21" class="celulaCriterios"> Presença de eventos associados a elementos não interativos</td>
  372 + <td headers="como_avaliar_21" class="celulaCriterios">Verificar a presença de eventos HTML associados a elementos estáticos da página HTML. Um exemplo é a presença de mudança de contexto no nível de cabeçalho.</td>
358 373 </tr>
359 374 </tbody>
360 375 </table>
361 376  
  377 + <hr class="hr_linhaDupla">
362 378 <h3 class="subtitulo">Recomendação 2.2 - Garantir que os objetos programáveis sejam acessíveis</h3>
363 379 <p class="criterios">Deve-se garantir que scripts, conteúdos dinâmicos e outros elementos programáveis sejam acessíveis e que seja possível sua execução via navegação.</p>
364 380  
365 381 <table class="tabelaCriterioSucesso">
366   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 2.2</caption>
  382 + <caption>Critérios de Avaliação e como avaliar Recomendação 2.2</caption>
367 383 <thead>
368 384 <tr>
369   - <th id="numero_22" class="topo indice0">Número</th>
370   - <th id="criterio_22" class="topo indice1">Critério</th>
371   - <th id="como_avaliar_22" class="topo indice2">Como avaliar</th>
  385 + <th id="numero_22" class="topoCriterios indice0">Número</th>
  386 + <th id="criterio_22" class="topoCriterios indice1">Critério</th>
  387 + <th id="como_avaliar_22" class="topoCriterios indice2">Como avaliar</th>
372 388 </tr>
373 389 </thead>
374 390 <tbody>
375 391  
376 392 <tr id="criterio_221">
377   - <td headers="numero_22" class="celula">2.2.1</td>
378   - <td headers="criterio_22" class="celula">Presença de elemento SCRIPT sem o elemento NOSCRIPT</td>
379   - <td headers="como_avaliar_22" class="celula">Verificar a presença do elemento &lt;script&gt; sem o elemento &lt;noscript&gt; na página.</td>
  393 + <td headers="numero_22" class="celulaCriterios">2.2.1</td>
  394 + <td headers="criterio_22" class="celulaCriterios">Presença de elemento <span lang="en">SCRIPT</span> sem o elemento <span lang="en">NOSCRIPT</span></td>
  395 + <td headers="como_avaliar_22" class="celulaCriterios">Verificar a presença do elemento &lt;<span lang="en">script</span>&gt; sem o elemento &lt;<span lang="en">noscript</span>&gt; na página.</td>
380 396 </tr>
381 397 <tr id="criterio_222">
382   - <td headers="numero_22" class="celula">2.2.2</td>
383   - <td headers="criterio_22" class="celula">Presença de elemento OBJECT sem o conteúdo alternativo</td>
384   - <td headers="como_avaliar_22" class="celula">Verificar a presença do elemento &lt;object&gt; sem texto entre os elementos. Exemplo: &lt;object&gt; Digite aqui o texto alternativo &lt;/object&gt;.</td>
  398 + <td headers="numero_22" class="celulaCriterios">2.2.2</td>
  399 + <td headers="criterio_22" class="celulaCriterios">Presença de elemento <span lang="en">OBJECT</span> sem o conteúdo alternativo</td>
  400 + <td headers="como_avaliar_22" class="celulaCriterios">Verificar a presença do elemento &lt;<span lang="en">object</span>&gt; sem texto entre os elementos. Exemplo: &lt;<span lang="en">object</span>&gt; Digite aqui o texto alternativo &lt;/<span lang="en">object</span>&gt;.</td>
385 401 </tr>
386 402  
387 403 <tr id="criterio_223">
388   - <td headers="numero_22" class="celula">2.2.3</td>
389   - <td headers="criterio_22" class="celula">Presença de elemento EMBED na página HTML</td>
390   - <td headers="como_avaliar_22" class="celula">Verificar a presença do elemento &lt;embed&gt; sem texto entre os elementos. Exemplo: &lt;embed&gt; Digite aqui o texto alternativo &lt;/embed&gt;.</td>
  404 + <td headers="numero_22" class="celulaCriterios">2.2.3</td>
  405 + <td headers="criterio_22" class="celulaCriterios">Presença de elemento <span lang="en">EMBED</span> na página HTML</td>
  406 + <td headers="como_avaliar_22" class="celulaCriterios">Verificar a presença do elemento &lt;<span lang="en">embed</span>&gt; sem texto entre os elementos. Exemplo: &lt;<span lang="en">embed</span>&gt; Digite aqui o texto alternativo &lt;/<span lang="en">embed</span>&gt;.</td>
391 407 </tr>
392 408  
393 409 <tr id="criterio_224">
394   - <td headers="numero_22" class="celula">2.2.4</td>
395   - <td headers="criterio_22" class="celula">Presença de elemento APPLET na página HTML</td>
396   - <td headers="como_avaliar_22" class="celula">Verificar a presença do elemento &lt;applet&gt; sem texto entre os elementos. Exemplo:&lt;applet&gt; Digite aqui o texto alternativo &lt;/applet&gt;.</td>
  410 + <td headers="numero_22" class="celulaCriterios">2.2.4</td>
  411 + <td headers="criterio_22" class="celulaCriterios">Presença de elemento <span lang="en">APPLET</span> na página HTML</td>
  412 + <td headers="como_avaliar_22" class="celulaCriterios">Verificar a presença do elemento &lt;<span lang="en">applet</span>&gt; sem texto entre os elementos. Exemplo:&lt;<span lang="en">applet</span>&gt; Digite aqui o texto alternativo &lt;/<span lang="en">applet</span>&gt;.</td>
397 413 </tr>
398 414 </tbody>
399 415 </table>
400 416  
  417 + <hr class="hr_linhaDupla">
401 418 <h3 class="subtitulo">Recomendação 2.3 - Não criar páginas com atualização automática periódica</h3>
402   - <p class="criterios">A atualização automática periódica tira do usuário a autonomia em relação à escolha (semelhante a abertura de novas instâncias em navegadores) e podem confundir e desorientar os usuários, especialmente usuários que utilizam leitores de tela.</p>
  419 + <p class="criterios">A atualização automática periódica tira do usuário a autonomia em relação à escolha (semelhante a abertura de novas instâncias em navegadores) e pode confundir e desorientar os usuários, especialmente usuários que utilizam leitores de tela.</p>
403 420  
404 421 <table class="tabelaCriterioSucesso">
405   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 2.3</caption>
  422 + <caption>Critérios de Avaliação e como avaliar Recomendação 2.3</caption>
406 423 <thead>
407 424 <tr>
408   - <th id="numero_23" class="topo indice0">Número</th>
409   - <th id="criterio_23" class="topo indice1">Critério</th>
410   - <th id="como_avaliar_23" class="topo indice2">Como avaliar</th>
  425 + <th id="numero_23" class="topoCriterios indice0">Número</th>
  426 + <th id="criterio_23" class="topoCriterios indice1">Critério</th>
  427 + <th id="como_avaliar_23" class="topoCriterios indice2">Como avaliar</th>
411 428 </tr>
412 429 </thead>
413 430 <tbody>
414 431  
415 432 <tr id="criterio_231">
416   - <td headers="numero_23" class="celula">2.3.1</td>
417   - <td headers="criterio_23" class="celula">Página que se atualiza automaticamente</td>
418   - <td headers="como_avaliar_23" class="celula">Verificar a presença do elemento &lt;meta&gt; e o atributo "HTTP-EQUIV" com o conteúdo "refresh" ou a presença das funções javascript: setTimeout() e setInterval() com a função para carregar a mesma página.</td>
  433 + <td headers="numero_23" class="celulaCriterios">2.3.1</td>
  434 + <td headers="criterio_23" class="celulaCriterios">Página que se atualiza automaticamente</td>
  435 + <td headers="como_avaliar_23" class="celulaCriterios">Verificar a presença do elemento &lt;<span lang="en">meta</span>&gt; e o atributo "http-equiv" com o conteúdo "<span lang="en">refresh</span>" ou a presença das funções <span lang="en">javascript</span>: <span lang="en">setTimeOut</span> e <span lang="en">setInterval</span> com a função para carregar a mesma página.</td>
419 436 </tr>
420 437  
421 438  
422 439 </tbody>
423 440 </table>
424 441  
  442 + <hr class="hr_linhaDupla">
425 443 <h3 class="subtitulo">Recomendação 2.4 - Não utilizar o redirecionamento automático de páginas</h3>
426 444 <p class="criterios">Não devem ser utilizadas marcações para redirecionar a uma nova página, porque tira do usuário a autonomia em relação à escolha (semelhante a abertura de novas instâncias em navegadores) e podem confundir e desorientar os usuários, especialmente usuários que utilizam leitores de tela.</p>
427 445  
428 446 <table class="tabelaCriterioSucesso">
429   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 2.4</caption>
  447 + <caption>Critérios de Avaliação e como avaliar Recomendação 2.4</caption>
430 448 <thead>
431 449 <tr>
432   - <th id="numero_24" class="topo indice0">Número</th>
433   - <th id="criterio_24" class="topo indice1">Critério</th>
434   - <th id="como_avaliar_24" class="topo indice2">Como avaliar</th>
  450 + <th id="numero_24" class="topoCriterios indice0">Número</th>
  451 + <th id="criterio_24" class="topoCriterios indice1">Critério</th>
  452 + <th id="como_avaliar_24" class="topoCriterios indice2">Como avaliar</th>
435 453 </tr>
436 454 </thead>
437 455 <tbody>
438 456  
439 457 <tr id="criterio_241">
440   - <td headers="numero_24" class="celula">2.4.1</td>
441   - <td headers="criterio_24" class="celula">Há redirecionamento automático</td>
442   - <td headers="como_avaliar_24" class="celula">Verificar a presença do elemento &lt;meta&gt; e atributo "HTTP-EQUIV" com conteúdo "refresh" e atributo "content" ou a presença do elemento &lt;script&gt; com a função "window.location".</td>
  458 + <td headers="numero_24" class="celulaCriterios">2.4.1</td>
  459 + <td headers="criterio_24" class="celulaCriterios">Há redirecionamento automático</td>
  460 + <td headers="como_avaliar_24" class="celulaCriterios">Verificar a presença do elemento &lt;<span lang="en">meta</span>&gt; e atributo "http-equiv" com conteúdo "<span lang="en">refresh</span>" e atributo "<span lang="en">content</span>" ou a presença do elemento &lt;<span lang="en">script</span>&gt; com a função "<span lang="en">window.location</span>".</td>
443 461 </tr>
444 462  
445 463  
446 464 </tbody>
447 465 </table>
448 466  
449   - <h3 class="subtitulo">Recomendação 2.6 - Não incluir situações com intermitência de tela</h3>
  467 + <hr class="hr_linhaDupla">
  468 + <h3 class="subtitulo">Recomendação 2.6 - Não incluir situações com intermitência de tela</h3>
450 469 <p class="criterios">Não devem ser utilizados efeitos visuais piscantes, intermitentes ou cintilantes. Em pessoas com epilepsia fotosensitiva, o cintilar ou piscar podem desencadear um ataque epilético. A exigência dessa diretriz aplica-se também para a propaganda de terceiros inserida na página.</p>
451 470  
452 471 <table class="tabelaCriterioSucesso">
453   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 2.6</caption>
  472 + <caption>Critérios de Avaliação e como avaliar Recomendação 2.6</caption>
454 473 <thead>
455 474 <tr>
456   - <th id="numero_26" class="topo indice0">Número</th>
457   - <th id="criterio_26" class="topo indice1">Critério</th>
458   - <th id="como_avaliar_26" class="topo indice2">Como avaliar</th>
  475 + <th id="numero_26" class="topoCriterios indice0">Número</th>
  476 + <th id="criterio_26" class="topoCriterios indice1">Critério</th>
  477 + <th id="como_avaliar_26" class="topoCriterios indice2">Como avaliar</th>
459 478 </tr>
460 479 </thead>
461 480 <tbody>
462 481  
463 482 <tr id="criterio_261">
464   - <td headers="numero_26" class="celula">2.6.1</td>
465   - <td headers="criterio_26" class="celula">Presença do elemento BLINK</td>
466   - <td headers="como_avaliar_26" class="celula">Presença do elemento &lt;blink&gt; na página HTML.</td>
  483 + <td headers="numero_26" class="celulaCriterios">2.6.1</td>
  484 + <td headers="criterio_26" class="celulaCriterios">Presença do elemento <span lang="en">BLINK</span></td>
  485 + <td headers="como_avaliar_26" class="celulaCriterios">Presença do elemento &lt;<span lang="en">blink</span>&gt; na página HTML.</td>
467 486 </tr>
468 487  
469 488 <tr id="criterio_262">
470   - <td headers="numero_26" class="celula">2.6.2</td>
471   - <td headers="criterio_26" class="celula">Presença do elemento MARQUEE</td>
472   - <td headers="como_avaliar_26" class="celula">Presença do elemento &lt;marquee&gt; na página HTML.</td>
  489 + <td headers="numero_26" class="celulaCriterios">2.6.2</td>
  490 + <td headers="criterio_26" class="celulaCriterios">Presença do elemento <span lang="en">MARQUEE</span></td>
  491 + <td headers="como_avaliar_26" class="celulaCriterios">Presença do elemento &lt;<span lang="en">marquee</span>&gt; na página HTML.</td>
473 492 </tr>
474 493  
475 494 <tr id="criterio_263">
476   - <td headers="numero_26" class="celula">2.6.3</td>
477   - <td headers="criterio_26" class="celula">Presença do elemento IMG com arquivo GIF com intermitência de tela</td>
478   - <td headers="como_avaliar_26" class="celula">Presença do elemento &lt;img&gt; e atributo "src" contendo arquivo com extensão "gif" e o arquivo apresenta movimentação.</td>
  495 + <td headers="numero_26" class="celulaCriterios">2.6.3</td>
  496 + <td headers="criterio_26" class="celulaCriterios">Presença do elemento IMG com arquivo GIF com intermitência de tela</td>
  497 + <td headers="como_avaliar_26" class="celulaCriterios">Presença do elemento &lt;img&gt; e atributo "src" contendo arquivo com extensão "gif" e o arquivo apresenta movimentação.</td>
479 498 </tr>
480 499 </tbody>
481 500 </table>
482 501  
  502 + <hr class="hr_linhaDupla">
483 503 <h3 class="subtitulo">Recomendação 3.1 - Identificar o idioma principal da página</h3>
484 504 <p class="criterios">Deve-se identificar o principal idioma utilizado nos documentos e páginas HTML.</p>
485 505  
486 506 <table class="tabelaCriterioSucesso">
487   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 3.1</caption>
  507 + <caption>Critérios de Avaliação e como avaliar Recomendação 3.1</caption>
488 508 <thead>
489 509 <tr>
490   - <th id="numero_31" class="topo indice0">Número</th>
491   - <th id="criterio_31" class="topo indice1">Critério</th>
492   - <th id="como_avaliar_31" class="topo indice2">Como avaliar</th>
  510 + <th id="numero_31" class="topoCriterios indice0">Número</th>
  511 + <th id="criterio_31" class="topoCriterios indice1">Critério</th>
  512 + <th id="como_avaliar_31" class="topoCriterios indice2">Como avaliar</th>
493 513 </tr>
494 514 </thead>
495 515 <tbody>
496 516  
497 517 <tr id="criterio_311">
498   - <td headers="numero_31" class="celula">3.1.1</td>
499   - <td headers="criterio_31" class="celula">Não há identificação do idioma principal da página</td>
500   - <td headers="como_avaliar_31" class="celula">Verificar a ausência do atributo "lang" no elemento &lt;html&gt;, quando o elemento &lt;doctype&gt; for do tipo Strict (<a
501   - href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</a>), Transitional (<a
502   - href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>), Frameset (<a
503   - href="http://www.w3.org/TR/html4/frameset.dtd">http://www.w3.org/TR/html4/frameset.dtd</a>), linguagem HTML 5, ou verificar a não presença do atributo "xml:lang", quando o elemento &lt;doctype&gt; for do tipo Strict (<a
504   - href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>), frameset (<a
505   - href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd</a>), xhtml 1.1 (<a
506   - href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</a>), transitional (<a
  518 + <td headers="numero_31" class="celulaCriterios">3.1.1</td>
  519 + <td headers="criterio_31" class="celulaCriterios">Não há identificação do idioma principal da página</td>
  520 + <td headers="como_avaliar_31" class="celulaCriterios">Verificar a ausência do atributo "lang" no elemento &lt;html&gt;, quando o elemento &lt;<span lang="en">doctype</span>&gt; for do tipo <span lang="en">Strict</span> (<a
  521 + href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</a>), <span lang="en">Transitional</span> (<a
  522 + href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>), <span lang="en">Frameset</span> (<a
  523 + href="http://www.w3.org/TR/html4/frameset.dtd">http://www.w3.org/TR/html4/frameset.dtd</a>), linguagem HTML 5, ou verificar a não presença do atributo "xml:lang", quando o elemento &lt;<span lang="en">doctype</span>&gt; for do tipo <span lang="en">Strict</span> (<a
  524 + href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>), <span lang="en">frameset</span> (<a
  525 + href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd</a>), XHTML 1.1 (<a
  526 + href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</a>), <span lang="en">transitional</span> (<a
507 527 href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>).</td>
508 528 </tr>
509 529  
510 530 <tr id="criterio_312">
511   - <td headers="numero_31" class="celula">3.1.2</td>
512   - <td headers="criterio_31" class="celula">Presença do elemento HTML, atributo XMLNS, atributo XML;LANG e a ausência do atributo LANG</td>
513   - <td headers="como_avaliar_31" class="celula">Verificar a presença dos atributos "xmlns" e "xml-lang" e a ausência do atributo "lang".</td>
  531 + <td headers="numero_31" class="celulaCriterios">3.1.2</td>
  532 + <td headers="criterio_31" class="celulaCriterios">Presença do elemento HTML, atributo XMLNS, atributo XML;LANG e a ausência do atributo <span lang="en">LANG</span></td>
  533 + <td headers="como_avaliar_31" class="celulaCriterios">Verificar a presença dos atributos "xmlns" e "xml-lang" e a ausência do atributo "<span lang="en">lang</span>".</td>
514 534 </tr>
515 535  
516 536  
517 537 </tbody>
518 538 </table>
519 539  
  540 + <hr class="hr_linhaDupla">
520 541 <h3 class="subtitulo">Recomendação 3.2 - Informar a mudança de idioma no conteúdo</h3>
521 542 <p class="criterios">Se algum elemento de uma página possuir conteúdo em um idioma diferente do principal, este deverá estar identificado.</p>
522 543  
523 544 <table class="tabelaCriterioSucesso">
524   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 3.2</caption>
  545 + <caption>Critérios de Avaliação e como avaliar Recomendação 3.2</caption>
525 546 <thead>
526 547 <tr>
527   - <th id="numero_32" class="topo indice0">Número</th>
528   - <th id="criterio_32" class="topo indice1">Critério</th>
529   - <th id="como_avaliar_32" class="topo indice2">Como avaliar</th>
  548 + <th id="numero_32" class="topoCriterios indice0">Número</th>
  549 + <th id="criterio_32" class="topoCriterios indice1">Critério</th>
  550 + <th id="como_avaliar_32" class="topoCriterios indice2">Como avaliar</th>
530 551 </tr>
531 552 </thead>
532 553 <tbody>
533 554  
534 555 <tr id="criterio_321">
535   - <td headers="numero_32" class="celula">3.2.1</td>
536   - <td headers="criterio_32" class="celula">Presença de atributo LANG nos elementos da página, além da tag HTML</td>
537   - <td headers="como_avaliar_32" class="celula">Verificar a presença do atributo "lang" nos elementos da página html, não considerando o elemento &lt;html&gt;.</td> </tr>
  556 + <td headers="numero_32" class="celulaCriterios">3.2.1</td>
  557 + <td headers="criterio_32" class="celulaCriterios">Presença de atributo <span lang="en">LANG</span> nos elementos da página, além da tag HTML</td>
  558 + <td headers="como_avaliar_32" class="celulaCriterios">Verificar a presença do atributo "<span lang="en">lang</span>" nos elementos da página HTML, não considerando o elemento &lt;html&gt;.</td> </tr>
538 559  
539 560  
540 561 </tbody>
541 562 </table>
542 563  
  564 + <hr class="hr_linhaDupla">
543 565 <h3 class="subtitulo">Recomendação 3.3 - Oferecer um título descritivo e informativo à página</h3>
544 566 <p class="criterios">O título da página deve ser descritivo e informativo, devendo representar o conteúdo principal da página, já que essa informação será a primeira a ser lida pelo leitor de tela, quando o usuário acessar a página.</p>
545 567  
546 568 <table class="tabelaCriterioSucesso">
547   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 3.3</caption>
  569 + <caption>Critérios de Avaliação e como avaliar Recomendação 3.3</caption>
548 570 <thead>
549 571 <tr>
550   - <th id="numero_33" class="topo indice0">Número</th>
551   - <th id="criterio_33" class="topo indice1">Critério</th>
552   - <th id="como_avaliar_33" class="topo indice2">Como avaliar</th>
  572 + <th id="numero_33" class="topoCriterios indice0">Número</th>
  573 + <th id="criterio_33" class="topoCriterios indice1">Critério</th>
  574 + <th id="como_avaliar_33" class="topoCriterios indice2">Como avaliar</th>
553 575 </tr>
554 576 </thead>
555 577 <tbody>
556 578  
557 579 <tr id="criterio_331">
558   - <td headers="numero_33" class="celula">3.3.1</td>
559   - <td headers="criterio_33" class="celula">Não há título para a página, ou está em branco</td>
560   - <td headers="como_avaliar_33" class="celula">Verificar a ausência da tag &lt;title&gt; na página HTML, ou verificar a presença do tag &lt;title&gt; sem conteúdo de texto para a identificação da página.</td>
  580 + <td headers="numero_33" class="celulaCriterios">3.3.1</td>
  581 + <td headers="criterio_33" class="celulaCriterios">Não há título para a página, ou está em branco</td>
  582 + <td headers="como_avaliar_33" class="celulaCriterios">Verificar a ausência da tag &lt;<span lang="en">title</span>&gt; na página HTML, ou verificar a presença do tag &lt;<span lang="en">title</span>&gt; sem conteúdo de texto para a identificação da página.</td>
561 583 </tr>
562 584  
563 585 </tbody>
564 586 </table>
565 587  
  588 + <hr class="hr_linhaDupla">
566 589 <h3 class="subtitulo">Recomendação 3.5 - Descrever links clara e sucintamente</h3>
567   - <p class="criterios">Deve-se identificar claramente o destino da cada link, informando, inclusive, se o link remete a outro sítio. Além disso, é preciso que o texto do link faça sentido mesmo quando isolado do contexto da página.</p>
  590 + <p class="criterios">Deve-se identificar claramente o destino da cada <span lang="en">link</span>, informando, inclusive, se o <span lang="en">link</span> remete a outro sítio. Além disso, é preciso que o texto do <span lang="en">link</span> faça sentido mesmo quando isolado do contexto da página.</p>
568 591  
569 592 <table class="tabelaCriterioSucesso">
570   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 3.5</caption>
  593 + <caption>Critérios de Avaliação e como avaliar Recomendação 3.5</caption>
571 594 <thead>
572 595 <tr>
573   - <th id="numero_35" class="topo indice0">Número</th>
574   - <th id="criterio_35" class="topo indice1">Critério</th>
575   - <th id="como_avaliar_35" class="topo indice2">Como avaliar</th>
  596 + <th id="numero_35" class="topoCriterios indice0">Número</th>
  597 + <th id="criterio_35" class="topoCriterios indice1">Critério</th>
  598 + <th id="como_avaliar_35" class="topoCriterios indice2">Como avaliar</th>
576 599 </tr>
577 600 </thead>
578 601 <tbody>
579 602  
580 603 <tr id="criterio_351">
581   - <td headers="numero_35" class="celula">3.5.1</td>
582   - <td headers="criterio_35" class="celula">Link com descrição no formato de URL</td>
583   - <td headers="como_avaliar_35" class="celula"> Presença do elemento &lt;a&gt; e descrição do texto em formato de endereço texto da internet. Lembrar que não importará se o link do texto será igual ou não presente no atributo "href".</td>
  604 + <td headers="numero_35" class="celulaCriterios">3.5.1</td>
  605 + <td headers="criterio_35" class="celulaCriterios"><span lang="en">Link</span> com descrição no formato de URL</td>
  606 + <td headers="como_avaliar_35" class="celulaCriterios"> Presença do elemento &lt;a&gt; e descrição do texto em formato de endereço da internet. Lembrar que não importará se o <span lang="en">link</span> do texto será igual ou não no atributo "href".</td>
584 607 </tr>
585 608  
586 609 <tr id="criterio_352">
587   - <td headers="numero_35" class="celula">3.5.2</td>
588   - <td headers="criterio_35" class="celula">Links vazios</td>
589   - <td headers="como_avaliar_35" class="celula">Presença do elemento &lt;a&gt; e ausência de texto descritivo.</td>
  610 + <td headers="numero_35" class="celulaCriterios">3.5.2</td>
  611 + <td headers="criterio_35" class="celulaCriterios">Links vazios</td>
  612 + <td headers="como_avaliar_35" class="celulaCriterios">Presença do elemento &lt;a&gt; e ausência de texto descritivo.</td>
590 613 </tr>
591 614  
592 615 <tr id="criterio_353">
593   - <td headers="numero_35" class="celula">3.5.3</td>
594   - <td headers="criterio_35" class="celula">Link com descrição somente do TITLE</td>
595   - <td headers="como_avaliar_35" class="celula">Presença do elemento &lt;a&gt;, atributo "title" com texto descritivo e ausência de texto descritivo na estrutura principal do link.</td>
  616 + <td headers="numero_35" class="celulaCriterios">3.5.3</td>
  617 + <td headers="criterio_35" class="celulaCriterios"><span lang="en">Link</span> com descrição somente do <span lang="en">TITLE</span></td>
  618 + <td headers="como_avaliar_35" class="celulaCriterios">Presença do elemento &lt;a&gt;, atributo "<span lang="en">title</span>" com texto descritivo e ausência de texto descritivo na estrutura principal do <span lang="en">link</span>.</td>
596 619 </tr>
597 620  
598 621 <tr id="criterio_354">
599   - <td headers="numero_35" class="celula">3.5.4</td>
600   - <td headers="criterio_35" class="celula">Links que são imagens sem descrição</td>
601   - <td headers="como_avaliar_35" class="celula">Presença do elemento &lt;a&gt; e dentro o elemento &lt;img&gt; sem conteúdo descritivo no atributo "alt".</td>
  622 + <td headers="numero_35" class="celulaCriterios">3.5.4</td>
  623 + <td headers="criterio_35" class="celulaCriterios">Links que são imagens sem descrição</td>
  624 + <td headers="como_avaliar_35" class="celulaCriterios">Presença do elemento &lt;a&gt; e dentro o elemento &lt;img&gt; sem conteúdo descritivo no atributo "<span lang="en">alt</span>".</td>
602 625 </tr>
603 626  
604 627 <tr id="criterio_355">
605   - <td headers="numero_35" class="celula">3.5.5</td>
606   - <td headers="criterio_35" class="celula">Links do tipo "clique aqui", "leia mais", "veja mais", "veja aqui", "clique", "acesse aqui", "clique para acessar", "aqui", entre outros</td>
607   - <td headers="como_avaliar_35" class="celula">Presença do elemento &lt;a&gt; e de texto descritivo com as palavras exatas ou palavras começando no texto do inicio do link: "clique aqui", "leia mais", "veja aqui", "veja mais", "veja aqui", "clique", "acesse aqui", "clique para acessar", "aqui".</td>
  628 + <td headers="numero_35" class="celulaCriterios">3.5.5</td>
  629 + <td headers="criterio_35" class="celulaCriterios">Links do tipo "clique aqui", "leia mais", "veja mais", "veja aqui", "clique", "acesse aqui", "clique para acessar", "aqui", entre outros</td>
  630 + <td headers="como_avaliar_35" class="celulaCriterios">Presença do elemento &lt;a&gt; e de texto descritivo com as palavras exatas ou palavras começando no texto do inicio do <span lang="en">link</span>: "clique aqui", "leia mais", "veja aqui", "veja mais", "veja aqui", "clique", "acesse aqui", "clique para acessar", "aqui".</td>
608 631 </tr>
609 632  
610 633 <tr id="criterio_356">
611   - <td headers="numero_35" class="celula">3.5.6</td>
612   - <td headers="criterio_35" class="celula">Links com descrições diferentes que remetem ao mesmo local</td>
613   - <td headers="como_avaliar_35" class="celula">Presença do elemento &lt;a&gt; com texto descritivo diferente, porém os conteúdos dos href's remetem para o mesmo link.</td>
  634 + <td headers="numero_35" class="celulaCriterios">3.5.6</td>
  635 + <td headers="criterio_35" class="celulaCriterios">Links com descrições diferentes que remetem ao mesmo local</td>
  636 + <td headers="como_avaliar_35" class="celulaCriterios">Presença de elementos &lt;a&gt; com textos descritivos diferentes, porém os conteúdos dos href's remetem para o mesmo <span lang="en">link</span>.</td>
614 637 </tr>
615 638  
616 639 <tr id="criterio_357">
617   - <td headers="numero_35" class="celula">3.5.7</td>
618   - <td headers="criterio_35" class="celula">Links com a mesma descrição que remetem a locais diferentes</td>
619   - <td headers="como_avaliar_35" class="celula">Presença do elemento &lt;a&gt; com texto descritivo igual, porém os conteúdos dos href's remetem para links diferentes.</td>
  640 + <td headers="numero_35" class="celulaCriterios">3.5.7</td>
  641 + <td headers="criterio_35" class="celulaCriterios">Links com a mesma descrição que remetem a locais diferentes</td>
  642 + <td headers="como_avaliar_35" class="celulaCriterios">Presença de elementos &lt;a&gt; com textos descritivos iguais, porém os conteúdos dos href's remetem para links diferentes.</td>
620 643 </tr>
621 644  
622 645 <tr id="criterio_358">
623   - <td headers="numero_35" class="celula">3.5.8</td>
624   - <td headers="criterio_35" class="celula">Links que são lidos duas ou mais vezes</td>
625   - <td headers="como_avaliar_35" class="celula">Presença do elemento &lt;a&gt; com o mesmo conteúdo descritivo em locais distintos da página HTML.</td>
  646 + <td headers="numero_35" class="celulaCriterios">3.5.8</td>
  647 + <td headers="criterio_35" class="celulaCriterios">Links que são lidos duas ou mais vezes</td>
  648 + <td headers="como_avaliar_35" class="celulaCriterios">Presença do elemento &lt;a&gt; com o mesmo conteúdo descritivo em locais distintos da página HTML.</td>
626 649 </tr>
627 650  
628 651 <tr id="criterio_359">
629   - <td headers="numero_35" class="celula">3.5.9</td>
630   - <td headers="criterio_35" class="celula">Links com descrição muito longa</td>
631   - <td headers="como_avaliar_35" class="celula">Presença do elemento &lt;a&gt; com conteúdo do texto descrito com quantidade de caracteres acima de 2000.</td>
  652 + <td headers="numero_35" class="celulaCriterios">3.5.9</td>
  653 + <td headers="criterio_35" class="celulaCriterios">Links com descrição muito longa</td>
  654 + <td headers="como_avaliar_35" class="celulaCriterios">Presença do elemento &lt;a&gt; com conteúdo do texto descrito com quantidade de caracteres acima de 2000.</td>
632 655 </tr>
633 656  
634 657 <tr id="criterio_3510">
635   - <td headers="numero_35" class="celula">3.5.10</td>
636   - <td headers="criterio_35" class="celula">Links que remetem a páginas indisponiveis/inexistentes (links quebrados)</td>
637   - <td headers="como_avaliar_35" class="celula">Presença do elemento &lt;a&gt; e o conteúdo do atributo "href" direciona para páginas de erros: 404, 405, 503 e outros.</td>
  658 + <td headers="numero_35" class="celulaCriterios">3.5.10</td>
  659 + <td headers="criterio_35" class="celulaCriterios">Links que remetem a páginas indisponiveis/inexistentes (links quebrados)</td>
  660 + <td headers="como_avaliar_35" class="celulaCriterios">Presença do elemento &lt;a&gt; e o conteúdo do atributo "href" direciona para páginas de erros: 404, 405, 503 e outros.</td>
638 661 </tr>
639 662 </tbody>
640 663 </table>
641 664  
  665 + <hr class="hr_linhaDupla">
642 666 <h3 class="subtitulo">Recomendação 3.6 - Fornecer alternativa em texto para as imagens do sítio</h3>
643 667 <p class="criterios">Deve ser fornecida uma descrição para as imagens da página.</p>
644 668  
645 669 <table class="tabelaCriterioSucesso">
646   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 3.6</caption>
  670 + <caption>Critérios de Avaliação e como avaliar Recomendação 3.6</caption>
647 671 <thead>
648 672 <tr>
649   - <th id="numero_36" class="topo indice0">Número</th>
650   - <th id="criterio_36" class="topo indice1">Critério</th>
651   - <th id="como_avaliar_36" class="topo indice2">Como avaliar</th>
  673 + <th id="numero_36" class="topoCriterios indice0">Número</th>
  674 + <th id="criterio_36" class="topoCriterios indice1">Critério</th>
  675 + <th id="como_avaliar_36" class="topoCriterios indice2">Como avaliar</th>
652 676 </tr>
653 677 </thead>
654 678 <tbody>
655 679  
656 680 <tr id="criterio_361">
657   - <td headers="numero_36" class="celula">3.6.1</td>
658   - <td headers="criterio_36" class="celula">Imagens sem a declaração do atributo ALT</td>
659   - <td headers="como_avaliar_36" class="celula">Presença de elementos &lt;img&gt; e ausência do atributo "alt".</td>
  681 + <td headers="numero_36" class="celulaCriterios">3.6.1</td>
  682 + <td headers="criterio_36" class="celulaCriterios">Imagens sem a declaração do atributo <span lang="en">ALT</span></td>
  683 + <td headers="como_avaliar_36" class="celulaCriterios">Presença de elementos &lt;img&gt; e ausência do atributo "<span lang="en">alt</span>".</td>
660 684 </tr>
661 685  
662 686 <tr id="criterio_362">
663   - <td headers="numero_36" class="celula">3.6.2</td>
664   - <td headers="criterio_36" class="celula">Imagens com conteúdo sem descrição</td>
665   - <td headers="como_avaliar_36" class="celula">Presença de elementos &lt;img&gt; e ausência de conteúdo descritivo do atributo "alt".</td>
  687 + <td headers="numero_36" class="celulaCriterios">3.6.2</td>
  688 + <td headers="criterio_36" class="celulaCriterios">Imagens com conteúdo sem descrição</td>
  689 + <td headers="como_avaliar_36" class="celulaCriterios">Presença de elementos &lt;img&gt; e ausência de conteúdo descritivo do atributo "<span lang="en">alt</span>".</td>
666 690 </tr>
667 691  
668 692 <tr id="criterio_363">
669   - <td headers="numero_36" class="celula">3.6.3</td>
670   - <td headers="criterio_36" class="celula">Imagens com descrição igual ao nome do arquivo</td>
671   - <td headers="como_avaliar_36" class="celula">Presença de elementos &lt;img&gt; e atributo "alt" com conteúdo descrito com o nome do arquivo de referência da imagem.</td>
  693 + <td headers="numero_36" class="celulaCriterios">3.6.3</td>
  694 + <td headers="criterio_36" class="celulaCriterios">Imagens com descrição igual ao nome do arquivo</td>
  695 + <td headers="como_avaliar_36" class="celulaCriterios">Presença de elementos &lt;img&gt; e atributo "<span lang="en">alt</span>" com conteúdo descrito com o nome do arquivo de referência da imagem.</td>
672 696 </tr>
673 697  
674 698 <tr id="criterio_364">
675   - <td headers="numero_36" class="celula">3.6.4</td>
676   - <td headers="criterio_36" class="celula">Imagens com descrição comum</td>
677   - <td headers="como_avaliar_36" class="celula">Presença de elementos &lt;img&gt; e atributo "alt" com conteúdo descrito com expressões: "figura"; "imagem"; "alt"; conteúdo em branco e outros.</td>
  699 + <td headers="numero_36" class="celulaCriterios">3.6.4</td>
  700 + <td headers="criterio_36" class="celulaCriterios">Imagens com descrições comuns</td>
  701 + <td headers="como_avaliar_36" class="celulaCriterios">Presença de elementos &lt;img&gt; e atributo "<span lang="en">alt</span>" com conteúdo descrito contendo expressões: "figura", "imagem", "<span lang="en">alt</span>", conteúdo em branco e outros.</td>
678 702 </tr>
679 703  
680 704 <tr id="criterio_365">
681   - <td headers="numero_36" class="celula">3.6.5</td>
682   - <td headers="criterio_36" class="celula">Imagens diferentes com a mesma descrição</td>
683   - <td headers="como_avaliar_36" class="celula">Presença de elementos &lt;img&gt; com o mesmo atributo "src", no entanto, o conteúdo do atributo "alt" não é o mesmo de cada imagem.</td>
  705 + <td headers="numero_36" class="celulaCriterios">3.6.5</td>
  706 + <td headers="criterio_36" class="celulaCriterios">Imagens diferentes com a mesma descrição</td>
  707 + <td headers="como_avaliar_36" class="celulaCriterios">Presença de elementos &lt;img&gt; com o mesmo atributo "src", no entanto, o conteúdo do atributo "<span lang="en">alt</span>" não é o mesmo de cada imagem.</td>
684 708 </tr>
685 709  
686 710 <tr id="criterio_366">
687   - <td headers="numero_36" class="celula">3.6.6</td>
688   - <td headers="criterio_36" class="celula">Imagens com dupla descrição, pois utiliza atributo TITLE com o mesmo valor da descrição</td>
689   - <td headers="como_avaliar_36" class="celula">Presença de elementos &lt;img&gt; com o mesmo conteúdo descrito no atributo "title" e no atributo "alt".</td>
  711 + <td headers="numero_36" class="celulaCriterios">3.6.6</td>
  712 + <td headers="criterio_36" class="celulaCriterios">Imagens com dupla descrição, pois utiliza atributo <span lang="en">TITLE</span> com o mesmo valor da descrição</td>
  713 + <td headers="como_avaliar_36" class="celulaCriterios">Presença de elementos &lt;img&gt; com o mesmo conteúdo descrito no atributo "<span lang="en">title</span>" e no atributo "<span lang="en">alt</span>".</td>
690 714 </tr>
691 715 </tbody>
692 716 </table>
693   -
694   -
  717 +
  718 + <hr class="hr_linhaDupla">
695 719 <h3 class="subtitulo">Recomendação 3.7 - Ulilizar mapas de imagem de forma acessível</h3>
696   - <p class="criterios">Um mapa de imagens é uma imagem dividida em áreas selecionáveis. Cada área é um link para outra página Web ou outra seção da página atual.</p>
  720 + <p class="criterios">Um mapa de imagens é uma imagem dividida em áreas selecionáveis. Cada área é um <span lang="en">link</span> para outra página <span lang="en">Web</span> ou outra seção da página atual.</p>
697 721  
698 722 <table class="tabelaCriterioSucesso">
699   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 3.7</caption>
  723 + <caption>Critérios de Avaliação e como avaliar Recomendação 3.7</caption>
700 724 <thead>
701 725 <tr>
702   - <th id="numero_37" class="topo indice0">Número</th>
703   - <th id="criterio_37" class="topo indice1">Critério</th>
704   - <th id="como_avaliar_37" class="topo indice2">Como avaliar</th>
  726 + <th id="numero_37" class="topoCriterios indice0">Número</th>
  727 + <th id="criterio_37" class="topoCriterios indice1">Critério</th>
  728 + <th id="como_avaliar_37" class="topoCriterios indice2">Como avaliar</th>
705 729 </tr>
706 730 </thead>
707 731 <tbody>
708 732  
709 733 <tr id="criterio_371">
710   - <td headers="numero_37" class="celula">3.7.1</td>
711   - <td headers="criterio_37" class="celula">Mapa de imagem sem descrição ou alternativa em texto</td>
712   - <td headers="como_avaliar_37" class="celula"> Presença do elemento &lt;img&gt; com atributo "usemap" e ausência de conteúdo descritivo no atributo "alt", ou presença do elemento &lt;area&gt; e ausência de conteúdo descritivo no atributo "alt".</td>
  734 + <td headers="numero_37" class="celulaCriterios">3.7.1</td>
  735 + <td headers="criterio_37" class="celulaCriterios">Mapa de imagem sem descrição ou alternativa em texto</td>
  736 + <td headers="como_avaliar_37" class="celulaCriterios"> Presença do elemento &lt;img&gt; com atributo "<span lang="en">usemap</span>" e ausência de conteúdo descritivo no atributo "<span lang="en">alt</span>", ou presença do elemento &lt;area&gt; e ausência de conteúdo descritivo no atributo "<span lang="en">alt</span>".</td>
713 737 </tr>
714 738  
715 739 </tbody>
716 740 </table>
717 741  
  742 + <hr class="hr_linhaDupla">
718 743 <h3 class="subtitulo">Recomendação 3.9 - Em tabelas, utilizar títulos e resumos de forma apropriada</h3>
719 744 <p class="criterios">O título da tabela deve ser definido e localizado no primeiro elemento da tabela. Em casos de tabelas extensas, deve ser fornecido um resumo dos dados.</p>
720 745  
721 746 <table class="tabelaCriterioSucesso">
722   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 3.9</caption>
  747 + <caption>Critérios de Avaliação e como avaliar Recomendação 3.9</caption>
723 748 <thead>
724 749 <tr>
725   - <th id="numero_39" class="topo indice0">Número</th>
726   - <th id="criterio_39" class="topo indice1">Critério</th>
727   - <th id="como_avaliar_39" class="topo indice2">Como avaliar</th>
  750 + <th id="numero_39" class="topoCriterios indice0">Número</th>
  751 + <th id="criterio_39" class="topoCriterios indice1">Critério</th>
  752 + <th id="como_avaliar_39" class="topoCriterios indice2">Como avaliar</th>
728 753 </tr>
729 754 </thead>
730 755 <tbody>
731 756  
732 757 <tr id="criterio_391">
733   - <td headers="numero_39" class="celula">3.9.1</td>
734   - <td headers="criterio_39" class="celula">Tabelas sem título e resumo</td>
735   - <td headers="como_avaliar_39" class="celula">Presença do elemento &lt;table&gt; e ausência do atributo "summary" ou ausência do elemento &lt;caption&gt;.</td>
  758 + <td headers="numero_39" class="celulaCriterios">3.9.1</td>
  759 + <td headers="criterio_39" class="celulaCriterios">Tabelas sem título e resumo</td>
  760 + <td headers="como_avaliar_39" class="celulaCriterios">Presença do elemento &lt;<span lang="en">table</span>&gt; e ausência do atributo "<span lang="en">summary</span>" ou ausência do elemento &lt;<span lang="en">caption</span>&gt;.</td>
736 761 </tr>
737 762  
738 763 </tbody>
739 764 </table>
740 765  
  766 + <hr class="hr_linhaDupla">
741 767 <h3 class="subtitulo">Recomendação 3.10 - Associar células de dados às células de cabeçalho</h3>
742 768 <p class="criterios">Em tabelas de dados simples, o uso apropriado dos cabeçalhos e das colunas para as células de dados.</p>
743 769  
744 770 <table class="tabelaCriterioSucesso">
745   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 3.10</caption>
  771 + <caption>Critérios de Avaliação e como avaliar Recomendação 3.10</caption>
746 772 <thead>
747 773 <tr>
748   - <th id="numero_3100" class="topo indice0">Número</th>
749   - <th id="criterio_3100" class="topo indice1">Critério</th>
750   - <th id="como_avaliar_3100" class="topo indice2">Como avaliar</th>
  774 + <th id="numero_3100" class="topoCriterios indice0">Número</th>
  775 + <th id="criterio_3100" class="topoCriterios indice1">Critério</th>
  776 + <th id="como_avaliar_3100" class="topoCriterios indice2">Como avaliar</th>
751 777 </tr>
752 778 </thead>
753 779 <tbody>
754 780  
755 781 <tr id="criterio_3101">
756   - <td headers="numero_3100" class="celula">3.10.1</td>
757   - <td headers="criterio_3100" class="celula">Tabelas sem células associadas</td>
758   - <td headers="como_avaliar_3100" class="celula">Presença do elemento &lt;table&gt; e ausência dos elementos: &lt;thead&gt;, &lt;tbody&gt; ou a presença do elemento &lt;table&gt; e ausência dos atributos: "id", "headers", "scope", "axis" nos elementos &lt;td&gt; e &lt;th&gt;.</td>
  782 + <td headers="numero_3100" class="celulaCriterios">3.10.1</td>
  783 + <td headers="criterio_3100" class="celulaCriterios">Tabelas sem células associadas</td>
  784 + <td headers="como_avaliar_3100" class="celulaCriterios">Presença do elemento &lt;<span lang="en">table</span>&gt; e ausência dos elementos: &lt;thead&gt;, &lt;tbody&gt;, ou a presença do elemento &lt;<span lang="en">table</span>&gt; e ausência dos atributos: <span lang="en">"id", "headers", "scope", "axis"</span> nos elementos &lt;td&gt; e &lt;th&gt;.</td>
759 785 </tr>
760 786  
761 787 </tbody>
762 788 </table>
763 789  
  790 + <hr class="hr_linhaDupla">
764 791 <h3 class="subtitulo">Recomendação 3.11 - Garantir a leitura e compreensão das informações</h3>
765 792 <p class="criterios">O texto de um sítio deve ser de fácil leitura e compreensão, não exigindo do usuário um nível de instrução avançado. Quando o texto exigir uma capacidade de leitura mais avançada, devem ser disponibilizadas informações suplementares que expliquem ou ilustrem o conteúdo principal.</p>
766 793  
767 794 <table class="tabelaCriterioSucesso">
768   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 3.11</caption>
  795 + <caption>Critérios de Avaliação e como avaliar Recomendação 3.11</caption>
769 796 <thead>
770 797 <tr>
771   - <th id="numero_3110" class="topo indice0">Número</th>
772   - <th id="criterio_3110" class="topo indice1">Critério</th>
773   - <th id="como_avaliar_3110" class="topo indice2">Como avaliar</th>
  798 + <th id="numero_3110" class="topoCriterios indice0">Número</th>
  799 + <th id="criterio_3110" class="topoCriterios indice1">Critério</th>
  800 + <th id="como_avaliar_3110" class="topoCriterios indice2">Como avaliar</th>
774 801 </tr>
775 802 </thead>
776 803 <tbody>
777 804  
778 805 <tr id="criterio_3111">
779   - <td headers="numero_3110" class="celula">3.11.1</td>
780   - <td headers="criterio_3110" class="celula">Presença de parágrafos justificados</td>
781   - <td headers="como_avaliar_3110" class="celula">Presença de elementos &lt;p&gt; com conteúdo "justify" no atributo "align".</td>
  806 + <td headers="numero_3110" class="celulaCriterios">3.11.1</td>
  807 + <td headers="criterio_3110" class="celulaCriterios">Presença de parágrafos justificados</td>
  808 + <td headers="como_avaliar_3110" class="celulaCriterios">Presença de elementos &lt;p&gt; com conteúdo "<span lang="en">justify</span>" no atributo "<span lang="en">align</span>".</td>
782 809 </tr>
783 810  
784 811 <tr id="criterio_3112">
785   - <td headers="numero_3110" class="celula">3.11.2</td>
786   - <td headers="criterio_3110" class="celula">Presença de textos justificados através de folhas de estilo</td>
787   - <td headers="como_avaliar_3110" class="celula">Presença de elementos &lt;p&gt; e propriedade CSS text-align com conteúdo "justify". Deverá ser avaliado o CSS externo (com arquivo CSS referenciado pelo elemento &lt;link&gt;), interno (propriedade dentro do elemento &lt;style&gt;) e in-line (propriedade dentro do atributo "style" no elemento &lt;p&gt;).</td>
  812 + <td headers="numero_3110" class="celulaCriterios">3.11.2</td>
  813 + <td headers="criterio_3110" class="celulaCriterios">Presença de textos justificados através de folhas de estilo</td>
  814 + <td headers="como_avaliar_3110" class="celulaCriterios">Presença de elementos &lt;p&gt; e propriedade CSS <span lang="en">text-align</span> com conteúdo "<span lang="en">justify</span>". Deverá ser avaliado o CSS externo (com arquivo CSS referenciado pelo elemento &lt;<span lang="en">link</span>&gt;), interno (propriedade dentro do elemento &lt;<span lang="en">style</span>&gt;) e <span lang="en">in-line</span> (propriedade dentro do atributo "<span lang="en">style</span>" no elemento &lt;p&gt;).</td>
788 815 </tr>
789 816  
790 817 </tbody>
791 818 </table>
792 819  
  820 + <hr class="hr_linhaDupla">
793 821 <h3 class="subtitulo">Recomendação 3.12 - Disponibilizar uma explicação para siglas, abreviaturas e palavras incomuns</h3>
794 822 <p class="criterios">Recomenda-se que na primeira ocorrência de siglas, abreviaturas ou palavras incomuns (ambíguas, desconhecidas ou utilizadas de forma muito específica), deve ser disponibilizada sua explicação ou forma completa.</p>
795 823  
796 824 <table class="tabelaCriterioSucesso">
797   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 3.12</caption>
  825 + <caption>Critérios de Avaliação e como avaliar Recomendação 3.12</caption>
798 826 <thead>
799 827 <tr>
800   - <th id="numero_3120" class="topo indice0">Número</th>
801   - <th id="criterio_3120" class="topo indice1">Critério</th>
802   - <th id="como_avaliar_3120" class="topo indice2">Como avaliar</th>
  828 + <th id="numero_3120" class="topoCriterios indice0">Número</th>
  829 + <th id="criterio_3120" class="topoCriterios indice1">Critério</th>
  830 + <th id="como_avaliar_3120" class="topoCriterios indice2">Como avaliar</th>
803 831 </tr>
804 832 </thead>
805 833 <tbody>
806 834  
807 835 <tr id="criterio_3121">
808   - <td headers="numero_3120" class="celula">3.12.1</td>
809   - <td headers="criterio_3120" class="celula">Siglas marcadas e sem explicação</td>
810   - <td headers="como_avaliar_3120" class="celula">Presença dos elementos &lt;abbr&gt; ou &lt;acronym&gt; e ausência do atributo "title" para descrever a sigla.</td>
  836 + <td headers="numero_3120" class="celulaCriterios">3.12.1</td>
  837 + <td headers="criterio_3120" class="celulaCriterios">Siglas marcadas e sem explicação</td>
  838 + <td headers="como_avaliar_3120" class="celulaCriterios">Presença dos elementos &lt;abbr&gt; ou &lt;<span lang="en">acronym</span>&gt; e ausência do atributo "<span lang="en">title</span>" para descrever a sigla.</td>
811 839 </tr>
812 840  
813 841 </tbody>
814 842 </table>
815 843  
  844 + <hr class="hr_linhaDupla">
816 845 <h3 class="subtitulo">Recomendação 4.4 - Possibilitar que o elemento com foco seja visualmente evidente</h3>
817 846 <p class="criterios">A área que recebe o foco pelo teclado deve ser claramente marcada, devendo a área de seleção ser passível de ser clicada.</p>
818 847  
819 848 <table class="tabelaCriterioSucesso">
820   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 4.4</caption>
  849 + <caption>Critérios de Avaliação e como avaliar Recomendação 4.4</caption>
821 850 <thead>
822 851 <tr>
823   - <th id="numero_44" class="topo indice0">Número</th>
824   - <th id="criterio_44" class="topo indice1">Critério</th>
825   - <th id="como_avaliar_44" class="topo indice2">Como avaliar</th>
  852 + <th id="numero_44" class="topoCriterios indice0">Número</th>
  853 + <th id="criterio_44" class="topoCriterios indice1">Critério</th>
  854 + <th id="como_avaliar_44" class="topoCriterios indice2">Como avaliar</th>
826 855 </tr>
827 856 </thead>
828 857 <tbody>
829 858  
830 859 <tr id="criterio_441">
831   - <td headers="numero_44" class="celula">4.4.1</td>
832   - <td headers="criterio_44" class="celula">Ausência de destaque de foco do elemento ativo</td>
833   - <td headers="como_avaliar_44" class="celula">Verificar a ausência de destaque nos elementos HTML. Para verificação, analisar a ausência de utilização da propriedade "border" dentro dos seletores CSS.</td>
  860 + <td headers="numero_44" class="celulaCriterios">4.4.1</td>
  861 + <td headers="criterio_44" class="celulaCriterios">Ausência de destaque de foco do elemento ativo</td>
  862 + <td headers="como_avaliar_44" class="celulaCriterios">Verificar a ausência de destaque nos elementos HTML. Para verificação, analisar a ausência de utilização da propriedade "<span lang="en">border</span>" dentro dos seletores CSS.</td>
834 863 </tr>
835 864  
836 865 </tbody>
837 866 </table>
838 867  
  868 + <hr class="hr_linhaDupla">
839 869 <h3 class="subtitulo">Recomendação 5.1 - Fornecer alternativa para video</h3>
840 870 <p class="criterios">Deve haver uma alternativa sonora ou textual para vídeos que não incluem faixas de áudio.</p>
841 871  
842 872 <table class="tabelaCriterioSucesso">
843   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 5.1</caption>
  873 + <caption>Critérios de Avaliação e como avaliar Recomendação 5.1</caption>
844 874 <thead>
845 875 <tr>
846   - <th id="numero_51" class="topo indice0">Número</th>
847   - <th id="criterio_51" class="topo indice1">Critério</th>
848   - <th id="como_avaliar_51" class="topo indice2">Como avaliar</th>
  876 + <th id="numero_51" class="topoCriterios indice0">Número</th>
  877 + <th id="criterio_51" class="topoCriterios indice1">Critério</th>
  878 + <th id="como_avaliar_51" class="topoCriterios indice2">Como avaliar</th>
849 879 </tr>
850 880 </thead>
851 881 <tbody>
852 882  
853 883 <tr id="criterio_511">
854   - <td headers="numero_51" class="celula">5.1.1</td>
855   - <td headers="criterio_51" class="celula">Presença de vídeo na página</td>
856   - <td headers="como_avaliar_51" class="celula">Presença do elemento &lt;embed&gt; ou &lt;video&gt; com atributos "src" direcionados para arquivo de vídeo ou local de execução de vídeo.</td>
  884 + <td headers="numero_51" class="celulaCriterios">5.1.1</td>
  885 + <td headers="criterio_51" class="celulaCriterios">Presença de vídeo na página</td>
  886 + <td headers="como_avaliar_51" class="celulaCriterios">Presença do elemento &lt;<span lang="en">embed</span>&gt; ou &lt;video&gt; com atributos "src" direcionados para arquivo de vídeo ou local de execução de vídeo.</td>
857 887 </tr>
858 888  
859 889 </tbody>
860 890 </table>
861 891  
  892 + <hr class="hr_linhaDupla">
862 893 <h3 class="subtitulo">Recomendação 5.2 - Fornecer alternativa para áudio</h3>
863 894 <p class="criterios">Áudio gravado deve possuir uma transcrição descritiva. Além de essencial para pessoas com deficiência auditiva, a alternativa em texto também é importante para úsuarios que não possuem equipamento de som, que desejam apenas realizar a leitura do material ou não dispôem de tempo para ouvir um arquivo multimídia. Neste caso, também é desejavel a alternativa em Libras.</p>
864 895  
865 896 <table class="tabelaCriterioSucesso">
866   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 5.2</caption>
  897 + <caption>Critérios de Avaliação e como avaliar Recomendação 5.2</caption>
867 898 <thead>
868 899 <tr>
869   - <th id="numero_52" class="topo indice0">Número</th>
870   - <th id="criterio_52" class="topo indice1">Critério</th>
871   - <th id="como_avaliar_52" class="topo indice2">Como avaliar</th>
  900 + <th id="numero_52" class="topoCriterios indice0">Número</th>
  901 + <th id="criterio_52" class="topoCriterios indice1">Critério</th>
  902 + <th id="como_avaliar_52" class="topoCriterios indice2">Como avaliar</th>
872 903 </tr>
873 904 </thead>
874 905 <tbody>
875 906  
876 907 <tr id="criterio_521">
877   - <td headers="numero_52" class="celula">5.2.1</td>
878   - <td headers="criterio_52" class="celula">Presença de áudio na página</td>
879   - <td headers="como_avaliar_52" class="celula">Presença do elemento &lt;embed&gt; ou &lt;audio&gt; com atributos "src" direcionados para arquivo de audio ou local de execução de áudio.</td>
  908 + <td headers="numero_52" class="celulaCriterios">5.2.1</td>
  909 + <td headers="criterio_52" class="celulaCriterios">Presença de áudio na página</td>
  910 + <td headers="como_avaliar_52" class="celulaCriterios">Presença do elemento &lt;<span lang="en">embed</span>&gt; ou &lt;audio&gt; com atributos "src" direcionados para arquivo de audio ou local de execução de áudio.</td>
880 911 </tr>
881 912  
882 913 </tbody>
883 914 </table>
884 915  
  916 + <hr class="hr_linhaDupla">
885 917 <h3 class="subtitulo">Recomendação 5.3 - Oferecer audiodescrição para vídeo pré-gravado</h3>
886   - <p class="criterios">A página deve continuar legível e funcional mesmo quando redimensionada para até 200%. Assim, é preciso garantir que, quando a página for redimensionada, não ocorram sobreposições nem o aparecimento de uma barra horizontal.</p>
  918 + <p class="criterios">Videos que transmitem conteúdo visual que não está disponível na faixa de áudio devem possuir uma audiodescrição. A audiodescrição consiste na descrição clara e objetiva de todas as informações apresentadas de forma visual e que não fazem parte dos diálogos. Essas descrições são apresentadas nos espaços entre os diálogos e nas pausas entre as informações sonoras.</p>
887 919  
888 920 <table class="tabelaCriterioSucesso">
889   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 5.3</caption>
  921 + <caption>Critérios de Avaliação e como avaliar Recomendação 5.3</caption>
890 922 <thead>
891 923 <tr>
892   - <th id="numero_53" class="topo indice0">Número</th>
893   - <th id="criterio_53" class="topo indice1">Critério</th>
894   - <th id="como_avaliar_53" class="topo indice2">Como avaliar</th>
  924 + <th id="numero_53" class="topoCriterios indice0">Número</th>
  925 + <th id="criterio_53" class="topoCriterios indice1">Critério</th>
  926 + <th id="como_avaliar_53" class="topoCriterios indice2">Como avaliar</th>
895 927 </tr>
896 928 </thead>
897 929 <tbody>
898 930  
899 931 <tr id="criterio_531">
900   - <td headers="numero_53" class="celula">5.3.1</td>
901   - <td headers="criterio_53" class="celula">Presença de vídeo na página</td>
902   - <td headers="como_avaliar_53" class="celula">Presença do elemento &lt;embed&gt; ou &lt;vídeo&gt; com atributos "src" direcionados para arquivo de vídeo ou local de execução de vídeo.</td>
  932 + <td headers="numero_53" class="celulaCriterios">5.3.1</td>
  933 + <td headers="criterio_53" class="celulaCriterios">Presença de vídeo na página</td>
  934 + <td headers="como_avaliar_53" class="celulaCriterios">Presença do elemento &lt;<span lang="en">embed</span>&gt; ou &lt;video&gt; com atributos "src" direcioanados para arquivo de vídeo ou local de execução de vídeo.</td>
903 935 </tr>
904 936  
905 937 </tbody>
906 938 </table>
907 939  
  940 + <hr class="hr_linhaDupla">
908 941 <h3 class="subtitulo">Recomendação 5.4 - Fornecer controle de áudio para som</h3>
909 942 <p class="criterios">Deve ser fornecido um mecanismo para parar, pausar, silenciar ou ajustar o volume de qualquer som que se reproduza na página.</p>
910 943  
911 944 <table class="tabelaCriterioSucesso">
912   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 5.4</caption>
  945 + <caption>Critérios de Avaliação e como avaliar Recomendação 5.4</caption>
913 946 <thead>
914 947 <tr>
915   - <th id="numero_54" class="topo indice0">Número</th>
916   - <th id="criterio_54" class="topo indice1">Critério</th>
917   - <th id="como_avaliar_54" class="topo indice2">Como avaliar</th>
  948 + <th id="numero_54" class="topoCriterios indice0">Número</th>
  949 + <th id="criterio_54" class="topoCriterios indice1">Critério</th>
  950 + <th id="como_avaliar_54" class="topoCriterios indice2">Como avaliar</th>
918 951 </tr>
919 952 </thead>
920 953 <tbody>
921 954  
922 955 <tr id="criterio_541">
923   - <td headers="numero_54" class="celula">5.4.1</td>
924   - <td headers="criterio_54" class="celula">Presença de áudio na página</td>
925   - <td headers="como_avaliar_54" class="celula">Presença do elemento &lt;embed&gt; ou &lt;audio&gt; com atributos "src" direcionados para arquivo de áudio ou local de execução de áudio.</td>
  956 + <td headers="numero_54" class="celulaCriterios">5.4.1</td>
  957 + <td headers="criterio_54" class="celulaCriterios">Presença de áudio na página</td>
  958 + <td headers="como_avaliar_54" class="celulaCriterios">Presença do elemento &lt;<span lang="en">embed</span>&gt; ou &lt;audio&gt; com atributos "src" direcionados para arquivo de áudio ou local de execução de áudio.</td>
926 959 </tr>
927 960  
928 961 </tbody>
929 962 </table>
930 963  
  964 + <hr class="hr_linhaDupla">
931 965 <h3 class="subtitulo">Recomendação 6.1 - Fornecer alternativa em texto para os botões de imagem de formulários</h3>
932   - <p class="criterios">Ao serem utilizados botões do tipo imagem, que servem para o mesmo propósito do botão "submit", deve ser fornecida uma descrição textual para o botão. Para outros tipos de botões é necessario o botão pela imagem que se deseja utilizar através do CSS e aplicar o texto descrito no atributo do valor.</p>
  966 + <p class="criterios">Ao serem utilizados botões do tipo imagem, que servem para o mesmo propósito do botão "<span lang="en">submit</span>", deve ser fornecida uma descrição textual para o botão. Para outros tipos de botões é necessario substituir o botão pela imagem que se deseja utilizar através do CSS e aplicar o texto descrito no atributo "value".</p>
933 967  
934 968 <table class="tabelaCriterioSucesso">
935   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 6.1</caption>
  969 + <caption>Critérios de Avaliação e como avaliar Recomendação 6.1</caption>
936 970 <thead>
937 971 <tr>
938   - <th id="numero_61" class="topo indice0">Número</th>
939   - <th id="criterio_61" class="topo indice1">Critério</th>
940   - <th id="como_avaliar_61" class="topo indice2">Como avaliar</th>
  972 + <th id="numero_61" class="topoCriterios indice0">Número</th>
  973 + <th id="criterio_61" class="topoCriterios indice1">Critério</th>
  974 + <th id="como_avaliar_61" class="topoCriterios indice2">Como avaliar</th>
941 975 </tr>
942 976 </thead>
943 977 <tbody>
944 978  
945 979 <tr id="criterio_611">
946   - <td headers="numero_61" class="celula">6.1.1</td>
947   - <td headers="criterio_61" class="celula">Botão sem descrição</td>
948   - <td headers="como_avaliar_61" class="celula">Presença do elemento &lt;input&gt; com o conteúdo do atributo "type", "image" e ausência de conteúdo no atributo "alt" ou ausência do "alt"; presença do elemento &lt;input&gt; com os conteúdos: "button", "reset", ou "submit" e ausência de conteúdo no atributo "value" ou ausência do atributo "value".</td>
  980 + <td headers="numero_61" class="celulaCriterios">6.1.1</td>
  981 + <td headers="criterio_61" class="celulaCriterios">Botão sem descrição</td>
  982 + <td headers="como_avaliar_61" class="celulaCriterios">Presença do elemento &lt;<span lang="en">input</span>&gt; com o conteúdo do atributo "<span lang="en">type</span>" igual a "<span lang="en">image</span>" e ausência de conteúdo no atributo "<span lang="en">alt</span>" ou ausência do "<span lang="en">alt</span>". Presença do elemento &lt;input&gt; com os conteúdos: "<span lang="en">button</span>", "<span lang="en">reset</span>", ou "<span lang="en">submit</span>" e ausência de conteúdo no atributo "value" ou ausência do atributo "value".</td>
949 983 </tr>
950 984  
951 985 </tbody>
952 986 </table>
953 987  
  988 + <hr class="hr_linhaDupla">
954 989 <h3 class="subtitulo">Recomendação 6.2 - Associar etiquetas aos seus campos</h3>
955 990 <p class="criterios">As etiquetas de texto devem estar associadas aos seus campos correspondentes no formulário.</p>
956 991  
957 992 <table class="tabelaCriterioSucesso">
958   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 6.2</caption>
  993 + <caption>Critérios de Avaliação e como avaliar Recomendação 6.2</caption>
959 994 <thead>
960 995 <tr>
961   - <th id="numero_62" class="topo indice0">Número</th>
962   - <th id="criterio_62" class="topo indice1">Critério</th>
963   - <th id="como_avaliar_62" class="topo indice2">Como avaliar</th>
  996 + <th id="numero_62" class="topoCriterios indice0">Número</th>
  997 + <th id="criterio_62" class="topoCriterios indice1">Critério</th>
  998 + <th id="como_avaliar_62" class="topoCriterios indice2">Como avaliar</th>
964 999 </tr>
965 1000 </thead>
966 1001 <tbody>
967 1002  
968 1003 <tr id="criterio_621">
969   - <td headers="numero_62" class="celula">6.2.1</td>
970   - <td headers="criterio_62" class="celula">Campo sem label associado</td>
971   - <td headers="como_avaliar_62" class="celula">Presença do elemento &lt;input&gt; e ausência de elemento &lt;label&gt; com atributo "for" referenciado ao atributo "id" do &lt;input&gt;, ou presença de elemento &lt;input&gt; sem estar dentro de elemento &lt;label&gt;.</td>
  1004 + <td headers="numero_62" class="celulaCriterios">6.2.1</td>
  1005 + <td headers="criterio_62" class="celulaCriterios">Campo sem <span lang="en">label</span> associado</td>
  1006 + <td headers="como_avaliar_62" class="celulaCriterios">Presença do elemento &lt;<span lang="en">input</span>&gt; e ausência de elemento &lt;<span lang="en">label</span>&gt; com atributo "<span lang="en">for</span>" referenciado ao atributo "id" do &lt;<span lang="en">input</span>&gt;, ou presença de elemento &lt;<span lang="en">input</span>&gt; sem estar dentro de elemento &lt;<span lang="en">label</span>&gt;.</td>
972 1007 </tr>
973 1008  
974 1009 </tbody>
975 1010 </table>
976 1011  
  1012 + <hr class="hr_linhaDupla">
977 1013 <h3 class="subtitulo">Recomendação 6.3 - Estabelecer uma lógica de navegação</h3>
978 1014 <p class="criterios">Os elementos do formulário devem ser distribuídos corretamente através do códgio HTML, criando, assim, uma sequência lógica de navegação.</p>
979 1015  
980 1016 <table class="tabelaCriterioSucesso">
981   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 6.3</caption>
  1017 + <caption>Critérios de Avaliação e como avaliar Recomendação 6.3</caption>
982 1018 <thead>
983 1019 <tr>
984   - <th id="numero_63" class="topo indice0">Número</th>
985   - <th id="criterio_63" class="topo indice1">Critério</th>
986   - <th id="como_avaliar_63" class="topo indice2">Como avaliar</th>
  1020 + <th id="numero_63" class="topoCriterios indice0">Número</th>
  1021 + <th id="criterio_63" class="topoCriterios indice1">Critério</th>
  1022 + <th id="como_avaliar_63" class="topoCriterios indice2">Como avaliar</th>
987 1023 </tr>
988 1024 </thead>
989 1025 <tbody>
990 1026  
991 1027 <tr id="criterio_631">
992   - <td headers="numero_63" class="celula">6.3.1</td>
993   - <td headers="criterio_63" class="celula">Presença do elemento FORM e atributo TABINDEX</td>
994   - <td headers="como_avaliar_63" class="celula">Presença do elemento &lt;form&gt; e atributo "tabindex" nos elementos dentro do &lt;form&gt;.</td>
  1028 + <td headers="numero_63" class="celulaCriterios">6.3.1</td>
  1029 + <td headers="criterio_63" class="celulaCriterios">Presença do elemento <span lang="en">FORM</span> e atributo <span lang="en">TABINDEX</span></td>
  1030 + <td headers="como_avaliar_63" class="celulaCriterios">Presença do elemento &lt;<span lang="en">form</span>&gt; e atributo "<span lang="en">tabindex</span>" nos elementos dentro do &lt;<span lang="en">form</span>&gt;.</td>
995 1031 </tr>
996 1032  
997 1033 </tbody>
998 1034 </table>
999 1035  
  1036 + <hr class="hr_linhaDupla">
1000 1037 <h3 class="subtitulo">Recomendação 6.4 - Não provocar automaticamente alteração no contexto</h3>
1001 1038 <p class="criterios">A área que recebe o foco pelo teclado deve ser claramente marcada, devendo a área de seleção ser passível de ser clicada.</p>
1002 1039  
1003 1040 <table class="tabelaCriterioSucesso">
1004   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 6.4</caption>
  1041 + <caption>Critérios de Avaliação e como avaliar Recomendação 6.4</caption>
1005 1042 <thead>
1006 1043 <tr>
1007   - <th id="numero_64" class="topo indice0">Número</th>
1008   - <th id="criterio_64" class="topo indice1">Critério</th>
1009   - <th id="como_avaliar_64" class="topo indice2">Como avaliar</th>
  1044 + <th id="numero_64" class="topoCriterios indice0">Número</th>
  1045 + <th id="criterio_64" class="topoCriterios indice1">Critério</th>
  1046 + <th id="como_avaliar_64" class="topoCriterios indice2">Como avaliar</th>
1010 1047 </tr>
1011 1048 </thead>
1012 1049 <tbody>
1013 1050  
1014 1051 <tr id="criterio_641">
1015   - <td headers="numero_64" class="celula">6.4.1</td>
1016   - <td headers="criterio_64" class="celula">Presença de alteração automática de contexto sem que o usuário tenha conhecimento</td>
1017   - <td headers="como_avaliar_64" class="celula">Presença do elemento &lt;form&gt; e nos seus elementos internos, retirando os elementos &lt;input&gt; com os conteúdos no atributo "type": button, submit, reset; utilização dos eventos (atributos): onchange, onblur, onfocus, onformchange, onforminput, oninput, oninvalid, onreset, onselect, onsubmit, onkeydown, onkeypress, onkeyup, onclick; ou a presença do elemento &lt;form&gt; e nos seus elementos internos a utilização dos eventos (atributos): ondbclick, ondrag, ondragend, ondragcenter, ondragleave, ondragover, ondragstart, ondrop, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onscroll, ou a presença de funções javascript in-line (código javascript em elementos html), interno (código javascript dentro do elemento &lt;script&gt;) e externo (código javascript referenciado pelo elemento &lt;script&gt; por meio do atributo "src") que permitem comportamento na página sem apresentar aviso para o utilizador da página.</td>
  1052 + <td headers="numero_64" class="celulaCriterios">6.4.1</td>
  1053 + <td headers="criterio_64" class="celulaCriterios">Presença do elemento <span lang="en">FORM</span> e nos seus elementos a existência do atributo<span lang="en"> ONCHANGE, ONBLUR, ONFOCUS, ONFORMCHANGE, ONFORMINPUT, ONINPUT, ONINVALID, ONRESET, ONSELECT, ONSUBMIT, ONKEYDOWN, ONKEYPRESS, ONKEYUP, ONCLICK</span> exceto elementos <span lang="en">INPUT</span> com <span lang="en">type BUTTON, SUBMIT, RESET</span></td>
  1054 + <td headers="como_avaliar_64" class="celulaCriterios">Presença do elemento <span lang="en">&lt;form&gt;</span> e nos seus elementos internos, retirando os elementos <span lang="en">&lt;input&gt;</span> com os conteúdos no atributo <span lang="en">“type”: button, submit, reset</span>. Utilização dos eventos (atributos): <span lang="en">onchage, onblur, onfocus, onformchange, onforminput, oninput, oninvalid, onreset, onselect, onsubmit, onkeydown, onkeypress, onkeyup, onclick</span>.</td>
1018 1055 </tr>
1019   -
  1056 +
  1057 + <tr id="criterio_642">
  1058 + <td headers="numero_64" class="celulaCriterios">6.4.2</td>
  1059 + <td headers="criterio_64" class="celulaCriterios">Presença do elemento <span lang="en">FORM</span> e nos seus elementos a existência do atributo<span lang="en"> ONDBLCLICK, ONDRAG, ONDRAGEND, ONDRAGENTER, ONDRAGLEAVE, ONDRAGOVER, ONDRAGSTART, ONDROP, ONMOUSEDOWN, ONMOUSEMOVE, ONMOUSEOUT, ONMOUSEOVER, ONMOUSEUP, ONMOUSEWHEEL, ONSCROLL</span></td>
  1060 + <td headers="como_avaliar_64" class="celulaCriterios">Presença do elemento<span lang="en"> &lt;form&gt;</span> e nos seus elementos internos a utilização dos eventos (atributos):<span lang="en"> ondbclick, ondrag, ondragend, ondragcenter, omdragleave, ondragover, ondragstart, ondrop, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onscroll, </span>ou a presença de funções <span lang="en">javascript in-line</span> (código <span lang="en">javascritpt</span> em elementos html), interno (código <span lang="en">javascript</span> dentro do elemento <span lang="en">&lt;script&gt;</span>) e externo (código <span lang="en">javascript</span> referenciado pelo elemento <span lang="en">&lt;script&gt;</span> por meio do atributo src) que permitem comportamento na página sem apresentar aviso ao utilizador da página.</td>
  1061 + </tr>
1020 1062 </tbody>
1021 1063 </table>
1022 1064  
  1065 + <hr class="hr_linhaDupla">
1023 1066 <h3 class="subtitulo">Recomendação 6.7 - Agrupar campos de formulário</h3>
1024 1067 <p class="criterios">É recomendado que os campos com informações relacionadas sejam agrupadas utilizando elementos com esta finalidade na própria linguagem HTML, principalmente em formulários longos. O agrupamento deverá ser feito de maneira lógica, explicitando claramente o propósito ou natureza dos agrupamentos.</p>
1025 1068  
1026 1069 <table class="tabelaCriterioSucesso">
1027   - <caption class="capitulo">Critérios de Avaliação e como avaliar Recomendação 6.7</caption>
  1070 + <caption>Critérios de Avaliação e como avaliar Recomendação 6.7</caption>
1028 1071 <thead>
1029 1072 <tr>
1030   - <th id="numero_67" class="topo indice0">Número</th>
1031   - <th id="criterio_67" class="topo indice1">Critério</th>
1032   - <th id="como_avaliar_67" class="topo indice2">Como avaliar</th>
  1073 + <th id="numero_67" class="topoCriterios indice0">Número</th>
  1074 + <th id="criterio_67" class="topoCriterios indice1">Critério</th>
  1075 + <th id="como_avaliar_67" class="topoCriterios indice2">Como avaliar</th>
1033 1076 </tr>
1034 1077 </thead>
1035 1078 <tbody>
1036 1079  
1037 1080 <tr id="criterio_671">
1038   - <td headers="numero_67" class="celula">6.7.1</td>
1039   - <td headers="criterio_67" class="celula">Existência de formulário e inexistência de agrupamento de campos</td>
1040   - <td headers="como_avaliar_67" class="celula">Verificar a presença do elemento &lt;form&gt; e dentro desse os elementos: &lt;input&gt;, &lt;textarea&gt;, &lt;button&gt;, &lt;select&gt;, &lt;option&gt;, &lt;label&gt; e ausência do elemento &lt;fieldset&gt;.</td>
  1081 + <td headers="numero_67" class="celulaCriterios">6.7.1</td>
  1082 + <td headers="criterio_67" class="celulaCriterios">Existência de formulário e inexistência de agrupamento de campos</td>
  1083 + <td headers="como_avaliar_67" class="celulaCriterios">Verificar a presença do elemento &lt;<span lang="en">form</span>&gt; e dentro desse os elementos:<span lang="en"> &lt;input&gt;, &lt;textarea&gt;, &lt;button&gt;, &lt;select&gt;, &lt;option&gt;, &lt;label&gt;</span> e ausência do elemento<span lang="en"> &lt;fieldset&gt;</span>.</td>
1041 1084 </tr>
1042 1085  
1043 1086 <tr id="criterio_672">
1044   - <td headers="numero_67" class="celula">6.7.2</td>
1045   - <td headers="criterio_67" class="celula">Uso de campo de seleção sem agrupamento.</td>
1046   - <td headers="como_avaliar_67" class="celula">Verificar a presença do elemento &lt;form&gt; e dentro desse o elemento &lt;select&gt; e ausência do elemento &lt;optgroup&gt; para conteúdos do &lt;select&gt; que precisem de agrupamento.</td>
  1087 + <td headers="numero_67" class="celulaCriterios">6.7.2</td>
  1088 + <td headers="criterio_67" class="celulaCriterios">Uso de campo de seleção sem agrupamento.</td>
  1089 + <td headers="como_avaliar_67" class="celulaCriterios">Verificar a presença do elemento &lt;<span lang="en">form</span>&gt; e dentro desse o elemento <span lang="en">&lt;select&gt;</span> e ausência do elemento <span lang="en">&lt;optgroup&gt;</span> para conteúdos do <span lang="en">&lt;select&gt;</span> que precisam de agrupamento.</td>
1047 1090 </tr>
1048 1091  
1049 1092 </tbody>
... ...