Skip to content

Commit

Permalink
convert content to md
Browse files Browse the repository at this point in the history
  • Loading branch information
@SphinxKnight
SphinxKnight committed Sep 26, 2022
1 parent f322d46 commit 292af90
Show file tree
Hide file tree
Showing 151 changed files with 24,403 additions and 24,980 deletions.
122 changes: 59 additions & 63 deletions files/pt-br/learn/accessibility/accessibility_troubleshooting/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,99 +14,95 @@ tags:
translation_of: Learn/Accessibility/Accessibility_troubleshooting
original_slug: Learn/Accessibility/Acessibilidade_problemas
---
<div>{{LearnSidebar}}</div>
{{LearnSidebar}}{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

<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>
Na avaliação deste módulo, apresentamos a você um site simples com vários problemas de acessibilidade que você precisa diagnosticar e corrigir.

<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>
<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>
## Ponto de partida

<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>
Para começar esta avaliação, você deve pegar [o arquivo ZIP que contém os arquivos que compõem o exemplo](https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true). Descompacte o conteúdo em um novo diretório em algum lugar de seu computador.

<p>O site de avaliação final, deve ser parecido com esse:</p>
O site de avaliação final, deve ser parecido com esse:

<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>
![](https://mdn.mozillademos.org/files/14555/assessment-site-finished.png)

<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>
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!

<h2 id="Resumo_do_projeto">Resumo do projeto</h2>
## Resumo do projeto

<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>
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.

<h3 id="Cor">Cor</h3>
### Cor

<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>
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?

<h3 id="HTML_semântico">HTML semântico</h3>
### HTML semântico

<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>&lt;div class="nav"&gt;&lt;/div&gt;</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>
1. O conteúdo ainda não é muito acessível - relate o que acontece quando você tenta navegar utilizando um leitor de telas.
2. Você consegue atualizar o texto do artigo para facilitar a navegação de usuários de leitores de telas?
3. A parte do menu de navegação do site (agrupada em `<div class="nav"></div>`) poderia estar mais acessível se estivesse dentro de um elemento semântico de HTML5 mais adequado. Qual elemento deve ser utilizado? Atualize-o.

<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>
> **Nota:** Você precisará atualizar os seletores de CSS que estilizam as respectivas tags para seus equivalentes aos cabeçalhos semânticos. Depois de adicionar elementos de parágrafo, você perceberá que a estilização parecerá bem melhor.
<h3 id="As_imagens"><font>As imagens</font></h3>
### As imagens

<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>
As imagens estão atualmente inacessíveis para os usuários do leitor de tela. Você pode consertar isso?

<h3 id="O_player_de_áudio"><font>O "player" de áudio</font></h3>
### O "player" de áudio

<ol>
<li><font>Foi utilizada o elemento <code>&lt;audio&gt;</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>&lt;audio&gt;</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>
1. Foi utilizada o elemento `<audio>` 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?
2. O elemento `<audio>` para utilizar o "player" não é acessível para aqueles que usam navegadores mais antigos que não suportam HTML5. Como você pode fazer com que esses usuários consigam ter acesso ao áudio?

<h3 id="Os_formulários"><font>Os formulários</font></h3>
### Os formulários

<ol>
<li><font>O elemento <code>&lt;input&gt;</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>&lt;input&gt;</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>
1. O elemento `<input>` 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. Como você pode adicionar um rótulo acessível apenas aos leitores de tela?
2. Os dois elementos `<input>` 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? Note que você precisará atualizar algumas regras de CSS também.

<h3 id="Os_controles_de_comentários_exibirocultar"><font>Os controles de comentários "exibir/ocultar"</font></h3>
### Os controles de comentários "exibir/ocultar"

<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>
O botão de controle "exibir/ocultar" não está acessível por teclado. 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?

<h3 id="A_tabela"><font>A tabela</font></h3>
### A tabela

<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>
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. Você pode adicionar alguns recursos ao seu HTML para corrigir esse problema?

<h3 id="Outras_considerações"><font>Outras considerações?</font></h3>
### Outras considerações?

<p>Você pode citar mais duas ideias de melhorias que poderiam tornar o site mais acessível?</p>
Você pode citar mais duas ideias de melhorias que poderiam tornar o site mais acessível?

<h2 id="Avaliação"><font>Avaliação</font></h2>
## Avaliação

<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&amp;xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&amp;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&amp;xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&amp;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>
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 perguntando no [tópico de discussão para este exercício](https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhh-F4r0i3lAG4IX8kI3Nk9lrJQa0A), ou no canal de IRC [#mdn](irc://irc.mozilla.org/mdn) no [IRC do Mozilla](https://wiki.mozilla.org/IRC&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhgC5oFTH3iLqIFiwi9njruuEgsWHA). Experimente tentar fazer o exercício primeiro - você não ganhará nada trapaceando!

<p><font>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</font></p>
{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

<h2 id="Neste_módulo">Neste módulo</h2>
## Neste módulo

<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility&amp;xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&amp;usg=ALkJrhjKbO6WIg9b4xWjdZSQcnXxP1foyg">O que é acessibilidade?</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML&amp;xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&amp;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&amp;xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&amp;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&amp;xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&amp;usg=ALkJrhj5LnkD6EVmrTiupwf932KoV4VCTw">Noções básicas de WAI-ARIA</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia&amp;xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&amp;usg=ALkJrhgWAjBOw_jwWHOvK_zBEob2xQdEmA">Multimídia acessível</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Mobile&amp;xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&amp;usg=ALkJrhgnwNfnWbOmqpMWRI1c1zBqGFfU1Q">Acessibilidade móvel</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting&amp;xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&amp;usg=ALkJrhjy6mgQ3Y6D6sT4QvsOicr2-Fmt9Q">Solução de problemas de acessibilidade</a></li>
</ul>
- [O que é acessibilidade?](/pt-BR/docs/Learn/Accessibility/What_is_accessibility&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhjKbO6WIg9b4xWjdZSQcnXxP1foyg)
- [HTML: uma boa base para acessibilidade](/pt-BR/docs/Learn/Accessibility/HTML&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhg8RYEjwUHElGCpA1Q_60OiOtXeLg)
- [Práticas recomendadas de acessibilidade de CSS e JavaScript](/pt-BR/docs/Learn/Accessibility/CSS_and_JavaScript&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhjUFLV1YWbEtSBOMPU_Bt7V-OmzDw)
- [Noções básicas de WAI-ARIA](/pt-BR/docs/Learn/Accessibility/WAI-ARIA_basics&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhj5LnkD6EVmrTiupwf932KoV4VCTw)
- [Multimídia acessível](/pt-BR/docs/Learn/Accessibility/Multimedia&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhgWAjBOw_jwWHOvK_zBEob2xQdEmA)
- [Acessibilidade móvel](/pt-BR/docs/Learn/Accessibility/Mobile&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhgnwNfnWbOmqpMWRI1c1zBqGFfU1Q)
- [Solução de problemas de acessibilidade](/pt-BR/docs/Learn/Accessibility/Accessibility_troubleshooting&xid=17259,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhjy6mgQ3Y6D6sT4QvsOicr2-Fmt9Q)
Loading

0 comments on commit 292af90

Please sign in to comment.