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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
---
title: ARIA
slug: Web/Acessibilidade/ARIA
tags:
- ARIA
- Acessibilidade
- Web
translation_of: Web/Accessibility/ARIA
---
<p><span class="seoSummary"><em>Accessible Rich Internet Applications</em> <strong>(ARIA)</strong> </span> define as maneiras para tornar o conteúdo da Web e aplicações da Web (especialmente aqueles desenvolvidos com Ajax e JavaScript) mais acessíveis para as pessoas com deficiência. Por exemplo, ARIA permite marcos de navegação acessíveis, widgets de JavaScript, dicas de formulário e mensagens de erro, atualizações de conteúdo <em>live</em> e muito mais.</p>
<p>ARIA é um conjunto de atributos de acessibilidade especiais que podem ser adicionados a qualquer marcação, mas é especialmente adequado para HTML. . O atributo <code>role</code> define que tipo geral de objeto é (tais como um artigo, alerta, ou cursor). Os atributos ARIA adicionais fornecem outras propriedades úteis, tais como uma descrição para um formulário ou o valor atual de uma barra de progresso.</p>
<p>ARIA é implementado na maioria dos navegadores populares e leitores de ecrã. No entanto, as implementações variam e as tecnologias mais antigas não o suportam bem (se for o caso). Utilize ARIA 'seguro' que se degrada graciosamente, ou peça aos utilizadores que atualizem para a nova tecnologia.</p>
<div class="note">
<p><strong>Nota</strong>: por favor, contribua e melhore ARIA para a próxima pessoa! Não tem tempo? Envie as sugestões para a <a href="https://lists.mozilla.org/listinfo/accessibility">lista de endereços de acessibilidade da </a> Mozilla, ou canal <a href="https://wiki.mozilla.org/IRC">IRC</a> #accessibility.</p>
</div>
<div class="row topicpage-table">
<div class="section">
<h3 id="Iniciação_com_ARIA">Iniciação com ARIA</h3>
<dl>
<dt><a href="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets">Introduction to ARIA</a></dt>
<dd>A quick introduction to making dynamic content accessible with ARIA. See also the classic <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro by Gez Lemon</a>, from 2008.</dd>
<dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ">Web Applications and ARIA FAQ</a></dt>
<dd>Answers common questions about WAI-ARIA and why it's needed to make web applications accessible.</dd>
<dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Videos of Screen Readers Using ARIA</a></dt>
<dd>See both real and simplified examples from around the web, including "before" and "after" ARIA videos.</dd>
<dt><a class="external" href="https://w3c.github.io/using-aria/">Using ARIA</a></dt>
<dd>A practical guide for developers. It suggests what ARIA attributes to use on HTML elements. Suggestions are based on implementation realities.</dd>
</dl>
<h3 id="Melhoramentos_ARIA_Simples">Melhoramentos ARIA Simples</h3>
<dl>
<dt><a class="external" href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Enhancing Page Navigation with ARIA Landmarks</a></dt>
<dd>A nice intro to using ARIA landmarks to improve web page navigation for screen reader users. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">See also, ARIA landmark implementation notes</a> and examples on real sites (updated as of July 2011).</dd>
<dt><a href="/en-US/docs/ARIA/forms">Improving Form Accessibility</a></dt>
<dd>ARIA is not just for dynamic content! Learn how to improve accessibility of HTML forms using additional ARIA attributes.</dd>
<dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">Live regions (work-in-progress)</a></dt>
<dd>Live regions provide suggestions to screen readers about how to handle changes to the contents of a page.</dd>
<dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">Using ARIA Live Regions to Announce Content Changes</a></dt>
<dd>A quick summary of live regions, by the makers of JAWS screen reader software. Live regions are also supported by NVDA with Firefox, and VoiceOver with Safari.</dd>
</dl>
<h3 id="ARIA_para_Widgets_Scripted">ARIA para <em>Widgets Scripted</em></h3>
<dl>
<dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">Keyboard Navigation and Focus for JavaScript Widgets</a></dt>
<dd>The first step in developing an accessible JavaScript widget is to make it keyboard navigable. This article steps through the process. The <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">Yahoo! focus management article</a> is a great resource as well.</dd>
<dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/">Style Guide for Keyboard Navigation</a></dt>
<dd>A challenge with ARIA is getting developers to implement consistent behavior — clearly best for users. This style guide describes the keyboard interface for common widgets.</dd>
</dl>
<h3 id="ARIA_-_Recursos">ARIA - Recursos</h3>
<dl>
<dd>Need a slider, a menu, or another kind of widget? Find resources here.</dd>
<dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">ARIA-Enabled JavaScript UI Libraries</a></dt>
<dd>If you're starting a new project, choose a UI widget library with ARIA support already built-in. Warning: this is from 2009 — content should be moved to an MDN page where it can be updated.</dd>
</dl>
</div>
<div class="section">
<h3 id="Lista_de_Endereços">Lista de Endereços</h3>
<dl>
<dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria">Free ARIA Google Group</a></dt>
<dd>A place to ask questions about ARIA, as well as make suggestions for improving the ARIA documentation found on these pages.</dd>
</dl>
<h3 id="Blogues">Blogues</h3>
<p>ARIA information on blogs tends to get out of date quickly. Still, there is some great info out there from other developers making ARIA work today.</p>
<p><a class="external" href="https://www.paciellogroup.com/blog/">Paciello Group</a></p>
<p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p>
<h3 id="Comunicar_Erros_(Bugs)">Comunicar Erros (<em>Bugs</em>)</h3>
<p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">File ARIA bugs on browsers, screen readers, and JavaScript libraries.</a></p>
<h3 id="Exemplos">Exemplos</h3>
<dl>
<dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases">ARIA Examples Library</a></dt>
<dd>A set of barebones example files which are easy to learn from.</dd>
<dt>Accessible JS Widget Library Demos</dt>
<dd><a class="external" href="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://yuilibrary.com/gallery/">YUI</a></dd>
<dt><a class="external" href="http://mail.yahoo.com">Yahoo! Mail</a></dt>
<dd>Yahoo! puts it all together with Yahoo! Mail, a web app that almost looks like a native app. It works very well. As a <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">review of Yahoo! Mail</a> by screen reader Marco Zehe says, "Keep up the good work!".</dd>
<dt><a class="external" href="http://search.yahoo.com">Yahoo! Search</a></dt>
<dd>Yahoo! has done an amazing job of advancing ARIA here, by exercising ARIA's full capabilities and <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/">sharing their techniques</a>. Yahoo! Search uses a combination of ARIA landmarks, live regions, and widgets.</dd>
</dl>
<h3 id="Esforços_de_Uniformização">Esforços de Uniformização</h3>
<dl>
<dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA Activities Overview at W3C</a></dt>
<dd>Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)</dd>
<dt><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA Specification</a></dt>
<dd>The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.</dd>
<dt><a class="external" href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices</a></dt>
<dd>
<p>Like the W3C WAI-ARIA specification, the official best practices represents a future ideal — a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.</p>
<p>For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.</p>
</dd>
<dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt>
<dd>The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.</dd>
<dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">Under Construction: WCAG 2.0 ARIA Techniques</a></dt>
<dd>The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is important when regulations or policies are based on WCAG.</dd>
</dl>
</div>
</div>
<h3 id="Related_Topics" name="Related_Topics">Tópicos Relacionados</h3>
<p><a href="/pt-PT/docs/Web/Acessibilidade">Acessibilidade</a>, <a href="/pt-PT/docs/Web/Guide/AJAX">AJAX</a>, <a href="/pt-PT/docs/Web/JavaScript">JavaScript</a></p>
|
