- Os padrões Web são recomendações do W3C (World Wide Web Consortium), as quais + Os padrões Web são recomendações do W3C (World Wide Web Consortium), as quais são destinadas a orientar os desenvolvedores para o uso de boas práticas que tornam a - web acessivel para todos, permitindo assim que os desenvolvedores criem experiências + web acessivel para todos, permitindo assim que os desenvolvedores criem experiências ricas, alimentadas por um vasto armazenamento de dados, os quais estão disponiveis para qualquer dispositivo e compatíveis com atuais e futuros agentes de usuário (ex: navegadores).
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 1.1.1 | -Não foram respeitados os Padrões Web CSS | -Verificar relatório no anexo do documento de avaliação de erros e avisos apresentados pela ferramenta de avaliação de HTML do W3C: https://validator.w3.org/nu/ (link para um novo sitio). | +1.1.1 | +Não foram respeitados os Padrões Web HTML | +Verificar erros e avisos apresentados pela ferramenta de avaliação de HTML do W3C: https://validator.w3.org/nu/ (link para um novo sítio). |
| 1.1.2 | -Não foram respeitados os Padrões Web CSS | -Verificar relatório no anexo do documento de avaliação de erros e avisos apresentados pela ferramenta da avaliação de HTML do W3C: https://jigsaw.w3.org/css-validator/ (link para um novo sitio). | +1.1.2 | +Não foram respeitados os Padrões Web CSS | +Verificar erros e avisos apresentados pela ferramenta da avaliação de CSS do W3C: https://jigsaw.w3.org/css-validator/ (link para um novo sítio). |
| 1.1.3 | -Presença de CSS(s) in-line | -Verificar a presença do atributo "style" no código das páginas HTML. | +1.1.3 | +Presença de CSS(s) in-line | +Verificar a presença do atributo "style" no código das páginas HTML. |
| 1.1.4 | -Presença de CSS(s) interno | -Verificar a presença da tag HTML <style> no código das páginas HTML. | +1.1.4 | +Presença de CSS(s) interno | +Verificar a presença da tag HTML <style> no código das páginas HTML. |
| 1.1.5 | -Presença de javascript(s) in-line | -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. | +1.1.5 | +Presença de javascript(s) in-line | +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 e onabort. |
| 1.1.6 | -Presença de javascript(s) interno | -Verificar a presença de código javascript dentro da tag <script>. | +1.1.6 | +Presença de javascript(s) interno | +Verificar a presença de código javascript dentro da tag <script>. |
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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 1.2.1 | -Presença de tags HTML sem atributo e conteúdo de texto | -Verificar a presença de tags HTML que apresentem inicio e fechamento, mas sem conteúdo de texto. Possível exemplo seria <a></a> ou <div></div>. | +1.2.1 | +Presença de tags HTML sem atributo e conteúdo de texto | +Verificar a presença de tags HTML que apresentem inicio e fechamento, mas sem conteúdo de texto. Possível exemplo seria <a></a> ou <div></div>. |
| 1.2.2 | -Elementos utilizados de forma não semântica | -Verificar a presença de tags HTML com uso distinto da finalidade. Exemplo: tag <p> parágrafo sendo utilizada para simular quebra de linha, sendo a utilização correta a delimitação de texto. | +1.2.2 | +Elementos utilizados de forma não semântica | +Verificar a presença de tags HTML com uso distinto da finalidade. Exemplo: tag <p> parágrafo sendo utilizada para simular quebra de linha, sendo a utilização correta a delimitação de texto. |
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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 1.3.1 | -Os niveis de título não foram utilizados | -Verificar a ausência dos níveis de cabeçalho (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) nas páginas HTML. | +1.3.1 | +Os niveis de título não foram utilizados | +Verificar a ausência dos níveis de cabeçalho (<h1>, <h2>, <h3>, <h4>, <h5> e <h6>) nas páginas HTML. |
| 1.3.2 | -A hierarquia dos níveis de título está incorreta | -Verificar a falta de ordem sequencial da presença de níveis de cabeçalho. Exemplo: a presença do nível <h3> depende do nível anterior <h2>. | +1.3.2 | +A hierarquia dos níveis de título está incorreta | +Verificar a falta de ordem sequencial da presença de níveis de cabeçalho. Exemplo: a presença do nível <h3> depende do nível anterior <h2>. |
| 1.3.3 | -Foi utilizado somente o nível <h1> | -Verificar a presença do nível da cabeçalho <h1> sem categorizar outros assuntos da página em níveis de cabeçalho. | +1.3.3 | +Foi utilizado somente o nível H1 | +Verificar a presença do nível da cabeçalho <h1> sem categorizar outros assuntos da página em níveis de cabeçalho. |
| 1.3.4 | -Presença de mais de 1 cabeçalho | -Verificar a presença de níveis de cabeçalho <h1> sendo utilizados de forma repetida. | +1.3.4 | +Presença de mais de 1 cabeçalho | +Verificar a presença de níveis de cabeçalho <h1> sendo utilizados de forma repetida. |
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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 1.4.1 | -O bloco de conteúdo não esta antes do bloco de menu no HTML | -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. | +1.4.1 | +O bloco de conteúdo não esta antes do bloco de menu no HTML | +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. |
| 1.4.2 | -Presença do atributo "tabindex" | -Verificar a presença de utilização do tabindex nas páginas HTML. | +1.4.2 | +Presença do atributo TABINDEX | +Verificar a presença de utilização do atributo "tabindex" nas páginas HTML. |
| 1.4.3 | -Uso incorreto do "tabindex" | -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. | +1.4.3 | +Uso incorreto do TABINDEX | +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 atributo "tabindex" esta superior a 32767 e inferior a 0. |
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".
+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".
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 1.5.1 | -Não foram encontradas âncoras que permitam saltar pelas diferentes seções da página | -Verificar a ausência de links com conteúdo do atributo "href" que comecem com "#". | +1.5.1 | +Não foram encontradas âncoras que permitam saltar pelas diferentes seções da página | +Verificar a ausência de links com conteúdo de atributo "href" que comecem com "#". |
| 1.5.2 | -Foram encontradas âncoras que permitem saltar pelas diferentes seções da página, porém algumas não possuem um destino correspondente | -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. | +1.5.2 | +Foram encontradas âncoras que permitem saltar pelas diferentes seções da página, porém algumas não possuem um destino correspondente | +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. |
| 1.5.3 | -Não existem atalhos | -Verificar a ausência de tags HTML com atributo "accesskey" na página. | +1.5.3 | +Não existem atalhos | +Verificar a ausência de tags HTML com atributo "accesskey" na página. |
| 1.5.4 | -O primeiro link é uma âncora para o conteúdo da página | -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. | +1.5.4 | +O primeiro link é uma âncora para o conteúdo da página | +Verificar a presença de link com conteúdo de atributo "href" que comece com "#", e o destino da âncora seja um conteúdo específico da página HTML. |
| 1.5.5 | -O primeiro link é uma âncora válida para o conteúdo principal da página | -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. | +1.5.5 | +Presença de atributo ACCESSKEY com conteúdo repetido | +Verificar a presença do atributo "accesskey" e conteúdo repetido em outros "accesskeys" da página HTML. |
As tabelas devem ser utilizadas apenas para dados tabulares e não para efeitos de disposição dos elementos da página.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 1.6.1 | -Foram utizadas tabelas | -Verificar a presença da tag <table> na página HTML. | +1.6.1 | +Foram utizadas tabelas | +Verificar a presença da tag <table> na página HTML. |
| 1.6.2 | -Há formulário construído dentro de tabela | -Verificar a presença da tag <form> entre a tag <table>. | +1.6.2 | +Há formulário construído dentro de tabela | +Verificar a presença da tag <form> entre a tag <table>. |
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.
+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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 1.7.1 | -Há links adjacentes sem nenhum tipo de separação ou separação por espaços em branco | -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. | +1.7.1 | +Há links adjacentes sem nenhum tipo de separação ou separação por espaços em branco | +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. |
Á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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 1.8.1 | -Ausência de divisão de áreas quando do uso HTML 5 | -Verificar a ausência das tags: <header>, <footer>, <section>, <aside>, <nav> e <article>. | +1.8.1 | +Ausência de divisão de áreas quando do uso do HTML 5 | +Verificar a ausência das tags: <header>, <footer>, <section>, <aside>, <nav> e <article>. |
| 1.8.2 | -Ausência de divisão de áreas quando do uso de LANDMARKS de HTML | -Verificar a ausência do atributo "role" nas tags HTML com os conteúdos: "banner", "complementary", "contentinfo", "main", "navigation" e "search". | +1.8.2 | +Ausência de divisão de áreas quando do uso de LANDMARKS de HTML | +Verificar a ausência do atributo "role" nas tags HTML com os conteúdos: "banner", "complementary", "contentinfo", "main", "navigation" e "search". |
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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 1.9.1 | -Há link que abre nova página ou aba | -Verificar a presença de links com atributo "target" preenchido com "_blank". | +1.9.1 | +Há link que abre nova página ou aba | +Verificar a presença de links com atributo "target" preenchido com "_blank". |
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).
+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).
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 2.1.1 | -Há funcionalidade que só funciona pelo mouse usuário | -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. | +2.1.1 | +Há funcionalidade que só funciona pelo mouse | +Verificar a presença dos eventos (onmousedown, onmouseup, onmouseover, onmouseout) nas tags HTML e a ausência de evento para permitir a manipulação por teclado. |
| 2.1.2 | -Presença de eventos associados a elementos não interativos | -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. | +2.1.2 | +Presença de evento DBLCLICK ou ONDBCLICK no elemento HTML | +Verificar a presença do evento "ondblclick" nas tags HTML. | +
| 2.1.3 | +Presença de eventos associados a elementos não interativos | +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. |
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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 2.2.1 | -Presença de elemento SCRIPT sem o elemento NOSCRIPT | -Verificar a presença do elemento <script> sem o elemento <noscript> na página. | +2.2.1 | +Presença de elemento SCRIPT sem o elemento NOSCRIPT | +Verificar a presença do elemento <script> sem o elemento <noscript> na página. |
| 2.2.2 | -Presença de elemento OBJECT sem o conteúdo alternativo | -Verificar a presença do elemento <object> sem texto entre os elementos. Exemplo: <object> Digite aqui o texto alternativo </object>. | +2.2.2 | +Presença de elemento OBJECT sem o conteúdo alternativo | +Verificar a presença do elemento <object> sem texto entre os elementos. Exemplo: <object> Digite aqui o texto alternativo </object>. |
| 2.2.3 | -Presença de elemento EMBED na página HTML | -Verificar a presença do elemento <embed> sem texto entre os elementos. Exemplo: <embed> Digite aqui o texto alternativo </embed>. | +2.2.3 | +Presença de elemento EMBED na página HTML | +Verificar a presença do elemento <embed> sem texto entre os elementos. Exemplo: <embed> Digite aqui o texto alternativo </embed>. |
| 2.2.4 | -Presença de elemento APPLET na página HTML | -Verificar a presença do elemento <applet> sem texto entre os elementos. Exemplo:<applet> Digite aqui o texto alternativo </applet>. | +2.2.4 | +Presença de elemento APPLET na página HTML | +Verificar a presença do elemento <applet> sem texto entre os elementos. Exemplo:<applet> Digite aqui o texto alternativo </applet>. |
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.
+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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 2.3.1 | -Página que se atualiza automaticamente | -Verificar a presença do elemento <meta> 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. | +2.3.1 | +Página que se atualiza automaticamente | +Verificar a presença do elemento <meta> 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. |
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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 2.4.1 | -Há redirecionamento automático | -Verificar a presença do elemento <meta> e atributo "HTTP-EQUIV" com conteúdo "refresh" e atributo "content" ou a presença do elemento <script> com a função "window.location". | +2.4.1 | +Há redirecionamento automático | +Verificar a presença do elemento <meta> e atributo "http-equiv" com conteúdo "refresh" e atributo "content" ou a presença do elemento <script> com a função "window.location". |
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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 2.6.1 | -Presença do elemento BLINK | -Presença do elemento <blink> na página HTML. | +2.6.1 | +Presença do elemento BLINK | +Presença do elemento <blink> na página HTML. |
| 2.6.2 | -Presença do elemento MARQUEE | -Presença do elemento <marquee> na página HTML. | +2.6.2 | +Presença do elemento MARQUEE | +Presença do elemento <marquee> na página HTML. |
| 2.6.3 | -Presença do elemento IMG com arquivo GIF com intermitência de tela | -Presença do elemento <img> e atributo "src" contendo arquivo com extensão "gif" e o arquivo apresenta movimentação. | +2.6.3 | +Presença do elemento IMG com arquivo GIF com intermitência de tela | +Presença do elemento <img> e atributo "src" contendo arquivo com extensão "gif" e o arquivo apresenta movimentação. |
Deve-se identificar o principal idioma utilizado nos documentos e páginas HTML.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 3.1.1 | -Não há identificação do idioma principal da página | -Verificar a ausência do atributo "lang" no elemento <html>, quando o elemento <doctype> for do tipo Strict (http://www.w3.org/TR/html4/strict.dtd), Transitional (http://www.w3.org/TR/html4/loose.dtd), Frameset (http://www.w3.org/TR/html4/frameset.dtd), linguagem HTML 5, ou verificar a não presença do atributo "xml:lang", quando o elemento <doctype> for do tipo Strict (http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd), frameset (http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd), xhtml 1.1 (http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd), transitional (3.1.1 | +Não há identificação do idioma principal da página | +Verificar a ausência do atributo "lang" no elemento <html>, quando o elemento <doctype> for do tipo Strict (http://www.w3.org/TR/html4/strict.dtd), Transitional (http://www.w3.org/TR/html4/loose.dtd), Frameset (http://www.w3.org/TR/html4/frameset.dtd), linguagem HTML 5, ou verificar a não presença do atributo "xml:lang", quando o elemento <doctype> for do tipo Strict (http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd), frameset (http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd), XHTML 1.1 (http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd), transitional (http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd). | |
| 3.1.2 | -Presença do elemento HTML, atributo XMLNS, atributo XML;LANG e a ausência do atributo LANG | -Verificar a presença dos atributos "xmlns" e "xml-lang" e a ausência do atributo "lang". | +3.1.2 | +Presença do elemento HTML, atributo XMLNS, atributo XML;LANG e a ausência do atributo LANG | +Verificar a presença dos atributos "xmlns" e "xml-lang" e a ausência do atributo "lang". |
Se algum elemento de uma página possuir conteúdo em um idioma diferente do principal, este deverá estar identificado.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 3.2.1 | -Presença de atributo LANG nos elementos da página, além da tag HTML | -Verificar a presença do atributo "lang" nos elementos da página html, não considerando o elemento <html>. | 3.2.1 | +Presença de atributo LANG nos elementos da página, além da tag HTML | +Verificar a presença do atributo "lang" nos elementos da página HTML, não considerando o elemento <html>. |
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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 3.3.1 | -Não há título para a página, ou está em branco | -Verificar a ausência da tag <title> na página HTML, ou verificar a presença do tag <title> sem conteúdo de texto para a identificação da página. | +3.3.1 | +Não há título para a página, ou está em branco | +Verificar a ausência da tag <title> na página HTML, ou verificar a presença do tag <title> sem conteúdo de texto para a identificação da página. |
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.
+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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 3.5.1 | -Link com descrição no formato de URL | -Presença do elemento <a> 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". | +3.5.1 | +Link com descrição no formato de URL | +Presença do elemento <a> e descrição do texto em formato de endereço da internet. Lembrar que não importará se o link do texto será igual ou não no atributo "href". |
| 3.5.2 | -Links vazios | -Presença do elemento <a> e ausência de texto descritivo. | +3.5.2 | +Links vazios | +Presença do elemento <a> e ausência de texto descritivo. |
| 3.5.3 | -Link com descrição somente do TITLE | -Presença do elemento <a>, atributo "title" com texto descritivo e ausência de texto descritivo na estrutura principal do link. | +3.5.3 | +Link com descrição somente do TITLE | +Presença do elemento <a>, atributo "title" com texto descritivo e ausência de texto descritivo na estrutura principal do link. |
| 3.5.4 | -Links que são imagens sem descrição | -Presença do elemento <a> e dentro o elemento <img> sem conteúdo descritivo no atributo "alt". | +3.5.4 | +Links que são imagens sem descrição | +Presença do elemento <a> e dentro o elemento <img> sem conteúdo descritivo no atributo "alt". |
| 3.5.5 | -Links do tipo "clique aqui", "leia mais", "veja mais", "veja aqui", "clique", "acesse aqui", "clique para acessar", "aqui", entre outros | -Presença do elemento <a> 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". | +3.5.5 | +Links do tipo "clique aqui", "leia mais", "veja mais", "veja aqui", "clique", "acesse aqui", "clique para acessar", "aqui", entre outros | +Presença do elemento <a> 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". |
| 3.5.6 | -Links com descrições diferentes que remetem ao mesmo local | -Presença do elemento <a> com texto descritivo diferente, porém os conteúdos dos href's remetem para o mesmo link. | +3.5.6 | +Links com descrições diferentes que remetem ao mesmo local | +Presença de elementos <a> com textos descritivos diferentes, porém os conteúdos dos href's remetem para o mesmo link. |
| 3.5.7 | -Links com a mesma descrição que remetem a locais diferentes | -Presença do elemento <a> com texto descritivo igual, porém os conteúdos dos href's remetem para links diferentes. | +3.5.7 | +Links com a mesma descrição que remetem a locais diferentes | +Presença de elementos <a> com textos descritivos iguais, porém os conteúdos dos href's remetem para links diferentes. |
| 3.5.8 | -Links que são lidos duas ou mais vezes | -Presença do elemento <a> com o mesmo conteúdo descritivo em locais distintos da página HTML. | +3.5.8 | +Links que são lidos duas ou mais vezes | +Presença do elemento <a> com o mesmo conteúdo descritivo em locais distintos da página HTML. |
| 3.5.9 | -Links com descrição muito longa | -Presença do elemento <a> com conteúdo do texto descrito com quantidade de caracteres acima de 2000. | +3.5.9 | +Links com descrição muito longa | +Presença do elemento <a> com conteúdo do texto descrito com quantidade de caracteres acima de 2000. |
| 3.5.10 | -Links que remetem a páginas indisponiveis/inexistentes (links quebrados) | -Presença do elemento <a> e o conteúdo do atributo "href" direciona para páginas de erros: 404, 405, 503 e outros. | +3.5.10 | +Links que remetem a páginas indisponiveis/inexistentes (links quebrados) | +Presença do elemento <a> e o conteúdo do atributo "href" direciona para páginas de erros: 404, 405, 503 e outros. |
Deve ser fornecida uma descrição para as imagens da página.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 3.6.1 | -Imagens sem a declaração do atributo ALT | -Presença de elementos <img> e ausência do atributo "alt". | +3.6.1 | +Imagens sem a declaração do atributo ALT | +Presença de elementos <img> e ausência do atributo "alt". |
| 3.6.2 | -Imagens com conteúdo sem descrição | -Presença de elementos <img> e ausência de conteúdo descritivo do atributo "alt". | +3.6.2 | +Imagens com conteúdo sem descrição | +Presença de elementos <img> e ausência de conteúdo descritivo do atributo "alt". |
| 3.6.3 | -Imagens com descrição igual ao nome do arquivo | -Presença de elementos <img> e atributo "alt" com conteúdo descrito com o nome do arquivo de referência da imagem. | +3.6.3 | +Imagens com descrição igual ao nome do arquivo | +Presença de elementos <img> e atributo "alt" com conteúdo descrito com o nome do arquivo de referência da imagem. |
| 3.6.4 | -Imagens com descrição comum | -Presença de elementos <img> e atributo "alt" com conteúdo descrito com expressões: "figura"; "imagem"; "alt"; conteúdo em branco e outros. | +3.6.4 | +Imagens com descrições comuns | +Presença de elementos <img> e atributo "alt" com conteúdo descrito contendo expressões: "figura", "imagem", "alt", conteúdo em branco e outros. |
| 3.6.5 | -Imagens diferentes com a mesma descrição | -Presença de elementos <img> com o mesmo atributo "src", no entanto, o conteúdo do atributo "alt" não é o mesmo de cada imagem. | +3.6.5 | +Imagens diferentes com a mesma descrição | +Presença de elementos <img> com o mesmo atributo "src", no entanto, o conteúdo do atributo "alt" não é o mesmo de cada imagem. |
| 3.6.6 | -Imagens com dupla descrição, pois utiliza atributo TITLE com o mesmo valor da descrição | -Presença de elementos <img> com o mesmo conteúdo descrito no atributo "title" e no atributo "alt". | +3.6.6 | +Imagens com dupla descrição, pois utiliza atributo TITLE com o mesmo valor da descrição | +Presença de elementos <img> com o mesmo conteúdo descrito no atributo "title" e no atributo "alt". |
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.
+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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 3.7.1 | -Mapa de imagem sem descrição ou alternativa em texto | -Presença do elemento <img> com atributo "usemap" e ausência de conteúdo descritivo no atributo "alt", ou presença do elemento <area> e ausência de conteúdo descritivo no atributo "alt". | +3.7.1 | +Mapa de imagem sem descrição ou alternativa em texto | +Presença do elemento <img> com atributo "usemap" e ausência de conteúdo descritivo no atributo "alt", ou presença do elemento <area> e ausência de conteúdo descritivo no atributo "alt". |
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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 3.9.1 | -Tabelas sem título e resumo | -Presença do elemento <table> e ausência do atributo "summary" ou ausência do elemento <caption>. | +3.9.1 | +Tabelas sem título e resumo | +Presença do elemento <table> e ausência do atributo "summary" ou ausência do elemento <caption>. |
Em tabelas de dados simples, o uso apropriado dos cabeçalhos e das colunas para as células de dados.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 3.10.1 | -Tabelas sem células associadas | -Presença do elemento <table> e ausência dos elementos: <thead>, <tbody> ou a presença do elemento <table> e ausência dos atributos: "id", "headers", "scope", "axis" nos elementos <td> e <th>. | +3.10.1 | +Tabelas sem células associadas | +Presença do elemento <table> e ausência dos elementos: <thead>, <tbody>, ou a presença do elemento <table> e ausência dos atributos: "id", "headers", "scope", "axis" nos elementos <td> e <th>. |
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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 3.11.1 | -Presença de parágrafos justificados | -Presença de elementos <p> com conteúdo "justify" no atributo "align". | +3.11.1 | +Presença de parágrafos justificados | +Presença de elementos <p> com conteúdo "justify" no atributo "align". |
| 3.11.2 | -Presença de textos justificados através de folhas de estilo | -Presença de elementos <p> e propriedade CSS text-align com conteúdo "justify". Deverá ser avaliado o CSS externo (com arquivo CSS referenciado pelo elemento <link>), interno (propriedade dentro do elemento <style>) e in-line (propriedade dentro do atributo "style" no elemento <p>). | +3.11.2 | +Presença de textos justificados através de folhas de estilo | +Presença de elementos <p> e propriedade CSS text-align com conteúdo "justify". Deverá ser avaliado o CSS externo (com arquivo CSS referenciado pelo elemento <link>), interno (propriedade dentro do elemento <style>) e in-line (propriedade dentro do atributo "style" no elemento <p>). |
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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 3.12.1 | -Siglas marcadas e sem explicação | -Presença dos elementos <abbr> ou <acronym> e ausência do atributo "title" para descrever a sigla. | +3.12.1 | +Siglas marcadas e sem explicação | +Presença dos elementos <abbr> ou <acronym> e ausência do atributo "title" para descrever a sigla. |
A área que recebe o foco pelo teclado deve ser claramente marcada, devendo a área de seleção ser passível de ser clicada.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 4.4.1 | -Ausência de destaque de foco do elemento ativo | -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. | +4.4.1 | +Ausência de destaque de foco do elemento ativo | +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. |
Deve haver uma alternativa sonora ou textual para vídeos que não incluem faixas de áudio.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 5.1.1 | -Presença de vídeo na página | -Presença do elemento <embed> ou <video> com atributos "src" direcionados para arquivo de vídeo ou local de execução de vídeo. | +5.1.1 | +Presença de vídeo na página | +Presença do elemento <embed> ou <video> com atributos "src" direcionados para arquivo de vídeo ou local de execução de vídeo. |
Á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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 5.2.1 | -Presença de áudio na página | -Presença do elemento <embed> ou <audio> com atributos "src" direcionados para arquivo de audio ou local de execução de áudio. | +5.2.1 | +Presença de áudio na página | +Presença do elemento <embed> ou <audio> com atributos "src" direcionados para arquivo de audio ou local de execução de áudio. |
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.
+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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 5.3.1 | -Presença de vídeo na página | -Presença do elemento <embed> ou <vídeo> com atributos "src" direcionados para arquivo de vídeo ou local de execução de vídeo. | +5.3.1 | +Presença de vídeo na página | +Presença do elemento <embed> ou <video> com atributos "src" direcioanados para arquivo de vídeo ou local de execução de vídeo. |
Deve ser fornecido um mecanismo para parar, pausar, silenciar ou ajustar o volume de qualquer som que se reproduza na página.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 5.4.1 | -Presença de áudio na página | -Presença do elemento <embed> ou <audio> com atributos "src" direcionados para arquivo de áudio ou local de execução de áudio. | +5.4.1 | +Presença de áudio na página | +Presença do elemento <embed> ou <audio> com atributos "src" direcionados para arquivo de áudio ou local de execução de áudio. |
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.
+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 substituir o botão pela imagem que se deseja utilizar através do CSS e aplicar o texto descrito no atributo "value".
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 6.1.1 | -Botão sem descrição | -Presença do elemento <input> 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 <input> com os conteúdos: "button", "reset", ou "submit" e ausência de conteúdo no atributo "value" ou ausência do atributo "value". | +6.1.1 | +Botão sem descrição | +Presença do elemento <input> com o conteúdo do atributo "type" igual a "image" e ausência de conteúdo no atributo "alt" ou ausência do "alt". Presença do elemento <input> com os conteúdos: "button", "reset", ou "submit" e ausência de conteúdo no atributo "value" ou ausência do atributo "value". |
As etiquetas de texto devem estar associadas aos seus campos correspondentes no formulário.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 6.2.1 | -Campo sem label associado | -Presença do elemento <input> e ausência de elemento <label> com atributo "for" referenciado ao atributo "id" do <input>, ou presença de elemento <input> sem estar dentro de elemento <label>. | +6.2.1 | +Campo sem label associado | +Presença do elemento <input> e ausência de elemento <label> com atributo "for" referenciado ao atributo "id" do <input>, ou presença de elemento <input> sem estar dentro de elemento <label>. |
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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 6.3.1 | -Presença do elemento FORM e atributo TABINDEX | -Presença do elemento <form> e atributo "tabindex" nos elementos dentro do <form>. | +6.3.1 | +Presença do elemento FORM e atributo TABINDEX | +Presença do elemento <form> e atributo "tabindex" nos elementos dentro do <form>. |
A área que recebe o foco pelo teclado deve ser claramente marcada, devendo a área de seleção ser passível de ser clicada.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 6.4.1 | -Presença de alteração automática de contexto sem que o usuário tenha conhecimento | -Presença do elemento <form> e nos seus elementos internos, retirando os elementos <input> 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 <form> 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 <script>) e externo (código javascript referenciado pelo elemento <script> por meio do atributo "src") que permitem comportamento na página sem apresentar aviso para o utilizador da página. | +6.4.1 | +Presença do elemento FORM e nos seus elementos a existência do atributo ONCHANGE, ONBLUR, ONFOCUS, ONFORMCHANGE, ONFORMINPUT, ONINPUT, ONINVALID, ONRESET, ONSELECT, ONSUBMIT, ONKEYDOWN, ONKEYPRESS, ONKEYUP, ONCLICK exceto elementos INPUT com type BUTTON, SUBMIT, RESET | +Presença do elemento <form> e nos seus elementos internos, retirando os elementos <input> com os conteúdos no atributo “type”: button, submit, reset. Utilização dos eventos (atributos): onchage, onblur, onfocus, onformchange, onforminput, oninput, oninvalid, onreset, onselect, onsubmit, onkeydown, onkeypress, onkeyup, onclick. |
| 6.4.2 | +Presença do elemento FORM e nos seus elementos a existência do atributo ONDBLCLICK, ONDRAG, ONDRAGEND, ONDRAGENTER, ONDRAGLEAVE, ONDRAGOVER, ONDRAGSTART, ONDROP, ONMOUSEDOWN, ONMOUSEMOVE, ONMOUSEOUT, ONMOUSEOVER, ONMOUSEUP, ONMOUSEWHEEL, ONSCROLL | +Presença do elemento <form> e nos seus elementos internos a utilização dos eventos (atributos): ondbclick, ondrag, ondragend, ondragcenter, omdragleave, ondragover, ondragstart, ondrop, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onscroll, ou a presença de funções javascript in-line (código javascritpt em elementos html), interno (código javascript dentro do elemento <script>) e externo (código javascript referenciado pelo elemento <script> por meio do atributo src) que permitem comportamento na página sem apresentar aviso ao utilizador da página. | +
É 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.
| Número | -Critério | -Como avaliar | +Número | +Critério | +Como avaliar |
|---|---|---|---|---|---|
| 6.7.1 | -Existência de formulário e inexistência de agrupamento de campos | -Verificar a presença do elemento <form> e dentro desse os elementos: <input>, <textarea>, <button>, <select>, <option>, <label> e ausência do elemento <fieldset>. | +6.7.1 | +Existência de formulário e inexistência de agrupamento de campos | +Verificar a presença do elemento <form> e dentro desse os elementos: <input>, <textarea>, <button>, <select>, <option>, <label> e ausência do elemento <fieldset>. |
| 6.7.2 | -Uso de campo de seleção sem agrupamento. | -Verificar a presença do elemento <form> e dentro desse o elemento <select> e ausência do elemento <optgroup> para conteúdos do <select> que precisem de agrupamento. | +6.7.2 | +Uso de campo de seleção sem agrupamento. | +Verificar a presença do elemento <form> e dentro desse o elemento <select> e ausência do elemento <optgroup> para conteúdos do <select> que precisam de agrupamento. |