diff options
Diffstat (limited to 'files/es/web/accesibilidad')
7 files changed, 1049 insertions, 0 deletions
diff --git a/files/es/web/accesibilidad/comunidad/index.html b/files/es/web/accesibilidad/comunidad/index.html new file mode 100644 index 0000000000..34acce8e6e --- /dev/null +++ b/files/es/web/accesibilidad/comunidad/index.html @@ -0,0 +1,44 @@ +--- +title: Comunidad +slug: Web/Accesibilidad/Comunidad +tags: + - Accesibilidad + - Todas_las_Categorías +translation_of: Web/Accessibility/Community +--- +<p> </p> +<p>Si conoces alguna lista de correo, grupo de noticias, foro, o comunidad relacionada con la + <i> + accesibilidad</i> + que pueda ser de interés. Por favor, pon aquí un enlace.</p> +<h3 id="Mozilla" name="Mozilla">Mozilla</h3> +<ul> + <li>La + <i> + Accesibilidad</i> + en la comunidad Mozilla... en inglés</li> +</ul> +<p>{{ DiscussionList("support-accessibility", "mozilla.support.accessibility") }}</p> +<h3 id="Listas_de_correo" name="Listas_de_correo">Listas de correo</h3> +<ul> + <li><a class="external" href="http://es.groups.yahoo.com/group/accesoweb">Accesoweb</a> Lista en castellano sobre problemas y soluciones de diseño accesible para la Red de la <b>Fundación Sidar</b>.</li> +</ul> +<h3 id="Foros" name="Foros">Foros</h3> +<ul> + <li> </li> +</ul> +<p> </p> +<h3 id="Bit.C3.A1coras" name="Bit.C3.A1coras">Bitácoras</h3> +<ul> + <li><a class="external" href="http://accesibilidadweb.blogspot.com/">Accesibilidad, Usabilidad y Estándares Web</a> Este es un blog dedicado a todos los temas relacionados con la accesibilidad web, usabilidad y estándares web.</li> +</ul> +<h3 id="Wikis" name="Wikis">Wikis</h3> +<ul> + <li> </li> +</ul> +<p> </p> +<h3 id="Otros_Sitios" name="Otros_Sitios">Otros Sitios</h3> +<ul> + <li><a class="external" href="http://www.w3.org/WAI/">El sitio del WAI (en)</a></li> +</ul> +<p><span class="comment">categorías</span></p> diff --git a/files/es/web/accesibilidad/index.html b/files/es/web/accesibilidad/index.html new file mode 100644 index 0000000000..ea30623a6d --- /dev/null +++ b/files/es/web/accesibilidad/index.html @@ -0,0 +1,93 @@ +--- +title: Accesibilidad +slug: Web/Accesibilidad +tags: + - Accesibilidad + - Todas_las_Categorías +translation_of: Web/Accessibility +--- +<div class="callout-box"><strong><a class="external" href="http://www.w3c.es/Divulgacion/Guiasbreves/Accesibilidad">Guía Breve de Accesibilidad Web</a></strong><br> +Las cuatro cosas básicas y un montón de buenos enlaces.</div> + +<p>La <strong>accesibilidad web </strong>(a menudo abreviada como <strong>A11y)</strong> se refiere a la posibilidad de acceso a los diferentes sitios web y a todo su contenido por todas las personas, independientemente de sus limitaciones fìsicas (discapacidad) o las derivadas del contexto de uso (tecnológicas o ambientales).{{ Ref(1) }}</p> + +<p><font><font>Para muchas personas, la tecnología facilita las cosas. </font><font>Para las personas con algun tipo de discapacidad, la tecnología hace las cosas posibles. </font><font>Accesibilidad significa desarrollar contenido para que sea lo más accesible posible sin importar las habilidades físicas y cognitivas de un individuo y sin importar cómo acceda a la web.</font></font></p> + +<p><font><font>" </font></font><strong><font><font>La Web está diseñada fundamentalmente para que funcione para todas las personas</font></font></strong><font><font> , independientemente de su hardware, software, idioma, cultura, ubicación, capacidad física o mental.</font></font></p> + +<p>El máximo organismo dentro de la jerarquía de Internet que se encarga de promover la accesibilidad es el <a class="external" href="http://www.w3c.es">W3C</a>, en especial su grupo de trabajo <a class="external" href="http://www.w3c.es/Traducciones/es/WAI/intro/accessibility">WAI</a>.</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"><a href="/Special:Tags?tag=Accesibilidad&language=es" title="Special:Tags?tag=Accesibilidad&language=es">Documentación</a></h4> + + <dl> + <dt><a href="/es/Introducci%C3%B3n_a_la_Accesibilidad_Web_(externo)" title="es/Introducción_a_la_Accesibilidad_Web_(externo)">Introducción a la Accesibilidad Web (externo)</a></dt> + <dd>WAI: estrategias, pautas, recursos para hacer la Web accesible a personas con discapacidad.</dd> + </dl> + + <dl> + <dt><a href="/es/Pautas_de_Accesibilidad_al_Contenido_en_la_Web_1.0_(externo)" title="es/Pautas_de_Accesibilidad_al_Contenido_en_la_Web_1.0_(externo)">Pautas de Accesibilidad al Contenido en la Web 1.0 (externo)</a></dt> + <dd>"Estas pautas explican cómo hacer accesibles los contenidos de la Web a personas con discapacidad."</dd> + </dl> + + <dl> + <dt><a class="external" href="http://www.discapnet.es/web_accesible/tecnicas/WCAG10-TECHS-20001106_es.html">Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1.0</a></dt> + <dd>Este documento es el punto de acceso a una serie de documentos relacionados que describen técnicas para satisfacer los requisitos definidos en las "Pautas de Accesibilidad al Contenido en la Web 1.0"</dd> + </dl> + + <dl> + <dt><a class="external" href="http://www.discapnet.es/web_accesible/WCAG-REC-fact.html">FAQ sobre las "Pautas de Accesibilidad al Contenido en la Web 1.0"</a></dt> + <dd>Esta página de preguntas frecuentes proporciona información sobre la recomendación W3C WACG 1.0. Es una traducción de <em>Fact Sheet for "Web Content Accessibility Guidelines 1.0"</em></dd> + </dl> + + <dl> + <dt></dt> + <dd>When authored according to these guidelines, XUL is capable of generating accessible user interfaces. Coders, reviewers, designers and QA engineers should be familiar with these guidelines.</dd> + </dl> + + <p><span class="alllinks"><a href="/Special:Tags?tag=Accesibilidad&language=es" title="Special:Tags?tag=Accesibilidad&language=es">Ver más...</a></span></p> + </td> + <td> + <h4 id="Comunidad" name="Comunidad">Comunidad</h4> + + <ul> + <li>En la comunidad Mozilla... en inglés</li> + </ul> + + <p>{{ DiscussionList("support-accessibility", "mozilla.support.accessibility") }}</p> + + <p><span class="alllinks"><a href="/es/Accesibilidad/Comunidad" title="es/Accesibilidad/Comunidad">Ver más...</a></span></p> + + <h4 id="Herramientas" name="Herramientas">Herramientas</h4> + + <ul> + <li><a href="/es/HERA_(externo)" title="es/HERA_(externo)">HERA, test de accesibilidad</a></li> + <li><a href="/es/TAW_(externo)" title="es/TAW_(externo)">TAW, test de accesibilidad </a></li> + <li><a class="external" href="http://www.accesible.com.ar/examinator/">Test de accesibilidad eXaminator</a></li> + <li><a class="external" href="http://www.e-kaw.org/index.jsp">kit de accesibilidad web</a></li> + <li><a class="external" href="https://addons.mozilla.org/es/firefox/addon/claws/">Claws - emulador de lector de pantalla</a></li> + </ul> + + <p><span class="alllinks"><a href="/Special:Tags?tag=Accesibilidad:Herramientas&language=es" title="Special:Tags?tag=Accesibilidad:Herramientas&language=es">Ver más...</a></span></p> + + <h4 id="Temas_relacionados" name="Temas_relacionados">Temas relacionados</h4> + + <dl> + <dd>· <a href="/es/Desarrollo_Web" title="es/Desarrollo_Web">Desarrollo Web</a> · <a href="/es/Desarrollando_Mozilla" title="es/Desarrollando_Mozilla">Desarrollando Mozilla</a> ·</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<hr> +<p><small>{{ Note(1) }} <a class="external" href="http://es.wikipedia.org/wiki/Accesibilidad_web">Definición de la Wikipedia</a> </small></p> + +<p><span class="comment">Categorias</span></p> + +<p><span class="comment">Interwiki Language Links</span></p> + +<p>{{ languages( { "en": "en/Accessibility", "fr": "fr/Accessibilit\u00e9", "ja": "ja/Accessibility", "pl": "pl/Dost\u0119pno\u015b\u0107" } ) }}</p> diff --git a/files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html b/files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html new file mode 100644 index 0000000000..ffaade2cb1 --- /dev/null +++ b/files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html @@ -0,0 +1,266 @@ +--- +title: Etiquetas de texto y nombres +slug: Web/Accesibilidad/Understanding_WCAG/Etiquetas_de_texto_y_nombres +tags: + - Accesibilidad + - Etiquetas de texto + - WCAG +translation_of: Web/Accessibility/Understanding_WCAG/Text_labels_and_names +--- +<p><span class="seoSummary">Hay muchas situaciones en las cuales un control, dialogo o cualquier otra característica de un sitio web deberían recibir un nombre o etiqueta descriptiva para permitir a los usuarios de técnologías asistivas entender cual es su propósito y ser capaz de entenderlo y operarlo correctamente.</span> Hay un número de diferentes tipos de problemas en esta categoría, dependientes del contexto, y cada uno tiene su propia solución. Los diferentes problemas y soluciones son discutidas en las secciones posteriores.</p> + +<h2 id="Utilizar_el_atributo_alt_para_etiquetar_elementos_que_ocupen_un_área_que_tiene_el_atributo_href">Utilizar el atributo alt para etiquetar elementos que ocupen un área que tiene el atributo href</h2> + +<p>En mapas de imágenes, cada elemento {{htmlelement("area")}} con un atributo <code>alt</code> definiendo un nombre que describa el recurso al que enlaza el area. Fallar al hacer eso provoca que un mapa de imagen sea difícil de usar para usuarios que usen tecnología asistiva — ellos necesitan texto alternativo para ser capaces de entender el propósito de una imagen.</p> + +<h3 id="Ejemplos">Ejemplos</h3> + +<p>El siguiente ejemplo muestra un simple mapa de imagen (tomada de <a href="https://www.w3.org/TR/WCAG20-TECHS/H24.html">H24: Providing text alternatives for the area elements of image maps</a>):</p> + +<pre><img src="welcome.gif" usemap="#map1" + alt="Areas in the library. Select an area for +more information on that area." /> +<map id="map1" name="map1"> + <area shape="rect" coords="0,0,30,30" + href="reference.html" alt="Reference" /> + <area shape="rect" coords="34,34,100,100" + href="media.html" alt="Audio visual lab" /> +</map></pre> + +<p>Ver la <a href="/en-US/docs/Web/HTML/Element/area">página de referencia del elemento</a> <a href="/en-US/docs/Web/HTML/Element/area"><code><area></code></a> para unu ejemplo interactivo.</p> + +<h3 id="Ver_también">Ver también</h3> + +<ul> + <li>{{htmlelement("area")}}</li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H24.html">H24: Providing text alternatives for the area elements of image maps</a></li> +</ul> + +<h2 id="Los_diálogos_deberían_ser_etiquetados">Los diálogos deberían ser etiquetados</h2> + +<p>Para cualquier contenedor cuyo contenido actue como una caja de diálogo (por ejemplo, un modal preguntando al usuario realizar una elección o responder a una acción siendo tomada), debe tener una etiqueta descriptiva o nombre, para que la tecnología asistiva le permita al usuario descrubir fácilmente cual es su propósito.</p> + +<p>Una caja de diálogo es generalmente denominada con un ARIA <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role">role="dialog"</a></code> o <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">role="alertdialog"</a></code>; se puede usar tanto el atributo <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code> o <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> para proporcionar una etiqueta.</p> + +<h3 id="Ejemplos_2">Ejemplos</h3> + +<p>El siguiente ejemplo muestra una caja de dialogo sencilla, definida como <code>role="dialog"</code> y etiquetada con <code>aria-labelledby</code>.</p> + +<pre><div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> + <h2 id="dialog1Title">Your personal details were successfully updated</h2> + <p id="dialog1Desc">You can change your details at any time in the user account section.</p> + <button>Close</button> +</div></pre> + +<p>Si la caja de diálogo no tiene un encabezado, se puede usar <code>aria-label</code> para contener la etiqueta de texto:</p> + +<pre><div role="dialog" aria-label="Personal details updated confirmation"> + <p>Your personal details were successfully updated. You can + change your details at any time in the user account section.</p> + <button>Close</button> +</div></pre> + +<h3 id="Ver_también_2">Ver también</h3> + +<ul> + <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role">role="dialog"</a></code></li> + <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">role="alertdialog"</a></code></li> + <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code></li> + <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code></li> + <li><a href="https://www.w3.org/TR/wai-aria-1.2/#dialog">WAI-ARIA: dialog role</a></li> + <li><a href="https://www.w3.org/TR/wai-aria-practices/#dialog_roles_states_props">Dialog authoring practices</a></li> +</ul> + +<h2 id="Los_documentos_deben_tener_un_título">Los documentos deben tener un título</h2> + +<p>Es importante que cada documento HTML, incluya un elemento {{htmlelement("title")}} que describa el propósito de la página. Una técnica común de navegación para usuarios que usan tecnologías asistivas es inferir el contenido de la página leyendo su título. Si no hay título disponible, tienen que navegar por la página para determinar su contenido, lo cual puede ser un proceso largo y confuso.</p> + +<h3 id="Ejemplos_3">Ejemplos</h3> + +<p>El título para el artículo de refencia sobre el elemento {{htmlelement("title")}} es como sigue:</p> + +<pre><title>&lt;title&gt;: The Document Title element - HTML: Hypertext Markup Language | MDN</title></pre> + +<p>Otro ejemplo podría ser:</p> + +<pre><title>Fill in your details to register — myGov services</title></pre> + +<p>Para ayudar al usuario, se puede actualizar el titulo de la página para reflejar cambios significativos al estado de la página (como problemas en la validación de un formulario):</p> + +<pre><title>2 errors — Fill in your details to register — myGov services</title></pre> + +<h3 id="Ver_también_3">Ver también</h3> + +<ul> + <li>{{htmlelement("title")}}</li> +</ul> + +<h2 id="Contenido_incrustado_debe_ser_etiquetado">Contenido incrustado debe ser etiquetado</h2> + +<p>Asegurarse que elementos que incrusten contenido tengan un atributo título que describa el contenido incrustado. Esto incluye al elemento {{htmlelement("embed")}} y al elemento {{htmlelement("object")}}. Estos elementos son usualmente definidos por un contenido gráfico, similar a un elemento {{HTMLelement("img")}}. Un título descriptivo ayuda a los usuarios de tecnologías asistivas entender que muestra el elemento.</p> + +<h2 id="Figuras_con_leyendas_opcionales_deberían_ser_etiquetadas">Figuras con leyendas opcionales deberían ser etiquetadas</h2> + +<p>Para una mejor accesibilidad, incluir un {{HTMLElement("figcaption")}} dentro de un elemento {{HTMLElement("figure")}}, incluso si hacerlo es opcional técnicamente. La leyenda es adicional a cualquier texto alternativo en las imágenes dentro de la figura. La leyenda describe el proósito de una figura en el documento, que puede ser diferente de una descripción sencilla de un elemento visual, tal como lo proporciona el texto alternativo.</p> + +<h3 id="Ejemplo">Ejemplo</h3> + +<p>El siguiente ejemplo muestra código para una figura con un pie de página. El atributo <code>alt</code> del elemento {{htmlelement("img")}} describe la apariencia de la imagen; el elemento {{htmlelement("figcaption")}} lo describe desde una perspectiva funcional (en este caso, el nombre en latín de la flor de la imagen).</p> + +<pre><figure> + <img src="milkweed.jpg" + alt="Black and white close-up photo of milkweed flowers"> + <figcaption>Asclepias verticillata</figcaption> +</figure> +</pre> + +<h2 id="Los_elementos_de_un_conjuto_campos_deben_ser_etiquetados">Los elementos de un conjuto campos deben ser etiquetados</h2> + +<p>Los elementos de un conjunto de campos (fieldset) deben tener un texto descriptivo, similar a otros elementos del formulario. Utilice el elemento {{htmlelement("legend")}} para describir el propósito de un conjunto de campos (fieldset).</p> + +<h2 id="Utilizar_una_leyenda_para_etiquetar_un_conjunto_de_campos">Utilizar una leyenda para etiquetar un conjunto de campos</h2> + +<p>Al agrupar un conjunto de elementos de un formulario con un elemento {{htmlelement("fieldset")}}, se debería incluir un elemento {{htmlelement("legend")}} anidado dento de éste, conteninedo una clara descripción del grupo.</p> + +<p>Usuarios de tecnologías asistivas encuentras esta descripción útil cuando tratan de entender el propósito del grupo. Sin la leyenda, tienen que navegar individualmente por todos los controles del formulario en el grupo para inferir una idea del propósito general, lo que puede resultar confuso.</p> + +<h3 id="Ejemplo_2">Ejemplo</h3> + +<pre><form> + <fieldset> + <legend>Choose your favorite monster</legend> + + <input type="radio" id="kraken" name="monster"> + <label for="kraken">Kraken</label><br/> + + <input type="radio" id="sasquatch" name="monster"> + <label for="sasquatch">Sasquatch</label><br/> + + <input type="radio" id="mothman" name="monster"> + <label for="mothman">Mothman</label> + </fieldset> +</form></pre> + +<p>Puede ver un ejemplo interactivo en la <a href="/en-US/docs/Web/HTML/Element/fieldset"> página de referencia de <code><fieldset></code></a>.</p> + +<h3 id="Ver_también_4">Ver también</h3> + +<ul> + <li>{{htmlelement("fieldset")}}</li> + <li>{{htmlelement("legend")}}</li> +</ul> + +<h2 id="Los_elementos_de_un_formulario_deben_estar_etiquetados">Los elementos de un formulario deben estar etiquetados</h2> + +<p>Todos los elementos dentro de un formulario deben tener un elemento {{htmlelement("label")}} que identifique su propósito. Esto aplica a todos los tipos de elementos {{htmlelement("input")}}, como también para elementos {{htmlelement("button")}}, {{htmlelement("output")}}, {{htmlelement("select")}}, {{htmlelement("textarea")}}, {{htmlelement("progress")}} y {{htmlelement("meter")}}, como para cualquier elemento con el <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role"> ARIA role</a> <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role"><code>switch</code></a>.</p> + +<p>El elemento del formulario puede ser puesto dentro de un elemento {{htmlelement("label")}}, en cuyo caso la asociación entre el elemento del formulario y la etiqueta es obvia por la estructura. O, se puede crear una asociación entre un {{htmlelement("label")}} y el elemento del formulario al especificar el valor <code>id</code> del elemento del formulario y el valor del atributo <code>for</code> de la etiqueta.</p> + +<h3 id="Ejemplos_4">Ejemplos</h3> + +<pre><label>I agree to the terms and conditions. + <input type="checkbox" id="terms"> +</label> + +<input type="checkbox" id="emailoptin"> +<label for="emailoptin">Yes, please send me news about this product.</label> +</pre> + +<h2 id="Los_elementos_de_un_formulario_deberían_tener_una_etiqueta_de_texto_visible">Los elementos de un formulario deberían tener una etiqueta de texto visible</h2> + +<p>En adición a tener un elemento {{htmlelement("label")}} para cada elemento del formulario, estas etiquetas deberían ser visibles, no ocultarse. Las etiquetas visbles ayudan a <em>todos</em> los usuarios entender el propósito de un elemento de formulario. No dependa de un texto temporal porque éste desaparece tan pronto como el usuario empieza a escribir.</p> + +<h2 id="Los_elementos_marco_frame_deben_estar_etiquetados">Los elementos marco ('frame') deben estar etiquetados</h2> + +<p>Los elementos marco ('frame'), tanto {{htmlelement("iframe")}} como el obsoleto y antiguo {{htmlelement("frame")}}, deben tener un título para describir el contenido del marco. Utilice el atributo <code>title</code> para etiquetar un elemento 'frame'. Sin un título, los usuarios que usen una tecnología asistiva tienen que navegar dentro del marco para entender que contiene, lo que puede ser difícil y confuso. </p> + +<p>El elemento <code><frame></code> ya no forma parte de la especificación HTML en la versión HTML5. El soporte podría ser abandonado por los navegadores en el futuro. Además, es difícil para los lectores de pantalla el navegar páginas con elementos <code><frame></code>. Para una mejor accesibilidad y mantenimiento futuro, se debe rediseñar cualquier página que use marcos y reemplazarlos con el uso de CSS para lograr un diseño similar.</p> + +<p>Como una mejor práctica, también proporcionar un {{htmlelement("title")}} para el documento que esta encapsulado en el marco, con un contenido identico al atributo <code>title</code> del marco. (Esto asumiendo que el documento encapsulado esta en control de uno, si no, tratar de coincidir el atributo <code>title</code> del marco con el título del documento.) Algunos lectores de pantalla reemplazan el contenido del atributo <code>title</code> con el contenido del {{htmlelement("title")}} del documento encapsulado. Es más seguro y más accesible el proporcionar el mismo título en ambos lugares.</p> + +<h3 id="Ejemplos_5">Ejemplos</h3> + +<pre><iframe + title="MDN Web docs" + width="300" + height="200" + src="https://developer.mozilla.org"> +</iframe> + +</pre> + +<h2 id="Usar_el_atributo_alt_para_etiquetar_elementos_mglyph">Usar el atributo alt para etiquetar elementos mglyph</h2> + +<p>Al escribir ecuaciones con MathML, a cada elemento {{mathmlelement("mglyph")}} se le debe asignar el atributo <code>alt</code> conteniendo un nombre que describa el símbolo. Puesto que los elementos <code>mglyph</code> son usados para símbolos no estándar sin definiciones Unicode, los lectores de pantalla no serán capaces de automáticamente nombrarlos. El texto alternativo ayuda a los usuarios de lectores de pantalla entender el símbolo.</p> + +<h2 id="Los_encabezados_deben_ser_etiquetados">Los encabezados deben ser etiquetados</h2> + +<p>Asegurarse que los encabezados tengan un contenido no vacío y no estén ocultos como con el CSS <code>display:none</code> o <code>aria-hidden=true</code>. Los usuarios de lectores de pantalla confían en los encabezados para entender la estructura y el contenido de un documento.</p> + +<p>Además, es importante usar los <a href="/en-US/docs/Web/HTML/Element/Heading_Elements">elementos de encabezado</a> sólo para los encabezados de sección reales, y no como una forma rápida de hacer que el texto se destaque. Los lectores de pantalla suelen "hojear" los encabezados de una página, de manera muy parecida a los usuarios con visión, el texto que no sea encabezado que se marca con elementos de encabezamiento puede causar confusión.</p> + +<h2 id="Los_encabezados_deberían_tener_contenido_de_texto_visible">Los encabezados deberían tener contenido de texto visible</h2> + +<p>Asegurarse que los encabezados tengan un contenido no vacío y no estén ocultos como con el CSS <code>display:none</code> or <code>aria-hidden=true</code>. Los usuarios de lectores de pantalla confían en los encabezados para entender la estructura y el contenido de un documento. No use encabezados para marcar imágenes u otro contenido gráfico.</p> + +<h2 id="Utilizar_el_atributo_title_para_describir_el_contenido_de_un_<iframe>">Utilizar el atributo title para describir el contenido de un <iframe></h2> + +<p>Asegurarse que los elementos {{htmlelement("iframe")}} tienen un atributo <code>title</code> para describir el contenido de un marco. Sin un título, los usuarios de tecnologías asistivas tienen que navegar dentro del marco para entender que contiene, lo que puede ser difícil y confuso. </p> + +<p>Una mejor práctica consiste en proveer un {{htmlelement("title")}} al documento encapsulado por el marco, con un contenido identico al atributo <code>title</code> del marco. (Asumiendo que el documento encapsulado es propio, si no, tratar de hacer coincidir el atributo <code>title</code> del marco con el título del documento.) Algunos lectores de pantalla reemplazan el contenido del atributo <code>title</code> con el contenido del {{htmlelement("title")}} del documento encapsulado. Es más seguro y accesible definir el mismo título en ambos lugares.</p> + +<h2 id="Contenido_con_imágenes_deben_ser_etiquetados">Contenido con imágenes deben ser etiquetados</h2> + +<p>Proporcionar un texto descriptivo para todas las imágenes y elementos parecidos a imágenes que tengan contenido (es decir que no sean decorativos. Esto incluye imágenes SVG, elementos {{htmlelement("img")}}, {{htmlelement("canvas")}}, {{htmlelement("map")}}, y {{htmlelement("area")}}, así como elementos {{htmlelement("input")}} donde este definido <code>type=image</code> y elementos {{htmlelement("object")}} donde el <code>type</code> empiece con <code>image/</code>. La forma típica de hacer esto es con el atributo <code>alt</code>. Asegurarse de que la descripción trasmite lo que muestra la imagen</p> + +<h3 id="Ejemplo_3">Ejemplo</h3> + +<pre><img src="milkweed.jgp" + alt="Black and white close-up photo of milkweed flowers"> </pre> + +<h2 id="Elementos_interactivos_deben_ser_etiquetados">Elementos interactivos deben ser etiquetados</h2> + +<p>Si un elemento esta destinado para que los usuarios interactúen con él, debe estar etiquetado. Los elementos interactivos incluyen enlaces ({{htmlelement("a")}}), elementos de un formulario, botones, y cualquier elemento que tenga manejadores de eventos para ratón o teclado. La forma para etiquetar un elemento depende de su tipo: para elementos de un formulario, utilizar un {{htmlelement("label")}}; para enlaces, botones y elementos sobre los que se puede hacere click, el contenido del texto del elemento suele proporcionar la etiqueta. Si no existe otra opción para etiquetar un elemento, utilizar el atributo <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code>.</p> + +<h2 id="Usar_el_atributo_label_en_elementos_optgroup">Usar el atributo label en elementos optgroup</h2> + +<p>En un elemento {{htmlelement("optgroup")}}, utilizar el atributo <code>label</code> para describir el gupo para que tecnologías asistivas puedan acceder a dicha descripción para sus usuarios.</p> + +<h3 id="Ejemplo_4">Ejemplo</h3> + +<p>En este ejemplo, el atributo <code>label</code> en los elementos <code><optgroup></code> da un nombre de categoría para el grupo de opciones.</p> + +<pre><label for="dino-select">Choose a dinosaur:</label> +<select id="dino-select"> + <optgroup label="Theropods"> + <option>Tyrannosaurus</option> + <option>Velociraptor</option> + <option>Deinonychus</option> + </optgroup> + <optgroup label="Sauropods"> + <option>Diplodocus</option> + <option>Saltasaurus</option> + <option>Apatosaurus</option> + </optgroup> +</select></pre> + +<h2 id="Las_barras_de_herramientas_deben_ser_etiquetadas_cuando_haya_más_de_una_barra">Las barras de herramientas deben ser etiquetadas cuando haya más de una barra</h2> + +<p>Si se define más una barra de herramientas en una aplicación web utilizando el rol ARIA <code>toolbar</code>, se debe usar el atributo <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code> para etiquetar cada una de ellas de manera que pueda ser descrita por la tecnología de asistencia. Es una buena práctica etiquetar una barra de herramientas aún cuando solo haya una en la página</p> + +<h3 id="Ver_también_5">Ver también</h3> + +<ul> + <li><a href="https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.html">Ejemplo de una barra de herramienta W3C ARIA (W3C ARIA toolbar example)</a></li> +</ul> + +<h2 id="Criterios_de_aprobación_relacionados_a_WCAG">Criterios de aprobación relacionados a WCAG</h2> + +<dl> + <dt><a href="https://www.w3.org/TR/WCAG21/#non-text-content">1.1.1 Contenido no textual (A)</a></dt> + <dd>Todo contenido no textual que es presentado al usuario tiene un texto alternativo que sirve un propósito similar, excepto para las situaciones listadas en el enlace anterior.</dd> + <dt><a href="https://www.w3.org/TR/WCAG21/#link-purpose-in-context">2.4.4 Propósito del enlace (en contexto) (A)</a></dt> + <dd>El propósito de cada enlace puede determinarse a partir del texto del enlace o del texto del enlace en conjunto con contexto determinado programáticamente, salvo cuando el propósito del enlace sea ambiguo para los usuarios en general.</dd> + <dt><a href="https://www.w3.org/TR/WCAG21/#link-purpose-link-only">2.4.9 Propósito del enlace (sólo el enlace) (AAA)</a></dt> + <dd>Se dispone de un mecanismo que permite identificar el propósito de cada enlace a partir del texto del enlace solamente, excepto cuando el propósito del enlace es ambiguo para los usuarios en general.</dd> +</dl> diff --git a/files/es/web/accesibilidad/understanding_wcag/index.html b/files/es/web/accesibilidad/understanding_wcag/index.html new file mode 100644 index 0000000000..f58fae9c48 --- /dev/null +++ b/files/es/web/accesibilidad/understanding_wcag/index.html @@ -0,0 +1,56 @@ +--- +title: Understanding the Web Content Accessibility Guidelines +slug: Web/Accesibilidad/Understanding_WCAG +translation_of: Web/Accessibility/Understanding_WCAG +--- +<p class="summary">Esto es parte de un grupo de artículos que explican rápidamente los pasos necesario para cumplir con la normativa de W3C Web Content Accessibility Guides 2.0 o 2.1 (también conocida como WCAG).</p> + +<p>La norma WCAG 2.0 y 2.1 provee unas guías detalladas para lograr que el contenido de nuestro sitio sea accesible para personas con distintos tipos de discapacidades. Es exhaustivo y muy detallado, por lo que cuesta comprenderlo rápidamente. Por esta razón, hemos resumido los pasos a seguir para que puedas cumplir con las diferentes recomendaciones e incluimos links al pie para más detalles en los lugares necesarios.</p> + +<h2 id="Los_cuatro_principios">Los cuatro principios</h2> + +<p>La normativa WCAG tiene cuatro secciones, cuatro categorías en las cuales el contenido <strong>debe</strong> ser accesible (para más información puedes referirte a <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">Understanding the Four Principles of Accessibility (inglés)</a>).</p> + +<p>Cada uno de los siguientes enlaces te llevarán a páginas en las que podrás expandir tu conocimiento en cada una de las áreas de WCAG 2.0 y 2.1.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceptible:</a> Los usuarios deben poder percibir el contenido de alguna forma, a través de alguno de sus sentidos.</li> + <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Operable</a>: Los usuarios deben poder controlar los elementos de interfaz (por ejemplo, se deben poder cliquear botones de alguna forma, ya sea utilizando el ratón, teclado o comando de voz).</li> + <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Comprensible</a>: El contenido debe ser comprensible para los usuarios.</li> + <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robusto</a>: El contenido debe ser desarrollado utilizando estándares actuales que funcionarán en todos los navegadores del momento, hoy y en el futuro.</li> +</ul> + +<h2 id="Debo_usar_WCAG_2.0_o_2.1">Debo usar WCAG 2.0 o 2.1?</h2> + +<p>WCAG 2.1 es el estándar más reciente y relevante. Utilízalo para mejorar la calidad de navegación de los usuarios con discapacidades y para reducir las posibles acciones legales a los dueños del sitio web.</p> + +<p>Al momento de asignar recursos, ten como objetivo WCAG 2.0, luego sube a 2.1.</p> + +<h3 id="¿Qué_es_WCAG_2.1">¿Qué es WCAG 2.1?</h3> + +<p>WCAG 2.1 fue publicado el 5 de junio de 2018 como recomendación oficial. La Unión Europea (EU) lo adoptó como estándar en septiembre de ese mismo año. La W3C publicó un <a href="https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/">anuncio de prensa al respecto</a>.</p> + +<p>WCAG 2.1 incluye:</p> + +<ul> + <li>Toda la normativa WCAG 2.0 (literal, palabra-por-palabra)</li> + <li>17 nuevos Criterios de Conformidad en los niveles A / AA / AAA que se enfocan principalmente en las siguientes necesidades: + <ul> + <li>Accessbilidad móvil</li> + <li>Baja visión</li> + <li>Cognitivas</li> + </ul> + </li> + <li>Lee más sobre WCAG 2.1 (en inglés): + <ul> + <li>Deque: <a href="https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/">WCAG 2.1: What is Next for Accessibility Guidelines</a></li> + <li>TPG: <a href="https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/">Web Content Accessibilituy Guidelines (WCAG) 2.1</a></li> + </ul> + </li> +</ul> + +<h2 id="Legal">Legal</h2> + +<p>Esta guía tiene como objetivo proveer información para que puedas construir mejores sitios, más accesibles. Sin embargo, no somos abogados y nada de esto es un asesoramiento legal. Si estás preocupado/a por las implicaciones legales de la accesibilidad web recomendamos que investigues la legislación de tu país o que consultes a un abogado calificado.</p> + +<p><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">¿Qué es la accesibilidad?</a> y <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">guías de accesibilidad y sobre la ley</a> proveen más información al respecto (en inglés).</p> diff --git a/files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html b/files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html new file mode 100644 index 0000000000..2db0f4e251 --- /dev/null +++ b/files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html @@ -0,0 +1,162 @@ +--- +title: Contraste del color +slug: Web/Accesibilidad/Understanding_WCAG/Perceivable/Color_contraste +tags: + - Accesibilidad + - Perceptible + - contraste +translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast +--- +<p>El <a href="https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio">contraste del color</a> entre el fondo y el contenido del primer plano (que suele ser texto) debe ser lo suficientemente alto como para garantizar la legibilidad.</p> + +<p>Al diseñar interfaces legibles para diferentes capacidades de visión, las directrices de la WCAG recomiendan las siguientes relaciones de contraste:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tipo de contenido</th> + <th scope="col">Relación mínima (nivel AA)</th> + <th scope="col">Relación mejorada (nivel AAA)</th> + </tr> + </thead> + <tbody> + <tr> + <td>Cuerpo de texto</td> + <td>4.5 : 1</td> + <td>7 : 1</td> + </tr> + <tr> + <td>Texto a gran escala (120-150% mayor que el cuerpo de texto)</td> + <td>3 : 1</td> + <td>4.5 : 1</td> + </tr> + <tr> + <td>Componentes activos de la interfaz de usuario y objetos gráficos como iconos y gráficos</td> + <td>3 : 1</td> + <td>No definido</td> + </tr> + </tbody> +</table> + +<p>Estas proporciones no se aplican al texto "incidental", como controles inactivos, logotipos o texto puramente decorativo.</p> + +<p>Consulta la sección {{anch("Solución")}} a continuación para obtener más información.</p> + +<p>Tener un buen contraste de color en tu sitio web beneficia a todos tus usuarios, pero es particularmente beneficioso para los que tienen cierto tipo de ceguera al color y otras afecciones similares, como los que experimentan una baja sensibilidad al contraste y tienen dificultades para diferenciar colores parecidos. Esto se debe a que no distinguen las áreas brillantes y oscuras con tanta facilidad como las personas que no tienen esa discapacidad, y por lo tanto tienen problemas para ver los bordes y otros detalles. </p> + +<p>Es bueno tener un diseño atractivo en tu sitio web, pero el diseño es inútil si tus usuarios no pueden leer el contenido.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Veamos algunos ejemplos simples con código HTML y CSS:</p> + +<pre class="brush: html notranslate"><div class="good">Buen contraste</div> +<div class="bad">Mal contraste</div></pre> + +<pre class="brush: css notranslate">div { + /* General div styles here */ +} + +.good { + background-color: #fae6fa; +} + +.bad { + background-color: #400064; +}</pre> + +<p>Ambos fragmentos de texto tienen color negro por defecto. El <code><div></code> "good" tiene un color de fondo púrpura claro, lo que hace que el texto sea fácil de leer:</p> + +<div class="hidden"> +<h4 id="example1">example1</h4> + +<pre class="brush: html notranslate"> <div class="good"> + Good contrast + </div></pre> + +<pre class="brush: css notranslate">div { + font-family: sans-serif; + text-align: center; + font-size: 2rem; + font-weight: bold; + width: 250px; + padding: 30px; + border-radius: 20px; + box-shadow: 1px 1px 1px black; +} + +.good { + background-color: #fae6fa; +}</pre> +</div> + +<p>{{EmbedLiveSample('example1', '100%', '100')}}</p> + +<p>El <code><div></code> "bad", por otro lado, tiene un color de fondo púrpura muy oscuro, lo que hace que el texto sea mucho más difícil de leer:</p> + +<div class="hidden"> +<h4 id="example2">example2</h4> + +<pre class="brush: html notranslate"> <div class="bad"> + Bad contrast + </div></pre> + +<pre class="brush: css notranslate">div { + font-family: sans-serif; + text-align: center; + font-size: 2rem; + font-weight: bold; + width: 250px; + padding: 30px; + border-radius: 20px; + box-shadow: 1px 1px 1px black; +} + +.bad { + background-color: #400064; +}</pre> +</div> + +<p>{{EmbedLiveSample('example2', '100%', '100')}}</p> + +<dl> +</dl> + +<h2 id="Solución">Solución</h2> + +<p>Al elegir un esquema de color para tu sitio web, selecciona colores de primer plano y de fondo que tengan un buen contraste. Haz que el contraste de color sea lo mejor posible dentro de las limitaciones de tu diseño — preferiblemente elige el nivel AAA (ver 1.4.6 más abajo), pero al menos cumple con el nivel AA (ver 1.4.3 más abajo).</p> + +<p>Si incluyes contenido no textual, como vídeo o animación, debes seguir 1.4.11 (nuevamente, ver más abajo).</p> + +<p>Para verificar el contraste a medida que seleccionas los colores puedes utlizar una herramienta como <a class="external external-icon" href="http://webaim.org/resources/contrastchecker/" rel="noopener">Color Contrast Checker</a> de WebAIM.</p> + +<p>También puedes comprobar el contraste de color sobre la marcha utilizando las herramientas para desarrolladores de Firefox— ver nuestra guía <a href="/en-US/docs/Tools/Accessibility_inspector">Accessibility inspector</a>, y en particular la sección <a href="/en-US/docs/Tools/Accessibility_inspector#Check_for_accessibility_issues">Check for accessibility issues</a>. Prueba a usarlo en los ejemplos en vivo en la sección de descripción.</p> + +<h2 id="Criterios_de_conformidad_relacionados_con_WCAG">Criterios de conformidad relacionados con WCAG</h2> + +<dl> + <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">1.4.3 Contraste mínimo (AA)</a></dt> + <dd>El contraste de color entre el fondo y el contenido del primer plano debe tener un nivel mínimo para garantizar la legibilidad: + <ul> + <li>El texto y el fondo deben tener una relación de contraste de al menos 4.5:1.</li> + <li>Los encabezados (o simplemente el texto más grande) deben tener una relación de contraste de al menos 3:1. El texto más grande se define como de al menos 18pt, o 14pt en negrita.</li> + </ul> + </dd> + <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-enhanced">1.4.6 Contraste mejorado (AAA)</a></dt> + <dd>Esto sigue y se basa en el criterio 1.4.3. + <ul> + <li>El texto y el fondo deben tener una relación de contraste de al menos 7:1.</li> + <li>Los encabezados (o simplemente el texto más grande) deben tener una relación de contraste de al menos 4.5:1.</li> + </ul> + </dd> + <dt><a href="https://www.w3.org/TR/WCAG21/#non-text-contrast">1.4.11 Contraste no textual (AA)</a> (añadido en 2.1)</dt> + <dd>Debe haber una relación mínima de contraste de color de 3 a 1 para los componentes de la interfaz de usuario y los objetos gráficos.</dd> +</dl> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#Multiple_labels">Multiple labels</a></li> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Understanding Non-Text Contrast</a></li> +</ul> diff --git a/files/es/web/accesibilidad/understanding_wcag/perceivable/index.html b/files/es/web/accesibilidad/understanding_wcag/perceivable/index.html new file mode 100644 index 0000000000..6bf99039f8 --- /dev/null +++ b/files/es/web/accesibilidad/understanding_wcag/perceivable/index.html @@ -0,0 +1,336 @@ +--- +title: Perceivable +slug: Web/Accesibilidad/Understanding_WCAG/Perceivable +translation_of: Web/Accessibility/Understanding_WCAG/Perceivable +--- +<p class="summary">Este artículo ofrece consejos prácticos sobre cómo hacer que tu sitio web cumpla con los criterios de <strong>Percepción</strong> de WCAG 2.0 y 2.1. Los estados perceptivos que los usuarios deben poder reconocer utilizando alguno de sus sentidos.</p> + +<div class="note"> +<p><strong>Nota</strong>: Para leer las definiciones de la W3C sobre Percepción y las guías para cumplir con los criterios dirígete a <a href="https://www.w3.org/TR/WCAG21/#perceivable">Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.</a></p> +</div> + +<h2 id="Pauta_1.1_—_Dar_alternativas_de_texto_para_contenido_no_textual.">Pauta 1.1 — Dar alternativas de texto para contenido no textual.</h2> + +<p>La clave aquí es convertir el texto a otros formatos que puedan ser entendidos por personas con otras capacidades; ya sea si utilizan un screen-reader, zoom o un lector de braille. El contenido no textual se refiere a elementos multimedia como imágenes, audio y vídeo.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Criterio de éxito</th> + <th scope="col">Cómo cumplir</th> + <th scope="col">Recursos prácticos</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="5">1.1.1 Alternativas textuales (A)</td> + <td>Toda imagen que sea útil para el usuario debe tener un texto alternativo.</td> + <td><a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Texto alternativo.</a></td> + </tr> + <tr> + <td> + <p>Las imágenes complejas o gráficos deben tener una alternativa accesible, ya sea en al misma página o en una externa. Utiliza un elemento de link en vez del atributo <code>longdesc</code>.</p> + </td> + <td> + <p>Una alternativa textual o una tabla puede resolverlo (ver <a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a> y <a href="/en-US/docs/Learn/Accessibility/HTML#Other_text_alternative_mechanisms">Other text alternative mechanisms</a> para leer sobre el argumento en contra de <code>longdesc</code>.</p> + </td> + </tr> + <tr> + <td>El contenido multimedia (por ejemlo, audio o vídeo) debería tener por lo menos una descripción accesible disponible (captions o similar).</td> + <td> + <p>Ver <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">alternativas de texto</a> para opciones de captions, y <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a>, <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a> o <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> para otras alternativas.</p> + </td> + </tr> + <tr> + <td>Los elementos de interfaz como botones o elementos de formulario deberán tener <code>label</code>s que describan su propósito.</td> + <td>Deberás asegurarte de que los botones describan su función (por ejemplo, <code><button>Subir imagen</button></code>). Para más información ver <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>.</td> + </tr> + <tr> + <td> + <p>Implementa elementos decorativos (imágenes o vídeos) de manera que sea invisibles para lectores de pantalla, de esta forma evitarás confundir a estos usuarios.</p> + </td> + <td> + <p>Las imágenes decorativas deben ser implementadas utilizando la propiedad <code>background-image</code><em>. </em>Si debes incluir una imagen con la etiqueta {{htmlelement("img")}} deberás agregarle un atributo <code>alt</code> vacío, de otra manera los lectores de pantalla podrían leerlo.</p> + + <p>Si incluyes un vídeo o audio en tu sitio que se reproduce automáticamente intenta de que sea lo menos molesto posible. No hagas que se vea ni actúe como contenido y provee una forma de apagarlo.</p> + </td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: Ver también <a href="https://www.w3.org/TR/WCAG21/#text-alternatives">WCAG description for Guideline 1.1: Text alternatives</a>.</p> +</div> + +<h2 id="Pauta_1.2_—_Proporcionar_alternativas_para_los_medios_tempo-dependientes.">Pauta 1.2 — Proporcionar alternativas para los medios tempo-dependientes.</h2> + +<p>Los medios tempo-dependientes se refieren a multimedia con una duración (audio y vídeo, por ejemplo). Ten en cuenta que si este contenido multimedia funciona como una alternativa a un contenido textual no necesitas proveer otra alternavtiva.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Criterio de éxito</th> + <th scope="col">Cómo cumplir</th> + <th scope="col">Recursos prácticos</th> + </tr> + <tr> + <td colspan="1" rowspan="1">1.2.1 Provee alternativas para multimedia de solo audio o solo vídeo (A)</td> + <td>A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video).</td> + <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td> + </tr> + <tr> + <td colspan="1">1.2.2 Provee captions para los vídeos (A)</td> + <td>You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video.</td> + <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a> for HTML5 video captions, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other technologies. See also <a href="https://support.google.com/youtube/answer/2734796?hl=en">Add your own subtitles & closed captions</a> (YouTube).</td> + </tr> + <tr> + <td colspan="1"> + <p>1.2.3 Provee texto alternativo o una descripción para el audio del vídeo (A)</p> + </td> + <td>You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone.</td> + <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td> + </tr> + <tr> + <td colspan="1">1.2.4 Provee captions para audio en vivo (AA)</td> + <td>You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.)</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.2.5 Provee descripciones de adio para vídeo pre-grabado (AA)</td> + <td>Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.2.6 Provee lenguaje de signos equivalente a el audio pre-grabado (AAA)</td> + <td>An equivalent sign language video should be provided for any prerecorded content containing audio.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.2.7 Provee un vídeo extendido con descripciones de audio (AAA)</td> + <td>Where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g. there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions).</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.2.8 Provee una alternativa para los elementos multimedia pre-grabados (AAA)</td> + <td>For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content.</td> + <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td> + </tr> + <tr> + <td colspan="1">1.2.9 Provee una transcripción para el audio en vivo (AAA)</td> + <td>For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content.</td> + <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td> + </tr> + </thead> +</table> + +<div class="note"> +<p><strong>Nota</strong>: Ver también la descripción de <a href="https://www.w3.org/TR/WCAG21/#time-based-media">WCAG Guideline 1.2: Time-based Media: Provide alternatives for time-based media</a>.</p> +</div> + +<h2 id="Pauta_1.3_—_Crear_contenido_que_pueda_presentarse_de_diferentes_formas">Pauta 1.3 — Crear contenido que pueda presentarse de diferentes formas</h2> + +<p>Esta pauta hace referencia a la posibilidad de que todo contenido pueda ser consumido de distintas formas, adaptándose a las necesidades del usuario.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Criterios de éxito</th> + <th scope="col">Cómo cumplir</th> + <th scope="col">Recursos prácticos</th> + </tr> + <tr> + <td colspan="1" rowspan="1">1.3.1 Info and relationships (A)</td> + <td> + <p>Any content structure — or visual relationship made between content — can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are:</p> + + <ul> + <li>Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.</li> + <li>Image alt text — content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g. <code>alt</code> text), or otherwise is easy to associate (e.g. describes it and is sat right next to it). This should means that the full meaning can still be inferred even if you can't see the image.</li> + <li>Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).</li> + </ul> + </td> + <td>The whole of + <p><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a> is packed with information about this, but you should particularly refer to <a href="/en-US/docs/Learn/Accessibility/HTML#Good_semantics">Good semantics</a>, <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>, and <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a>.</p> + </td> + </tr> + <tr> + <td colspan="1">1.3.2 Meaningful content sequence (A)</td> + <td>A sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g. headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the markup.</td> + <td>Again, refer to <a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a>.</td> + </tr> + <tr> + <td colspan="1">1.3.3 Sensory characteristics (A)</td> + <td> + <p>Instructions for operating controls or understanding content do not rely on a single sense — this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. So for example:</p> + + <ul> + <li>"Click the round button to continue" — The button should be clearly labelled so that it is obvious that it is the button you need to press. If there are multiple buttons, make sure there are all clearly labelled to distinguish their function.</li> + <li>"Listen to the audio instructions for guidance" — This is obviously problematic — audio will be inaccessible to those with heading impairments, whereas text can be read, but also spoken by a screenreader if required.</li> + <li>"Swipe from the right hand side of the screen to reveal the menu" — some users might not be able to swipe the screen, either due to disability or because their device does not support touch. An alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.</li> + </ul> + + <div class="note"> + <p><strong>Note</strong>: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.</p> + </div> + </td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.3.4 Orientation (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td>Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.</td> + <td> + <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html">Understanding Orientation</a> </p> + </td> + </tr> + <tr> + <td colspan="1">1.3.5 Identify Input Purpose (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td> + <p> </p> + + <p>Follow the list of <a href="https://www.w3.org/TR/WCAG21/#input-purposes">53 input fields</a> to programmatically identify the purpose of a field. </p> + </td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">Understanding Identify Input Purpose</a></td> + </tr> + <tr> + <td colspan="1">1.3.6 Identify Purpose (AAA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td>In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.</td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-purpose.html">Understanding Identify Purpose</a></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: Ver también la descripción de WCAG: <a href="https://www.w3.org/TR/WCAG21/#adaptable">Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.</a></p> +</div> + +<h2 id="Pauta_1.4_Facilitar_a_los_usuarios_ver_y_oír_el_contenido_incluyendo_la_separación_entre_el_primer_plano_y_el_fondo">Pauta 1.4: Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo</h2> + +<p>Esta pauta tiene como objetivo la creación de contenido que sea fácil de diferenciar del fondo y otras decoraciones. El ejemplo clásico es sobre color (tanto en relación al contraste como utilizarlo para transmitir información), pero aplica también en otras situaciones.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Criterios de éxito</th> + <th scope="col">Cómo cumplir</th> + <th scope="col">Recursos prácticos</th> + </tr> + <tr> + <td colspan="1" rowspan="1">1.4.1 Use of color (A)</td> + <td> + <p>Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of "required" would be more appropriate.</p> + </td> + <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a> and <a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#Multiple_labels">Multiple labels</a>.</td> + </tr> + <tr> + <td colspan="1">1.4.2 Audio controls (A)</td> + <td>For any audio that plays for longer than three seconds, accessible controls should be provided to play and pause the audio/video, and mute/adjust volume.</td> + <td>Use native <code><button></code>s to provide accessible keyboard controls, as shown in <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player syling basics</a>.</td> + </tr> + <tr> + <td colspan="1">1.4.3 Minimum contrast (AA)</td> + <td> + <p>The color contrast between background and foreground content should be at a minimum level to ensure legibility:</p> + + <ul> + <li>Text and its background should have a contrast ratio of at least 4.5.1.</li> + <li>Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.</li> + </ul> + </td> + <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td> + </tr> + <tr> + <td colspan="1">1.4.4 Resize text (AA)</td> + <td>The page should be readable and usable when the text size is doubled. This means that designs should be responsive, so that when the text size is increased, the content is still accessible.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.5 Images of text (AA)</td> + <td>Images should NOT be used to present content where text would do the job. For example, if an image is mostly textual, it could be represented using text as well as images.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.6 Enhanced contrast (AAA)</td> + <td> + <p>This follows, and builds on, criterion 1.4.3.</p> + + <ul> + <li>Text and its background should have a contrast ratio of at least 7.1.</li> + <li>Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.</li> + </ul> + </td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.7 Low or no background audio (AAA)</td> + <td>Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.8 Visual presentation (AAA)</td> + <td> + <p>For text content presentation, the following should be true:</p> + + <ul> + <li>Foreground and background colors should be user-selectable.</li> + <li>Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.</li> + <li>Text should not be fully justified (e.g. <code>text-align: justify;</code>)</li> + <li>line height should be at least 1.5 times the text size within paragraphs (e.g. <code>line-height: 1.5;</code>), and at least 2.25 times the text size between paragraphs (e.g. <code>padding: 2.25rem;</code>)</li> + <li>When the text size is doubled, the content should not need to be scrolled.</li> + </ul> + </td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.9 Images of text (No Exception) (AAA)</td> + <td>Text should not be presented as part of an image unless it is purely decoration (i.e. it does not convey any content), or cannot be presented in any other way.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.10 Reflow (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td> + <ul> + <li>No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic) </li> + <li>No vertical scrolling for top-to-bottom languages (like Japanese)</li> + <li>Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).</li> + </ul> + </td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html">Understanding Reflow</a></td> + </tr> + <tr> + <td colspan="1">1.4.11 Non-Text Contrast(AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td>Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. </td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Understanding Non-Text Contrast</a></td> + </tr> + <tr> + <td colspan="1">1.4.12 Text Spacing (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td> + <p>No loss of content or functionality occurs when the following styles are applied: </p> + + <ul> + <li>Line height (line spacing) to at least 1.5 times the font size;</li> + <li>Spacing following paragraphs to at least 2 times the font size;</li> + <li>Letter spacing (tracking) to at least 0.12 times the font size;</li> + <li>Word spacing to at least 0.16 times the font size.</li> + </ul> + </td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html">Understanding Text Spacing</a></td> + </tr> + <tr> + <td colspan="1">1.4.13 Content on Hover or Focus (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td> + <p>Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:</p> + + <ul> + <li>dismissable (can be closed/removed)</li> + <li>hoverable (the additional content does not disappear when the pointer is over it) </li> + <li>persistent (the additional content does not disappear without user action)</li> + </ul> + </td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html">Understanding Content on Hover or Focus</a></td> + </tr> + </thead> +</table> + +<div class="note"> +<p><strong>Nota</strong>: Ver también la descripción de WCAG: <a href="https://www.w3.org/TR/WCAG21/#distinguishable">Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background.</a><a href="https://www.w3.org/TR/WCAG21/#distinguishable">.</a></p> +</div> diff --git a/files/es/web/accesibilidad/understanding_wcag/teclado/index.html b/files/es/web/accesibilidad/understanding_wcag/teclado/index.html new file mode 100644 index 0000000000..239dd6727b --- /dev/null +++ b/files/es/web/accesibilidad/understanding_wcag/teclado/index.html @@ -0,0 +1,92 @@ +--- +title: Teclado (Keyboard) +slug: Web/Accesibilidad/Understanding_WCAG/Teclado +tags: + - Accesibilidad + - teclado +translation_of: Web/Accessibility/Understanding_WCAG/Keyboard +--- +<div>Para ser completamente accesible, una página web debe ser operable por alguién utilizando únicamente un teclado para acceder y controlarla. Esto incluye usuarios de lectores de pantalla, pero también puede incluir a quienes tienen dificultades utilizando un dispositivo apuntador como un ratón o una bola de rastreo, o aquellos cuyo ratón no esta funcionando temporalmente, o la gente que simplemente prefiere usar un teclado como entrada siempre que les sea posible.</div> + +<h2 id="Los_elementos_enfocables_deben_tener_una_semántica_interactiva">Los elementos enfocables deben tener una semántica interactiva</h2> + +<p>Si un elemento puede ser enfocado utilizando un teclado, entonces debería ser interactivo, es decir, el usuario debería ser capaz de hacer algo y producir un cambio de algún tipo (por ejemplo, activar un enlace o cambiar una opción).</p> + +<div class="blockIndicator note"> +<p><strong>Nota: </strong>Una excepción importante a esta regla es si el elemento tiene aplicado <code>role="document"</code>, <strong>dentro </strong>un contexto interactivo (como un <code>role="application"</code>). En tal caso, enfocar el documento anidado es la única forma de devolver la tecnología de asistencia a un estado de no interactividad (comúnmente llamado "modo navegador").</p> +</div> + +<p>La mayoría de los elementos son enfocables por defecto, y se puede hacer que un elemento sea enfocable al añadir el atributo <code>tabindex=0</code>. Sin embargo, sólo se debería añadir <code>tabindex</code> si el elemento también se hace interactivo, por ejemplo, definiendo los eventos de teclado apropiados para los manejadores de eventos.</p> + +<h3 id="Ver_también">Ver también</h3> + +<ul> + <li>Atributo HTML global <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></li> + <li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> + <li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> +</ul> + +<h2 id="Evitar_usar_el_atributo_tabindex_con_un_valor_mayor_a_cero">Evitar usar el atributo <code>tabindex</code> con un valor mayor a cero</h2> + +<p>El atributo <code>tabindex</code> indica que un elemento es enfocable utilizando el teclado. Un valor de cero indica que el elemento es parte del orden de enfoque normal, que está basado en el orden de los elementos en el documento HTML. Un valor positivo pone al elemento adelante de aquellos con el orden normal; elementos con valores positivos son enfocados en el orden del valor de <code>tabindex</code> (1, luego 2, después 3, etc.).</p> + +<p>Esto genera una confusión para usuarios que solo usen el teclado cuando el orden del enfoque difiera al orden lógico de la página. Una mejor estrategia es estructurar el documento HTML para que los elementos enfocables estén es un orden lógico, sin la necesidad de reordenarlos con un valor positivo de <code>tabindex</code>.</p> + +<h3 id="Ver_también_2">Ver también</h3> + +<ul> + <li>Atributo HTML globlal <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></li> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">Entendiento el orden del enfoque</a></li> + <li><a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">No use un tabindex mayor que 0</a></li> +</ul> + +<h2 id="Los_elementos_a_los_que_se_les_puede_hacer_click_deben_ser_enfocables_y_deberían_tener_semánticas_interactivas">Los elementos a los que se les puede hacer click deben ser enfocables y deberían tener semánticas interactivas</h2> + +<p>Si a un elemento se le puede hacer click con un dispositivo apuntador, como un ratón, entonces también debería enfocable utilizando el teclado, y el usuario debería ser capaz de hacer algo al interactuar con este.</p> + +<p>A un elemento se le puede hacer click si tiene in manejador de evento<code> onclick</code> definido. Se puede hacer enfocable al añadir un atributo-valor <code>tabindex=0</code>. Se puede hacer que se opere con un teclado al definir un manejador de evento <code>onkeydown</code>; en la mayoría de los casos, la acción tomada por el manejador de eventos debería ser la misma para los dos tipos de eventos</p> + +<h3 id="Ver_también_3">Ver también</h3> + +<ul> + <li>El atributo global HTML <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></li> + <li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> + <li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> +</ul> + +<h2 id="Los_elementos_interactivos_deben_ser_capaz_de_ser_activos_utilizando_un_teclado">Los elementos interactivos deben ser capaz de ser activos utilizando un teclado</h2> + +<p>Si el usuario puede interactuar con un elemento utilizando el tacto o un dispositivo apuntador, entonces el elemento debería ser también capaz de interactuar con el teclado, Es decir, si hay manejadores de evento definidos para los eventos al tacto y al hacer click, también debería haber manejadores de eventos para el teclado. Los manejadores de eventos para el teclado deberían realizar la misma interacción que sus contrapartes con el tacto y al hacer click.</p> + +<h3 id="Ver_también_4">Ver también</h3> + +<ul> + <li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> + <li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> +</ul> + +<h2 id="Los_elementos_interactivos_deben_ser_enfocables">Los elementos interactivos deben ser enfocables</h2> + +<p>Si el usuario puede interactuar con un elemento (por ejemplo, usando el tacto o con un dispositivo apuntador) entonces debería ser enfocable utilizando el teclado. Puede hacerse enfocable al añadirle el atributo-valor<code> tabindex=0</code>. Eso añadirá el elemento a la lista de elementos que pueden ser enfocados al presionar la tecla <kbd>Tab</kbd>, en la secuencia en que dichos elementos se encuentran definidos en el documento HTML.</p> + +<h3 id="Ver_también_5">Ver también</h3> + +<ul> + <li>Atributo global HTML <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></li> +</ul> + +<h2 id="Elementos_enfocables_deben_tener_un_estilo_al_estar_enfocados">Elementos enfocables deben tener un estilo al estar enfocados</h2> + +<p>Cualquier elemento que pueda recibir el enfoque desde el teclado, debería tener un estilo visible que indique cuando el elemento esta enfocado. Se puede hacer esto con la pseudo-clase de CSS <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code>.</p> + +<p>Elementos enfocables estándar como enlaces y los campos de entrada reciben un estilo especial por parte del navegador de forma predeterminada, por lo que podría no ser necesario especificar un estilo de enfoque para éstos, a menos que se quiera que el estilo de enfoque sea más distintivo.</p> + +<p>Si se crean componentes enfocables, se debe estar seguro de que también se defina el estilo de enfoque para éstos.</p> + +<p>If you create your own focusable components, be sure that you also define focus styling for them.</p> + +<h3 id="Ver_también_6">Ver también</h3> + +<ul> + <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15.html">Utilizando CSS para cambiar la presentación de un componente UI cuando reciba el enfoque</a></li> +</ul> |