Skip to content

Latest commit

 

History

History
165 lines (124 loc) · 9.24 KB

Ferramentas.md

File metadata and controls

165 lines (124 loc) · 9.24 KB

Ferramentas de Acessibilidade

Visão Geral:

Avaliador e Simulador de Acessibilidade em Sítios (ASES)

  • O ASES é uma ferramenta que permite avaliar e simular a acessibilidade de sítios da Internet, de acordo com as recomendações do Modelo de Acessibilidade em Governo Eletrônico (eMag), que por sua vez é baseada nas recomendações de acessibilidade da WCAG. O ASES é uma ferramenta de apoio à avaliação de acessibilidade, não substituindo a avaliação humana.

Formas de utilizar o ASES:

  • Conta com a versao web que possui três formar de avaliar o conteúdo:
    1. URL: Avalia o conteúdo de um sítio da Internet, acessível publicamente, a partir de sua URL.
    2. Arquivo: Avalia o conteúdo de um sítio da Internet, acessível publicamente, a partir de um arquivo HTML.
    3. Código-fonte: Avalia o conteúdo de um sítio da Internet, acessível publicamente, a partir do código-fonte HTML.

Markup Validation Service (W3C)

  • O Markup Validation Service é um serviço que permite validar documentos HTML, XHTML, SMIL, MathML, etc. O serviço é fornecido pelo W3C para ajudar autores de páginas da Web a validar a marcação de seus documentos. Os documentos podem ser validados em três formas diferentes, assim como o ASES o W3C também fornece avaliação por URL, por arquivo ou por fragmento de texto.

Web Accessibility Evaluation Tool (WAVE)

  • O WAVE é uma ferramenta de avaliação de acessibilidade da Web desenvolvida pela WebAIM. Ele fornece visualizações visuais e alternativas de texto para ajudar os usuários a avaliar a acessibilidade de suas páginas da Web. Ele também examina o conteúdo para determinar se ele cumpre as práticas recomendadas de acessibilidade.

Exemplo de código HTML com erros de acessibilidade

Código HTML (Clique para Expandir/Recolher)

<!DOCTYPE html>
<html>
<head>
    <title>Página com Erros de Acessibilidade</title>
</head>
<body>
    <div align="center">
        <h1><font size="6" color="blue">Bem-vindo</font></h1>
        <p>Este é o meu site incrível.</p>
    </div>
    
    <hr>
    
    <table border="1">
        <tr>
            <td><b>Título</b></td>
            <td>Texto principal</td>
        </tr>
        <tr>
            <td colspan="2">
                <img src="imagem.jpg" alt="Imagem">
            </td>
        </tr>
    </table>
    
    <br>
    
    <div style="text-align: center;">
        <a href="#" onclick="javascript:alert('Cliquei!');">Clique aqui</a>
    </div>
    
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    
    <hr>
    
    <form>
        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="nome"><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br>
        <input type="submit" value="Enviar">
    </form>
    
    <hr>
    
    <footer>
        <p>Todos os direitos reservados &copy; 2023</p>
    </footer>
</body>
</html>

seguindos os criterios de acessibilidade da eMag e WCAG, este código possui os seguintes erros e/ou recomendações:

  • ASES:
Categoria Recomendação Quantidade Linha(s) do código fonte
Erros da seção marcação ❌ Fornecer âncoras para ir direto a um bloco de conteúdo 1 1
Avisos da seção marcação ⚠️ Respeitar os Padrões Web 2 28 29
⚠️ Organizar o código HTML de forma lógica e semântica 3 12, 38, 48
⚠️ Utilizar corretamente os níveis de cabeçalho 1 8
⚠️ Não utilizar tabelas para diagramação 1 14
⚠️ Dividir as áreas de informação 3 1, 1, 1
Fim do conteúdo das recomendações
  • W3C:
Avaliação Descrição Linha(s) do Código Fonte
Avaliação 1 Consider adding a lang attribute to the <html> start tag to declare the language of this document. Linha 1, coluna 16 a Linha 2, coluna 6
Avaliação 2 The align attribute on the <div> element is obsolete. Use CSS instead. Linha 7, coluna 5 a Linha 7, coluna 24
Avaliação 3 The <font> element is obsolete. Use CSS instead. Linha 8, coluna 13 a Linha 8, coluna 40
Avaliação 4 The border attribute on the <table> element is obsolete. Use CSS instead. Linha 14, coluna 5 a Linha 14, coluna 22

desafio proposto:

Exemplo do Código Corrigido

Recomendações

en-us

pt-br