initial commit

10 files changed, 968 insertions, 0 deletions

diff --git a/files/es/web/accessibility/aria/aria_techniques/index.html b/files/es/web/accessibility/aria/aria_techniques/index.html
new file mode 100644
index 0000000000..54605f5a65
--- /dev/null
+++ b/files/es/web/accessibility/aria/aria_techniques/index.html
@@ -0,0 +1,137 @@
+---
+title: ARIA techniques
+slug: Web/Accessibility/ARIA/ARIA_Techniques
+tags:
+  - ARIA
+  - Accessibility
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques
+---
+<h3 id="Roles">Roles</h3>
+
+<h4 id="Widget_roles">Widget roles</h4>
+
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role" title="Using the alert role">Alert</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="Using the alertdialog role">Alertdialog</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="en/ARIA/ARIA_Techniques/Using_the_button_role">Button</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="en/ARIA/ARIA_Techniques/Using_the_checkbox_role">Checkbox</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="Using the dialog role">Dialog</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="en/ARIA/ARIA_Techniques/Using_the_link_role">Link</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="en/ARIA/ARIA_Techniques/Using_the_log_role">Log</a></li>
+ <li>Marquee</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radio</a></li>
+ <li>Scrollbar</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">Slider</a></li>
+ <li>Spinbutton</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">status</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role">switch</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li>
+ <li>Timer</li>
+ <li>Tooltip</li>
+</ul>
+
+<h4 id="Composite_roles">Composite roles</h4>
+
+<p>The techniques below describes each composite role as well as their required and optional child roles.</p>
+
+<ul>
+ <li>Grid (including row, gridcell, rowheader, columnheader roles)</li>
+ <li>Menubar / Menu (including menuitem, menuitemcheckbox, menuitemradio)</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox</a> (including option role)</li>
+ <li>Tablist (including tab and  tabpanel roles)</li>
+ <li>Tree (including group and treeitem roles)</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radiogroup (see radio role)</a></li>
+ <li>Treegrid</li>
+</ul>
+
+<h4 id="Document_structure_roles">Document structure roles</h4>
+
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">Article</a></li>
+ <li>Definition</li>
+ <li>Directory</li>
+ <li>Document</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">Group</a></li>
+ <li>Heading</li>
+ <li>Img</li>
+ <li>List, listitem</li>
+ <li>Math</li>
+ <li>Note</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">Presentation</a></li>
+ <li>Region</li>
+ <li>Separator</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">Toolbar</a></li>
+</ul>
+
+<h4 id="Landmark_roles">Landmark roles</h4>
+
+<ul>
+ <li>Application</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">Banner</a></li>
+ <li>Complementary</li>
+ <li>Contentinfo</li>
+ <li>Form</li>
+ <li>Main</li>
+ <li>Navigation</li>
+ <li>Search</li>
+</ul>
+
+<h3 id="States_and_properties">States and properties</h3>
+
+<h4 id="Widget_attributes">Widget attributes</h4>
+
+<ul>
+ <li>aria-autocomplete</li>
+ <li>aria-checked</li>
+ <li>aria-disabled</li>
+ <li>aria-expanded</li>
+ <li>aria-haspopup</li>
+ <li>aria-hidden</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li>
+ <li>aria-level</li>
+ <li>aria-multiline</li>
+ <li>aria-multiselectable</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li>
+ <li>aria-pressed</li>
+ <li>aria-readonly</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li>
+ <li>aria-selected</li>
+ <li>aria-sort</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li>
+</ul>
+
+<h4 id="Live_region_attributes">Live region attributes</h4>
+
+<ul>
+ <li>aria-live</li>
+ <li>aria-relevant</li>
+ <li>aria-atomic</li>
+ <li>aria-busy</li>
+</ul>
+
+<h4 id="Drag_drop_attributes">Drag &amp; drop attributes</h4>
+
+<ul>
+ <li>aria-dropeffect</li>
+ <li>aria-dragged</li>
+</ul>
+
+<h4 id="Relationship_attributes">Relationship attributes</h4>
+
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li>
+ <li>aria-controls</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li>
+ <li>aria-flowto</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li>
+ <li>aria-owns</li>
+ <li>aria-posinset</li>
+ <li>aria-setsize</li>
+</ul>
diff --git a/files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html b/files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html
new file mode 100644
index 0000000000..6d744bb956
--- /dev/null
+++ b/files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html
@@ -0,0 +1,76 @@
+---
+title: Usando el atributo aria-required
+slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_atributo_aria-required
+tags:
+  - Accesibilidad
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute
+---
+<h3 id="Descripción">Descripción</h3>
+
+<p><span class="seoSummary">El atributo <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required"><code>aria-required</code></a> es usado para indicar al usuario que un input es requerido en un elemento antes de que un form pueda ser enviado. Este atributo puede ser usado en un form con cualquier elemento HTML típico; no se limita a elementosque tengan un <code>role</code> ARIA asignado.</span></p>
+
+<p>{{ HTMLVersionInline("5") }} ahora tiene el atributo <code>required</code>, pero aria-required todavía es útil para un agente de usuario que no soporta HTML5.</p>
+
+<h3 id="Value">Value</h3>
+
+<p><code>true</code> o <code>false</code> (Default: <code>false</code>)</p>
+
+<h3 id="Posibles_efectos_en_agentes_de_usuario_y_tecnología_asistente.">Posibles efectos en agentes de usuario y tecnología asistente.</h3>
+
+<p>Los lectores de pantalla deben anunciar el campo como requerido.</p>
+
+<p>Nota que este atributo no cambiará automáticamente la presentación del campo.</p>
+
+<div class="note"><strong>Nota:</strong> Las opiniones pueden diferir en cuanto a cómo esta técnica debería ser manejada por la tecnología asistente.  La información prevista arribaes una de esas opciones y por lo tanto no es normativa.</div>
+
+<h3 id="Ejemplos">Ejemplos</h3>
+
+<h4 id="Ejemplo_1_Un_formulario_sencillo">Ejemplo 1: Un formulario sencillo</h4>
+
+<pre class="brush: html"> &lt;form action="post"&gt;
+     &lt;label for="firstName"&gt;First name:&lt;/label&gt;
+     &lt;input id="firstName" type="text" aria-required="true" /&gt;
+     &lt;br/&gt;
+     &lt;label for="lastName"&gt;Last name:&lt;/label&gt;
+     &lt;input id="lastName" type="text" aria-required="true" /&gt;
+     &lt;br/&gt;
+     &lt;label for="streetAddress"&gt;Street address:&lt;/label&gt;
+     &lt;input id="streetAddress" type="text" /&gt;
+ &lt;/form&gt;
+</pre>
+
+<h4 id="Ejemplos_en_acción">Ejemplos en acción:</h4>
+
+<p><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/" title="http://www.oaa-accessibility.org/examplep/tooltip1/">Ejemplo de un Tooltip</a> (incluye el uso del atributo <code>aria-required</code>)</p>
+
+<h3 id="Notas">Notas </h3>
+
+<h3 id="Usan_ARIA_roles">Usan ARIA roles</h3>
+
+<ul>
+ <li>Combobox</li>
+ <li>Gridcell</li>
+ <li>Listbox</li>
+ <li>Radiogroup</li>
+ <li>Spinbutton</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="Usando el role textbox">Textbox</a></li>
+ <li>Tree</li>
+</ul>
+
+<h3 id="Técnicas_relacionadas_con_ARIA">Técnicas relacionadas con ARIA</h3>
+
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Usando la propiedad aria-invalid ">Utilizando el atributo aria-invalid</a></li>
+</ul>
+
+<h3 id="Compatibilidad">Compatibilidad</h3>
+
+<p class="comment">Por determinar: Agregar información de soporte para combinaciones comunes de productos UA y AT.</p>
+
+<h3 id="Recursos_adicionales">Recursos adicionales</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required">Especificación WAI-ARIA para <code>aria-required</code></a></li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria-practices/#ariaform" title="http://www.w3.org/TR/wai-aria-practices/#ariaform">WAI-ARIA Authoring Practices for forms</a></li>
+ <li><a href="/en/HTML/HTML5/Constraint_validation" title="Constraint validation">Constraint validation</a> in {{ HTMLVersionInline("5") }}</li>
+</ul>
diff --git a/files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html b/files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html
new file mode 100644
index 0000000000..fad923dd3a
--- /dev/null
+++ b/files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html
@@ -0,0 +1,89 @@
+---
+title: Usando el rol alertdialog
+slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_rol_alertdialog
+tags:
+  - ARIA
+  - Accesibilidad
+  - Alertas
+  - Desarrollo web
+  - HTML
+  - agente
+  - alertdialog
+  - modal
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role
+---
+<h3 id="Descripción">Descripción</h3>
+
+<div class="summary">
+<p>Esta técnica demuestra como usar el rol <code><a class="external" href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog" title="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog">alertdialog</a></code>.</p>
+</div>
+
+<p>El rol <code>alertdialog</code> es utilizado para notificar al usuario información urgenete que demanden la atención inmediata del usuario. Como el nombre implica, <code>alertdialog</code> es un tipo de díalogo. Esto significa que la mayoría de las instrucciones proveidas en la técnica de ''<a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="Using the alert role">usando el rol <code>dialog</code></a>' son aplicables al rol <code>alertdialog</code> también: </p>
+
+<ul>
+ <li>El díalogo de alerta debe siempre recibir un nombre accesible (a través de <code>aria-labelledby</code> o <code>aria-label</code>), y en la mayoría de los casos el texto de alerta debe ser marcado como la descripción accesible del díalogo de alerta (utilizando <code>aria-describedby</code>).</li>
+ <li>A diferencia de alertas regulares, un díalogo de alerta debe tener al menos un control enfocable y el foco debe moverse a ese control cuando el díalogo de alerta aparece. Generalmente los díalogos de alerta tienen al menos un botón de Confirmación, Cerrar o Cancelar que pueder ser usado para moverl el foco. Adicionalmente, díalogos de alerta pueder tener otros controles interactivos tales como campos de texto, pestañas o checkboxes. El enfoque de control al que se debe desplazar depende del propósito del diálogo.</li>
+ <li>El orden de la pestaña dentro del díalogo de alerta debe ajustarse.</li>
+</ul>
+
+<p>La diferencia con díalogos normales es que el rol de <code>alertdialog</code> debe ser utilizado únicamente cuando una alerta, error, o advertencia ocurre. En otras palabras, cuando la información o controles de un díalogo requieren la inmediata atención del usuario debe usarse <code>alertdialog</code> en lugar de <code>dialog.</code> Sin embargo, depende del desarrollador hacer esta distinción.</p>
+
+<p>Debido a su carácter urgente los díalogos de alerta deben ser siempre modales.</p>
+
+<div class="note"><strong>Nota: </strong>Este rol solo debe ser usado para mensajes de alerta que tienen controles interactivos asociado. Si un díalogo de alerta solo contiene contenido estático y no tiene controles interactivos, <code>alertdialog</code> es probablemente el rol incorrecto para ser utilizado.. El rol <code>alert</code> debe ser usado en su lugar en éste caso (como se describe en la técnica de <a href="/en/ARIA/ARIA_Techniques/Using_the_alert_role" title="Using the alert role">Utilizando el rol <code>alert</code></a>).</div>
+
+<h3 id="Posibles_efectos_de_agentes_de_usuario_y_tecnología_de_asistencia">Posibles efectos de agentes de usuario y tecnología de asistencia</h3>
+
+<p>Cuando un rol <code>alertdialog</code> es utilizado, el agente de usuario debería hacer lo siguiente:</p>
+
+<ul>
+ <li>Exponer el elemento como un díalogo a la API de accesibilidad del sistema operativo.</li>
+ <li>Disparar un evento de alerta accesible usando la API de accesibilidad del sistema operativo si lo soporta.</li>
+</ul>
+
+<p>Cuando la aleta de díalogo aparece, los lectores de pantalla deberían anunciar la alerta.</p>
+
+<p>Cuando el díalogo de alerta es etiquetado correctamente y el foco es movido de un control a el interior del díalogo, los lectores de pantalla deberían anunciar el rol accesible del díalogo así como su nombre y su descriipción antes de anunciar el elemento enfocado. </p>
+
+<div class="note"><strong>Nota:</strong> Opiniones pueden diferir en como tecnología de asistencia debe manejar esta técnica. La información proveída arriba es una de éstas opiniones y por lo tanto no es normativa.</div>
+
+<h3 id="Ejemplos">Ejemplos</h3>
+
+<h4 id="Ejemplos_1_Un_díalogo_de_alerta_básico">Ejemplos 1: Un díalogo de alerta básico</h4>
+
+<p>El fragmento de código siguiente muestra como marcar un díalogo de alerta que solo provee un mensaje y un botón de OK.</p>
+
+<pre class="brush: html">&lt;div role="alertdialog" aria-labelledby="tituloDialogo1" aria-describedby="descrDialogo1"&gt;
+  &lt;div role="document" tabindex="0"&gt;
+    &lt;h2 id="tituloDialogo1"&gt;Tu sesión esta apunto de expirar&lt;/h2&gt;
+    &lt;p id="descrDialogo1"&gt;Para extender tu sesión de clic en el botón OK&lt;/p&gt;
+    &lt;button&gt;OK&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="Ejemplos_en_funcionamiento">Ejemplos en funcionamiento:</h4>
+
+<p>Pendiente</p>
+
+<h3 id="Notas">Notas </h3>
+
+<h3 id="Atributos_ARIA_utilizados">Atributos ARIA utilizados</h3>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#dialog" title="http://www.w3.org/TR/wai-aria/roles#dialog">alertdialog</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">aria-labelledby</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a></li>
+</ul>
+
+<h3 id="Técnicas_ARIA_relacionadas">Técnicas ARIA relacionadas</h3>
+
+<ul>
+ <li> <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="Using the dialog role">usando el rol <code>dialog</code></a></li>
+ <li> <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role" title="Using the alert role">usando el rol <code>alert</code></a></li>
+</ul>
+
+<h3 id="Compatibilidad">Compatibilidad</h3>
+
+<p class="comment">Pendiente: <em>Add support information for common UA and AT product combinations</em></p>
+
+<h3 id="Recursos_adicionales">Recursos adicionales</h3>
diff --git a/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
new file mode 100644
index 0000000000..1dc32c0bd0
--- /dev/null
+++ b/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
@@ -0,0 +1,138 @@
+---
+title: Using the alert role
+slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role
+tags:
+  - ARIA
+  - Accesibilidad
+  - CSS
+  - HTML
+  - alert
+  - alerta
+  - rol de alerta
+  - tecnología asistencial
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role
+---
+<h3 id="Descripción">Descripción</h3>
+
+<div class="summary">
+<p>Esta técnica demuestra como usar el rol <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#alert" title="http://www.w3.org/TR/wai-aria/roles#alert">alert</a> y describe el efecto que tiene en los navegadores y tecnologías de asistencia.</p>
+</div>
+
+<p>El rol de alerta es utilizado para comunicar un mensaje importante y normalmente urgente para el usuario. Cuando este rol es añadido a un elemento, el navegador envía un evento de alerta accesible a los productos de tecnología asistencial que notificarán al usuario sobre ésta. El rol de alerta es más útil para información que requiere la atención inmediata del usuario, por ejemplo:</p>
+
+<ul>
+ <li>Un valor inválido ingresado en un formulario</li>
+ <li>La sesión de inicio de sesión del usuario esta por expirar</li>
+ <li>La conexión al servidor se perdió, cambios locales no fueron guardados</li>
+</ul>
+
+<p>Debido a su naturaleza intrusiva, el rol de alerta debe ser utilizada de forma limitada y sólo en situaciones donde la inmediata atención del usuario es requerida. Cambios dinámicos que son menos urgentes deberían usar un método menos agresivo, como, <code>aria-live="polite"</code>  u otros roles de región en vivo.</p>
+
+<h3 id="Posibles_efectos_en_agentes_de_usuario_y_tecnología_asistencial">Posibles efectos en agentes de usuario y tecnología asistencial</h3>
+
+<p>Cuando el rol de alerta es añadido a un elemento, o dicho elemento se vuelve visible, el agente de usuario debe hacer lo siguiente:</p>
+
+<ul>
+ <li>Exponer que el elemento tiene un rol de alerta en la API de accesibilidad del sistema operativo.</li>
+ <li>Disparar un evento de alerta accesible utilizando la API de accesibilidad del sistema operativo si lo soporta.</li>
+</ul>
+
+<p>Productos de tecnología asistencial deben escuchar por dicho evento y notificar al usuario consecuentemente:</p>
+
+<ul>
+ <li>Lectores de pantalla pueden interrumpir la entrada actual (sea por voz o braile) e inmediatamente anunciar o desplegar el mensaje de alerta.</li>
+ <li>Lupas de pantalla pueden indicar visualmente que una alerta ha ocurrido y que texto tuvo la alerta.</li>
+</ul>
+
+<div class="note"><strong>Nota:</strong> Opiniones pueden diferir en como tecnologías de asistencia deben manejar esta técnica. La información proveida anteriormente es una de estas opiniones y por lo tanto no es normativa.</div>
+
+<h3 id="Ejemplos">Ejemplos</h3>
+
+<h4 id="Ejemplo_1_Agregar_el_role_en_el_código_HTML">Ejemplo 1: Agregar el role en el código HTML</h4>
+
+<p>The snippet below shows how the alert role is added directly into the html source code. The moment the element finishes loading the screen reader should be notified of the alert. If the element was already in the original source code when the page loaded, the screen reader will announce the error immediately after announcing the page title.</p>
+
+<pre class="brush: html">&lt;h2 role="alert"&gt;Your form could not be submitted because of 3 validation errors.&lt;/h2&gt;</pre>
+
+<h4 id="Ejemplo_2_Dinámicamente_añadir_un_elemento_con_el_rol_de_alerta">Ejemplo 2: Dinámicamente añadir un elemento con el rol de alerta</h4>
+
+<p>This snippet dynamically creates an element with an alert role and adds it to the document structure.</p>
+
+<pre class="brush: js">var myAlert = document.createElement("p");
+myAlert.setAttribute("role", "alert");
+var myAlertText = document.createTextNode("You must agree with our terms of service to create an account.");
+myAlert.appendChild(myAlertText);
+document.body.appendChild(myAlert);
+</pre>
+
+<p><strong>Note:</strong> The same result can be achieved with less code when using a script library like jQuery:</p>
+
+<pre class="brush: js">$("&lt;p role='alert'&gt;You must agree with our terms of service to create an account.&lt;/p&gt;").appendTo(document.body);
+</pre>
+
+<h4 id="Ejemplo_3_Añadir_un_rol_de_alerta_a_un_elemento_ya_existente">Ejemplo 3: Añadir un rol de alerta a un elemento ya existente</h4>
+
+<p>Sometimes it's useful to add an alert role to an element that is already visible on the page rather than creating a new element. This allows the developer to reiterate information that has become more relevant or urgent to the user. For example, a form control may have instruction about the expected value. If a different value is entered, <code>role="alert</code> can be added to the instruction text so that the screen reader announces it as an alert. The pseudo code snippet below illustrates this approach:</p>
+
+<pre class="brush: html">&lt;p id="formInstruction"&gt;You must select at least 3 options&lt;/p&gt;
+</pre>
+
+<pre class="brush: js">// When the user tries to submit the form with less than 3 checkboxes selected:
+document.getElementById("formInstruction").setAttribute("role", "alert");</pre>
+
+<h4 id="Ejemplo_4_Hacer_un_elemento_con_un_rol_de_alerta_visible">Ejemplo 4: Hacer un elemento con un rol de alerta visible</h4>
+
+<p>If an element already has <code>role="alert" </code>and is initially hidden using CSS, making it visible will cause the alert to fire as if it was just added to the page. This means that an existing alert can be "reused" multiple times. </p>
+
+<p><strong>Note: </strong>In most cases this approach is not recommended, because it's not ideal to hide error or alert text that is currently not applicable. Users of older assistive technology may still be able to perceive the alert text even when the alert does not currently applies, causing users to incorrectly believe that there is a problem.</p>
+
+<pre class="brush: css">.hidden {
+  display:none;
+}
+</pre>
+
+<pre class="brush: html">&lt;p id="expirationWarning" role="alert" class="hidden"&gt;Your log in session will expire in 2 minutes&lt;/p&gt;
+</pre>
+
+<pre class="brush: js">// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:
+document.getElementById("expirationWarning").className = ""; </pre>
+
+<h4 id="Ejemplos_funcionales">Ejemplos funcionales:</h4>
+
+<ul>
+ <li><a class="external" href="http://www.oaa-accessibility.org/example/1/">Rol de alerta utilizando una caja de alerta ARIA</a></li>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/alertdialog1/" title="http://www.oaa-accessibility.org/examplep/alertdialog1/">Alerta utilizando una caja de dialogo modal ARIA</a></li>
+</ul>
+
+<h3 id="Notas">Notas </h3>
+
+<ul>
+ <li>Usar el rol de alerta en un elemento implica que ese elemento tiene <code>aria-live="assertive"</code>.</li>
+ <li>El rol de alerta solo debería ser utilizada para contenido de texto estático. El elemento que en el que el rol de alerta es utilizado no debe ser capaz de recibir el foco, pues lectores de pantalla automáticamente anunciarán la alerta sin importar donde el foco del teclado esta actualmente localizado.</li>
+ <li>Si una alerta también provee controles interactivos (como controles del formulario que permitan al usuario rectificar un problema, o un boton de "OK" que descarte la alerta) el rol de <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="Using the alert role">alertdialog</a> debe ser utilizado en lugar de éste.</li>
+</ul>
+
+<h3 id="Atributos_ARIA_utilizados">Atributos ARIA utilizados</h3>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#alert" title="http://www.w3.org/TR/wai-aria/roles#alert">alert</a></li>
+</ul>
+
+<h3 id="Técnicas_ARIA_relacionadas">Técnicas ARIA relacionadas</h3>
+
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="en/ARIA/ARIA_Techniques/Using_the_alertdialog_role">Utilizando el rol alertdialog</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_property" title="Using the aria-invalid property">Utilizando la propiedad aria-invalid</a></li>
+</ul>
+
+<h3 id="Compatibilidad">Compatibilidad</h3>
+
+<p class="comment">Pendiente. Add support information for common UA and AT product combinations</p>
+
+<h3 id="Recursos_adicionales">Recursos adicionales</h3>
+
+<ul>
+ <li>Las mejores practicas de ARIA - Rol de Alerta <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#alert" title="http://www.w3.org/TR/wai-aria-practices/#alert">http://www.w3.org/TR/wai-aria-practices/#alert</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html
new file mode 100644
index 0000000000..b8b319e518
--- /dev/null
+++ b/files/es/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html
@@ -0,0 +1,60 @@
+---
+title: Utilizando el atributo  aria-label
+slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
+tags:
+  - Accesibilidad
+  - Referencia
+  - agente
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
+---
+<div>{{draft}}</div>
+
+<p><span class="seoSummary">El atributo <a class="external" href="https://www.w3.org/TR/wai-aria/#aria-label" rel="external" title="https://www.w3.org/TR/wai-aria/#aria-label"><code>aria-label</code></a> se utiliza para definir una cadena que etiqueta el elemento actual. Úselo en los casos en que no haya una etiqueta de texto visible en pantalla. Si hay texto visible etiquetando el elemento, utilice <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="Using the aria-labelledby attribute">aria-labelledby</a> en su lugar.</span></p>
+
+<p>Este atributo puede ser utilizado con cualquier elemento HTML típico; no se limita a los elementos que tienen un papel ARIA asignado.</p>
+
+<h3 class="editable" id="Valor"><span>Valor</span></h3>
+
+<p>string</p>
+
+<h3 class="editable" id="Posibles_efectos_sobre_los_agentes_de_usuario_y_la_tecnología_de_asistencia">Posibles efectos sobre los agentes de usuario y la tecnología de asistencia<span> </span></h3>
+
+<div class="note"><strong>Nota:</strong> Las opiniones pueden diferir en cómo la tecnología asistencial debe manejar esta técnica. La información proporcionada más arriba es una de esas opiniones y por lo tanto no normativa.</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<div id="section_5">
+<h4 id="Ejemplo_1_Varias_etiquetas">Ejemplo 1: Varias etiquetas</h4>
+
+<p>En el siguiente ejemplo se aplica estilo a un botón para que parezca un típico botón "cerrar", con una X en medio. Al no haber nada que indique que el propósito del botón es cerrar el diálogo, se usa el atributo <code>aria-label</code> para proporcionar una etiqueta a cualquier tecnología de asistencia.</p>
+</div>
+
+<pre class="notranslate"><span class="tag">&lt;button aria-label=<span class="str">"Close"</span> onclick=<span class="str">"myDialog.close()"</span>&gt;</span>X<span class="tag">&lt;/button&gt;</span>
+</pre>
+
+<h3 id="Notas">Notas</h3>
+
+<ul>
+ <li>La API de accesibilidad más común para mapear una etiqueta es la propiedad accessible name.</li>
+ <li>Los atributos, incluyedo las declaraciones <code>aria-label</code>, son ignoradas por la mayoría de servicios de traducción</li>
+</ul>
+
+<h3 id="Used_by_ARIA_roles">Used by ARIA roles</h3>
+
+<p>Todos los elementos del DOM</p>
+
+<h3 id="Técnicas_ARIA_relacionadas">Técnicas ARIA relacionadas</h3>
+
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Usando el atributo aria-labelledby</a></li>
+</ul>
+
+<h3 id="Compatibilidad">Compatibilidad</h3>
+
+<p class="comment">Pendiente: añadir información de soporte para combinaciones de producto comunes a UA y AT.</p>
+
+<h3 id="Recursos_adicionales">Recursos adicionales</h3>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-label">Especificación WAI-ARIA para aria-label</a></li>
+</ul>
diff --git a/files/es/web/accessibility/aria/forms/alertas/index.html b/files/es/web/accessibility/aria/forms/alertas/index.html
new file mode 100644
index 0000000000..65cc3d3d09
--- /dev/null
+++ b/files/es/web/accessibility/aria/forms/alertas/index.html
@@ -0,0 +1,147 @@
+---
+title: Alertas
+slug: Web/Accessibility/ARIA/forms/alertas
+tags:
+  - ARIA
+  - Accesibilidad
+  - Forms
+  - Web
+  - formulários
+translation_of: Web/Accessibility/ARIA/forms/alerts
+---
+<h2 id="El_problema">El problema</h2>
+
+<p>Tienes un formulario — un formulario de contacto — por ejemplo, en el que deseas poner algún control de error accesible. Ejemplos de problemas comunes incluyen direcciones de correo electrónico que no son válidas o un campo de nombre que no contiene al menos un nombre o apellido.</p>
+
+<h2 id="El_formulario">El formulario</h2>
+
+<p>Primero, lee acerca de la <code><a href="/es/docs/Web/Accessibility/ARIA/forms/Basic_form_hints#Required_and_invalid_fields" title="/es/Web/Accessibility/ARIA/forms/Basic_form_hints">técnica requerida por aria</a></code> si no lo has hecho, ya que esta técnica amplía a esa.</p>
+
+<p>Aquí hay un sencillo formulario:</p>
+
+<pre class="brush: html notranslate"> &lt;form method="post" action="post.php"&gt;
+   &lt;fieldset&gt;
+     &lt;legend&gt;Introduce tus datos de contacto&lt;/legend&gt;
+     &lt;label for="name"&gt;Tu nombre (obligatorio):&lt;/label&gt;
+     &lt;input name="name" id="name" aria-required="true"/&gt;
+     &lt;br /&gt;
+     &lt;label for="email"&gt;Dirección de correo electrónico (obligatorio):&lt;/label&gt;
+     &lt;input name="email" id="email" aria-required="true"/&gt;
+     &lt;br /&gt;
+     &lt;label for="website"&gt;Sitio web (opcional):&lt;/label&gt;
+     &lt;input name="website" id="website"/&gt;
+   &lt;/fieldset&gt;
+   &lt;label for="message"&gt;Por favor ingresa tu mensaje (requerido):&lt;/label&gt;
+   &lt;br /&gt;
+   &lt;textarea name="message" id="message" rows="5" cols="80"
+             aria-required="true"&gt;&lt;/textarea&gt;
+   &lt;br /&gt;
+   &lt;input type="submit" name="submit" value="Enviar mensaje"/&gt;
+   &lt;input type="reset" name="reset" value="Restablecer formulario"/&gt;
+ &lt;/form&gt;
+</pre>
+
+<h2 id="Verificación_de_validez_y_notificación_al_usuario"><span class="mw-headline" id="Checking_for_validity_and_notifying_the_user">Verificación de validez y notificación al usuario</span></h2>
+
+<p>La validación de formularios consta de varios pasos:</p>
+
+<ol>
+ <li>Verificando si la dirección de correo electrónico o el nombre ingresado son válidos. Cada campo tiene un conjunto de criterios que se deben cumplir para aprobar la validación. Para simplificar este ejemplo, verificaremos si la dirección de correo electrónico contiene el símbolo "@" y si la entrada del nombre contiene al menos 1 carácter.</li>
+ <li>Si no se cumplen los criterios anteriores, el atributo <code>aria-invalid</code> del campo recibirá un valor de "<code>true</code>".</li>
+ <li>Si no se cumplieron los criterios, se notificará al usuario mediante una alerta. En lugar de usar la función "<code>alert</code>" de JavaScript, usaremos un <em>widget WAI-ARIA</em> simple para la notificación. Esto notifica al usuario del error, pero le permite continuar modificando el formulario sin perder el foco (causado por el controlador "<code>onblur</code>" en la función "<code>alert</code>" predeterminada de JavaScript).</li>
+</ol>
+
+<p>A continuación se muestra un código JavaScript de ejemplo que se podría insertar encima de la etiqueta de cierre "<code>head</code>":</p>
+
+<pre class="brush: js notranslate"> &lt;script type="application/javascript"&gt;
+ function removeOldAlert()
+ {
+   var oldAlert = document.getElementById("alert");
+   if (oldAlert){
+     document.body.removeChild(oldAlert);
+   }
+ }
+
+ function addAlert(aMsg)
+ {
+   removeOldAlert();
+   var newAlert = document.createElement("div");
+   newAlert.setAttribute("role", "alert");
+   newAlert.setAttribute("id", "alert");
+   var msg = document.createTextNode(aMsg);
+   newAlert.appendChild(msg);
+   document.body.appendChild(newAlert);
+ }
+
+ function checkValidity(aID, aSearchTerm, aMsg)
+ {
+   var elem = document.getElementById(aID);
+   var invalid = (elem.value.indexOf(aSearchTerm) &lt; 0);
+   if (invalid) {
+     elem.setAttribute("aria-invalid", "true");
+     addAlert(aMsg);
+   } else {
+     elem.setAttribute("aria-invalid", "false");
+     removeOldAlert();
+   }
+ }
+ &lt;/script&gt;
+</pre>
+
+<h2 id="La_función_checkValidity"><span class="mw-headline" id="The_checkValidity_function">La función <code>checkValidity</code></span></h2>
+
+<p>El método principal en JavaScript utilizado para la validación de formularios es la función <code>checkValidity</code>. Este método toma tres parámetros: el ID de el <code>input</code> que se va a validar, el término que se busca para asegurar la validez y el mensaje de error que se inserta en la alerta.</p>
+
+<p>Para ver si es válido, la función comprueba si el valor <code>indexOf</code> del <code>input</code> es algo mayor que <code>-1</code>. Se devuelve un valor de <code>-1</code> o menos si el índice del término de búsqueda no se pudo encontrar dentro del valor.</p>
+
+<p>Si no es válido, la función hace dos cosas:</p>
+
+<ol>
+ <li>Establece el atributo <code>aria-invalid</code> del elemento en "<code>true</code>", lo que indicará a los lectores de pantalla que hay contenido no válido aquí.</li>
+ <li>Llamará a la función <code>addAlert</code> para agregar la alerta con el mensaje de error proporcionado.</li>
+</ol>
+
+<p>Si se encuentra el término de búsqueda, el atributo <code>aria-invalid</code> se restablece a “<code>false</code>”. Además, se eliminan las alertas sobrantes.</p>
+
+<h2 id="La_función_addAlert"><span class="mw-headline" id="The_addAlert_function">La función <code>addAlert</code></span></h2>
+
+<p>Esta función primero elimina las alertas antiguas. La función es simple: busca un elemento con id "<code>alert</code>" y, si lo encuentra, lo elimina del <a href="/es/docs/Mozilla/Tech/XUL/Tutorial/Document_Object_Model">modelo de objetos del documento</a>.</p>
+
+<p>A continuación, la función crea un elemento <code>div</code> para contener el texto de alerta. Obtiene un ID de "<code>alert</code>". Y obtiene un conjunto de roles de "alert". En realidad, está inspirado en ARIA, aunque no dice "aria" en el nombre del atributo. Esto se debe a que ese rol se basa en el <a class="external text" href="http://www.w3.org/TR/xhtml-role/" title="Módulo de atributo de rol XHTML">Módulo de atributos de rol XHTML</a> que simplemente se transfirió a HTML para simplificar.</p>
+
+<p>El texto se agrega al elemento <code>div</code> y el elemento <code>div</code> se agrega al documento.</p>
+
+<p>En el momento en que esto suceda, Firefox lanzará un evento "<code>alert</code>" a las tecnologías de asistencia cuando aparezca este <code>div</code>. La mayoría de los lectores de pantalla la recogerán automáticamente y la pregonarán. Esto es similar a la barra de notificaciones en Firefox que te pregunta si deseas guardar una contraseña. La alerta que acabamos de crear no tiene ningún botón para presionar, solo nos dice lo que está mal.</p>
+
+<h2 id="Modificar_el_evento_onblur"><span class="mw-headline" id="Adding_the_magic_to_the_.E2.80.9Conblur.E2.80.9D_event">Modificar el evento "<code>onblur</code>"</span></h2>
+
+<p>Todo lo que queda ahora es agregar el controlador de eventos. Necesitamos cambiar las dos entradas para el correo electrónico y el nombre para esto:</p>
+
+<pre class="brush: html notranslate"> &lt;input name="name" id="name" aria-required="true"
+        onblur="checkValidity('name', '', '¡Se ingresó un nombre no válido!');"/&gt;
+ &lt;br /&gt;
+ &lt;input name="email" id="email" aria-required="true"
+        onblur="checkValidity('email', '@', 'Dirección de correo electrónico no válida');"/&gt;
+</pre>
+
+<p><strong>Probar el ejemplo</strong></p>
+
+<p>Si usas Firefox 3 y un lector de pantalla compatible actualmente, intenta lo siguiente:</p>
+
+<ol>
+ <li>Ingresa solo tu primer nombre como nombre. Al pulsar la tecla de tabulación, escucharás una alerta que te indicará que ingresaste un nombre no válido. Luego puedes volver atrás con <code>Mayús-Tab</code> y corregir el error.</li>
+ <li>Ingresa una dirección de correo electrónico sin el símbolo “@”. Cuando salgas de este campo, deberías escuchar una advertencia que dice que no ingresaste una dirección de correo electrónico válida.</li>
+</ol>
+
+<p>En ambos casos, al volver a enfocar el campo en cuestión, tu lector de pantalla debería decirte que este campo no es válido. JAWS 9 admite esto, pero JAWS 8 no, por lo que es posible que esto no funcione en todas las versiones de los lectores de pantalla compatibles.</p>
+
+<h2 id="Algunas_preguntas_que_podrías_tener"><span class="mw-headline" id="A_few_questions_that_you_might_have">Algunas preguntas que podrías tener</span></h2>
+
+<dl>
+ <dt>P. ¿Por qué pusiste “<code>(obligatorio)</code>” en el texto de la etiqueta y el atributo <code>aria-required</code> en algunas de las entradas?</dt>
+ <dd>R. Si se tratara de un formulario real en vivo y el sitio estuviera siendo visitado por un navegador que aún no es compatible con ARIA, aún quisiéramos dar una indicación de que este es un campo obligatorio.</dd>
+ <dt>P. ¿Por qué no vuelve a enfocarse en el campo no válido automáticamente?</dt>
+ <dd>R. Porque esto no está permitido por las especificaciones de la API de Windows y posiblemente otras. Además, dejar que el enfoque salte sin interacción real del usuario con demasiada frecuencia no es algo agradable en general. </dd>
+</dl>
+
+<div class="warning">Aún no definido: reconsideremos esto ─ personalmente, creo que establecer el enfoque podría ser bueno si se hace sin causar una trampa en el teclado.</div>
diff --git a/files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html b/files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html
new file mode 100644
index 0000000000..48f2dba3e3
--- /dev/null
+++ b/files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html
@@ -0,0 +1,115 @@
+---
+title: Consejos básicos para formularios
+slug: Web/Accessibility/ARIA/forms/consejos_basicos_para_formularios
+tags:
+  - ARIA
+  - Accesibilidad
+  - formulários
+translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints
+---
+<p><span class="seoSummary">Cuando se implementan formularios utilizando elementos relacionados con los formularios HTML tradicionales, es importante proveer etiquetas para los controles y explicitamente asociar una etiqueta con su control.</span> Cuando un usuario de lector de pantalla navega una página, el lector de pantalla describirá los controles del formulario. Sin una asociación directa entre el control y su etiqueta, el lector de pantalla no tiene forma de saber que etiqueta es la correcta para el control.</p>
+
+<p>El ejemplo siguiente muestra un formulario sencillo con etiquetas. Note que cada elemento {{ HTMLElement("input") }} tiene un <code>id</code>, y cada elemento {{ HTMLElement("label") }} tiene un atributo <code>for</code>, indicando el <code>id</code> asociado al {{ HTMLElement("input") }}.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;input id="vino-1" type="checkbox" value="riesling"/&gt;
+      &lt;label for="vino-1"&gt;Berg Rottland Riesling&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="vino-2" type="checkbox" value="pinot-blanc"/&gt;
+      &lt;label for="vino-2"&gt;Pinot Blanc&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="vino-3" type="checkbox" value="pinot-grigio"/&gt;
+      &lt;label for="vino-3"&gt;Pinot Grigio&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="vino-4" type="checkbox" value="gewurztraminer"/&gt;
+      &lt;label for="vino-4"&gt;Gewürztraminer&lt;/label&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;
+</pre>
+
+<h2 id="Labeling_with_ARIA" name="Labeling_with_ARIA">Etiquetando con ARIA</h2>
+
+<p>El elemento HTML {{ HTMLElement("label") }} es apropiado para elementos relacionados a formularios, pero muchos controles de formulario son implementados como un widget dinámico de JavaScript, utilizando {{ HTMLElement("div") }}s o {{ HTMLElement("span") }}s. <a href="https://www.w3.org/WAI/standards-guidelines/aria/" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, la especificación <strong>Accessible Rich Internet Applications</strong> de W3C's <a href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a>, provee el atributo <code><a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby">aria-labelledby</a></code> para estos casos.</p>
+
+<p>El siguiente ejemplo muestra un grupo de radio buttons implementado usando una lista no ordenada. Note que en la línea 3, el elemento {{ HTMLElement("ul") }} define el atributo <code>aria-labelledby</code> a <code>etiqueta_rg1</code>, el <code>id</code> de elemento {{ HTMLElement("h3") }} en la línea 1, que es la etiqueta para el grupo de controles radio.</p>
+
+<pre class="brush: html">&lt;h3 id="etiqueta_rg1"&gt;Opciones para el almuerzo&lt;/h3&gt;
+
+&lt;ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="etiqueta_rg1"&gt;
+  &lt;li id="r1"  tabindex="-1" role="radio" aria-checked="false"&gt;
+    &lt;img role="presentation" src="radio-unchecked.gif" /&gt; Thai
+  &lt;/li&gt;
+  &lt;li id="r2"  tabindex="-1" role="radio"  aria-checked="false"&gt;
+    &lt;img role="presentation" src="radio-unchecked.gif" /&gt; Subway
+  &lt;/li&gt;
+  &lt;li id="r3"   tabindex="0" role="radio" aria-checked="true"&gt;
+    &lt;img role="presentation" src="radio-checked.gif" /&gt; Radio Maria
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h2 id="Describing_with_ARIA" name="Describing_with_ARIA">Describiendo con ARIA</h2>
+
+<p>Los controles de formulario en ocasiones tienen una descripción asociada con ellos, además de la descripción de la etiqueta. ARIA provee el atributo <code><a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby">aria-describedby</a></code>  para directamente asociar la descripción con el control.</p>
+
+<p>El ejemplo siguiente muestra un elemento {{ HTMLElement("button") }} que es descrito por una oración de un diferento elemento {{ HTMLElement("div") }}. El atributo <code>aria-describedby</code> en el {{ HTMLElement("button") }} referencia al <code>id</code> del {{ HTMLElement("div") }}.</p>
+
+<pre class="brush: html">&lt;button aria-describedby="descriptionRevert"&gt;Revertir&lt;/button&gt;
+&lt;div id="descriptionRevert"&gt;Revertir deshará cualquier cambio que se haya hecho desde la última que se guardo.&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: El atributo <code>aria-describedby</code> es utilizado para otros própositos además de los controles de formularios.</p>
+</div>
+
+<h2 id="Required_and_invalid_fields" name="Required_and_invalid_fields">Campos requeridos e inválidos</h2>
+
+<div class="note">
+<p><strong>Nota</strong>: Ahora que <code>required</code> esta disponible para más del 97% de usuarios globalmente, no se recomienda que se use al mismo tiempo <code>required</code> y <code>aria-required</code>.</p>
+</div>
+
+<p>Los desarrolladores Web típicamente usan estrategias de presentación para inidicar campos requeridos o inválidos. Tecnologías asistivas (Assistive technologies - ATs) no necesariamente pueden inferir de la presentación. ARIA provee atributos para indicar que controles de formulario son requeridos o inválidos:</p>
+
+<ul>
+ <li>La propiedad <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required"><strong>aria-required</strong></a> puede ser aplicada a un elemento de un formulario para indicar a a una AT que es requerida para completar el formulario.</li>
+ <li>El estado <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid"><strong>aria-invalid</strong></a> puede ser aplicado programáticamente, para indicar al AT que campos de información tienen información incorrecta para que el usuario sepa que ingresaron información inválida.</li>
+</ul>
+
+<p>El siguiente ejemplo muestra un formulario sencillo con tres campos. En las líneas 4 y 12, los atributos <code>aria-required</code> son establecidos a true (en adición a los asteriscos junto a las etiquetas), indicando que los campos de nombre y email son requeridos. La segunda parte del ejemplo, es un fragmento de código de JavaScript que valida el formato del email, y establece el atributo <code>aria-invalid</code> del campo email (línea 12 del HTML) de acuerdo al resultado (adicionalmente de cambiar la presentación del elemento).</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="nombre"&gt;* Nombre:&lt;/label&gt;
+    &lt;input type="text" value="nombre" id="nombre" aria-required="true"/&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="telefono"&gt;Phone:&lt;/label&gt;
+    &lt;input type="text" value="telefono" id="telefono" aria-required="false"/&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="email"&gt;* E-mail:&lt;/label&gt;
+    &lt;input type="text" value="email" id="email" aria-required="true"/&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>The script that validates the form entry would look something like this:</p>
+
+<pre class="brush: js">var validar = function () {
+  var elementoEmail = document.getElementById(emailFieldId);
+  var esValido = emailValid(formData.email); // regresa verdadero si es válido, de otro modo devuelve falso.
+
+  elementoEmail.setAttribute("aria-invalid", !esValido);
+  setElementBorderColour(elementoEmail, esValido); // establece el borde de color rojo si el segundo argumento es falso
+};
+</pre>
+
+<h2 id="Providing_Helpful_Error_Messages" name="Providing_Helpful_Error_Messages">Ofreciendo Mensajes de Error Útiles</h2>
+
+<p>Lea como usar <a href="/en-US/docs/aria/forms/alerts" title="aria/forms/alerts">alertas ARIA para mejorar formularios</a>.</p>
+
+<p>Para mayor orientación en el uso de ARIA para la accesibilidad de los formularios, vea el documento <a href="http://www.w3.org/TR/wai-aria-practices/" title="http://www.w3.org/TR/wai-aria-practices/">Prácticas de Autoria WAI-ARIA (WAI-ARIA Authoring Practices</a>).</p>
diff --git a/files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html b/files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html
new file mode 100644
index 0000000000..4bc8cafa67
--- /dev/null
+++ b/files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html
@@ -0,0 +1,47 @@
+---
+title: >-
+  Etiquetas complejas: Utilizando ARIA para etiquetas con campos embebidos
+  dentro de ellos
+slug: Web/Accessibility/ARIA/forms/Etiquetas_complejas
+tags:
+  - ARIA
+  - Accesibilidad
+  - Firefox
+  - Guía
+  - HTML
+  - NeedsContent
+  - aria-labelledby
+  - etiqueta
+  - label
+translation_of: Web/Accessibility/ARIA/forms/Multipart_labels
+---
+<div>
+<h2 id="Problema"><span class="mw-headline" id="Problem">Problema</span></h2>
+
+<p>Tiene un formulario donde le pregunta a su usuario una pregunta, pero la respuesta es mencionada en la misma pregunta. Un ejemplo clásico que todos conocemos de las configuraciones de nuestro navegador es la opción "Eliminar el historial despues de x días". "Eliminar  el historial despues" está a la izquierda de la caja de texto, x es el número, por ejemplo 21, y la palabra "días" sigue a la caja de texto, formando una oración que es fácil de comprender.</p>
+
+<p>Si se esta usando un lector de pantalla, quizá ha notado que, cuando se van a las configuraciónes de Firefox, el lector dice: ¿"Eliminar el historial después de 21 días"?, seguidamente anuncia que está en una caja de texto y que contiene el número 21. ¿No es super? No necesita navegar alrededor para darse cuenta de la unidad. "Días" podría ser fácilmente "meses" o "años", y en muchos dialogos ordinarios no hay forma de descubrirlo más que navegando utilizando los comandos de revisión del lector de pantalla.</p>
+
+<p><span class="seoSummary">La solución esta en un atributo ARIA llamado <strong>aria-labelledby</strong>. Su parámetro es una cadena de texto que consiste de los IDs de los elementos HTML que se deseen concatenar dentro de un solo nombre accesible.</span></p>
+
+<p>Tanto <strong>aria-labelledby</strong> y <strong>aria-describedby</strong> se especifican en el elemento de formulario   que debe etiquetarse, por ejemplo un &lt;input&gt;. En ambos casos, la etiqueta for/label para ligar a los controles que puedan existir son anuladas por <strong>aria-labelledby</strong>. Si en una página se provee <strong>aria-labelledby</strong>, se debería colocar también una etiqueta para también soportar navegadores antiguos que no tengan aún soperte ARIA. Con Firefox 3, los usuarios ciegos tendrán automáticamente mejor accesibilidad con el nuevo atributo, pero los usuarios de navadores antiguos de esta forma no son dejados en la oscuridad.</p>
+
+<p>Ejemplo:</p>
+<input> <span id="labelShutdown">apagar computadora después de </span> <input> <span id="shutdownUnit"> minutos</span>
+
+<pre class="brush: html">&lt;input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" type="checkbox" /&gt;
+&lt;span id="etiquetaApagado"&gt;Apagar computadora después de &lt;/span&gt;
+&lt;input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" id="tiempoApagado" type="text" value="10" /&gt;
+&lt;span id="unidadApagado"&gt; minutos&lt;/span&gt;
+</pre>
+
+<h2 id="Nota_para_usuarios_de_JAWS_8"><span class="mw-headline" id="A_Note_for_JAWS_8_users">Nota para usuarios de JAWS 8</span></h2>
+
+<p>JAWS 8.0 tiene su propia lógica para encontrar etiquetas, causando que siempre sobreescriba el nombre accesible que obtiene la caja de texto de un documento HTML. Con JAWS 8, no se ha encontrado una manera de hacer que acepte la etiqueta del ejemplo anterior. Pero NVDA y  Window-Eyes funcionan correctamente, Orca on Linux tampoco tiene problemas.</p>
+
+<div class="note">TBD (pendiente): añadir más información sobre compatiblidad</div>
+
+<h2 id="¿Puede_hacerse_sin_ARIA"><span class="mw-headline" id="Can_this_be_done_without_ARIA.3F">¿Puede hacerse sin ARIA?</span></h2>
+
+<p> Community member Ben Millard has pointed out in a blog post that <a class="external text" href="http://projectcerbera.com/blog/2008/03#day24" rel="nofollow">controls can be embedded in labels as shown in the above example using HTML 4</a>, simply by embedding the input into the label. Thanks for that info, Ben! It is very useful and shows that some techniques that have been available for years escape even the gurus sometimes. This technique works in Firefox; however, it doesn't currently work in many other browsers, including IE. For labels with embedded form controls, using <strong>aria-labelledby</strong> is still the best approach.</p>
+</div>
diff --git a/files/es/web/accessibility/aria/forms/index.html b/files/es/web/accessibility/aria/forms/index.html
new file mode 100644
index 0000000000..fc1f08cb9d
--- /dev/null
+++ b/files/es/web/accessibility/aria/forms/index.html
@@ -0,0 +1,17 @@
+---
+title: Formularios
+slug: Web/Accessibility/ARIA/forms
+tags:
+  - ARIA
+  - Accesibilidad
+translation_of: Web/Accessibility/ARIA/forms
+---
+<p>Las siguientes páginas proporcionan diversas técnicas para mejorar la accesibilidad de los formularios web:</p>
+
+<ul>
+ <li><a href="/es/Accessibility/ARIA/Basic_form_hints" title="Consejos básicos para formularios">Consejos básicos para formularios</a>: Añadir consejos y descripciones para campos erróneos u obligatorios</li>
+ <li><a href="/es/Accessibility/ARIA/forms/alerts" title="alertas">Alertas</a>: uso de alertas para proporcionar mensajes de error de validación del lado del cliente</li>
+ <li><a href="/es/Accessibility/ARIA/forms/Multipart_labels" title="https://developer.mozilla.org/es/aria/forms/Multipart_labels">Etiquetas complejas</a>: Habilitación de etiquetas complejas con elementos en su interior</li>
+</ul>
+
+<p>Consulta también <a class="external" href="https://web.archive.org/web/20120801225355/http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html" title="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html">el artículo de Yahoo! sobre validación de formularios y ARIA</a> (recuperado desde archive.org), que abarca gran parte del mismo contenido.</p>
diff --git a/files/es/web/accessibility/aria/index.html b/files/es/web/accessibility/aria/index.html
new file mode 100644
index 0000000000..bc0a720962
--- /dev/null
+++ b/files/es/web/accessibility/aria/index.html
@@ -0,0 +1,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>