1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
---
title: Accessibility
slug: Learn/Accessibility
tags:
- ARIA
- Accessibility
- Articles
- Beginner
- CSS
- CodingScripting
- HTML
- JavaScript
- Landing
- Learn
- Module
- NeedsTranslation
- TopicStub
translation_of: Learn/Accessibility
---
<div>{{LearnSidebar}}</div>
<p class="summary">Aprender HTML, CSS e Javascript é útil se você quer se tornar um desenvolvedor web, mas seu conhecimento precisa ir além. Você deve usá-las de forma a maximizar a audiencia dos seus sites, e permitir que todos possam acessar o conteúdo. Para conseguir isso, será necessário seguir boas práticas, realizar testes em vários navegadores (<a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>) e pensar em acessibilidade desde o início do desenvolvimento. Este módulo abordará a acessibilidade em detalhes.</p>
<h2 id="Visão_geral">Visão geral</h2>
<p>Quando alguem descreve um site como 'acessível', entende-se que qualquer usuário pode acessar o conteúdo, independente de como o conteúdo foi acessado - mesmo, e especialmente portadores de limitações físicas ou mentais.</p>
<ul>
<li>Os sites devem ser acessíveis por teclado, mouse ou telas sensíveis, e qualquer outra forma, incluindo leitores de tela, ou assistentes de voz, como Alexa, ou Google home.</li>
<li>As aplicações devem ser compreensíveis e usáveis pelos usuários independentemente de suas habilidades auditivas, visuais, físicas ou cognitivas.</li>
<li>Os sites também não podem oferecer perigo: alguns movimentos podem causar enxaquecas ou ataques epiléticos.</li>
</ul>
<p><strong>Por padrão, o HTML é acessível, se utilizado corretamente.</strong> A acessibilidade web presume que o conteúdo continuará acessível, independente de como o conteúdo será acessado.</p>
<p>O recurso <u>Inspecionar propriedades de acessibilidade</u> é uma ótima ferramenta para verificar problemas de acessibilidade nos sites. O vídeo a seguir fornece uma boa introdução sobre a ferramenta.</p>
<p>{{EmbedYouTube("7mqqgIxX_NU")}}</p>
<h2 id="Prerequisitos">Prerequisitos</h2>
<p>Para ter o máximo proveito deste módulo, recomendamos que esteja familiarizados com pelos os dois primeiros módulos de <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, e <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, ou melhor ainda, com as partes principais do módulo de acessibilidade de cada capítulo, à medida em que vai estudando.</p>
<div class="note">
<p><strong>Nota</strong>: Se você está estudando em um dispositivo que não pode criar novos arquivos, voce pode testar os exemplos em alguma aplicação de codificação online, como <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
</div>
<h2 id="Guias">Guias</h2>
<dl>
<dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">O que é acessibilidade?</a></dt>
<dd>Este artigo fornece uma visão geral do que é a acessibilidade - isso inclui quais grupos de pessoas devemos considerar e o motivo, quais ferramentas de acessibilidade são utilizadas para interagir com a web e como podemos fazer da acessibilidade web parte do nosso fluxo de desenvolvimento.</dd>
<dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A base para a acessibilidade</a></dt>
<dd>Boa parte do conteúdo da Web pode ser 'acessível' apenas garantindo que as tags HTML sejam sempre usadas para a finalidade correta. Este artigo analisa detalhadamente como utilizar o HTML garantindo a máxima acessibilidade.</dd>
<dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS e JavaScript: accessibilidade e boas práticas</a></dt>
<dd>CSS e JavaScript, usados corretamente, também podem proporcionar experiências acessíveis na web, mas se mal utilizadas, podem prejudicar a navegação. Este artigo descreve como utilizar o CSS e JS de forma a garantir que mesmo conteúdos complexos sejam acessíveis.</dd>
<dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">Básico de WAI-ARIA</a></dt>
<dd>Continuando to tópico anterior, não é facil fazer interfaces web com HTML e conteúdo dinâmico atualizado por JavaScript. O WAI-ARIA é uma tecnologia que pode ajudar com esses problemas, adicionando mais propriedades semanticas que navegadores e tecnologias assistivas podem reconhecer e usar para permitir que os usuários saibam o que está acontecendo na tela. Aqui mostraremos o básico destas técnicas para melhorar a acessibilidade.</dd>
<dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Multimedia acessível</a></dt>
<dd>Outra categoria de conteúdo que pode criar problemas de acessibilidade é a multimédia - Audio, vídeo e imagens precisam de alternativas textuais, assim poderão ser compreendidas por tecnologias assistivas de seus usuários. Este artigo detalha como.</dd>
<dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Accessibilidade Mobile</a></dt>
<dd>O acesso por dispositivos móveis e smartphones é muito popular, e plataformas como iOS e Android já possuem ferramentas bastante consolidadas, assim é importante considerar a acessibilidade do seu conteúdo também nestas plataformas. Este artigo faz considerações sobre acessibilidade mobile.</dd>
</dl>
<h2 id="Avaliações">Avaliações</h2>
<dl>
<dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Solução de problemas</a></dt>
<dd>Na avaliação deste módulo, disponibilizaremos um site com vários problemas de acessibilidade que você deve encontrar e corrigir. </dd>
</dl>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Comece a desenvolver aplicações web hoje</a> — Marcy Sutton apresenta uma excelente série de video tutorials.</li>
<li><a href="https://dequeuniversity.com/resources/">Recursos Universidade Deque</a> — inclui codigos de exemplo, leitores de tela, e outros recursos interessantes.</li>
<li><a href="http://webaim.org/resources/">Recursos webAIM</a> — inlui guias, checklists, ferramentas e outras coisas.</li>
</ul>
|
