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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
---
title: ARIA
slug: Web/Accessibility/ARIA
tags:
- ARIA
- Accessibility
- NeedsTranslation
- TopicStub
translation_of: Web/Accessibility/ARIA
---
<p>Accessible Rich Internet Applications <strong>(ARIA)</strong> define cómo realizar contenido Web y aplicaciones Web (especialmente las desarrolladas con Ajax y JavaScript) más accesibles a personas con discapacidades. Por ejemplo, ARIA posibilita puntos de navegación accesibles, widgets JavaScript, sugerencias en formularios y mensajes de error, actualizaciones en directo, y más.</p>
<p>ARIA es un conjunto de atributos especiales para accesibilidad que pueden añadirse a cualquier etiqueta, pero especialmente adaptado a HTML. El atributo <code>role</code> define el tipo general del objeto (como un artículo, una alerta o un deslizador). Atributos adicionales de ARIA proporcionan otras propiedades útiles, como una descripción para un formulario o el valor actual de una barra de progreso.</p>
<p>ARIA está implementado en la mayoría de los navegadores y lectores de pantalla más populares. De todas formas, las implementaciones varían y las tecnologías antiguas no lo soportan bien (si es que lo soportan). Use "safe" en ARIA, que reduce elegantemente la funcionalidad en caso necesario o pida a los usuarios actualizarse a una tecnología más actual.</p>
<div class="note">
<p><strong>Nota</strong>: Por favor, ¡contribuya y mejore ARIA para el siguiente que llegue! ¿No tiene tiempo suficiente? Envíe sus sugerencias a la <a href="https://lists.mozilla.org/listinfo/accessibility">lista de distribución de accesibilidad</a> de Mozilla o al <a href="https://wiki.mozilla.org/IRC">canal IRC </a>#accessibility.</p>
</div>
<table class="topicpage-table">
<tbody>
<tr>
<td>
<h3 id="Documentation" name="Documentation">Primeros pasos con ARIA</h3>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets">Introducción a ARIA </a></dt>
<dd>Una Rápida introducción a la creación de contenido dinámico accesible con ARIA. También revisa el clásico <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/" title="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro by Gez Lemon</a>, de 2008.</dd>
<dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ" title="https://developer.mozilla.org/en-US/docs/Accessibility/Web_applications_and_ARIA_FAQ">Preguntas frecuentes sobre Aplicaciones Web y ARIA</a></dt>
<dd>Responde preguntas comunes acerca de WAI-ARIA y por qué es necesario para hacer aplicaciones web accesibles.</dd>
<dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/" title="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Videos de Lectores de Pantalla usando ARIA</a></dt>
<dd>Mira ejemplos reales y simplificados de toda la web, incluyendo videos "antes" y "despues" de ARIA.</dd>
<dt><a class="external" href="http://w3c.github.io/aria-in-html/">Usando ARIA en HTML</a></dt>
<dd>Una guía practica para desarrolladores. Sugiere que atributos ARIA usar en elementos HTML. Las sugerencias están basadas en implementaciones reales.</dd>
</dl>
<h3 id="Mejoras_sencillas_de_ARIA">Mejoras sencillas de ARIA</h3>
<dl>
<dt><a class="external" href="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/" rel="external" title="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/">Mejorando la navegación de página con ARIA Landmarks</a></dt>
<dd>Una buena escusa para introducirte al uso del marcado ARIA es la mejora de la navegación web para los usuarios de lectores de patalla. Ver también<a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external" title="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">, ARIA landmark notas de implementación</a> y ejemplos en sitios reales (actualizado en Julio 11).</dd>
<dt><a href="/en-US/docs/ARIA/forms" rel="internal" title="/en-US/docs/ARIA/forms">Mejorando accesibilidad de formularios</a></dt>
<dd>ARIA no es sólo para contenido dinámico! Aprende como mejorar la accesibilidad de formularios HTML usando atributos adicionales de ARIA. </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" rel="external" title="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. Note that live regions are also supported by NVDA in Firefox, and VoiceOver with Safari (as of OS X Lion and iOS 5).</dd>
</dl>
<h3 id="ARIA_for_Scripted_Widgets">ARIA for Scripted Widgets</h3>
<dl>
<dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets" title="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/" title="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/" title="http://dev.aol.com/dhtml_style_guide">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_Resources">ARIA Resources</h3>
<dl>
<dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview" title="en-US/docs/aria/widgets/overview">Widget Techniques, Tutorials, and Examples</a></dt>
<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/">Librerías de UI JavaScript con soporte</a> <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</a></dt>
<dd>Si necesita comenzar un nuevo proyecto, elija una librería de controles UI que incluya soporte ARIA. Advertencia: esto es del 2009 -- el contenido debe moverse a una página MDN donde pueda actualizarse.</dd>
<dt><a class="external" href="http://dl.dropbox.com/u/573324/CSUN2012/index.html" title="http://dl.dropbox.com/u/573324/CSUN2012/index.html">Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 Workshop Materials</a></dt>
<dd>Incluye diapositivas y ejemplos.</dd>
</dl>
</td>
<td>
<h3 id="Community" name="Community">Lista de correo</h3>
<dl>
<dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria" title="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="Community" name="Community">Blogs</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="http://www.paciellogroup.com/blog/category/wai-aria/" title="http://www.paciellogroup.com/blog/category/wai-aria/">Paciello Group</a></p>
<p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/" title="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p>
<h3 id="Filing_Bugs">Filing Bugs</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="Ejemplos">Ejemplos</h3>
<dl>
<dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases" title="en-US/docs/ARIA/examples">ARIA Examples Library</a></dt>
<dd>A set of barebones example files which are easy to learn from.</dd>
<dt><span class="external">Accessible JS Widget Library Demos</span></dt>
<dd><a class="external" href="http://dojotoolkit.org/widgets" title="http://dojotoolkit.org/widgets">Dojo</a>, <a class="external" href="http://hanshillen.github.com/jqtest/" title="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://wiki.fluidproject.org/display/fluid/Components" title="http://wiki.fluidproject.org/display/fluid/Components">Fluid</a>, <a class="external" href="http://yuilibrary.com/gallery/" title="http://yuilibrary.com/gallery/">YUI</a></dd>
</dl>
<dl>
<dt><a class="external" href="http://mail.yahoo.com" title="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/" title="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>
</dl>
<dl>
<dt><a class="external" href="http://search.yahoo.com" title="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/" title="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="Standardization_Efforts">Standardization Efforts</h3>
<dl>
<dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="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="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">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="http://www.w3.org/WAI/PF/aria-practices/" title="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt>
<dd>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.<br>
<br>
For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.</dd>
<dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility" title="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 mostly important when regulations or policies are based on WCAG.</dd>
</dl>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2">
<h3 id="Related_Topics" name="Related_Topics">Related Topics</h3>
<dl>
<dd><a href="/en-US/docs/Accessibility" title="en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></dd>
</dl>
</td>
</tr>
</tbody>
</table>
<p> </p>
|
