---
title: Visão geral
slug: conflicting/Web/Accessibility/ARIA/widgets
tags:
  - Acessibilidade
  - JavaScript
  - Landing
  - PrecisaAtualizar
translation_of: Web/Accessibility/ARIA/widgets/overview
original_slug: Web/Accessibility/ARIA/widgets/overview
---
<div class="warning">Aviso: precisa de atualização</div>

<h2 id="Introdução"><span class="mw-headline" id="Introduction">Introdução</span> </h2>

<h2 id="Alguns_exemplos_funcionais_e_boas_práticas_na_construção_de_widgets_acessíveis_aplicando_JavaScript.">Alguns exemplos funcionais e boas práticas na construção de <em>widgets</em><span style='font-family: "Open Sans",arial,x-locale-body,sans-serif;'> acessíveis aplicando JavaScript.</span></h2>

<h2 id="Recursos_Gerais"><span class="mw-headline" id="General_Resources">Recursos Gerais</span></h2>

<ul>
 <li><a class="external text" href="http://dev.aol.com/dhtml_style_guide" rel="nofollow">Guia de Estilo DHTML</a> recomendações para interação com o teclado</li>
 <li><a class="external text" href="http://www.w3.org/wai/pf/aria-practices" rel="nofollow">Guia de Práticas para criação de WAI-ARIA</a></li>
</ul>

<h2 id="Caixa_de_seleção">Caixa de seleção</h2>

<ul>
 <li><a class="external text" href="http://www.paciellogroup.com/blog/?p=53" rel="nofollow">Exemplos ARIA para Alternar Botões e exemplos dos 3 estados de uma Caixa de Seleção</a>  (de "The Paciello Group Blog")</li>
</ul>

<h2 id="Menu_2"><span class="mw-headline" id="Menu">Menu</span></h2>

<ul>
 <li><a class="external text" href="http://yuiblog.com/blog/2007/12/21/menu-waiaria/" rel="nofollow">Usando as Funções e Estados WAI-ARIA com o Controle de Menu YUI</a></li>
</ul>

<h2 id="Deslizantes"><span class="mw-headline" id="Slider">Deslizantes</span></h2>

<ul>
 <li>Do blog Paciello Group: Deslizantes ARIA -  <a class="external text" href="http://www.paciellogroup.com/blog/?p=68" rel="nofollow">parte um</a>, <a class="external text" href="http://www.paciellogroup.com/blog/?p=69" rel="nofollow">parte dois</a>, <a class="external text" href="http://www.paciellogroup.com/blog/?p=76" rel="nofollow">parte três</a> (<a class="external text" href="http://www.paciellogroup.com/blog/misc/ARIA/slider/" rel="nofollow">exemplo</a>)</li>
</ul>

<h2 id="Abas"><span class="mw-headline" id="Tabs">Abas</span></h2>

<ul>
 <li><a class="external text" href="http://yuiblog.com/blog/2008/07/30/tabview-aria/" rel="nofollow">Melhorando a Acessibilidade na Visão em Abas com as Funções e Estados WAI-ARIA, </a>do blog YUI</li>
 <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/tabs" rel="nofollow">Melhorando as Abas jQuery UI, de acordo com WCAG 2.0 e ARIA</a></li>
</ul>

<h2 id="Combo-box"><span class="mw-headline" id="Combobox">Combo-box</span></h2>

<ul>
 <li><a class="external text" href="http://www.protofunc.com/scripts/jquery/select/" rel="nofollow">Combo-box simples (não editável) como Select-Box-Replacement</a></li>
</ul>

<h2 id="Lightbox_2"><span class="mw-headline" id="Lightbox">Lightbox</span></h2>

<ul>
 <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox" rel="nofollow">WCAG 2.0 e aplicação lightbox ARIA-</a><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/table" rel="nofollow">conformant</a></li>
</ul>

<h2 id="Validação_de_Formulários"><span class="mw-headline" id="Form_Validation">Validação de Formulários</span></h2>

<ul>
 <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/formular" rel="nofollow">WCAG 2.0 e validação ativa de ARIA-conformant</a></li>
</ul>

<h2 id="Tabelas"><span class="mw-headline" id="Table">Tabelas</span></h2>

<ul>
 <li><a class="external text" href="http://www.einfach-fuer-alle.de/artikel/barrierefreie-formulare-mit-html-css-und-javascript/" rel="nofollow">Tutorial alemão sobre criação de formulário acessível</a></li>
 <li><a class="external text" href="http://codetalks.org/source/widgets/grid/grid.sample.html" rel="nofollow">Exemplo de grade simples em CodeTalks</a></li>
</ul>