unslug pt-br: move

12 files changed, 530 insertions, 0 deletions

diff --git a/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
new file mode 100644
index 0000000000..df43b575a6
--- /dev/null
+++ b/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
@@ -0,0 +1,234 @@
+---
+title: Visão geral da acessibilidade nas aplicações web e widgets
+slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and_widgets
+tags:
+  - ARIA
+  - Accessibility
+  - Acessibilidade
+  - Aplicativos Web
+  - CSS
+  - DHTML
+  - Guía
+  - HTML+ARIA
+  - Navegação+Teclado
+  - WAI-ARA
+  - Widgets
+translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets
+---
+<p>A Rede Mundial está mudando. Estatísticamente, os sítios baseados em páginas estão, cada vez mais, sendo repostos por aplicações dinâmicas, em estilo Ambiente, que fazem uso intenso de JavaScript e AJAX. Estilistas estão criando novos <em>widgets</em> e controles inteiramente com a combinação de JavaScript, HTML e CSS. Este salto tem o potencial de aperfeiçoar, dramaticamente, a capacidade de resposta e a usabilidade da Rede, mas milhares de utilizadores estão sob o risco de exclusão, devido a algumas lacunas na acessibilidade. A JavaScript tem, tradicionalmente, tido a reputação de ser inviável para quem usa tecnologias assistivas, como leitores de tela mas, agora, existem maneiras de criar interfaces de utilização dinâmicas acessíveis a uma ampla variedade de pessoas.</p>
+
+<h2 id="O_problema">O problema</h2>
+
+<p>A maior parte do conjunto de ferramentas JavaScript oferece uma biblioteca de utilização de <em>widgets</em> que imita o comportamento de interfaces de Ambiente familiares. Deslizantes, barras de menus, visão de arquivos em lista e muito mais pode ser construído com uma combinação de JavaScript, CSS e HTML. Uma vez que a especificação da HTML 4 não fornece etiquetas integradas (<em>built-in tags</em>) que descrevam estes tipos de <em>widgets </em>semanticamente, os desenvolvedores recorrem ao uso de elementos genéricos, tais como &lt;div&gt; e &lt;span&gt;. Embora isto resulte em um <em>widget</em> que se pareça com seu duplo de ambiente, geralmente não existe informação semântica suficiente, na marcação, para torná-lo utilizável por uma tecnologia assistiva. Teor dinâmico em uma página da Rede Mundial pode ser particularmente problemático para quem, por alguma razão, não pode ver a tela. Cotações de ações, alimentação instantânea de atualizações do twitter, indicadores de progresso e conteúdos similares alteram o DOM, enquanto uma tecnologia assistiva (TA/AT) pode não ser alertada disso. Aqui é onde o conjunto <a href="/en/ARIA" title="ARIA">ARIA</a> entra.</p>
+
+<p><em>Exemplo 1: Marcação para um widget de abas construído sem as indicações ARIA. Não existem informações semânticas, na marcação, que descrevam a sua forma, nem a sua função.</em></p>
+
+<pre class="brush: html"><code>&lt;!-- This is a tabs widget. How would you know, looking only at the markup? --&gt;
+&lt;ol&gt;
+  &lt;li id="ch1Tab"&gt;
+    &lt;a href="#ch1Panel"&gt;Chapter 1&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="ch2Tab"&gt;
+    &lt;a href="#ch2Panel"&gt;Chapter 2&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="quizTab"&gt;
+    &lt;a href="#quizPanel"&gt;Quiz&lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;div&gt;
+  &lt;div id="ch1Panel"&gt;Chapter 1 content goes here&lt;/div&gt;
+  &lt;div id="ch2Panel"&gt;Chapter 2 content goes here&lt;/div&gt;
+  &lt;div id="quizPanel"&gt;Quiz content goes here&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<p><em>Exemplo 2: Como o widget de abas pode ser visto. Seus utilizadores podem reconhecer sua aparência, mas não há semântica legível por mecanismos de tecnologias assistivas.</em><br>
+ <img alt="Screenshot of the tabs widget" class="default internal" src="/@api/deki/files/4926/=Tabs_Widget.png"></p>
+
+<h2 id="ARIA">ARIA</h2>
+
+<p>As definições para <a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a> <strong>Accessible Rich Internet Applications</strong> (Aplicações Ricas para uma Internete Acessível), da W3C -  <a class="external" href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a> (Iniciativa pela Acessibilidade na Rede Mundial/World Wide Web Consortium-W3C) - oferecem uma via para a adição das necessidades semânticas perdidas pelas tecnologias assistivas, como os leitores de tela. O conjunto ARIA possibilita que desenvolvedores possam descrever seus <em>widgets</em> de forma mais detalhada com a inclusão de atributos especiais à marcação. Projetado para preencher a lacuna entre o padrão de rotulagem HTML e os controles com estilo ambiente encontrados em aplicações dinâmicas pela <em>web</em>, o conjunto ARIA fornece funções (roles) e estados (states) que descrevem o comportamento da maioria das interfaces de utilização dos <em>widgets </em>conhecidas.</p>
+
+<p>A especificação ARIA está dividida em três tipos diferentes de atributos: funções (roles), estados (states) e propriedades (properties). As funções (roles) descrevem os<em> widgets</em> que não estão disponíveis de outra forma em HTML 4, como deslizantes, barras de menu, abas e diálogos. As propriedades (properties) descrevem as características desses <em>widgets</em> - se podem ser arrastados (<em>draggable</em>), se existe algum elemento obrigatório, ou se trazem uma janela de explosão (popup) associada. Os estados (states) descrevem a interação atual de um elemento, informando à tecnlogia assistiva se este se encontra ativo, desativado, selecionado, ou oculto.</p>
+
+<p>Os atributos ARIA são projetados para serem interpretados automaticamente pelo navegador e traduzidos para as APIs (<span class="_Tgc">Application Programming Interface/Interface de Programação de Aplicativo)</span> de acessibilidade nativas do sistema operacional. Quando o conjunto ARIA está presente as tecnologias assistivas são capazes de reconhecer e interagir com os controles personalizados pela  JavaScript da mesma forma que fazem com os seus equivalentes de ambiente. Isto tem o potencial de oferecer uma experiência de utilização muito mais consistente do que aquela que foi possível nas gerações anteriores das aplicações da Rede, uma vez que os utilizadores de tecnologias assistivas podem empregar todo o seu conhecimento sobre o funcionamento das aplicações de ambiente, ao usar aquelas que são baseadas na <em>web</em>.</p>
+
+<p><em>Exemplo 3: Marcação para um widget de abas com os atributos ARIA adicionados:</em></p>
+
+<pre class="brush: html"><code>&lt;!-- Now *these* are Tabs! --&gt;
+&lt;!-- We've added role attributes to describe the tab list and each tab. --&gt;
+&lt;ol role="tablist"&gt;</code>
+  &lt;li id="ch1Tab" role="tab"&gt;
+    &lt;a href="#ch1Panel"&gt;Chapter 1&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="ch2Tab" role="tab"&gt;
+    &lt;a href="#ch2Panel"&gt;Chapter 2&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="quizTab" role="tab"&gt;
+    &lt;a href="#quizPanel"&gt;Quiz&lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;div&gt;
+  &lt;!-- Notice the role and aria-labelledby attributes we've added to describe these panels. --&gt;
+  &lt;div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab"&gt;Chapter 1 content goes here&lt;/div&gt;
+  &lt;div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab"&gt;Chapter 2 content goes here&lt;/div&gt;
+  &lt;div id="quizPanel" role="tabpanel" aria-labelledby="quizTab"&gt;Quiz content goes here&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>O conjunto ARIA tem suporte nas últimas versões de todos os maiores navegadores, incluindo Firefox, Safari, Opera, Chrome e Internet Explorer. Muitas das tecnologias assistivas, como as de código aberto NVDA e os leitores de tela Orca, da mesma foma, trazem suporte ao ARIA. Progressivamente, as bibliotecas  JavaScript para <em>widget</em>, tais como  jQuery UI, YUI, Google Closure e Dojo Dijit também incluem as marcações ARIA.</p>
+
+<h3 id="Mudanças_na_apresentação">Mudanças na apresentação</h3>
+
+<p>Mudanças de apresentação dinâmicas agregam o uso de CSS para alterar a aparência do conteúdo (uma borda vermelha em volta de algum dado inválido, ou a troca da cor de fundo de uma <span class="short_text" id="result_box" lang="pt"><span>caixa de seleção já marcada</span></span>), bem como quando um item é exibido, ou escondido.</p>
+
+<h4 id="Mudanças_de_estado">Mudanças de estado</h4>
+
+<p>O conjunto ARIA provê atributos para declarar o estado atual da interface de utilização de um <em>widget</em>. Os exemplos abrangem (mas não são apenas estes, com certeza( :</p>
+
+<ul>
+ <li><strong><code>aria-checked </code></strong><code>(marcada)</code>: indica o estado de uma caixa de seleção, ou de um botão de alternativa (<code>radio</code>)</li>
+ <li><strong><code>aria-disabled </code></strong><code>(desativado)</code>: indica que um elemento está visível, mas não pode ser editado, tampouco é executável.</li>
+ <li><strong><code>aria-grabbed </code></strong><code>(arrastado)</code>: indica o estado "arrastado" para um objeto, em uma operação de "arrastar e soltar".</li>
+</ul>
+
+<p>(Para uma lista completa de estados ARIA, consulte a <a class="external external-icon" href="http://www.w3.org/TR/wai-aria/states_and_properties" title="http://www.w3.org/TR/wai-aria/states_and_properties">ARIA list of states and properties</a> (lista de estados e propriedades ARIA).</p>
+
+<p>Os desenvolvedores devem dar preferência ao uso dos estados ARIA para indicar a situação atual <span id="result_box" lang="pt"><span>dos elemento</span><span><em>s widgets</em></span> <span>na interface de utilização (UI)</span></span> e os seletores de atributos CSS para alterar a sua aparência, com base nas mudanças desses estados (em vez de usar um roteiro (<em>script</em>) para mudar um nome de classe de um elemento).</p>
+
+<p>A <em>Open Ajax Alliance</em> (OAA - Aliança <em>OpenAJAX </em>) disponibiliza um exemplo de um seletor de atributos CSS baseado nos estados ARIA (em inglês) - <a class="external" href="http://www.oaa-accessibility.org/example/25/" title="http://www.oaa-accessibility.org/example/25/">an example of CSS attribute selectors based on ARIA states</a>. O exemplo mostra a <span id="result_box" lang="pt"><span>interface de um editor</span> <span>WYS/WYG</span> <span>com um sistema de</span> <span>menu dinâmico. Os itens</span></span> selecionados no menu, como o tipo de fonte estão, visualmente, distintos dos outros. As partes importantes do exemplo são explicadas a seguir.</p>
+
+<p>Neste exemplo, a HTML para um menu tem a forma exibida abaixo. Note como, nas linhas 7 e 13, a propriedade (<em>property</em>) <strong><code>aria-checked</code></strong> é usada para declarar o estado da seleção dos itens do menu.</p>
+
+<p><em>Exemplo 1a: HTML para um menu selecionável (adaptado da  <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p>
+
+<pre class="brush: html">&lt;ul id="fontMenu" class="menu" role="menu" aria-hidden="true"&gt;
+  &lt;li id="sans-serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="true"&gt;Sans-serif&lt;/li&gt;
+  &lt;li id="serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="false"&gt;Serif&lt;/li&gt;
+  ...
+</pre>
+
+<p>A CSS usada para alterar a aparência do item selecionado é mostrada no Exemplo 1b. Perceba que não existe um nome de classe (<em>classname</em>) de personalização, apenas o estado do atributo <strong><code>aria-checked</code></strong>, na linha 1.</p>
+
+<p><em>Exemplo 1b: Seletor baseado em atributo para indicar um estado (da  <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p>
+
+<pre class="brush: css">li[aria-checked="true"] {
+  font-weight: bold;
+  background-image: url('images/dot.png');
+  background-repeat: no-repeat;
+  background-position: 5px 10px;
+}
+</pre>
+
+<p>O  JavaScript para atualizar a propriedade <strong><code>aria-checked</code></strong> tem a forma exibida no Exemplo 1c. Repare que o roteiro (<em>script</em>) apenas atualiza o atributo <strong><code>aria-checked</code></strong> (linhas 3 e 8); <span id="result_box" lang="pt"><span>também não é necessário</span> <span>adicionar, ou remover,</span> <span>um nome de</span> <span>classe personalizada</span></span>.</p>
+
+<p><em>Exemplo 1c: A  JavaScript atualiza o atributo aria-checked  (baseado em  <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>)</em>.</p>
+
+<pre class="brush: javascript">var processMenuChoice = function(item) {
+  // 'check' the selected item
+  item.setAttribute('aria-checked', 'true');
+  // 'un-check' the other menu items
+  var sib = item.parentNode.firstChild;
+  for (; sib; sib = sib.nextSibling ) {
+    if ( sib.nodeType === 1 &amp;&amp; sib !== item ) {
+      sib.setAttribute('aria-checked', 'false');
+    }
+  }
+};
+</pre>
+
+<h4 id="Alterações_visuais">Alterações visuais</h4>
+
+<p>Quando o conteúdo visual é alterado (isto é, um elemento é escondido, ou mostrado), os desenvolvedores devem mudar o valor da propriedade <strong><code>aria-hidden</code></strong>. As técnicas descritas acima devem ser usadas, a fim de declarar a CSS para ocultar um elemento utilizando<code><em> </em></code><em><code>display:none</code></em><code> </code>(<em>exibir:nenhum</em>).</p>
+
+<p>O sítio da <em>Open Ajax Alliance</em> fornece um exemplo de uma dica de tela (<em>tooltip</em>) que utiliza o estado aria-hidden para controlar a sua visibilidade (em inglês) <a class="external" href="http://www.oaa-accessibility.org/example/39/" title="http://www.oaa-accessibility.org/example/39/">an example of a tooltip that uses <strong><code>aria-hidden</code></strong> to control the visibility of the tooltip</a>. O exemplo mostra um formulário <em>web</em> simples, com caixas de dicas de tela contendo instruções associadas aos campos de entrada. As partes relevantes deste exemplo estão explicadas abaixo.</p>
+
+<p>Aqui, a HTML para a dica de tela tem a forma exibida no Exemplo 2a. A linha 9 configura o estado da <strong><code>aria-hidden</code></strong> para <code>true</code>.</p>
+
+<p><em>Exemplo 2a: HTML para dicas de tela (adaptado de  <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p>
+
+<pre class="brush: html">&lt;div class="text"&gt;
+    &lt;label id="tp1-label" for="first"&gt;First Name:&lt;/label&gt;
+    &lt;input type="text" id="first" name="first" size="20"
+           aria-labelledby="tp1-label"
+           aria-describedby="tp1"
+           aria-required="false" /&gt;
+    &lt;div id="tp1" class="tooltip"
+         role="tooltip"
+         aria-hidden="true"&gt;Your first name is optional&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>A CSS para esta marcação está explicada no Exemplo 2b. Veja que não há uso de <em>classname</em> personalizada, apenas o estado do atributo <strong><code>aria-hidden</code></strong>, na linha 1.</p>
+
+<p><em>Exemplo 2b:  Seletor basedo em atributo para indicar um estado  (de <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p>
+
+<pre class="brush: css">div.tooltip[aria-hidden="true"] {
+  display: none;
+  }
+</pre>
+
+<p>O JavaScript que atualiza a propriedade <strong><code>aria-hidden</code></strong> tem a forma exposta no Exemplo 2c. Observe que o roteiro apenas atualiza o atributo <strong><code>aria-hidden</code></strong> (linha 2); não é necessário adicionar, nem remover, uma <em>classname</em> customizada.</p>
+
+<p><em>Exemplo 2c: JavaScript para atualização do atributo aria-checked (com base em <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p>
+
+<pre class="brush: javascript">var showTip = function(el) {
+  el.setAttribute('aria-hidden', 'false');
+}</pre>
+
+<h3 id="Mudança_de_Atributo_(Role)">Mudança de Atributo (<em>Role</em>)</h3>
+
+<div class="note">Em construção</div>
+
+<p>O conjunto ARIA possibilita que os desenvolvedores possam declarar uma função semântica para um elemento que, de outro modo, não a apresentaria, ou a ofereceria de forma incorreta. Por exemplo, quando alguma lista desordenada é utilizada para criar um menu, à<code> </code>{{ HTMLElement("ul") }}<code> </code>deve ser dada uma<code><strong> </strong></code><strong><code>role</code></strong> de <code>menubar</code> e cada<code> </code>{{ HTMLElement("li") }}<code> </code>deve ter uma <strong><code>role</code></strong> de <code>menuitem</code>.</p>
+
+<p>O papel (<strong><code>role</code></strong>) de um elemento não deve mudar. Em vez disso, remova o elemento original e ocupe seu lugar com um elemento que tenha a função (<strong><code>role</code></strong>) nova.</p>
+
+<p>Por exemplo, considere um <em>widget</em> de edição "<em>inline</em>": um componente que possibilita que seus utilizadores sejam capazes de editar uma parte de um texto, sem mudar toda a composição. Este componente carrega o modo "<em>visualizar</em>", no qual o texto não pode ser modificado, mas pode ser ativado e um modo "<em>editar</em>", no qual o texto pode ser alterado. Se você o desenvolve, pode ter a tentação de implementar o modo "<em>visualizar</em>" com o uso do elemento texto "<em>somente leitura</em>"  {{ HTMLElement("input") }}, definindo a sua ARIA<code> </code><strong><code>role</code><code> </code></strong>para <code>button</code> e, em seguida,<span id="result_box" lang="pt"> alternando<span> para o modo</span> <span>"<em>editar</em></span><span>"</span><span>, para tornar</span> <span>o elemento</span> apto à <span>gravação</span></span> e <span class="short_text" id="result_box" lang="pt"><span>removendo</span> <span>o atributo </span></span><strong><code>role</code> </strong><span class="short_text" lang="pt"><span>no modo</span> <span>"editar</span><span>"</span></span> (desde que os elementos {{ HTMLElement("input") }} tenham as suas próprias funções semânticas).</p>
+
+<p>Não faça isso. Em substituição, implemente o modo "<em>visualizar</em>" usando um elemento completamente diferente, tal como uma {{ HTMLElement("div") }}, ou {{ HTMLElement("span") }} com uma <strong><code>role</code></strong> de <code>button</code> e o modo « <em>edit</em> » utilizando um elemento texto {{ HTMLElement("input") }}.</p>
+
+<h3 id="Mudanças_assíncronas_de_conteúdo">Mudanças assíncronas de conteúdo</h3>
+
+<div class="note">Em construção. Veja, também, <a href="/en/ARIA/Live_Regions" title="Live Regions">Regiões Dinâmicas</a></div>
+
+<h2 id="Navegação_pelo_Teclado">Navegação pelo Teclado</h2>
+
+<p>Muitas vezes, os desenvolvedores negligenciam o suporte ao teclado quando criam <em>widgets</em> personalizados. Para ser acessível a uma gama maior de pessoas, todas as configurações de uma aplicação <em>web</em>, ou de um <em>widget</em>, devem oferecer controles pelo teclado, sem a necessidade de um rato. Na prática isto, frequentemente, envolve as convenções suportadas por <em>widgets</em> similares, de ambiente, tirando plena vantagem das teclas Tab, Entra<em>,</em> Barra de Espaço e Setas.</p>
+
+<p>Tradicionalmente, a navegação pelo teclado na <em>web</em> tem sido limitada à tecla Tab, que é pressionada para dar foco a cada botão, vínculo, ou formulário na página, em uma ordenação linear e Shift-Tab para navegar em sentido contrário (navegação regresssiva). É uma forma unidimensional de navegação - para frente e para trás, um elemento por vez. Em páginas mais pesadas, alguém que navegue apenas pelo teclado deve pressioná-lo dezenas de vezes antes de alcançar a seção desejada. Implementar as convenções para teclado no modelo ambiente, para a <em>web</em>, tem o potencial de tornar a navegação significativamente mais rápida para essas pessoas.</p>
+
+<p>Aqui está um resumo sobre como a navegação pelo teclado deve funcionar, com a habilitação do conjunto ARIA, na aplicação <em>web</em>:</p>
+
+<ul>
+ <li>A tecla TAB deve fornecer o foco para o <em>widget</em>, como um todo. Por exemplo, a tabulação em uma barra de menu deve ter seu foco em seu primeiro elemento.</li>
+ <li>As teclas de setas devem permitir uma seleção, ou a navegação dentro do <em>widget</em>. Por exemplo, as setas "<em>esquerda</em>" e "<em>direita</em>" devem levar o foco para o item anterior, ou próximo, do menu.</li>
+ <li>Quando o widget não estiver dentro de um formulário, as teclas "<em>Entra</em>" e "<em>barra de espaço</em>" devem selecionar, ou ativar o controle.</li>
+ <li>Dentro de um formulário, a tecla "barra de spaço" deve selecionar, ou ativar um controle, enquanto a tecla "Entra" deve submeter sua ação padrão.</li>
+ <li>Se houver dúvidas, copie o comportamento das ações padronizadas para ambiente nos controles que você estiver criando.</li>
+</ul>
+
+<p>Assim, para o exemplo de <em>widget</em> de abas acima, a pessoa que estiver navegando deve ser capaz de entrar e sair da caixa que o contém usando as teclas "<em>Tab</em>" e "<em>Shift+Tab</em>" ( a &lt;ol&gt; na nossa marcação). Uma vez que o foco, pelo teclado, estiver dentro do contêiner, as teclas de setas devem permitir a navegação entre as suas diferentes guias (os elementos &lt;li&gt; ). A partir daqui as convenções variam de plataforma para plataforma. No Windows, a próxima aba deve ser ativada, automaticamente, quando as teclas de setas forem pressionadas. Em Mac OS X, seus utilizadores ativam a próxima aba pressionando a tecla "<em>Entra</em>", ou a "<em>barra de espaço</em>". Um  tutorial abrangente, para a criação de <em>widgets</em>, com navegação pelo teclado, descreve como implementar esse comportamento utilizando JavaScript <a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets (<em>JavaScript para </em><em>widgets navegáveis pelo teclado</em>)</a>.</p>
+
+<p>Para mais detalhes sobre as convenções da navegação pelo teclado em modelo ambiente, um guia completo (em inglês) <a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/" title="http://dev.aol.com/dhtml_style_guide">DHTML style guide (<em>guia de estilos da HTML Dinâmica</em>)</a> está disponível. Este guia oferece uma visão global de como a navegação pelo teclado deve funcionar em cada tipo de <em>widget</em> suportado pelo conjunto ARIA. A  W3C também oferece um documento que ajuda muito,<em> </em><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">ARIA Best Practices</a>, incluindo a navegação pelo teclado e as convenções de atalhos para uma variedade de <em>widgets</em>.</p>
+
+<h2 id="Veja_também">Veja, também</h2>
+
+<ul>
+ <li><a href="/en/ARIA" title="ARIA">ARIA</a></li>
+ <li><a href="/en/Accessibility/Web_applications_and_ARIA_FAQ" title="Web applications and ARIA FAQ">Web applications and ARIA FAQ</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></li>
+ <li><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">WAI-ARIA Best Practices</a></li>
+ <li><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/" title="http://dev.aol.com/dhtml_style_guide">DHTML Style Guide</a></li>
+</ul>
diff --git a/files/pt-br/web/accessibility/aria/guia_para_implementar_o_leitor_de_tela_aria/index.html b/files/pt-br/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html
index 73b9605ef1..73b9605ef1 100644
--- a/files/pt-br/web/accessibility/aria/guia_para_implementar_o_leitor_de_tela_aria/index.html
+++ b/files/pt-br/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/utilizando_o_alert_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
index 25d3222fcd..25d3222fcd 100644
--- a/files/pt-br/web/accessibility/aria/aria_techniques/utilizando_o_alert_role/index.html
+++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-labelledby/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html
index cd7cb90bb9..cd7cb90bb9 100644
--- a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-labelledby/index.html
+++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-required/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
index e93611b182..e93611b182 100644
--- a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-required/index.html
+++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_slider_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html
index 18532f5f25..18532f5f25 100644
--- a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_slider_role/index.html
+++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html
diff --git a/files/pt-br/web/accessibility/aria/forms/dicas_básicas_de_form/index.html b/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html
index 722c60d420..722c60d420 100644
--- a/files/pt-br/web/accessibility/aria/forms/dicas_básicas_de_form/index.html
+++ b/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html
diff --git a/files/pt-br/web/accessibility/aria/widgets/visão_geral/index.html b/files/pt-br/web/accessibility/aria/widgets/overview/index.html
index 6e8cb06ae2..6e8cb06ae2 100644
--- a/files/pt-br/web/accessibility/aria/widgets/visão_geral/index.html
+++ b/files/pt-br/web/accessibility/aria/widgets/overview/index.html
diff --git a/files/pt-br/web/accessibility/index.html b/files/pt-br/web/accessibility/index.html
new file mode 100644
index 0000000000..b494b06163
--- /dev/null
+++ b/files/pt-br/web/accessibility/index.html
@@ -0,0 +1,52 @@
+---
+title: Acessibilidade
+slug: Web/Acessibilidade
+tags:
+  - ARIA
+  - Acessibilidade
+  - Avançado
+  - Desenvolvimento Web
+  - TA - Tecnologias Assistivas
+translation_of: Web/Accessibility
+---
+<p><span class="seoSummary">Acessiblidade no desenvolvimento Web significa permitir que o máximo possível de pessoas possa acessar os sites da web mesmo quando suas habilidades são limitadas de alguma forma. Aqui nós fornecemos informações sobre o desenvolvimento de conteúdo acessível.</span></p>
+
+<p>"A palavra Acessibilidade é, frequentemente, usada para descrever facilidades ou assistências às pessoas com necessidades especiais, como em <em>acessível para cadeirantes</em>. Isto pode se estender para o Sistema Braille, rampas para cadeirantes, sinais sonoros em passagens de pedestres, modelos de páginas e assim por diante". <a class="external" dir="ltr" href="http://pt.wikipedia.org/wiki/Acessibilidade" title="Artigo sobre acessbilidade na Wikipedia">Acessibilidade na Wikipedia</a></p>
+
+<p>"<strong>A <em>Web</em> é, fundamentalmente, projetada para funcionar para todas as pessoas</strong>, independentemente de máquina, programas, língua, cultura, localização ou capacidade física ou mental de seus utilizadores. Quando a web atende a esses requisitos, ela se torna acessível a pessoas com dificuldades auditivas, motoras, visuais e cognitivas". <a dir="ltr" href="http://www.w3c.br/GT/GrupoAcessibilidade" title="W3C - Acessibilidade">W3C - Acessibilidade</a></p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Documentação</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Accessibility/Web_Development" title="Accessibility Web Development">Desenvolvimento Web</a></dt>
+ <dd>Uma coleção de artigos destinados a mostrar as principais questões de desenvolvimento web no mundo da acessibilidade.</dd>
+ <dt><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a></dt>
+ <dd>Uma coleção de artigos para aprender como usar ARIA e tornar seus documentos HTML mais acessíveis.</dd>
+ <dt><a href="/en-US/docs/Accessibility/AT_Development" title="AT Development">Desenvolvimento de tecnologias assistivas (TA)</a></dt>
+ <dd>Uma coleção de artigos direcionados a desenvolvedores de tecnologias assistivas.</dd>
+ <dt><a href="/en-US/docs/Web/Accessibility/Mobile_accessibility_checklist">Acessibilidade em dispositivos móveis</a></dt>
+ <dd>Esse documento fornece uma breve lista das necessidades da acessibilidade para desenvolvedores de aplicativos móveis.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Accessibility" title="/en-US/docs/tag/Accessibility">Ver todos os artigos sobre Acessibilidade...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Tools" name="Tools">Ferramentas para desenvolvedores web</h2>
+
+<ul>
+ <li><a class="external" href="http://www.standards-schmandards.com/index.php?show/fangs">Emulador de leitor de tela Fangs</a></li>
+ <li><a href="https://addons.mozilla.org/pt-BR/firefox/addon/claws/">Emulador de leitor de tela Claws</a></li>
+</ul>
+
+
+
+<h2 class="Tools" id="Tools" name="Tools">Outras páginas úteis</h2>
+
+<ul>
+ <li><a class="external" href="https://support.mozilla.org/kb/accessibility-features-firefox-make-firefox-and-we">Lista de leitores de tela</a></li>
+</ul>
+</div>
+</div>
diff --git a/files/pt-br/web/accessibility/mobile_accessibility_checklist/index.html b/files/pt-br/web/accessibility/mobile_accessibility_checklist/index.html
new file mode 100644
index 0000000000..29d407c175
--- /dev/null
+++ b/files/pt-br/web/accessibility/mobile_accessibility_checklist/index.html
@@ -0,0 +1,100 @@
+---
+title: Acessibilidade para plataforma móvel
+slug: Web/Acessibilidade/Accessibilidade_para_plataforma_movel
+tags:
+  - Acessibilidade
+  - Firefox OS
+  - Guías
+  - Móveis
+translation_of: Web/Accessibility/Mobile_accessibility_checklist
+---
+<div class="summary">
+<p><span class="seoSummary">Este documento contém uma lista concisa de requisitos para desenvolvedores de aplicativos móveis. Tem como intenção evoluir continuamente conforme forem aparecendo outros padrões.</span></p>
+</div>
+
+<h2 id="Cor">Cor</h2>
+
+<ul>
+ <li>O constrate de cor <strong>DEVE</strong> seguir os requirementos level AA do <a href="http://www.w3.org/TR/WCAG/">WCAG 2.0</a>:
+
+  <ul>
+   <li>Razão de contraste de 4.5:1 para textos normais (com menos de 18 pontos e 14 pontos em negrito.)</li>
+   <li>Razão de contraste de  3:1 para textos grandes (com pelo menos 18 pontos ou 14 pontos em negrito.)</li>
+  </ul>
+ </li>
+ <li>A informação transportada via cor <strong>DEVE</strong> ser também possível através de outros meios (textos sublinhados para links, etc.)</li>
+</ul>
+
+<div class="note">
+<p>   Jon Snook escreveu um útil <a href="http://snook.ca/technical/colour_contrast/colour.html">Colour Contrast Checker</a>  que é usado para checar o contraste de cores entre o <em>background</em> e o <em>foreground</em>. De maneira alternativa o <a href="http://contrast-finder.tanaguru.com/">Tanaguru Contrast-Finder</a> faz um trabalho similar, mas também sugeste melhores contrastes de cores considerando as usadas.</p>
+</div>
+
+<h2 id="Visibilidade">Visibilidade</h2>
+
+<ul>
+ <li>Técnicas de esconder conteúdo como zero opacidade, ordem z-index e off-screen placement <strong>NÃO DEVEM </strong>ser exclusivas para visibilidade de manuseio.</li>
+ <li>Tudo que não é visível na tela <strong>DEVE</strong> ser verdadeiramente invisível (especialme relevante para apps de páginas únicas com múltiplos <em>cards</em>):
+  <ul>
+   <li><strong>USE</strong> o atributo <code>hidden</code> ou propriedades de estilo <code>visibility</code> ou <code>display.</code></li>
+   <li>A não ser que seja extemamente inevitável, <strong>NÃO USE</strong> o atributo <code>aria-hidden.</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Foco">Foco</h2>
+
+<ul>
+ <li>Todos os elementos em foco <strong>DEVEM</strong>:
+
+  <ul>
+   <li>Estar no padrão como os links, botões, e campo de formulário que são focalizados por padrão.</li>
+   <li>Controles não padrões <strong>DEVEM ter </strong>um <a href="http://www.w3.org/TR/wai-aria/roles">ARIA Role</a> apropriado para eles, como em <code>button</code>, <code>link</code>, ou <code>checkbox</code>.</li>
+  </ul>
+ </li>
+ <li>O Foco deve ser utilizado com uma ordem lógica e consistente.</li>
+</ul>
+
+<h2 id="Textos_Equivalentes">Textos Equivalentes</h2>
+
+<ul>
+ <li>Textos equivalentes <strong>DEVEM</strong> ser declarados para cada elemento dentro do aplicativo que não sejam textos e aos elementos que não são estritamente presentacionais.
+
+  <ul>
+   <li>Use <em>alt</em> e <em>title</em> quando apropriado (<em>veja</em> a postagem de Steve Faulkner <a href="http://blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute</a> para uma boa referência.)</li>
+   <li>Se os atributos acima não forem aplicáveis, use os <a href="http://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header">ARIA Properties</a> apropriados, como <code>aria-label</code>, <code>aria-labelledby</code>, ou <code>aria-describedby</code>.</li>
+  </ul>
+ </li>
+ <li>Imagens de textos <strong>DEVEM </strong>ser evitadas.</li>
+ <li>Todos controles de formulários <strong>DEVEM</strong> ter etiquetas ({{ htmlelement("label") }} elements) para melhor benefício dos leitores da tela.</li>
+</ul>
+
+<h2 id="Manipulação_de_Estado">Manipulação de Estado</h2>
+
+<ul>
+ <li>Controles padrão como botões de rádio e checkboxes são manipuláveis pelo sistema operacional. No entanto, para uso customizado pode-se modificar esses estados via <a href="http://www.w3.org/TR/wai-aria/states_and_properties#attrs_widgets_header">ARIA States</a> como os <code>aria-checked</code>, <code>aria-disabled</code>, <code>aria-selected</code>, <code>aria-expanded</code>, e <code>aria-pressed</code>.</li>
+</ul>
+
+<h2 id="Orientações_gerais">Orientações gerais</h2>
+
+<ul>
+ <li>O título do aplicativo <strong>DEVE</strong> ser fornecido.</li>
+ <li>Cabeçalhos <strong>NÃO DEVEM</strong> ter sua hierarquia quebrada:
+  <pre class="brush: html">&lt;h1&gt;Heading primeiro nível&lt;/h1&gt;
+  &lt;h2&gt;Heading segundo nível&lt;/h2&gt;
+  &lt;h2&gt;Outro Heading segundo nível&lt;/h2&gt;
+    &lt;h3&gt;Heading terceiro nível&lt;/h3&gt;</pre>
+ </li>
+ <li><a href="http://www.w3.org/TR/wai-aria/roles#landmark_roles_header">ARIA Landmark Roles</a> <strong>DEVE </strong>ser usado para descrever o aplicativo ou a estrutura do documento, como: <code>banner</code><font face="Consolas, Liberation Mono, Courier, monospace">,</font> <code>complementary</code>, <code>contentinfo</code>, <code>main</code>, <code>navigation</code>, <code>search</code>.</li>
+ <li>Eventos de toque só <strong>DEVEM</strong> ser ativados no evento <code>touchend</code>.</li>
+ <li>Alvos tocáveis <strong>DEVEM </strong>ser largos o suficiente para o usuário interagir (veja o  <a href="http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size">BBC Mobile Accessibility Guidelines</a> para ver as <em>guidelines</em> sobre tamanhos de alvos tocáveis .)</li>
+</ul>
+
+<div class="note">
+<p><a href="http://www.tanaguru.com/">Tanaguru's automated accessibility testing service</a> fornece uma maneira útil para descobrir alguns erros de acessibilidade que ocorrem em páginas web, ou instalando aplicativos web (ex: Firefox OS.) Você pode encontrar mais sobre a técnica de implementação do Tanaguru, como também contribuir para o projeto <a href="http://tanaguru.org/">tanaguru.org</a>.</p>
+</div>
+
+<div class="note">
+<p><a href="http://yzen.github.io/2014/04/30/mobile-accessibility-checklist.html">A versão original desse documento</a> foi escrita por <a href="http://yzen.github.io/">Yura Zenevich</a>.</p>
+</div>
+
+<p> </p>
diff --git a/files/pt-br/web/accessibility/understanding_wcag/index.html b/files/pt-br/web/accessibility/understanding_wcag/index.html
new file mode 100644
index 0000000000..392c1008b7
--- /dev/null
+++ b/files/pt-br/web/accessibility/understanding_wcag/index.html
@@ -0,0 +1,57 @@
+---
+title: Entendendo as Diretrizes de Acessibilidade do Conteúdo Web
+slug: Web/Acessibilidade/Entendendo_WCAG
+tags:
+  - WCAG
+  - Web Content Accessibility Guidelines
+translation_of: Web/Accessibility/Understanding_WCAG
+---
+<p class="summary">Este conjunto de artigos fornece explicações rápidas para ajudá-lo a entender as etapas que devem ser seguidas para estar em conformidade com as recomendações descritas nas Diretrizes de Acessibilidade para Conteúdo Web 2.0 ou 2.1 do W3C (ou apenas WCAG, para as finalidades deste artigo).</p>
+
+<p>O WCAG 2.0 e 2.1 fornece um conjunto detalhado de diretrizes para tornar o conteúdo web mais acessível para pessoas com uma ampla variedade de deficiências. Isso é compreensivo, porém incrivelmente detalhado e muito difícil de obter uma compreensão rápida disso. Por essa razão, nós fizemos uma sumário com os passos práticosque você precisa saber para satisfazer as diferentes recomendações, com mais alguns link para mais detalhes do que está sendo solicitado.</p>
+
+<h2 id="Os_quatro_princípios">Os quatro princípios</h2>
+
+<p>WCAG is broadly broken down into four principles — major things that web content <strong>must be</strong> to be considered accessible (see <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">Understanding the Four Principles of Accessibility </a>for the WCAG definitions).</p>
+
+<p>Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceivable:</a> Users must be able to perceive it in some way, using one or more of their senses.</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Operable</a>: Users must be able to control UI elements (e.g. buttons must be clickable in some way — mouse, keyboard, voice command, etc.).</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Understandable</a>: The content must be understandable to its users.</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robust</a>: The content must be developed using well-adopted web standards that will work across different browsers, now and in the future.</li>
+</ul>
+
+<h2 id="Should_I_use_WCAG_2.0_or_2.1">Should I use WCAG 2.0 or 2.1?</h2>
+
+<p>WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. </p>
+
+<h3 id="O_que_é_o_WCAG_2.1">O que é o WCAG 2.1?</h3>
+
+<p>WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release <a href="https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/">WCAG 2.1 Adoption in Europe</a>. </p>
+
+<p>WCAG 2.1 includes:</p>
+
+<ul>
+ <li>all of WCAG 2.0 (verbatim, word-for-word)</li>
+ <li>17 new Success Criteria at the A / AA / AAA levels primarily addressing user needs in these areas:
+  <ul>
+   <li>Mobile Accessibility </li>
+   <li>Low Vision</li>
+   <li>Cognitive</li>
+  </ul>
+ </li>
+ <li>Leia mais sobre o WCAG 2.1:
+  <ul>
+   <li>Deque: <a href="https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/">WCAG 2.1:  What is Next for Accessibility Guidelines</a></li>
+   <li>TPG:  <a href="https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/">Web Content Accessibility Guidelines (WCAG) 2.1</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Padrão_legal">Padrão legal</h2>
+
+<p>This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.</p>
+
+<p><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">O que é acessibilidade?</a> e particulamente o <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">Guia de Acessibilidade e a seção de regras</a> fornecem mais informações relacionadas.</p>
diff --git a/files/pt-br/web/accessibility/understanding_wcag/keyboard/index.html b/files/pt-br/web/accessibility/understanding_wcag/keyboard/index.html
new file mode 100644
index 0000000000..905c6d062f
--- /dev/null
+++ b/files/pt-br/web/accessibility/understanding_wcag/keyboard/index.html
@@ -0,0 +1,87 @@
+---
+title: Keyboard
+slug: Web/Acessibilidade/Entendendo_WCAG/Keyboard
+translation_of: Web/Accessibility/Understanding_WCAG/Keyboard
+---
+<div>To be fully accessible, a web page must be operable by someone using only a keyboard to access and control it. This includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible.</div>
+
+<h2 id="Focusable_elements_should_have_interactive_semantics">Focusable elements should have interactive semantics</h2>
+
+<p>If an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> One important exception to this rule is if the element has <code>role="document" </code>applied to it, <strong>inside </strong>an interactive context (such as <code>role="application"</code>). In such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").</p>
+</div>
+
+<p>Most interactive elements are focusable by default; you can make an element focusable by adding a <code>tabindex=0</code> attribute value to it. However, you should only add <code>tabindex</code> if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.</p>
+
+<h3 id="See_also">See also</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Avoid_using_tabindex_attribute_greater_than_zero">Avoid using <code>tabindex</code> attribute greater than zero</h2>
+
+<p>The <code>tabindex</code> attribute indicates that an element is focusable using the keyboard. A value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the HTML document. A positive value puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their <code>tabindex</code> values (1, then 2, then 3, etc.).</p>
+
+<p>This creates confusion for keyboard-only users when the focus order differs from the logical order of the page. A better strategy is to structure the HTML document so that focusable elements are in a logical order, without the need to re-order them with positive <code>tabindex</code> values.</p>
+
+<h3 id="See_also_2">See also</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">Understanding focus order</a></li>
+ <li><a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Don't use tabindex greater than 0</a></li>
+</ul>
+
+<h2 id="Clickable_elements_must_be_focusable_and_should_have_interactive_semantics">Clickable elements must be focusable and should have interactive semantics</h2>
+
+<p>If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.</p>
+
+<p>An element is clickable if it has an <code>onclick</code> event handler defined. You can make it focusable by adding a <code>tabindex=0</code> attribute value to it. You can make it operable with the keyboard by defining an <code>onkeydown</code> event handler; in most cases, the action taken by event handler should be the same for both types of events.</p>
+
+<h3 id="See_also_3">See also</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Interactive_elements_must_be_able_to_be_activated_using_a_keyboard">Interactive elements must be able to be activated using a keyboard</h2>
+
+<p>If the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard. That is, if you have defined event handlers for touch or click events, you should also define them for keyboard events. The keyboard event handlers should enable the effectively the same interaction as the touch or click handlers.</p>
+
+<h3 id="See_also_4">See also</h3>
+
+<ul>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Interactive_elements_must_be_focusable">Interactive elements must be focusable</h2>
+
+<p>If the user can interact with an element (for example, using touch or a pointing device), then it should be focusable using the keyboard. You can make it focusable by adding a <code>tabindex=0</code> attribute value to it. That will add the element to the list of elements that can be focused by pressing the <kbd>Tab</kbd> key, in the sequence of such elements as defined in the HTML document.</p>
+
+<h3 id="See_also_5">See also</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li>
+</ul>
+
+<h2 id="Focusable_element_must_have_focus_styling">Focusable element must have focus styling</h2>
+
+<p>Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> CSS pseudo-class.</p>
+
+<p>Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.</p>
+
+<p>If you create your own focusable components, be sure that you also define focus styling for them.</p>
+
+<h3 id="See_also_6">See also</h3>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15.html">Using CSS to change the presentation of a UI component when it receives focus</a></li>
+</ul>