diff options
Diffstat (limited to 'files/pt-br/learn/accessibility/acessibilidade_problemas/index.html')
| -rw-r--r-- | files/pt-br/learn/accessibility/acessibilidade_problemas/index.html | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/files/pt-br/learn/accessibility/acessibilidade_problemas/index.html b/files/pt-br/learn/accessibility/acessibilidade_problemas/index.html new file mode 100644 index 0000000000..727433531a --- /dev/null +++ b/files/pt-br/learn/accessibility/acessibilidade_problemas/index.html @@ -0,0 +1,111 @@ +--- +title: 'Avaliação: solucionando problemas de acessibilidade' +slug: Learn/Accessibility/Acessibilidade_problemas +tags: + - Acessibilidade + - Avaliação + - CSS + - Codificação + - CodingScripting + - Iniciante + - JavaScript + - WAI-ARIA + - aprendizado +translation_of: Learn/Accessibility/Accessibility_troubleshooting +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div> + +<p class="summary">Na avaliação deste módulo, apresentamos a você um site simples com vários problemas de acessibilidade que você precisa diagnosticar e corrigir.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos:</th> + <td>Conhecimento básico de informática, entendimento básico de HTML, CSS e Javascript, uma compreesão dos <a href="/en-US/docs/Learn/Accessibility">artigos anteriores deste curso</a>.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Testar conhecimentos básicos e fundamentais para a acessibilidade.</td> + </tr> + </tbody> +</table> + +<h2 id="Ponto_de_partida">Ponto de partida</h2> + +<p>Para começar esta avaliação, você deve pegar <a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true" rel="noopener">o arquivo ZIP que contém os arquivos que compõem o exemplo</a>. Descompacte o conteúdo em um novo diretório em algum lugar de seu computador.</p> + +<p>O site de avaliação final, deve ser parecido com esse:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p> + +<p>Você verá algumas diferenças e/ou problemas com a exibição do estado inicial do site da avaliação - isso se deve principalmente as diferenças na marcação de código, o que, por sua vez, causa alguns problemas de estilo, pois o CSS não está aplicado corretamente. Não se preocupe - você irá corrigir esses problemas nas próximas seções!</p> + +<h2 id="Resumo_do_projeto">Resumo do projeto</h2> + +<p>Para este projeto, você é apresentado a um site fictício exibindo um artigo sobre ursos. Da forma como ele está, possui vários problemas de acessibilidade - a sua tarefa é explorar o site existente e corrigí-los da melhor forma possível, respondendo as seguintes perguntas.</p> + +<h3 id="Cor">Cor</h3> + +<p>O texto é difícil de ler devido ao esquema de cores atual. Você pode fazer um teste do contraste de cor atual (texto/plano de fundo), relatar os resultados do teste e corrigí-lo alterando as cores atribuídas?</p> + +<h3 id="HTML_semântico">HTML semântico</h3> + +<ol> + <li>O conteúdo ainda não é muito acessível - relate o que acontece quando você tenta navegar utilizando um leitor de telas.</li> + <li>Você consegue atualizar o texto do artigo para facilitar a navegação de usuários de leitores de telas?</li> + <li>A parte do menu de navegação do site (agrupada em <code><div class="nav"></div></code>) poderia estar mais acessível se estivesse dentro de um elemento semântico de HTML5 mais adequado. Qual elemento deve ser utilizado? Atualize-o.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Você precisará atualizar os seletores de CSS que estilizam as respectivas <font>tags para seus equivalentes aos cabeçalhos semânticos. </font><font>Depois de adicionar elementos de parágrafo, você perceberá que a estilização parecerá bem melhor.</font></p> +</div> + +<h3 id="As_imagens"><font>As imagens</font></h3> + +<p><font>As imagens estão atualmente inacessíveis para os usuários do leitor de tela.</font> <font>Você pode consertar isso?</font></p> + +<h3 id="O_player_de_áudio"><font>O "player" de áudio</font></h3> + +<ol> + <li><font>Foi utilizada o elemento <code><audio></code> para exibir o "player", porém ele não é acessível para pessoas com deficiência auditiva (surdos) - você consegue adicionar algum tipo de alternativa acessível para esses usuários?</font></li> + <li><font>O elemento <code><audio></code> para utilizar o "player" não é acessível para aqueles que usam navegadores mais antigos que não suportam HTML5.</font> <font>Como você pode fazer com que esses usuários consigam ter acesso ao áudio?</font></li> +</ol> + +<h3 id="Os_formulários"><font>Os formulários</font></h3> + +<ol> + <li><font>O elemento <code><input></code> no formulário de pesquisa no topo poderia ter um rótulo, mas não queremos adicionar um rótulo de texto visível que possa prejudicar o design e não seja realmente necessário para os usuários com visão.</font> <font>Como você pode adicionar um rótulo acessível apenas aos leitores de tela?</font></li> + <li><font>Os dois elementos <code><input></code> no formulário de comentários possui rótulos de texto visíveis, mas não estão associados corretamente entre eles. Como você poderia fazer isso?</font> <font>Note que você precisará atualizar algumas regras de CSS também.</font></li> +</ol> + +<h3 id="Os_controles_de_comentários_exibirocultar"><font>Os controles de comentários "exibir/ocultar"</font></h3> + +<p><font>O botão de controle "exibir/ocultar" não está acessível por teclado.</font> <font>Você pode torná-lo acessível, tanto em termos de deixá-lo "focável" através da utilização da tecla tab, como ativá-lo usando a tecla enter?</font></p> + +<h3 id="A_tabela"><font>A tabela</font></h3> + +<p><font>A tabela de dados não está muito acessível no momento - é difícil para os usuários de leitores de tela associarem linhas e colunas de dados juntas, e a tabela também não possui nenhum tipo de resumo para deixar claro o que mostra.</font> <font>Você pode adicionar alguns recursos ao seu HTML para corrigir esse problema?</font></p> + +<h3 id="Outras_considerações"><font>Outras considerações?</font></h3> + +<p>Você pode citar mais duas ideias de melhorias que poderiam tornar o site mais acessível?</p> + +<h2 id="Avaliação"><font>Avaliação</font></h2> + +<p><font>Se você está fazendo esta avaliação como parte de um curso, você deverá entregar o seu trabalho para um professor para que possa corrigí-lo. Se você é auto-didata, então você pode obter o guia com a marcação correta </font><font>perguntando no</font> <a href="https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhh-F4r0i3lAG4IX8kI3Nk9lrJQa0A" rel="noopener">tópico de discussão para este exercício</a><font>, ou no canal de IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> no <a href="https://wiki.mozilla.org/IRC&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhgC5oFTH3iLqIFiwi9njruuEgsWHA" rel="noopener">IRC do Mozilla</a>.</font> Experimente tentar fazer<font> o exercício primeiro - você não ganhará nada trapaceando!</font></p> + +<p><font>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</font></p> + +<h2 id="Neste_módulo">Neste módulo</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhjKbO6WIg9b4xWjdZSQcnXxP1foyg">O que é acessibilidade?</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhg8RYEjwUHElGCpA1Q_60OiOtXeLg">HTML: uma boa base para acessibilidade</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhjUFLV1YWbEtSBOMPU_Bt7V-OmzDw">Práticas recomendadas de acessibilidade de CSS e JavaScript</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhj5LnkD6EVmrTiupwf932KoV4VCTw">Noções básicas de WAI-ARIA</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhgWAjBOw_jwWHOvK_zBEob2xQdEmA">Multimídia acessível</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Mobile&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhgnwNfnWbOmqpMWRI1c1zBqGFfU1Q">Acessibilidade móvel</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhjy6mgQ3Y6D6sT4QvsOicr2-Fmt9Q">Solução de problemas de acessibilidade</a></li> +</ul> |