diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
| commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
| tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/learn/accessibility | |
| parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
| download | translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2 translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip | |
initial commit
Diffstat (limited to 'files/es/learn/accessibility')
| -rw-r--r-- | files/es/learn/accessibility/accessibility_troubleshooting/index.html | 144 | ||||
| -rw-r--r-- | files/es/learn/accessibility/css_and_javascript/index.html | 359 | ||||
| -rw-r--r-- | files/es/learn/accessibility/html/index.html | 588 | ||||
| -rw-r--r-- | files/es/learn/accessibility/index.html | 60 | ||||
| -rw-r--r-- | files/es/learn/accessibility/mobile/index.html | 346 | ||||
| -rw-r--r-- | files/es/learn/accessibility/qué_es_la_accesibilidad/index.html | 211 |
6 files changed, 1708 insertions, 0 deletions
diff --git a/files/es/learn/accessibility/accessibility_troubleshooting/index.html b/files/es/learn/accessibility/accessibility_troubleshooting/index.html new file mode 100644 index 0000000000..2509ef8aa5 --- /dev/null +++ b/files/es/learn/accessibility/accessibility_troubleshooting/index.html @@ -0,0 +1,144 @@ +--- +title: 'Evaluación: Solución de problemas de accesibilidad' +slug: Learn/Accessibility/Accessibility_troubleshooting +tags: + - Accesibilidad + - Aprender + - CSS + - Evaluación + - HTML + - JavaScript + - Principiante + - WAI-ARIA +translation_of: Learn/Accessibility/Accessibility_troubleshooting +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div> + +<p class="summary">En la evaluación de este módulo, le presentamos un sitio simple con una serie de problemas de accesibilidad que necesita diagnosticar y corregir.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisitos previos:</th> + <td>Conocimiento de informática básica, una comprensión básica de HTML, CSS y JavaScript, una comprensión de los artículos anteriores del curso.</td> + </tr> + <tr> + <th scope="row">Objectivo:</th> + <td>Probar los conocimientos básicos de los fundamentos de accesibilidad.</td> + </tr> + </tbody> +</table> + +<h2 id="Punto_de_partida">Punto de partida</h2> + +<p>Para iniciar esta evaluación, debe ir y tomar el <a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">archivo ZIP que contiene los archivos que componen el ejemplo.</a> Descomprima el contenido en un nuevo directorio en algún lugar del equipo local.</p> + +<p>Alternativamente, podría usar un sitio como <a href="http://jsbin.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a> para hacer su evaluación. Puede pegar el HTML, CSS y JavaScript en uno de estos editores en línea. Si el editor en línea que está utilizando no tiene un panel CSS/JS independiente, no dude en colocarlos en elementos apropiados <code><style></code> / <code><script>.</code> </p> + +<p>El sitio de evaluación terminado debe tener este aspecto:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p> + +<p>Verá algunas diferencias/problemas con la visualización del estado inicial de la evaluación — esto se debe principalmente a las diferencias en el marcado, que a su vez causan algunos problemas de estilo, ya que el CSS no se aplica correctamente. No se preocupe, ¡estará solucionando estos problemas en las próximas secciones!</p> + +<div class="blockIndicator note"> +<table style="height: 73px; width: 535px;"> + <tbody> + <tr> + <td style="width: 555px; height: 63px;"> + <p><strong>Nota: </strong>Si se queda atorado, pídanos ayuda — consulta la sección <a href="https://developer.mozilla.org/es/docs/Learn/Accessibility/Accessibility_troubleshooting#Assessment_or_further_help">Evaluación o más ayuda</a> en la parte inferior de esta página.</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2> + +<p>Para este proyecto, se le presenta un sitio ficticio de la naturaleza que muestra un artículo "fáctico" sobre los osos. Tal como está, tiene una serie de problemas de accesibilidad: su tarea es explorar el sitio existente y solucionarlos lo mejor de sus capacidades, respondiendo a las preguntas que se indican a continuación.</p> + +<h3 id="Color">Color</h3> + +<p>El texto es difícil de leer debido al esquema de color actual. ¿Puede realizar una prueba del contraste de color actual (texto/fondo), notificar los resultados de la prueba y, a continuación, corregirla cambiando los colores asignados?</p> + +<h3 id="HTML_Semántico">HTML Semántico</h3> + +<ol> + <li>El contenido todavía no es muy accesible: informe sobre lo que sucede cuando intenta navegar por él mediante un lector de pantalla.</li> + <li>¿Puede actualizar el texto del artículo para facilitar la navegación de los usuarios del lector de pantalla?</li> + <li>La parte del menú de navegación del sitio (limitada por <code><div class="nav"></div></code>) podría ser más accesible poniéndolo en un elemento semántico HTML5 adecuado. ¿A cuál debería actualizarse? Realice la actualización.</li> +</ol> + +<div class="note"> +<table style="height: 117px; width: 535px;"> + <tbody> + <tr> + <td style="width: 555px; height: 63px;"> + <p><strong>Nota: </strong>Tendrá que actualizar los selectores de reglas CSS que estilan las etiquetas a sus equivalentes adecuados para los encabezados semánticos. Una vez que agregue elementos de párrafo, notará que el estilo se ve mejor.</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Las_imágenes"><font>Las imágenes</font></h3> + +<p>Las imágenes son actualmente inaccesibles para los usuarios del lector de pantalla. ¿Puede arreglarlo?</p> + +<h3 id="El_reproductor_de_audio">El reproductor de audio</h3> + +<ol> + <li>El reproductor de <code><audio></code> no es accesible para personas con discapacidad auditiva (sordos) - ¿podría añadir algún tipo de alternativa accesible para estos usuarios?</li> + <li>El reproductor de <code><audio></code> no es accesible para aquellos que utilizan navegadores más antiguos que no admiten audio HTML5. ¿Cómo podrías permitir que sigan accediendo al audio?</li> +</ol> + +<h3 id="Los_formularios"><font>Los formularios</font></h3> + +<ol> + <li>El elemento <code><input></code> en el formulario de búsqueda en la parte superior se podría hacer con una etiqueta, pero no queremos agregar una etiqueta de texto visible que potencialmente estropearía el diseño y realmente no es necesaria para los usuarios sin discapacidad visual. ¿Cómo podría agregar una etiqueta a la que solo puedan acceder los lectores de pantalla?</li> + <li>Los dos elementos <code><input></code> del formulario en el comentario tienen etiquetas de texto visibles, pero no están inequívocamente asociados con sus etiquetas, ¿cómo lograría esto? Tenga en cuenta que también tendrá que actualizar parte de la regla CSS.</li> +</ol> + +<h3 id="El_control_de_mostrarocultar_comentarios"><font>El control de mostrar/ocultar comentarios</font></h3> + +<p>El botón de control de mostrar/ocultar comentarios no es accesible por teclado actualmente. ¿Puede hacerlo accesible al teclado, tanto en términos de enfocarlo usando la tecla de tabulación como de activarlo usando la tecla de retorno?</p> + +<h3 id="La_tabla"><font>La tabla</font></h3> + +<p>La tabla de datos no es muy accesible actualmente: es difícil para los usuarios del lector de pantalla asociar filas y columnas de datos, y la tabla tampoco tiene ningún tipo de resumen para dejar claro lo que muestra. ¿Puede agregar algunas características a su HTML para solucionar este problema?</p> + +<h3 id="¿Otras_consideraciones"><font>¿Otras consideraciones?</font></h3> + +<p>¿Puede enumerar dos ideas más para mejoras que podrían hacer que el sitio web sea más accesible?</p> + +<h2 id="Evaluación_o_más_ayuda">Evaluación o más ayuda</h2> + +<p>Si desea que se evalúe su trabajo, o si está atorado y desea pedir ayuda:</p> + +<ol> + <li>Ponga su trabajo en un editor compartible en línea como <a href="https://codepen.io/">CodePen,</a> <a href="https://jsfiddle.net/">jsFiddle</a>o <a href="https://glitch.com/">Glitch</a>.</li> + <li>Escribe una publicación pidiendo evaluación y/o ayuda en la categoría Aprendizaje del <a href="https://discourse.mozilla.org/c/mdn/learn">foro de discurso mdn</a>. Su publicación debe incluir:Un título descriptivo como "Evaluación deseada para la solución de problemas de accesibilidad".</li> + <li> + <ul> + <li>Detalles de lo que ya ha intentado, y lo que le gustaría que hagamos, por ejemplo, si está atascado y necesita ayuda, o quiere una evaluación.</li> + <li>Un enlace al ejemplo con el que desea evaluar o necesita ayuda, en un editor de compartición en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica a adquirir - es muy difícil ayudar a alguien con un problema de codificación si no se puede ver su código.</li> + <li>Un enlace a la tarea actual o página de evaluación, para que podamos encontrar la pregunta con la que desea ayuda.</li> + </ul> + </li> +</ol> + +<p><font>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</font></p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility">¿Qué es la accesibilidad?</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML">HTML: Una buena base para la accesibilidad</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">Prácticas recomendadas de accesibilidad CSS y JavaScript</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">Conceptos básicos de WAI-ARIA</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Accessibility/Mobile">Accesibilidad móvil</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Solución de problemas de accesibilidad</a></li> +</ul> diff --git a/files/es/learn/accessibility/css_and_javascript/index.html b/files/es/learn/accessibility/css_and_javascript/index.html new file mode 100644 index 0000000000..5f12f39466 --- /dev/null +++ b/files/es/learn/accessibility/css_and_javascript/index.html @@ -0,0 +1,359 @@ +--- +title: Buenas prácticas de accesibilidad CSS y JavaScript +slug: Learn/Accessibility/CSS_and_JavaScript +translation_of: Learn/Accessibility/CSS_and_JavaScript +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> + +<p class="summary">CSS y JavaScript, cuando se usan correctamente, también tienen el potencial de permitir experiencias web accesibles... o pueden dañar significativamente la accesibilidad si se usan incorrectamente. Este artículo describe algunas de las mejores prácticas de CSS y JavaScript que deben tenerse en cuenta para garantizar que incluso el contenido complejo sea lo más accesible posible.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conocimientos básicos de informática, conocimientos básicos de HTML, CSS y JavaScript, y comprensión de <a href="/es/docs/Learn/Accessibility/Qué_es_la_accesibilidad">qué es la accesibilidad</a>.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td> + <p>Familiarizarse con el uso apropiado de CSS y JavaScript en documentos web para maximizar la accesibilidad y no restarle valor.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="¿CSS_y_JavaScript_son_accesibles">¿CSS y JavaScript son accesibles?</h2> + +<p>CSS y JavaScript no tienen la misma importancia inmediata para la accesibilidad que HTML, pero aún así pueden ayudar o dañar la accesibilidad, dependiendo de cómo se usen. Para decirlo de otra manera, es importante considerar algunos consejos de buenas prácticas para asegurarse de que el uso de CSS y JavaScript no arruina la accesibilidad de tus documentos.</p> + +<h2 id="CSS">CSS</h2> + +<p>Comencemos estudiando CSS.</p> + +<h3 id="Semántica_correcta_y_expectativas_del_usuario">Semántica correcta y expectativas del usuario</h3> + +<p><span class="tlid-translation translation" lang="es">Es posible usar CSS para hacer que cualquier elemento HTML se vea como <em>cualquier cosa</em>, pero esto no significa que deba hacerse. Como mencionamos con frecuencia en nuestro artículo <a href="/es/docs/Learn/Accessibility/HTML">HTML: Una buena base para la accesibilidad</a>, debes usar el elemento semántico apropiado para cada cosa, siempre que sea posible. Si no lo haces, puede causar confusión y problemas de usabilidad para todos, pero especialmente para los usuarios con discapacidades. El uso de la semántica correcta tiene mucho que ver con las expectativas del usuario: los elementos se ven y se comportan de cierta manera, de acuerdo con su funcionalidad, y los usuarios esperan estas convenciones comunes.</span></p> + +<p>Por ejemplo, un usuario de lector de pantalla no puede navegar por una página a través de elementos de encabezado si el desarrollador no ha utilizado adecuadamente los elementos de encabezado para marcar el contenido. Del mismo modo, un encabezado pierde su propósito visual si se le aplica un estilo para que no parezca un encabezado.</p> + +<p>La regla general es que puede actualizar el estilo de una característica de la página para que se ajuste a tu diseño, pero no cambiarlo tanto como para que ya no se vea ni se comporte como se esperaba. Las siguientes secciones resumen las principales características de HTML a considerar.</p> + +<h4 id="Estructura_de_contenido_de_texto_estándar">Estructura de contenido de texto "estándar"</h4> + +<p>Encabezados, párrafos, listas: el contenido de texto central de su página:</p> + +<pre class="brush: html notranslate"><h1>Cabecera</h1> + +<p>Párrafo</p> + +<ul> + <li>Mi lista</li> + <li>tiene dos ítems.</li> +</ul></pre> + +<p>Un CSS típico podría tener este aspecto:</p> + +<pre class="brush: css notranslate">h1 { + font-size: 5rem; +} + +p, li { + line-height: 1.5; + font-size: 1.6rem; +}</pre> + +<p>Deberías:</p> + +<ul> + <li>Seleccionar tamaños de fuente razonables, alturas de línea, espaciado entre letras, etc. para que el texto sea lógico, legible y cómodo de leer.</li> + <li>Asegurarte de que los títulos destaquen del texto del cuerpo, generalmente grandes y en negrita como estilo predeterminado. Tus listas deben parecer</li> + <li>El color del texto debe contrastar bien con el color de fondo.</li> +</ul> + +<p>Consulte <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/texto">Fundamentos del texto HTML</a> y <a href="/es/docs/Learn/CSS/Styling_text">Estilo de texto</a> para obtener más información.</p> + +<h4 id="Texto_enfatizado">Texto enfatizado</h4> + +<p>Marcado en línea que confiere un énfasis específico al texto que rodea:</p> + +<pre class="brush: html notranslate"><p>El agua está <em>muy caliente</em>.</p> + +<p>Las gotas de agua que se acumulan en las superficies se denominan <strong>condensación</strong>.</p></pre> + +<p>Es posible que desees agregar algunos colores simples a su texto enfatizado:</p> + +<pre class="brush: css notranslate">strong, em { + color: #a60000; +}</pre> + +<p>Sin embargo, rara vez necesitarás dar estilo a elementos de énfasis de manera significativa. Las convenciones estándar de texto en negrita y cursiva son muy reconocibles y cambiar el estilo puede causar confusión. Para obtener más información sobre el énfasis, consulte <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/texto#%C3%89nfasis_e_importancia">Énfasis e importancia</a>.</p> + +<h4 id="Abreviaciones">Abreviaciones</h4> + +<p>Un elemento que permite asociar una abreviatura, un acrónimo o una inicialización a su expansión:</p> + +<pre class="brush: html notranslate"><p>El contenido web se marca usando <abbr title="Hypertext Markup Language">HTML</abbr>.</p></pre> + +<p>Nuevamente, es posible que desees darle estilo de una manera simple:</p> + +<pre class="brush: css notranslate">abbr { + color: #a60000; +}</pre> + +<p>La convención de estilo reconocida para las abreviaturas es un subrayado punteado, y no es aconsejable desviarse significativamente de esto. Para obtener más información sobre abreviaturas, consulte <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting#Abreviaturas">Abreviaturas</a>.</p> + +<h4 id="Enlaces">Enlaces</h4> + +<p>Hipervínculos: la forma de llegar a nuevos lugares en la web:</p> + +<pre class="brush: html notranslate"><p>Visita la <a href="https://www.mozilla.org">página de inicio de Mozilla</a>.</p></pre> + +<p>A continuación se muestra un estilo de enlace muy simple:</p> + +<pre class="brush: css notranslate">a { + color: #ff0000; +} + +a:hover, a:visited, a:focus { + color: #a60000; + text-decoration: none; +} + +a:active { + color: #000000; + background-color: #a60000; +}</pre> + +<p>Las convenciones de enlace estándar son subrayado y un color diferente (predeterminado: azul) en su estado estándar, otra variación de color cuando el enlace ha sido visitado anteriormente (predeterminado: púrpura) y otro color más cuando el enlace está activado (predeterminado: rojo) . Además, el puntero del ratón cambia a un ícono de puntero cuando se pasa el ratón sobre los enlaces, y el enlace recibe un resaltado cuando se enfoca (por ejemplo, mediante tabulación) o se activa. La siguiente imagen muestra el resaltado tanto en Firefox (contorno punteado) como en Chrome (contorno azul):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14371/focus-highlight-firefox.png" style="display: block; height: 173px; margin: 0px auto; width: 319px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14369/focus-highlight-chrome.png" style="display: block; height: 169px; margin: 0px auto; width: 309px;"></p> + +<p>Puedes ser creativo con los estilos de enlaces, siempre y cuando sigas dando información a los usuarios cuando interactúan con los enlaces. Definitivamente, algo debería suceder cuando los estados cambian, y no debes deshacerte del cursor del puntero o del contorno; ambos son ayudas de accesibilidad muy importantes para quienes usan los controles del teclado.</p> + +<h4 id="Elementos_de_formulario">Elementos de formulario</h4> + +<p>Elementos que permiten a los usuarios introducir datos en sitios web:</p> + +<pre class="brush: html notranslate"><div> + <label for="nombre">Entra tu nombre</label> + <input type="text" id="nombre" name="nombre"> +</div></pre> + +<p>Puedes ver algunos buenos ejemplos de CSS en nuestro ejemplo de <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">form-css.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">pruébalo en vivo</a> también).</p> + +<p>La mayor parte del CSS que escribirás para los formularios será para dimensionar los elementos, alinear las etiquetas y las entradas y hacer que se vean limpios y ordenados.</p> + +<p>Sin embargo, no debes desviarse demasiado de la retroalimentación visual esperada que reciben los elementos del formulario cuando están enfocados, que es básicamente la mismo que con los enlaces (ver más arriba). Puedes aplicar estilos a los estados de enfoque / desplazamiento del formulario para que este comportamiento sea más coherente en todos los navegadores o se adapte mejor al diseño de tu página, pero no te deshagas de él por completo; de nuevo, las personas confían en estas pistas para ayudarles a saber qué está pasando.</p> + +<h4 id="Tablas">Tablas</h4> + +<p>Tablas para presentar datos tabulares.</p> + +<p>Puedes ver un buen y simple ejemplo de tabla HTML y CSS en nuestro ejemplo <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html">table-css.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/css/table-css.html">pruébalo en vivo</a> también).</p> + +<p>El CSS de tablas generalmente sirve para hacer que la tabla se adapte mejor a su diseño y se vea menos fea. Es una buena idea asegurarse de que los encabezados de la tabla se destaquen (normalmente en negrita) y usar rayas de cebra para que las diferentes filas sean más fáciles de analizar.</p> + +<h3 id="Color_y_contraste_de_color">Color y contraste de color</h3> + +<p>Al elegir un esquema de color para tu sitio web, asegúrate de que el color del texto (primer plano) contrasta bien con el color de fondo. Tu diseño puede verse bien, pero no es bueno si las personas con discapacidades visuales como daltonismo no pueden leer tu contenido.</p> + +<p>Existe una manera fácil de verificar si el contraste es lo suficientemente grande como para no causar problemas. Hay una serie de herramientas de verificación de contraste en línea en las que puede introduci los colores de primer plano y de fondo para verificarlos. Por ejemplo, el <a href="http://webaim.org/resources/contrastchecker/">Comprobador de contraste de color</a> de WebAIM es fácil de usar y proporciona una explicación de lo que necesitas para cumplir con los criterios WCAG sobre el contraste de color.</p> + +<div class="note"> +<p><strong>Nota</strong>: una relación de contraste alta también permitirá que cualquier persona que utilice un teléfono inteligente o una tableta con una pantalla brillante lea mejor las páginas cuando se encuentre en un entorno brillante, como a la luz del sol.</p> +</div> + +<p>Otro consejo es no confiar solo en el color para las señales / información, ya que esto no será bueno para aquellos que no pueden ver el color. En lugar de marcar los campos de formulario obligatorios en rojo, por ejemplo, márcalos con un asterisco y en rojo.</p> + +<h3 id="Esconder_cosas">Esconder cosas</h3> + +<p>Hay muchos casos en los que un diseño visual requerirá que no se muestre todo el contenido a la vez. Por ejemplo, en nuestro ejemplo de <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">cuadro de información con pestañas</a> (ver <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">código fuente</a>) tenemos tres paneles de información, pero los colocamos uno encima del otro y proporcionamos pestañas en las que se puede hacer clic para mostrar cada uno (también es accesible desde el teclado - pues usar alternativamente Tab y Enter / Return para seleccionarlos).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> + +<p>A los usuarios de lectores de pantalla no les importa nada de esto: están contentos con el contenido siempre que el orden del código fuente tenga sentido y puedan acceder a todo. El posicionamiento absoluto (como se usa en este ejemplo) generalmente se considera uno de los mejores mecanismos para ocultar contenido para lograr un efecto visual, porque no impide que los lectores de pantalla accedan a él.</p> + +<p>Por otro lado, no debes usar {{cssxref ("visibility")}}<code>: hidden</code> o {{cssxref ("display")}}<code>: none</code>, porque ocultan el contenido de los lectores de pantalla. A menos que, por supuesto, exista una buena razón por la que desees ocultar este contenido a los lectores de pantalla.</p> + +<div class="note"> +<p><strong>Nota</strong>: <span class="subtitle"><a href="http://webaim.org/techniques/css/invisiblecontent/">Invisible Content Just for Screen Reader Users</a> </span>tiene muchos más detalles útiles sobre este tema.</p> +</div> + +<h3 id="Acepta_que_los_usuarios_pueden_saltarse_tus_estilos">Acepta que los usuarios pueden saltarse tus estilos</h3> + +<p>Es posible que los usuarios anulen tus estilos con sus propios estilos personalizados, por ejemplo:</p> + +<ul> + <li>Consulte <a class="external external-icon" href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/" rel="noopener">How to use a custom style sheet (CSS) with Firefox</a>, de Sarah Maddox, una útil guía que cubre cómo hacer esto manualmente en Firefox.</li> + <li>Probablemente sea más fácil hacerlo usando una extensión; por ejemplo, la extensión Stylish está disponible para <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/">Firefox</a>, <a href="https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45">Safari</a>, <a href="https://addons.opera.com/en/extensions/details/stylish/">Opera</a> y <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe">Chrome</a>.</li> +</ul> + +<p><span class="tlid-translation translation" lang="es">Los usuarios pueden hacerlo por diversas razones. Un usuario con discapacidad visual puede querer agrandar el texto en todos los sitios web que visita, o un usuario con una deficiencia de color severa puede querer poner todos los sitios web en colores de alto contraste que sean fáciles de ver. Cualquiera que sea la necesidad, debes sentirse cómodo con esto y hacer que tus diseños sean lo suficientemente flexibles para que dichos cambios funcionen en tu diseño. Como ejemplo, es posible que desees asegurarte de que tu área de contenido principal pueda manejar texto más grande (tal vez comience a desplazarse para permitir que se vea todo), y no solo lo ocultará o romperá por completo.</span></p> + +<h2 id="JavaScript">JavaScript</h2> + +<p>JavaScript también puede romper la accesibilidad, dependiendo de cómo se use.</p> + +<p>El JavaScript moderno es un lenguaje poderoso, y podemos hacer mucho con él actualmente, desde contenido simple y actualizaciones de la interfaz de usuario hasta juegos 2D y 3D completos. No existe una regla que diga que todo el contenido debe ser 100% accesible para todas las personas; solo debe hacer lo que pueda y hacer que sus aplicaciones sean lo más accesibles posible.</p> + +<p>Se puede decir que el contenido y la funcionalidad simples son fáciles de hacer accesibles; por ejemplo, texto, imágenes, tablas, formularios y botones que activan funciones. Como vimos en nuestro artículo <a href="https://developer.mozilla.org/es/docs/Learn/Accessibility/HTML">HTML: Una buena base para la accesibilidad</a>, las consideraciones clave son:</p> + +<ul> + <li>Buena semántica: usar el elemento correcto para el trabajo correcto. Por ejemplo, asegúrate de usar encabezados y párrafos, y elementos {{htmlelement ("button")}} y {{htmlelement ("a")}}</li> + <li>Asegurarse de que el contenido esté disponible como texto, ya sea directamente como contenido de texto, buenas etiquetas de texto para los elementos de formulario o alternativas de texto, p.ej. texto alternativo para imágenes.</li> +</ul> + +<p>También vimos un ejemplo de cómo usar JavaScript para incorporar la funcionalidad donde faltaba; consulta <a href="/es/docs/Learn/Accessibility/HTML#Volver_a_añadir_la_accesibilidad_del_teclado">Volver a añadir la accesibilidad del teclado</a>. Esto no es ideal; en realidad, deberías usar el elemento correcto para el trabajo correcto, pero demuestra que es posible en situaciones en las que, por alguna razón, no puedes controlar el marcado que se utiliza. Otra forma de mejorar la accesibilidad de los widgets no semánticos que funcionan con JavaScript es utilizar WAI-ARIA para proporcionar semántica adicional para los usuarios de lectores de pantalla. El próximo artículo también cubrirá esto en detalle.</p> + +<p>Las funcionalidades complejas como los juegos en 3D no son tan fáciles de hacer accesibles: un juego en 3D complejo creado con <a href="/es/docs/Web/API/WebGL_API">WebGL</a> se renderizará en un elemento {{htmlelement ("canvas")}}, que en este momento no tiene la capacidad de proporcionar alternativas de texto u otros información que pueden utilizar los usuarios con discapacidad visual grave. Se puede argumentar que un juego de este tipo no tiene realmente a este grupo de personas como parte de su público objetivo principal, y no sería razonable esperar que lo hicieras 100% accesible para las personas ciegas; sin embargo, podrías implementar controles de teclado para que sea utilizable por usuarios que no utilizan el ratóny hacer que el esquema de color sea lo suficientemente contrastante como para que lo puedan usar aquellos con deficiencias de color.</p> + +<h3 id="El_problema_de_demasiado_JavaScript">El problema de demasiado JavaScript</h3> + +<p>El problema a menudo surge cuando la gente confía demasiado en JavaScript. A veces verás un sitio web donde todo se ha hecho con JavaScript: el HTML ha sido generado por JavaScript, el CSS ha sido generado por JavaScript, etc. Esto tiene todo tipo de problemas de accesibilidad y otros asociados, por lo que no es aconsejado.</p> + +<p>Además de utilizar el elemento correcto para el trabajo correcto, ¡también debes asegurarte de utilizar la tecnología adecuada para el trabajo correcto! Piensa detenidamente si necesitas ese brillante cuadro de información en 3D con JavaScript o si bastaría con texto antiguo sin formato. Piensa detenidamente si necesitas un widget de formulario no estándar complejo o si una entrada de texto sería suficiente. Y no generes todo tu contenido HTML usando JavaScript si es posible.</p> + +<h3 id="Hacerlo_no_intrusivo">Hacerlo no intrusivo</h3> + +<p>Deberías hacer tu <strong>JavaScript no intrusivo</strong> al crear tu contenido. La idea de JavaScript no intrusivo es que debe usarse siempre que sea posible para mejorar la funcionalidad, no para construirlo todo; las funciones básicas deberían funcionar idealmente sin JavaScript, aunque sabemos que esto no siempre es una opción. Pero, de nuevo, una gran parte es usar las funcionalidades integradas del navegador siempre que sea posible.</p> + +<p>Entre los buenos ejemplos de usos de JavaScript no intrusivo se incluyen:</p> + +<ul> + <li>Proporcionar validación de formularios del lado del cliente, que alerta a los usuarios sobre problemas con las entradas de sus formularios rápidamente, sin tener que esperar a que el servidor verifique los datos. Si no está disponible, el formulario seguirá funcionando, pero la validación puede ser más lenta.</li> + <li>Proporcionar controles personalizados para <code><video></code> HTML5 a los que pueden acceder los usuarios que solo utilizan el teclado, junto con un enlace directo al video que se puede usar para acceder a él si JavaScript no está disponible (los controles del navegador predeterminados para <code><video></code> no son acccesibles por teclado en la mayoría de los navegadores).</li> +</ul> + +<p><span class="tlid-translation translation" lang="es">Como ejemplo, hemos escrito un ejemplo rápido y sucio de validación de formulario del lado del cliente: consulta <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> (y también la <a href="http://mdn.github.io/learning-area/accessibility/css/form-validation.html">demostración en vivo</a>). Aquí verás un formulario simple; al intentar enviar el formulario con uno o ambos campos vacíos, el envío falla y aparece un cuadro de mensaje de error para indicar cuál es el problema.<br> + <br> + Este tipo de validación de formulario es no intrusiva: se puede usar el formulario perfectamente aunque JavaScript no esté disponible, y cualquier implementación de formulario razonable también tendrá activa la validación del lado del servidor, porque es demasiado fácil para los usuarios malintencionados eludir la validación del lado del cliente (por ejemplo, desactivando JavaScript en el navegador). La validación del lado del cliente sigue siendo realmente útil para informar de errores: los usuarios pueden saber los errores que cometen al instante, en lugar de tener que esperar un viaje de ida y vuelta al servidor y la recarga de la página. Esta es una clara ventaja de usabilidad.</span></p> + +<div class="note"> +<p><strong>Nota</strong>: la validación del lado del servidor no se ha implementado en esta simple demostración.</p> +</div> + +<p>También hemos hecho que esta validación de formulario sea bastante accesible. Hemos utilizado elementos {{htmlelement ("label")}} para asegurarnos de que las etiquetas del formulario estén vinculadas de forma inequívoca a sus entradas, de modo que los lectores de pantalla puedan leerlas junto con ellas:</p> + +<pre class="brush: html notranslate"><label for="name">Entra tu nombre:</label> +<input type="text" name="name" id="name"></pre> + +<p>Solo realizamos la validación cuando se envía el formulario; esto es para no actualizar la IU con demasiada frecuencia y confundir potencialmente a los lectores de pantalla (y posiblemente a otros) usuarios:</p> + +<pre class="brush: js notranslate">form.onsubmit = validate; + +function validate(e) { + errorList.innerHTML = ''; + for(let i = 0; i < formItems.length; i++) { + const testItem = formItems[i]; + if(testItem.input.value === '') { + errorField.style.left = '360px'; + createLink(testItem); + } + } + + if(errorList.innerHTML !== '') { + e.preventDefault(); + } +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: En este ejemplo estamos ocultando y mostrando el cuadro de mensaje de error utilizando posicionamiento absoluto en lugar de otro método como la visibilidad o la visualización, porque no interfiere con que el lector de pantalla pueda leer su contenido.</p> +</div> + +<p>La validación real del formulario sería mucho más compleja que esto: querría verificar que el nombre entrado realmente parezca un nombre, la edad entrada sea realmente un número y sea realista (por ejemplo, no negativa y menor de 4 dígitos). Aquí acabamos de implementar una verificación simple de que se haya completado un valor en cada campo de entrada (<code>if(testItem.input.value === '')</code>).</p> + +<p>Cuando se ha realizado la validación, si las pruebas pasan, se envía el formulario. Si hay errores (<code>if (errorList.innerHTML! == '')</code>), detenemos el envío del formulario (usando <code>preventDefault()</code>) y mostramos los mensajes de error que se hayan creado (ver más abajo). Este mecanismo significa que los errores solo se mostrarán si hay errores, lo que es mejor para la usabilidad.</p> + +<p>Para cada entrada sin un valor completado cuando se envía el formulario, creamos un elemento de lista con un enlace y lo insertamos en <code>errorList</code>.</p> + +<pre class="brush: js notranslate">function createLink(testItem) { + const listItem = document.createElement('li'); + const anchor = document.createElement('a'); + + anchor.textContent = 'El campo ' + testItem.input.name + ' está vacío. Entra tu ' + testItem.input.name + '.'; + anchor.href = '#' + testItem.input.name; + anchor.onclick = function() { + testItem.input.focus(); + }; + listItem.appendChild(anchor); + errorList.appendChild(listItem); +}</pre> + +<p>Cada enlace tiene un doble propósito: te dice cuál es el error, y además puedes hacer clic en él / activarlo para ir directamente al elemento de entrada en cuestión y corregir la entrada.</p> + +<div class="note"> +<p><strong>Nota</strong>: La parte <code>focus()</code> de este ejemplo es un poco complicada. Chrome y Edge darán foco al elemento al hacer clic en el enlace, sin necesidad del bloque <code>onclick</code> / <code>focus()</code>. Safari solo resaltará el elemento de formulario con el enlace por sí solo, por lo que necesita el bloque <code>onclick</code> / <code>focus()</code> para darle foco. Firefox no da foco a las entradas correctamente en este contexto, por lo que los usuarios de Firefox no pueden aprovechar esto en este momento (aunque todo lo demás funciona bien). El problema de Firefox debería solucionarse pronto; se está trabajando para que el comportamiento de Firefox sea igual al de otros navegadores (consulte {{bug (277178)}}).</p> +</div> + +<p>Además, el <code>errorField</code> se coloca en la parte superior del orden de código (aunque se coloca de manera diferente en la interfaz de usuario usando CSS), lo que significa que los usuarios pueden averiguar exactamente qué está mal con los envíos de sus formularios y acceder a los elementos de entrada en cuestión retrocediendo hasta el inicio de la página.</p> + +<p>Como nota final, hemos utilizado algunos atributos WAI-ARIA en nuestra demostración para ayudar a resolver los problemas de accesibilidad causados por áreas de contenido que se actualizan constantemente sin recargar la página (los lectores de pantalla no captan esto ni alertan a los usuarios de forma predeterminada):</p> + +<pre class="notranslate"><div class="errors" role="alert" aria-relevant="all"> + <ul> + </ul> +</div></pre> + +<p>Explicaremos estos atributos en nuestro próximo artículo, que cubre <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> con mucho más detalle.</p> + +<div class="note"> +<p><strong>Nota</strong>: Algunos de vosotros probablemente estaréis pensando en el hecho de que los formularios HTML5 tienen mecanismos de validación integrados como los atributos <code>required</code>, <code>min</code> / <code>minlength</code> y <code>max</code> / <code>maxlength</code> (consultad la referencia del elemento {{htmlelement("input")}} para más información). No los hemos usado en la demostración porque la compatibilidad entre navegadores es irregular (por ejemplo, solo funciona en IE10 y versiones superiores).</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: <a href="http://webaim.org/techniques/formvalidation/">Usable and Accessible Form Validation and Error Recovery</a>, de WebAIM, proporciona más información útil sobre la validación de formularios accesibles.</p> +</div> + +<h3 id="Otros_potenciales_problemas_de_accesibilidad_de_JavaScript">Otros potenciales problemas de accesibilidad de JavaScript</h3> + +<p>Hay otras cosas que debes tener en cuenta al implementar JavaScript y pensar en la accesibilidad. Agregaremos más a medida que los encontremos.</p> + +<h4 id="Eventos_específicos_del_ratón">Eventos específicos del ratón</h4> + +<p>Como sabrás, la mayoría de las interacciones de los usuarios se implementan en JavaScript del lado del cliente mediante controladores de eventos, que nos permiten ejecutar funciones en respuesta a ciertos eventos que suceden. Algunos eventos pueden tener problemas de accesibilidad. El ejemplo principal con el que se encontrará son los eventos específicos del ratón, como <code>mouseover</code>, <code>mouseout</code>, <code>dblclick</code>, etc. La funcionalidad que se ejecuta en respuesta a estos eventos no será accesible mediante otros mecanismos, como los controles del teclado.</p> + +<p>Para mitigar estos problemas, debes duplicar estos eventos con eventos similares que se pueden activar por otros medios (los llamados controladores de eventos independientes de dispositivo); <code>focus</code> y <code>blur</code> proporcionarían accesibilidad para los usuarios del teclado.</p> + +<p>Veamos un ejemplo que destaca cuándo esto podría ser útil. Tal vez queramos proporcionar una imagen en miniatura que muestre una versión más grande de la imagen cuando al colocar el ratón sobre ella o darle foco (como pasaría en un catálogo de productos de comercio electrónico).</p> + +<p>Hemos creado un ejemplo muy simple, que puedes encontrar en <a href="http://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html">mouse-and-keyboard-events.html</a> (consulta también el <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">código fuente</a>). El código presenta dos funciones que muestran y ocultan la imagen ampliada; estas se ejecutan mediante las siguientes líneas que las configuran como controladores de eventos:</p> + +<pre class="brush: js notranslate">imgThumb.onmouseover = showImg; +imgThumb.onmouseout = hideImg; + +imgThumb.onfocus = showImg; +imgThumb.onblur = hideImg;</pre> + +<p>Las dos primeras líneas ejecutan las funciones cuando el puntero del ratón se desplaza sobre la miniatura y deja de hacerlo, respectivamente. Sin embargo, esto no nos permite acceder a la vista ampliada con el teclado; para hacerlo hemos incluido las dos últimas líneas, que ejecutan las funciones cuando la imagen toma y pierde el foco. Esto se puede hacer presionando el tabulador hasta llegar a la imagen, porque le hemos dado <code>tabindex="0"</code>.</p> + +<p>El evento de <code>click</code> es interesante: parce dependiente del ratón, pero la mayoría de los navegadores activan los controladores de eventos <code>onclick</code> al presionar Enter / Return en un enlace o elemento de formulario que tenga foco, o cuando dicho elemento se toca en un dispositivo de pantalla táctil. Sin embargo, esto no funciona por defecto cuando permites que un evento no enfocable por defecto adquiera el foco usando tabindex; en tales casos, debe detectar específicamente cuándo se presiona esa tecla exacta (consulte <a href="/es/docs/Learn/Accessibility/HTML#Volver_a_añadir_la_accesibilidad_del_teclado">Volver a añadir la accesibilidad del teclado</a>).</p> + +<h2 id="¡Pon_a_prueba_tus_habilidades">¡Pon a prueba tus habilidades</h2> + +<p>Has llegado al final de este artículo. ¿Recuerdas la información más importante? Encontrar pruebas para verificar que has retenido esta información antes de continuar en <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility">Test your skills: CSS and JavaScript accessibility</a>.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>Esperamos que este artículo te haya brindado una buena cantidad de detalles y comprensión sobre los problemas de accesibilidad relacionados con el uso de CSS y JavaScript en las páginas web.</p> + +<p>¡Siguiente parada, WAI-ARIA!</p> + +<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> + +<div> +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> +</ul> +</div> diff --git a/files/es/learn/accessibility/html/index.html b/files/es/learn/accessibility/html/index.html new file mode 100644 index 0000000000..1b2fb1af25 --- /dev/null +++ b/files/es/learn/accessibility/html/index.html @@ -0,0 +1,588 @@ +--- +title: 'HTML: Una buena base para la accesibilidad' +slug: Learn/Accessibility/HTML +translation_of: Learn/Accessibility/HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</div> + +<p class="summary">Se puede hacer accesible una gran cantidad de contenido web solo asegurándose de que se utilizan los elementos HTML con el propósito correcto todo el tiempo. Este artículo muestra en detalle como HTML puede ser usado para asegurar máxima accesibilidad.</p> + +<table class="learn-box standard-table" style="height: 214px; width: 741px;"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conocimiento básico de informática, entendimiento básico de HTML (ver <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducción a HTML</a>), y entendimiento de <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">¿Qué es accesibilidad?</a>.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Familiarizarse con las características de HTML que tiene beneficios de accesibilidad, y como usarla apropiadamente en tus documentos web.</td> + </tr> + </tbody> +</table> + +<h2 id="HTML_y_accesibilidad">HTML y accesibilidad</h2> + +<p>Cuando aprendas más de HTML — leas más recursos, mires más ejemplos, etc.— vas a seguir viendo un tema en común: la importancia del uso de HTML semántico (a veces llamado POSH, o <em lang="en">Plain Old Semantic HTML</em>). Esto significa usar los elementos correctos de HTML para su propósito tanto como sea posible.</p> + +<p>Puedes estarte preguntando ¿por qué es esto tan importante?. Después de todo, puedes usar una combinación de CSS y JavaScript para hacer que casi cualquier elemento HTML se comporte en la forma que tú quieras. Por ejemplo, un botón que reproduzca un vídeo en tu sitio puede estar hecho así:</p> + +<pre class="brush: html notranslate"><div>Reproducir vídeo</div></pre> + +<p>Pero como verás más adelante, tiene sentido utilizar el elemento correcto para este trabajo:</p> + +<pre class="brush: html notranslate"><button>Reproducir vídeo</button></pre> + +<p>No solo la etiqueta <code><button></code> de HTML ya tiene estilos adecuados por defecto (que probablemente quieras sobrescribir), también están construidos para ser accesibles con el teclado —el usuario puede navegar entre botones usando <kbd>Tab</kbd> y activando su selección usando <kbd>Return</kbd> o <kbd>Enter</kbd>.</p> + +<p>No cuesta más tiempo escribir HTML semántico que (mal) marcado no semántico si lo haces consistentemente desde el comienzo de tu proyecto. Y aun mejor, el marcado semántico tiene otros beneficios más allá de la accesibilidad:</p> + +<ol> + <li><strong>Fácil desarrollo</strong> — como mencionamos, obtienes algunas funcionalidades gratis, y podría decirse que es más fácil de entender.</li> + <li><strong>Mejor en móviles</strong> — el HTML semántico es probablemente más liviano en tamaño de archivo que el código espagueti no semántico y más fácil de hacer responsivo.</li> + <li><strong>Bueno para SEO</strong> — Los motores de búsqueda dan más importancia a palabras claves dentro de cabeceras, links, etc., que palabras claves en elementos no semánticos como los <code><div></code>, etc., tus documentos serán más fáciles de encontrar por tus clientes.</li> +</ol> + +<p>Continuemos y veamos el HTML accesible en más detalle.</p> + +<div class="note"> +<p><strong>Nota</strong>: Es buena idea tener configurado un lector de pantalla en tu computador, para que puedas hacer algunas pruebas de los siguientes ejemplos. Mira nuestra <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Guía de lectores de pantalla </a>para más detalles.</p> +</div> + +<h2 id="Buena_semántica">Buena semántica</h2> + +<p>Ya hemos hablado de la importancia de la buena semántica, y por qué deberíamos usar el elemento HTML adecuado para cada caso. Esto no puede ignorarse, ya que es uno de los principales lugares donde la accesibilidad se rompe si no se maneja correctamente.</p> + +<p>En la web, la verdad es que las personas hacen cosas muy extrañas con marcado HTML. Algunos abusos de HTML se deben a prácticas de antaño que no han sido completamente olvidadas y algunas son simplemente ignorancia. Cualquiera que sea el caso, deberías reemplazar ese mal código donde sea que lo veas.</p> + +<p>A veces, no estás en disposición de deshacerte del mal marcado — tus páginas pueden estar generadas por algún tipo de <em lang="en">framework</em> del lado del servidor del cual no tienes control total, o puedes tener contenido de terceros en tu página (como banners) sobre los que no tienes control.</p> + +<p>El objetivo no es "todo o nada", pero cada mejora que hagas va a ayudar a la causa de la accesibilidad.</p> + +<h3 id="Contenido_textual">Contenido textual</h3> + +<p>Una de las mejores ayudas de accesibilidad que un usuario lector de pantalla puede tener es una buena estructura de contenido de cabeceras, párrafos, listas, etc. Un ejemplo de buena semántica puede lucir como el de a continuación:</p> + +<pre class="brush: html example-good line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">></span></span>Mi cabecera<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>Esta es la primera sección de mi documento</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>Voy a agregar también otro párrafo aquí</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">> + +<ol> + <li>Aquí esta</li> + <li>una lista para</li> + <li>que la leas</li> +</ol></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Mi subtítulo<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Esta es la primera subsección de mi documento. ¡Me encantaría que la gente pudiera leer este contenido!<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Mi 2º <span class="tag token"><span class="tag token"><span class="punctuation token">subtitulo</</span>h2</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Esta es la segunda subsección de mi documento. Creo que es más interesante que la primera.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> + +<p>Hemos preparado una versión más larga para que pruebes con un lector de pantalla (ver <a href="http://mdn.github.io/learning-area/accessibility/html/good-semantics.html">good-semantics.html</a>). Si tratas de navegar por ella, notaras que es muy fácil:</p> + +<ol> + <li>El lector de pantalla lee cada cabecera a medida que progresas a través del contenido, notificándote qué es una cabecera, qué es un párrafo, etc.</li> + <li>Se detiene después de cada elemento, dejándote ir a un ritmo que sea cómodo para ti.</li> + <li>Puedes saltar al siguiente/anterior encabezado en muchos lectores de pantalla.</li> + <li>También puedes tener una lista de todos los encabezados en muchos lectores de pantalla, permitiéndote usarlos como una tabla de contenidos para encontrar contenido específico.</li> +</ol> + +<p>Las personas a veces escriben encabezados, párrafos, etc. usando HTML presentacional y saltos de línea, algo como lo siguiente:</p> + +<pre class="brush: html example-bad line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>7<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Mi cabecera<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +Esta es la primera sección del documento. +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +Voy a agregar otro párrafo aquí también. +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> +1. Aquí esta +</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> +2. una lista para +</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> +3. que la leas +</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Mi subtitulo<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +Esta es la primera subsección de mi documento. ¡Me encantaría que la gente pudiera leer este contenido! +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Mi 2º subtitulo<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +Esta es la segunda subsección de mi documento. Creo que es más interesante que la primera.</code></pre> + +<p>Si pruebas nuestra versión extendida con un lector de pantalla (ver <a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a>), no vas a tener una buena experiencia: el lector de pantalla no tiene nada que usar como señal, por lo que no podrás tener una tabla de contenidos útil y toda la página se ve como un solo bloque gigante, así que solo se lee de una vez, todo de una vez.</p> + +<p>Hay otros problemas más allá de la accesibilidad: es más difícil aplicar estilo al contenido con CSS o manipularlo con JavaScript, por ejemplo, porque no hay elementos para usarlos como selectores.</p> + +<h4 id="Usar_lenguaje_claro">Usar lenguaje claro</h4> + +<p>El lenguaje que usas también puede afectar la accesibilidad. En general deberías usar lenguaje claro que no sea demasiado complejo y no usar innecesariamente jerga o palabras extrañas. Esto no solo beneficia a las personas con discapacidades cognitivas u otras: beneficia a los lectores para quienes el texto no está escrito en su lengua materna, personas más jóvenes... ¡todo el mundo, de hecho! Aparte de esto, deberías evitar usar lenguaje y caracteres que no se puede leen claramente por un lector de pantalla. Por ejemplo:</p> + +<ul> + <li>No uses guiones si puedes evitarlos.en lugar de escribir 5–7, escribe "5 a 7".</li> + <li>Expande las abreviaciones — en lugar de escribir Ene, escribe Enero.</li> + <li>Expande los acrónimos, por lo menos una o dos veces. En lugar de escribir HTML en la primera instancia, escribe Hypertext Markup Language.</li> +</ul> + +<h3 id="Disposiciones_de_página">Disposiciones de página</h3> + +<p>Antiguamente la gente solía crear diseños de página usando tablas HTML, usando diferentes celdas de tabla para contener el encabezado, pie de página, barra lateral, columna de contenido principal, etc. Esto no es una buena idea porque un lector de pantalla probablemente dará como resultado lecturas confusas, especialmente si el diseño es complejo y tiene muchas tablas anidadas.</p> + +<p>Prueba nuestro ejemplo <a href="http://mdn.github.io/learning-area/accessibility/html/table-layout.html">table-layout.html</a>, que tiene este código:</p> + +<pre class="brush: html notranslate"><table width="1200"> + <!-- main heading row --> + <tr id="heading"> + <td colspan="6"> + + <h1 align="center">Header</h1> + + </td> + </tr> + <!-- nav menu row --> + <tr id="nav" bgcolor="#ffffff"> + <td width="200"> + <a href="#" align="center">Home</a> + </td> + <td width="200"> + <a href="#" align="center">Our team</a> + </td> + <td width="200"> + <a href="#" align="center">Projects</a> + </td> + <td width="200"> + <a href="#" align="center">Contact</a> + </td> + <td width="300"> + <form width="300"> + <input type="search" name="q" placeholder="Search query" width="300"> + </form> + </td> + <td width="100"> + <button width="100">Go!</button> + </td> + </tr> + <!-- spacer row --> + <tr id="spacer" height="10"> + <td> + + </td> + </tr> + <!-- main content and aside row --> + <tr id="main"> + <td id="content" colspan="4" bgcolor="#ffffff"> + + <!-- main content goes here --> + </td> + <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> + <h2>Related</h2> + + <!-- aside content goes here --> + + </td> + </tr> + <!-- spacer row --> + <tr id="spacer" height="10"> + <td> + + </td> + </tr> + <!-- footer row --> + <tr id="footer" bgcolor="#ffffff"> + <td colspan="6"> + <p>©Copyright 2050 by nobody. All rights reversed.</p> + </td> + </tr> + </table></pre> + +<p>Si intentas navegar por él con un lector de pantalla, probablemente te dirá que hay una tabla para mirar (aunque algunos lectores de pantalla pueden adivinar la diferencia entre diseños con tablas y tablas de datos). Luego, probablemente (dependiendo del lector de pantalla que estés usando) tendrás que entrar en la tabla como objeto y mirar sus características por separado, y luego salir de la tabla nuevamente para continuar navegando por el contenido.</p> + +<p>Los diseños con tablas son una reliquia del pasado: tenían sentido cuando la compatibilidad con CSS no estaba muy extendida en los navegadores, pero ahora solo crean confusión para los usuarios de lectores de pantalla. Además, su código fuente requiere más marcado, lo que los hace menos flexibles y más difíciles de mantener. Puedes verificar estas afirmaciones comparando tu experiencia anterior con un ejemplo de <a href="http://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">estructura de sitio web más moderno</a>, que podría verse así:</p> + +<pre class="brush: html notranslate"><header> + <h1>Header</h1> +</header> + +<nav> + <!-- main navigation in here --> +</nav> + +<!-- Here is our page's main content --> +<main> + + <!-- It contains an article --> + <article> + <h2>Article heading</h2> + + <!-- article content in here --> + </article> + + <aside> + <h2>Related</h2> + + <!-- aside content in here --> + </aside> + +</main> + +<!-- And here is our main footer that is used across all the pages of our website --> + +<footer> + <!-- footer content in here --> +</footer></pre> + +<p>Si pruebas nuestro ejemplo de estructura más moderna con un lector de pantalla, verás que el marcado de diseño ya no se interpone ni confunde la lectura del contenido. También es mucho más ágil y más pequeño en términos de tamaño de código, lo que significa que el código es más fácil de mantener y menos ancho de banda para que el usuario lo descargue (especialmente para aquellos con conexiones lentas).</p> + +<p>Otra consideración al crear diseños es usar elementos semánticos HTML5 como se ve en el ejemplo anterior (ver <a href="/es/docs/Web/HTML/Elemento#Seccionamiento_del_contenido">secciónado de contenido</a>): puedes crear un diseño usando solo elementos {{htmlelement ("div")}} anidados, pero es mejor usar los elementos de seccionado adecuados para marcar la navegación principal ({{htmlelement ("nav")}}), el pie de página ({{htmlelement ("footer")}}), los bloques de contenido ({{htmlelement ("article")}}), etc. Estos proporcionan semántica adicional para lectores de pantalla (y otras herramientas) para brindar al usuario pistas adicionales sobre el contenido por el que están navegando (consulta <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Screen Reader Support for new HTML5 Section Elements</a> para hacerte una idea de cómo es el soporte de lectores de pantalla).</p> + +<div class="note"> +<p><strong>Nota</strong>: Además de tener una buena semántica y un diseño atractivo, tu contenido debería tener sentido lógico en su orden en el código; siempre puedes colocarlo donde desees usando CSS más adelante, pero deberías tener el orden en el código correcto para empezar, para que lo que se lee a los usuarios de lectores de pantalla tenga sentido.</p> +</div> + +<h3 id="Controles_de_interfaz_de_usuario">Controles de interfaz de usuario</h3> + +<p>Por controles de interfaz de usuario nos referimos a las partes principales de los documentos web con las que los usuarios interactúan, habitualmente botones, enlaces y controles de formulario. En esta sección, veremos los aspectos básicos de accesibilidad a tener en cuenta al crear dichos controles. Los artículos posteriores sobre WAI-ARIA y multimedia analizarán otros aspectos de la accesibilidad de la interfaz de usuario.</p> + +<p>Un aspecto clave de la accesibilidad de los controles de interfaz de usuario es que, de forma predeterminada, los navegadores permiten que sean manipulados por el teclado. Puedes probar esto usando nuestro ejemplo <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">native-keyboard-accessibility.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">código fuente</a>). Ábrelo en una nueva pestaña y prueba a pulsar la tecla de tabulación; después de algunas pulsaciones, deberías ver que el foco de la pestaña comienza a moverse a través de los diferentes elementos enfocables. Los elementos enfocados reciben un estilo predeterminado resaltado en cada navegador (difiere ligeramente entre diferentes navegadores) para que puedas saber qué elemento está enfocado.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p> + +<p>Después puedes pulsar <kbd>Enter</kbd> / <kbd>Return</kbd> para seguir un enlace enfocado o pulsar un botón (hemos incluido algo de JavaScript para que los botones lancen un mensaje), o comenzar a escribir para introducir texto en un campo de texto. Otros elementos de formulario tienen diferentes controles; por ejemplo, el elemento {{htmlelement ("select")}} puede mostrar sus opciones y alternar entre usar las teclas de flecha arriba y abajo.</p> + +<div class="note"> +<p><strong>Note</strong>: Diferentes navegadores pueden tener diferentes opciones de control de teclado disponibles. Consulta <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Using native keyboard accessibility</a> para obtener más detalles.</p> +</div> + +<p>Básicamente, obtienes este comportamiento gratis, solo con el uso de los elementos apropiados. Por ejemplo:</p> + +<pre class="brush: html example-good notranslate"><h1>Enlaces</h1> + +<p>Esto es un enlace a <a href="https://www.mozilla.org">Mozilla</a>.</p> + +<p>Otro enlace, a la <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p> + +<h2>Botones</h2> + +<p> + <button data-message="Esto es del primer botón">¡Haz clic!</button> + <button data-message="Esto es del segundo botón">¡Haz clic aquí también!</button> + <button data-message="Esto es del tercer botón">Y aquí!</button> +</p> + +<h2>Formulario</h2> + +<form> + <div> + <label for="nombre">Entra tu nombre:</label> + <input type="text" id="nombre" name="nombre"> + </div> + <div> + <label for="edad">Entra tu edad:</label> + <input type="text" id="edad" name="edad"> + </div> + <div> + <label for="humor">Elige tu humor:</label> + <select id="humor" name="humor"> + <option>Feliz</option> + <option>Triste</option> + <option>Enfadado/a</option> + <option>Preocupado/a</option> + </select> + </div> +</form></pre> + +<p>Esto significa usar enlaces, botones, elementos y etiquetas de formulario de manera adecuada (incluido el elemento {{htmlelement ("label")}} para los controles de formulario).</p> + +<p>Sin embargo, nuevamente se da el caso de que la gente a veces hace cosas extrañas con HTML. Por ejemplo, a veces ves botones marcados con {{htmlelement ("div")}}s, por ejemplo:</p> + +<pre class="brush: html example-bad notranslate"><div data-message="Esto es del primer botón">¡Haz clic aquí!</div> +<div data-message="Esto es del segundo botón">¡Haz clic aquñi también!</div> +<div data-message="Esto es del tercer botón">¡Y aquí!</div></pre> + +<p>Pero no se recomienda el uso de código como este: pierdes inmediatamente la accesibilidad nativa del teclado que habrías tenido si hubieras usado elementos {{htmlelement ("button")}}, y además no obtienes ninguno de los estilos CSS predeterminados que tienen los botones.</p> + +<h4 id="Volver_a_añadir_la_accesibilidad_del_teclado">Volver a añadir la accesibilidad del teclado</h4> + +<p>Volver a agregar estas ventajas requiere un poco de trabajo (puedes ver un ejemplo en nuestro ejemplo <a class="external external-icon" href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a>; consulta también el <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">código fuente</a>). Aquí le hemos dado a nuestros botones <code><div></code> falsos la capacidad de enfocarse (incluso a través de la tecla de tabulación) dándole a cada uno el atributo <code>tabindex="0"</code>:</p> + +<pre class="brush: html notranslate"><div data-message="Esto es del primer botón" tabindex="0">¡Haz clic aquí!</div> +<div data-message="Esto es del segundo botón" tabindex="0">¡Haz clic aquí también!</div> +<div data-message="Esto es del tercer botón" tabindex="0">¡Y aquí!</div></pre> + +<p>Básicamente, el atributo {{htmlattrxref("tabindex")}} está destinado principalmente a permitir que los elementos tabulables tengan un orden de tabulación personalizado (especificado en orden numérico positivo), en lugar de simplemente tabularlos en su orden de origen predeterminado. Casi siempre es una mala idea, ya que puede causar una gran confusión. Úsalo solo si realmente lo necesitas; por ejemplo, si el diseño muestra las cosas en un orden visual muy diferente al código fuente, y deseas que las cosas funcionen de manera más lógica. Hay otras dos opciones para <code>tabindex</code>:</p> + +<ul> + <li><code>tabindex = "0"</code>: como se indicó anteriormente, este valor permite que los elementos que normalmente no se pueden tabular se conviertan en tabulables. Este es el valor más útil de <code>tabindex</code>.</li> + <li><code>tabindex = "- 1"</code>: esto permite que los elementos que normalmente no se pueden tabular reciban el foco mediante programación, p. ej. a través de JavaScript o como destino de enlaces.</li> +</ul> + +<p>Si bien la adición anterior nos permite tabular los botones, no nos permite activarlos a través de la tecla <kbd>Enter</kbd> / <kbd>Return</kbd>. Para hacer eso, hemos tenido que agregar el siguiente truco en JavaScript:</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">13</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// La tecla Enter/Return</span> + document<span class="punctuation token">.</span>activeElement<span class="punctuation token">.</span><span class="function token">click</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<p>Aquí agregamos un "listener" (oyente) al objeto <code>document</code> para detectar cuándo se ha presionado una tecla en el teclado. Comprobamos qué botón se presionó mediante la propiedad <a href="/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a> del objeto de evento; si es el código clave que coincide con <kbd>Return</kbd> / <kbd>Enter</kbd>, ejecutamos la función almacenada en el manejador <code>onclick</code> del botón usando <code>document.activeElement.click()</code>. <a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a> nos da el elemento que está actualmente enfocado en la página.</p> + +<p>Esta es mucho trabajo extra para volver a incorporar la funcionalidad. Y seguramente surgirán problemas con ella. Es mejor usar el elemento correcto para el trabajo correcto en primer lugar.</p> + +<h4 id="Etiquetas_de_texto_significativas">Etiquetas de texto significativas</h4> + +<p>Las etiquetas textuales de los controles de la interfaz de usuario son muy útiles para todos los usuarios, pero hacerlas bien es particularmente importante para los usuarios con discapacidades.</p> + +<p>Deberías asegurarte de que las etiquetas de texto de tus botones y enlaces sean comprensibles y distintivas. No uses simplemente "Haz clic aquí" para tus etiquetas, ya que los usuarios de lectores de pantalla a veces obtienen una lista de botones y controles de formulario. La siguiente captura de pantalla muestra nuestros controles enumerados por VoiceOver en Mac.</p> + +<p><img alt="Form controls. Click me! button. Click me too! button. And me! button. Fill me in: edit text. Fill me in: edit text. Happy collapsed pop up button. Happy menu item. Sad menu item. Angry menu item. Worried menu item." src="https://mdn.mozillademos.org/files/14335/voiceover-formcontrols.png" style="display: block; height: 604px; margin: 0px auto; width: 802px;"></p> + +<p>Asegúrate de que tus etiquetas tienen sentido sin su contexto, leídas solas, así como en el contexto del párrafo en que están. Por ejemplo, lo siguiente muestra un buen ejemplo de enlace de texto:</p> + +<pre class="brush: html example-good notranslate"><p>Las ballenas son criaturas realmente impresionantes. <a href="whales.html">Aprende más sobre las ballenas</a>.</p></pre> + +<p>y esto es un mal texto de enlace:</p> + +<pre class="brush: html example-bad notranslate"><p>Las ballenas son criaturas realmente impresionantes. Para aprender más sobre las ballenas, <a href="whales.html">haz clic aquí</a>.</p></pre> + +<div class="note"> +<p><strong>Note</strong>: Encontrarás mucho más sobre la implementación de enlaces y buenas prácticas en nuestro artículo <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks">Crear hipervínculos</a>. También encontrarás buenos y malos ejemplos en <a href="http://mdn.github.io/learning-area/accessibility/html/good-links.html">good-links.html</a> y <a href="http://mdn.github.io/learning-area/accessibility/html/bad-links.html">bad-links.html</a>.</p> +</div> + +<p>Las etiquetas de formulario también son importantes, para darte una pista sobre lo que necesita introducir en cada campo de formulario. El siguiente parece un ejemplo bastante razonable:</p> + +<pre class="brush: html example-bad notranslate">Entra tu nombre: <input type="text" id="nombre" name="nombre"></pre> + +<p>Sin embargo, esto no es tan útil para usuarios con discapacidad. No hay nada en el ejemplo anterior para asociar la etiqueta de forma inequívoca con la entrada del formulario y dejar claro cómo rellenarlo si no puede verlo. Si accedes con algunos lectores de pantalla, es posible que solo se te proporcione una descripción en la línea de "editar texto".</p> + +<p>El siguiente es un ejemplo mucho mejor:</p> + +<pre class="brush: html example-good notranslate"><div> + <label for="combre">Entra tu nombre:</label> + <input type="text" id="combre" name="nombre"> +</div></pre> + +<p>Con código como este, la etiqueta estará claramente asociada con la entrada; la descripción se parecerá más a "Entra tu nombre: editar texto".</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14337/voiceover-good-form-label.png" style="display: block; margin: 0 auto;"></p> + +<p>Como ventaja adicional, en la mayoría de los navegadores asociar una etiqueta con una entrada de formulario significa que puedes hacer clic en la etiqueta para seleccionar / activar el elemento del formulario. Esto le da a la entrada un área de impacto más grande, lo que facilita la selección.</p> + +<div class="note"> +<p><strong>Nota</strong>: puedes ver algunos ejemplos de buenos y malos formularios en <a href="http://mdn.github.io/learning-area/accessibility/html/good-form.html">good-form.html</a> y <a href="http://mdn.github.io/learning-area/accessibility/html/bad-form.html">bad-form.html</a>.</p> +</div> + +<h2 id="Tablas_de_datos_accesibles">Tablas de datos accesibles</h2> + +<p>Se puede escribir una tabla de datos básica con un marcado muy simple, por ejemplo:</p> + +<pre class="brush: html notranslate"><table> + <tr> + <td>Nombre</td> + <td>Edad</td> + <td>Género</td> + </tr> + <tr> + <td>Gabriel</td> + <td>13</td> + <td>Masculino</td> + </tr> + <tr> + <td>Elva</td> + <td>8</td> + <td>Femenino</td> + </tr> + <tr> + <td>Freida</td> + <td>5</td> + <td>Femenino</td> + </tr> +</table></pre> + +<p>Pero esto tiene problemas: no hay forma de que un usuario de lector de pantalla asocie filas o columnas como agrupaciones de datos. Para hacer esto, necesita saber cuáles son las filas de encabezado, y si están encabezando filas, columnas, etc. Esto solo se puede hacer visualmente para la tabla anterior (ve a <a href="https://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a> y prueba tú mismo el ejemplo).</p> + +<p>Ahora echa un vistazo a nuestro <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">ejemplo de tabla de bandas punk</a>: aquí puedes ver algunas ayudas de accesibilidad en funcionamiento:</p> + +<ul> + <li>Los encabezados de las tablas se definen utilizando elementos {{htmlelement("th")}}; también se puede especificar si son encabezados de filas o columnas mediante el atributo <code>scope</code>. Esto te da grupos completos de datos que los lectores de pantalla pueden consumir como unidades individuales.</li> + <li>El elemento {{htmlelement ("caption")}} y el atributo <code>summary</code> de <code><table></code> realizan trabajos similares: actúan como texto alternativo para una tabla, lo que brinda al usuario de lector de pantalla un resumen rápido y útil del contenido de la tabla. Por lo general, se prefiere <code><caption></code>, ya que también hace que su contenido sea accesible para los usuarios videntes, quienes también pueden encontrarlo útil. Realmente no necesitas usar ambos.</li> +</ul> + +<p>Consulte nuestro artículo sobre funciones avanzadas y accesibilidad de tablas HTML para obtener más detalles sobre las tablas de datos accesibles.</p> + +<div class="note"> +<p><strong>Note</strong>: Consulta nuestro artículo <a href="/es/docs/Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad">Funciones avanzadas de tablas y accesibilidad</a> para ver más detalles sobre tablas de datos accesibles.</p> +</div> + +<h2 id="Alternativas_de_texto">Alternativas de texto</h2> + +<p>Mientras que el contenido textual es inherentemente accesible, lo mismo no se puede decir del contenido multimedia — el contenido de imagen/video no puede ser visto por personas con discapacidad visual, y el contenido de audio no puede ser escuchado por personas sordas. Cubriremos el contenido de video y audio en detalle en el artículo <a href="/en-US/docs/Learn/Accessibility/Multimedia">multimedia accesible</a> más adelante, pero para este artículo veremos la accesibilidad del humilde elemento {{htmlelement("img")}}.</p> + +<p>Tenemos un ejemplo simple, <a href="http://mdn.github.io/learning-area/accessibility/html/accessible-image.html">access-image.html</a>, que presenta cuatro copias de la misma imagen:</p> + +<pre class="notranslate"><img src="dinosaur.png"> + +<img src="dinosaur.png" + alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> + +<img src="dinosaur.png" + alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." + title="The Mozilla red dinosaur"> + + +<img src="dinosaur.png" aria-labelledby="dino-label"> + +<p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p> +</pre> + +<p>La primera imagen, cuando la ve un lector de pantalla, realmente no ofrece mucha ayuda al usuario; VoiceOver, por ejemplo, lee "/dinosaur.png, imagen". Lee el nombre del archivo para intentar proporcionar ayuda. En este ejemplo, el usuario al menos sabrá que es un dinosaurio de algún tipo, pero a menudo los archivos pueden cargarse con nombres de archivo generados por la máquina (por ejemplo, de una cámara digital) y estos nombres de archivo probablemente no proporcionarían contexto al contenido de la imagen.</p> + +<div class="note"> +<p><strong>Nota</strong>: Es por eso que nunca debes incluir contenido de texto dentro de una imagen: los lectores de pantalla simplemente no pueden acceder a él. También hay otras desventajas: no puedes seleccionarlo y copiarlo / pegarlo. ¡No lo hagas!</p> +</div> + +<p>Cuando un lector de pantalla encuentra la segunda imagen, lee el atributo alt completo: "Un tiranosaurio rex rojo: un dinosaurio de dos patas erguido como un humano, con brazos pequeños y una cabeza grande con muchos dientes afilados".</p> + +<p>Esto resalta la importancia de no solo usar nombres de archivo significativos en caso de que el <strong>texto alternativo</strong> no esté disponible, sino también de asegurarse de que el texto alternativo se proporcione en los atributos <code>alt</code> siempre que sea posible. Ten en cuenta que el contenido del atributo <code>alt</code> siempre debe proporcionar una representación directa de la imagen y lo que transmite visualmente. Aquí no se debe incluir ningún conocimiento personal o descripción adicional, ya que no es útil para personas que no se han encontrado con la imagen antes.</p> + +<p>Una cosa a considerar es si tus imágenes tienen significado dentro del contenido, o si son puramente para decoración visual, por lo que no tienen significado. Si son decorativas, es mejor incluirlas en la página como imágenes de fondo CSS.</p> + +<div class="note"> +<p><strong>Note</strong>: Lee <a href="/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imágenes en HTML</a> y <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> para obtener mucha más información sobre la implementación de imágenes y buenas prácticas asociadas.</p> +</div> + +<p>Si deseas proporcionar información contextual adicional, deberías colocarla en el texto que rodea la imagen o dentro de un atributo <code>title</code>, como se muestra a continuación. En este caso, la mayoría de los lectores de pantalla leerán el texto alternativo, el atributo del título y el nombre del archivo. Además, los navegadores muestran el texto del título como información cuando se pasa por encima con el ratón.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14333/title-attribute.png" style="display: block; margin: 0 auto;"></p> + +<p>Echemos otro vistazo al cuarto método:</p> + +<pre class="brush: html notranslate"><img src="dinosaur.png" aria-labelledby="dino-label"> + +<p id="dino-label">The Mozilla red Tyrannosaurus ... </p></pre> + +<p>En este caso, no estamos usando el atributo <code>alt</code> en absoluto; en cambio, hemos presentado nuestra descripción de la imagen como un párrafo de texto normal, le hemos dado un <code>id</code> y luego usamos el atributo <code>aria-labelledby</code> para referirnos a ese <code>id</code>, que hace que los lectores de pantalla usen ese párrafo como texto alternativo o etiqueta para esa imagen. Esto es especialmente útil si desea utilizar el mismo texto como etiqueta para varias imágenes, algo que no es posible con <code>alt</code>.</p> + +<div class="note"> +<p><strong>Note</strong>: <code>aria-labelledby</code> es parte de la especificación <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a>, que permite a los desarrolladores añadir semántica extra a su marcado para mejorar su accesibilidad para lectores de pantalla cuando sea necesario. Para aprender más sobre cómo funciona, lee nuestro artículo <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA Basics</a>.</p> +</div> + +<h3 id="Otros_mecanismos_de_texto_alternativo">Otros mecanismos de texto alternativo</h3> + +<p>Las imágenes también tienen otros mecanismos disponibles para proporcionar texto descriptivo. Por ejemplo, hay un atributo <code>longdesc</code> que apunta a un documento web separado que contiene una descripción ampliada de la imagen, por ejemplo:</p> + +<pre class="brush: html notranslate"><img src="dinosaur.png" longdesc="dino-info.html"></pre> + +<p>Parece una buena idea, especialmente para infografías como gráficos grandes con mucha información que tal vez podría representarse como una tabla de datos accesible (consulte la sección anterior). Sin embargo, <code>longdesc</code> no es compatible de forma consistente con lectores de pantalla, y el contenido es completamente inaccesible para los usuarios que no usan lectores de pantalla. Podría decirse que es mucho mejor incluir la descripción larga en la misma página que la imagen, o vincularla con un enlace normal.</p> + +<p>HTML5 incluye dos elementos nuevos, {{htmlelement("figure")}} y {{htmlelement("figcaption")}}, que se supone que asocian una figura de algún tipo (podría ser cualquier cosa, no necesariamente una imagen) con un pie de figura:</p> + +<pre class="brush: html notranslate"><figure> + <img src="dinosaur.png" alt="El Tyrannosaurus de Mozilla"> + <figcaption>Un Tyrannosaurus Rex rojo: Un dinosaurio de dos piernas, de pie como un humano, con brazos pequeños y una cabeza grande con un montón de dientes afilados.</figcaption> +</figure></pre> + +<p>Desafortunadamente, la mayoría de lectores de pantalla aún no parecen asociar los títulos de las figuras con sus figuras, pero la estructura del elemento es útil para dar estilo con CSS, y además proporciona una manera de colocar una descripción de la imagen junto a ella en el código.</p> + +<h3 id="Atributos_alt_vacíos">Atributos alt vacíos</h3> + +<pre class="brush: html notranslate"><h3> + <img src="article-icon.png" alt=""> + Tyrannosaurus Rex: el rey de los dinosaurios +</h3></pre> + +<p>Puede haber ocasiones en las que se incluya una imagen en el diseño de una página, pero su propósito principal sea la decoración visual. Observarás en el ejemplo de código anterior que el atributo <code>alt</code> de la imagen está vacío; esto es para que los lectores de pantalla reconozcan la imagen, pero no intenten describirla imagen (en su lugar, solo dirían "imagen" o algo similar).</p> + +<p>La razón para usar un <code>alt</code> vacío en lugar de no incluirlo es porque muchos lectores de pantalla anuncian la URL completa de la imagen si no se proporciona un alt. En el ejemplo anterior, la imagen actúa como decoración visual del encabezado al que está asociada. En casos como este, y en los casos en los que una imagen es solo decoración y no tiene valor de contenido, debes poner un alt vacío en tus imágenes. Otra alternativa es usar el atributo de rol aria <code>role = "presentation"</code> - esto también evita que los lectores de pantalla lean el texto alternativo.</p> + +<div class="note"> +<p><strong>Note</strong>: si es posible, deberías usar CSS para mostrar imágenes que son solo decoración.</p> +</div> + +<h2 id="Más_sobre_enlaces">Más sobre enlaces</h2> + +<p>Los enlaces (el elemento <code><a></code> con un atributo <code>href</code>), según cómo se utilicen, pueden ayudar o perjudicar la accesibilidad. De forma predeterminada, los enlaces son accesibles en apariencia. Pueden mejorar la accesibilidad al ayudar a un usuario a navegar rápidamente a diferentes secciones de un documento. También pueden dañar la accesibilidad si se elimina su estilo accesible o si JavaScript hace que se comporten de manera inesperada.</p> + +<h3 id="Estilo_de_enlace">Estilo de enlace</h3> + +<p>De forma predeterminada, los enlaces son visualmente diferentes de otros textos tanto en el color como en la decoración del texto, con enlaces azules y subrayados de forma predeterminada, morados y subrayados si se visitan, y con un anillo de enfoque cuando reciben el foco del teclado.</p> + +<p>El color no debe usarse como el único método para distinguir los enlaces del contenido que no enlaza. El color del texto del enlace, como todo el texto, debe ser significativamente diferente del color de fondo (<a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast">un contraste de 4.5:1</a>). Además, los enlaces deben ser visualmente significativamente diferentes del texto sin enlaces. Con un requisito de contraste mínimo de 3:1 entre el texto del enlace y el texto circundante y entre los estados predeterminado, visitado y de enfoque / activo, y un contraste de 4:5 entre todos esos colores de estado y el color de fondo.</p> + +<h3 id="Eventos_onclick">Eventos onclick</h3> + +<p>A menudo se abusa de las etiquetas de anclaje con el evento <code>onclick</code> para crear pseudo-botones configurando href a <code>"#"</code> o<code> "javascript:void(0)"</code> para evitar que la página se actualice.</p> + +<p>Estos valores provocan un comportamiento inesperado al copiar o arrastrar enlaces, abrir enlaces en una nueva pestaña o ventana, marcar como favoritos y cuando JavaScript todavía se está descargando aparecen errores o está deshabilitado. Esto también transmite una semántica incorrecta a las tecnologías de asistencia (por ejemplo, lectores de pantalla). En estos casos, se recomienda utilizar un {{HTMLElement("button")}} en su lugar. En general, solo debe usar un ancla para la navegación utilizando una URL adecuada.</p> + +<h3 id="Enlaces_externos_y_enlaces_a_recursos_que_no_son_HTML">Enlaces externos y enlaces a recursos que no son HTML</h3> + +<p>Los enlaces que se abren en una nueva pestaña o ventana mediante la declaración <code>target="_blank"</code> y los enlaces cuyo valor <code>href</code> apunta a un recurso de archivo deben incluir un indicador sobre el comportamiento que se producirá cuando se active el enlace.</p> + +<p>Las personas con problemas de baja visión, que navegan con la ayuda de tecnología de lectura de pantalla o que tienen problemas cognitivos pueden confundirse cuando la nueva pestaña, ventana o aplicación se abre inesperadamente. Es posible que versiones antiguas del software de lectura de pantalla ni siquiera anuncien el comportamiento.</p> + +<h4 id="Enlace_que_abre_una_nueva_pestaña_o_ventana">Enlace que abre una nueva pestaña o ventana</h4> + +<pre class="brush: html notranslate"><a target="_blank" href="https://www.wikipedia.org/">Wikipedia (se abre en una nueva ventana)</a></pre> + +<h4 id="Enlace_a_un_recurso_que_no_es_HTML">Enlace a un recurso que no es HTML</h4> + +<pre class="brush: html notranslate"><a target="_blank" href="2017-annual-report.ppt">Informe anual de 2017 (PowerPoint)</a></pre> + +<p>Si se utiliza un icono en lugar de texto para indicar este tipo de comportamiento de enlaces, asegúrate de que incluya una {{HTMLAttrxRef("alt", "img", "descripción alternativa", "true")}}.</p> + +<ul> + <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM: Links and Hypertext - Hypertext Links</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.2 explanations</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200: Opening new windows and tabs from a link only when necessary | W3C Techniques for WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window | W3C Techniques for WCAG 2.0</a></li> +</ul> + +<h4 id="Enlaces_de_salto">Enlaces de salto</h4> + +<p>Un enlace de salto, también conocido como "skipnav", es un elemento que se coloca lo más cerca posible del elemento de apertura {{HTMLElement("body")}} que enlaza con el comienzo del contenido principal de la página. Este enlace permite a las personas evitar el contenido repetido en varias páginas de un sitio web, como el encabezado y la navegación principal.</p> + +<p>Los enlaces de salto son especialmente útiles para las personas que navegan con la ayuda de tecnología de asistencia, como controles de interruptores, comandos de voz o varitas bucales o para la cabeza, con las que el acto de moverse a través de enlaces repetitivos puede ser una tarea laboriosa.</p> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li> + <li><a href="https://www.a11yproject.com/posts/2013-05-11-skip-nav-links/">How–to: Use Skip Navigation links - The A11Y Project</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h4 id="Proximidad">Proximidad</h4> + +<p>Si tenemos grandes cantidades de contenido interactivo, incluidas anclas, colocadas muy cerca visualmente entre sí, deben tener espacio insertado para separarlas. Este espaciado es beneficioso para las personas que sufren problemas de control de la motricidad fina y pueden activar accidentalmente el contenido interactivo incorrecto mientras navegan.</p> + +<p>El espaciado se puede crear usando propiedades CSS como {{CSSxRef("margin")}}.</p> + +<ul> + <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem - Axess Lab</a></li> +</ul> + +<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2> + +<p>Ha llegado al final de este artículo, pero ¿recuerdas la información más importante? Consulta <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Accessibility/Test_your_skills:_HTML_accessibility">Test your skills: HTML Accessibility</a> para verificar que has retenido esta información antes de continuar.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>Ahora ya deberías conocer bien la escritura de HTML accesible para la mayoría de las ocasiones. Nuestro artículo de conceptos básicos de WAI-ARIA también llenará algunos vacíos en este conocimiento, pero este artículo se ha ocupado de los conceptos básicos. A continuación, exploraremos CSS y JavaScript, y cómo la accesibilidad se ve afectada por su buen o mal uso.</p> + +<p>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> +</ul> diff --git a/files/es/learn/accessibility/index.html b/files/es/learn/accessibility/index.html new file mode 100644 index 0000000000..fc7cdeeb3c --- /dev/null +++ b/files/es/learn/accessibility/index.html @@ -0,0 +1,60 @@ +--- +title: Accesibilidad +slug: Learn/Accessibility +tags: + - ARIA + - Accesibilidad + - Aprender + - Artículos + - Aterrizaje + - CSS + - CodificaciónDeSecuenciasDeComandos + - HTML + - JavaScript + - Principiantes + - modulo +translation_of: Learn/Accessibility +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Aprender algo de HTML, CSS y JavaScript es útil si deseas convertirte en un desarrollador web, pero tu conocimiento debe ir más allá de simplemente usar esas tecnologías, debes usarlas de manera responsable para maximizar la audiencia de tus sitios web y evitar impedir su uso a nadie. Para lograr esto, debes adherirte a las mejores prácticas generales (que se muestran en los temas de <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> y <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>), <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">pruebas cruzadas del navegador</a> y considerar la accesibilidad desde el principio. En este módulo, cubriremos este último en detalle.</p> + +<h2 id="Prerrequisitos">Prerrequisitos</h2> + +<p>Para aprovechar al máximo este módulo, sería una buena idea trabajar al menos en los dos primeros módulos de los temas de <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>, y <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a> o quizás mejor, trabajar en las partes relevantes del módulo de accesibilidad como tu trabajas a través de los temas relacionados con la tecnología.</p> + +<div class="note"> +<p>Nota: si está trabajando en una computadora / tableta / otro dispositivo donde no tiene la capacidad de crear sus propios archivos, puede probar la mayoría de los ejemplos de código en un programa de codificación en línea como <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guías">Guías</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">¿Qué es la accesibilidad?</a></dt> + <dd>Este artículo inicia el módulo con un buen vistazo a lo que realmente es la accesibilidad: esto incluye qué grupos de personas debemos considerar y por qué, qué herramientas utilizan las diferentes personas para interactuar con la web y cómo podemos hacer que la accesibilidad sea parte de nuestro flujo de trabajo de desarrollo web.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML:Una buena base para la accesibilidad</a></dt> + <dd>Se puede hacer accesible una gran cantidad de contenido web simplemente asegurándose de que los elementos HTML concretos se utilizan para un propósito correcto en todo momento. Este artículo analiza en detalle cómo se puede usar HTML para garantizar la máxima accesibilidad.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">Mejores prácticas en accesibilidad en CSS y JavaScript </a></dt> + <dd>CSS y JavaScript, cuando se usan correctamente, también tienen el potencial de permitir experiencias web accesibles, pero si se usan mal pueden dañar significativamente la accesibilidad. Este artículo describe algunas de las mejores prácticas de CSS y JavaScript que deben considerarse para garantizar que incluso el contenido complejo sea lo más accesible posible.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA básico</a></dt> + <dd>Siguiendo con el artículo anterior, a veces puede ser difícil realizar controles complejos de IU que involucren HTML no semántico y contenido dinámico actualizado con JavaScript. WAI-ARIA es una tecnología que puede ayudar a resolver estos problemas agregando más semántica que los navegadores y las tecnologías de asistencia pueden reconocer y utilizar para que los usuarios sepan lo que está sucediendo. Aquí mostraremos cómo usarlo a un nivel básico para mejorar la accesibilidad.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Multimedia accesible</a></dt> + <dd>Otra categoría de contenido que puede crear problemas de accesibilidad es multimedia: el contenido de video, audio e imagen debe contar con alternativas textuales adecuadas para que las tecnologías de asistencia y sus usuarios puedan entenderlos. Este artículo muestra cómo.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Accesibilidad móvil</a></dt> + <dd>Dado que el acceso a la web en dispositivos móviles es tan popular, y que las plataformas populares como iOS y Android tienen herramientas de accesibilidad completas, es importante considerar la accesibilidad de su contenido web en estas plataformas. Este artículo analiza las consideraciones de accesibilidad específicas para dispositivos móviles.</dd> +</dl> + +<h2 id="Valoraciones">Valoraciones</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Resolución de problemas de accesibilidad</a></dt> + <dd>En la evaluación de este módulo, te presentamos un sitio simple con una serie de problemas de accesibilidad que necesitas diagnosticar y corregir.</dd> +</dl> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Empieza hoy a desarrollar aplicaciones web accesibles</a>— Una excelente serie de videos tutoriales por Marcy Sutton.</li> + <li><a href="https://dequeuniversity.com/resources/">Recursos de la Universidad Deque </a>— incluye ejemplos de códigos, referencias de lectores de pantalla y otros recursos útiles.</li> + <li><a href="http://webaim.org/resources/">Recursos de WebAIM </a>— incluye guías, listas de verificación, herramientas, y más.</li> +</ul> diff --git a/files/es/learn/accessibility/mobile/index.html b/files/es/learn/accessibility/mobile/index.html new file mode 100644 index 0000000000..4762e5220c --- /dev/null +++ b/files/es/learn/accessibility/mobile/index.html @@ -0,0 +1,346 @@ +--- +title: Mobile accessibility +slug: Learn/Accessibility/Mobile +translation_of: Learn/Accessibility/Mobile +--- +<div> +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div> + +<p class="summary">Dado que el acceso a la web en dispositivos móviles es tan popular, y las plataformas populares como iOS y Android tienen herramientas de accesibilidad completas, es importante considerar la accesibilidad de su contenido web en estas plataformas. Este artículo analiza las consideraciones de accesibilidad específicas para dispositivos móviles.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisitos:</th> + <td>Conocimientos básicos de computación, una comprensión básica de HTML, CSS y JavaScript, y una comprensión de los <a href="/en-US/docs/Learn/Accessibility">artículos previos del curso</a>.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Para comprender qué problemas existen con la accesibilidad en dispositivos móviles y cómo superarlos.</td> + </tr> + </tbody> +</table> + +<h2 id="Accessibility_on_mobile_devices">Accessibility on mobile devices</h2> + +<p> </p> + +<p>El estado de accesibilidad, y el soporte para los estándares web en general, es bueno en los dispositivos móviles modernos. Atrás quedaron los días en que los dispositivos móviles utilizaban tecnologías web completamente diferentes para los navegadores de escritorio, lo que obligaba a los desarrolladores a utilizar el rastreo de los navegadores y les servía sitios completamente separados (aunque muchas empresas aún detectan el uso de dispositivos móviles y les ofrecen un dominio móvil separado).</p> + +<p>En estos días, los dispositivos móviles en general pueden manejar sitios web "completos", y las plataformas principales incluso tienen lectores de pantalla incorporados para permitir que los usuarios con discapacidades visuales los utilicen con éxito. Los navegadores móviles modernos tienden a tener un buen soporte para <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>, también.</p> + +<p> </p> + +<p> </p> + +<p>Para hacer que un sitio web sea accesible y utilizable en dispositivos móviles, solo debe seguir las buenas prácticas generales de diseño web y accesibilidad.</p> + +<p>Hay algunas excepciones que requieren una consideración especial para el móvil; Los principales son:</p> + +<p> </p> + +<ul> + <li>Mecanismos de control: asegúrese de que los controles de la interfaz, como los botones, estén accesibles en los móviles (es decir, principalmente en la pantalla táctil), así como en las computadoras de escritorio / portátiles (principalmente en el mouse / teclado).</li> + <li>Entrada del usuario: haga que los requisitos de entrada del usuario sean lo más fáciles posible en el móvil (por ejemplo, en formularios, siga escribiendo al mínimo).</li> + <li>Diseño receptivo: asegúrese de que los diseños funcionen en dispositivos móviles, conserve los tamaños de descarga de imágenes y piense en la provisión de imágenes para pantallas de alta resolución.</li> +</ul> + +<h2 id="Resumen_de_las_pruebas_del_lector_de_pantalla_en_Android_e_iOS">Resumen de las pruebas del lector de pantalla en Android e iOS</h2> + +<p> </p> + +<p>Las plataformas móviles más comunes tienen lectores de pantalla completamente funcionales. Estos funcionan de la misma manera que los lectores de pantalla de escritorio, excepto que se operan en gran parte mediante gestos táctiles en lugar de combinaciones de teclas.</p> + +<p>Veamos los dos principales: TalkBack en Android y VoiceOver en iOS.</p> + +<p> </p> + +<h3 id="Android_TalkBack">Android TalkBack</h3> + +<p> </p> + +<p>El lector de pantalla TalkBack está integrado en el sistema operativo Android.</p> + +<p>Para activarlo, seleccione Configuración> Accesibilidad> TalkBack, y luego presione el interruptor deslizante para activarlo. Siga las indicaciones adicionales en pantalla que le presenten.</p> + +<p><strong>Nota</strong>: las versiones anteriores de TalkBack están activadas de formas <a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">formas ligeramente distintas.</a></p> + +<p>Cuando TalkBack esté activado, los controles básicos de su dispositivo Android serán un poco diferentes. Por ejemplo:</p> + +<ol> + <li>Pulsar una aplicación solo lo seleccionará, y el dispositivo leerá qué es la aplicación.</li> + <li>Al deslizar hacia la izquierda y hacia la derecha, se moverá entre las aplicaciones o los botones / controles si se encuentra en una barra de control. El dispositivo leerá cada opción.</li> + <li>Si toca dos veces en cualquier lugar, se abrirá la aplicación / seleccione la opción.</li> + <li>También puede "explorar con un toque": mantenga el dedo presionado sobre la pantalla y arrástrelo, y su dispositivo leerá las diferentes aplicaciones / elementos con los que se mueve.</li> +</ol> + +<p>Si desea desactivar TalkBack:</p> + +<ol> + <li>Navega a tu aplicación de configuración utilizando los gestos anteriores.</li> + <li>Vaya a Accesibilidad> TalkBack.</li> + <li>Navegue hasta el interruptor deslizante y actívelo para apagarlo.</li> +</ol> + +<p>Nota: Puede acceder a la pantalla de inicio en cualquier momento deslizando hacia arriba y hacia la izquierda con un movimiento suave. Si tiene más de una pantalla de inicio, puede moverse entre ellos deslizando dos dedos hacia la izquierda y hacia la derecha.</p> + +<p>Para obtener una lista más completa de los gestos de TalkBack, consulte <a href="https://support.google.com/accessibility/android/answer/6151827">Usar gestos TalkBack. </a></p> + +<h4 id="Desbloqueo_del_telefono">Desbloqueo del telefono</h4> + +<p> </p> + +<p>Cuando TalkBack está activado, desbloquear el teléfono es un poco diferente.</p> + +<p>Puede hacer un deslizamiento con dos dedos hacia arriba desde la parte inferior de la pantalla de bloqueo. Si ha establecido un código de acceso o un patrón para desbloquear su dispositivo, se lo dirigirá a la pantalla de entrada correspondiente para ingresarlo.</p> + +<p>También puede explorar tocando para encontrar el botón Desbloquear en la parte inferior central de la pantalla y luego toque dos veces.</p> + +<p> </p> + +<h4 id="Menús_globales_y_locales">Menús globales y locales</h4> + +<p> </p> + +<p>TalkBack le permite acceder a los menús de contexto global y local, donde quiera que haya navegado en el dispositivo. El primero proporciona opciones globales relacionadas con el dispositivo en su conjunto, y el segundo proporciona opciones relacionadas con la aplicación / pantalla actual en la que se encuentra.</p> + +<p>Para llegar a estos menús:</p> + +<p> </p> + +<ol> + <li>Acceda al menú global deslizando rápidamente hacia abajo y luego a la</li> + <li>Acceda al menú local deslizando rápidamente hacia arriba y luego a la</li> + <li>Desliza el dedo hacia la izquierda y hacia la derecha para alternar entre las diferentes opciones.</li> + <li>Una vez que haya seleccionado la opción que desea, haga doble clic para elegir esa opción.</li> +</ol> + +<p>Para obtener detalles sobre todas las opciones disponibles en los menús de contexto global y local, consulte <a href="https://support.google.com/accessibility/android/answer/6007066">Uso global y local contextual de menús</a>.</p> + +<p> </p> + +<h4 id="Navegando_por_páginas_web">Navegando por páginas web</h4> + +<p> </p> + +<p>Puede usar el menú contextual local mientras está en un navegador web para encontrar opciones para navegar por páginas web usando solo los encabezados, controles de formulario o enlaces, o navegar línea por línea, etc.</p> + +<p>Por ejemplo, con TalkBack activado:</p> + +<ol> + <li> Abra su navegador web.</li> + <li> Activar la barra de URL.</li> + <li> Ingrese una página web que tenga muchos encabezados, como la página principal de bbc.co.uk. Para ingresar el texto de la URL: + <ul> + <li>Seleccione la barra de URL deslizando hacia la izquierda / derecha hasta que llegue a ella, y luego toque dos veces.</li> + <li>Mantenga presionado el teclado virtual hasta que obtenga el carácter que desea y luego suelte el dedo para escribirlo. Repita para cada personaje.</li> + <li>Una vez que hayas terminado, encuentra la tecla Intro y presiónala.</li> + </ul> + </li> + <li> Desliza el dedo hacia la izquierda y hacia la derecha para moverte entre los diferentes elementos de la página.</li> + <li> Deslice hacia arriba y hacia la derecha con un movimiento suave para ingresar al menú de contenido local.</li> + <li> Deslízate hacia la derecha hasta que encuentres la opción "Encabezados y puntos de referencia".</li> + <li> Pulse dos veces para seleccionarlo. Ahora podrá desplazarse hacia la izquierda y hacia la derecha para moverse entre encabezados y puntos de referencia de ARIA.</li> + <li> Para volver al modo predeterminado, ingrese nuevamente al menú de contexto local deslizando hacia arriba y a la derecha, seleccione "Predeterminado", y luego toque dos veces para activar.</li> +</ol> + +<p><strong>Nota</strong>: consulte <a href="https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=3529932">Empezar en Android con TalkBack</a> para obtener una documentación más completa.</p> + +<p> </p> + +<h3 id="iOS_VoiceOver">iOS VoiceOver</h3> + +<p> </p> + +<p>Una versión móvil de VoiceOver está integrada en el sistema operativo iOS.</p> + +<p>Para activarlo, vaya a la aplicación de configuración y seleccione General> Accesibilidad> VoiceOver. Presione el control deslizante VoiceOver para habilitarlo (también verá otras opciones relacionadas con VoiceOver en esta página).</p> + +<p>Una vez que VoiceOver esté habilitado, los gestos de control básico de iOS serán un poco diferentes:</p> + +<ol> + <li> Un solo toque hará que se seleccione el elemento que tocas; su dispositivo dirá el elemento que ha tocado.</li> + <li> También puede navegar por los elementos en la pantalla deslizando hacia la izquierda y hacia la derecha para moverse entre ellos, o deslizando el dedo por la pantalla para moverse entre diferentes elementos (cuando encuentra el elemento que desea, puede quitar el dedo para seleccionarlo). ).</li> + <li> Para activar el elemento seleccionado (por ejemplo, abrir una aplicación seleccionada), toque dos veces en cualquier lugar de la pantalla.</li> + <li> Desliza tres dedos para desplazarte por una página.</li> + <li> Toque con dos dedos para realizar una acción relevante para el contexto, por ejemplo, tomar una foto mientras está en la aplicación de la cámara.</li> +</ol> + +<p>Para apagarlo nuevamente, navegue de nuevo a Configuración> General> Accesibilidad> VoiceOver usando los gestos anteriores, y active el control deslizante VoiceOver para desactivarlo.</p> + +<p> </p> + +<h4 id="Desbloquear_el_teléfono">Desbloquear el teléfono</h4> + +<p>Para desbloquear el teléfono, debe presionar el botón de inicio (o deslizar) de manera normal. Si tiene un código de acceso configurado, puede seleccionar cada número deslizando / deslizando (como se explicó anteriormente) y luego toque dos veces para ingresar cada número cuando haya encontrado el correcto.</p> + +<h4 id="Usando_el_rotor">Usando el rotor</h4> + +<p> </p> + +<p>Cuando VoiceOver está activado, tiene una función de navegación llamada Rotor disponible para usted, que le permite elegir rápidamente entre una serie de opciones útiles comunes. Para usarlo:</p> + +<ol> + <li>Gira dos dedos alrededor de la pantalla como si estuvieras girando un dial. Cada opción se leerá en voz alta a medida que gire más. Puede ir hacia adelante y hacia atrás para recorrer las opciones.</li> + <li>Una vez que hayas encontrado la opción que + <ul> + <li>Suelte los dedos para seleccionarlo.</li> + <li>Si es una opción que puede repetir el valor de (como Volumen o Velocidad de voz), puede deslizar hacia arriba o hacia abajo para aumentar o disminuir el valor del elemento seleccionado.</li> + </ul> + </li> +</ol> + +<p>Las opciones disponibles en el Rotor son sensibles al contexto; serán diferentes según la aplicación o la vista en la que se encuentre (consulte a continuación un ejemplo).</p> + +<p> </p> + +<h4 id="Navegando_por_páginas_web_2">Navegando por páginas web</h4> + +<p>Vamos a hacer una prueba a navegar con VoiceOver:</p> + +<ol> + <li><span class="tlid-translation translation">Abra su navegador web.</span></li> + <li><span class="tlid-translation translation">Activar la barra de URL.</span></li> + <li><span class="tlid-translation translation">Ingrese una página web que tenga muchos encabezados, como la página principal de bbc.co.uk. Para ingresar el texto de la URL:</span> + <ul> + <li><span class="tlid-translation translation">Seleccione la barra de URL deslizando hacia la izquierda / derecha hasta que llegue a ella, y luego toque dos veces.</span></li> + <li><span class="tlid-translation translation">Para cada personaje, mantenga presionado el teclado virtual hasta que obtenga el carácter que desea y luego suelte el dedo para seleccionarlo. </span><span class="tlid-translation translation">Pulse dos veces para escribirlo.</span></li> + <li><span class="tlid-translation translation">Una vez que hayas terminado, encuentra la tecla Intro y presiónala.</span></li> + </ul> + </li> + <li><span class="tlid-translation translation">Desliza el dedo hacia la izquierda y hacia la derecha para moverte entre los elementos de la página. Puede tocar dos veces un elemento para seleccionarlo (por ejemplo, siga un enlace).</span></li> + <li><span class="tlid-translation translation">Por defecto, la opción de Rotor seleccionada será Speaking Rate; actualmente puede deslizar hacia arriba y hacia abajo para aumentar o disminuir la frecuencia de habla.</span></li> + <li><span class="tlid-translation translation">Ahora gire dos dedos alrededor de la pantalla como un cuadrante para mostrar el rotor y muévase entre sus opciones. Aquí hay algunos ejemplos de las opciones disponibles:</span> + <ul> + <li><span class="tlid-translation translation">Tasa de habla: Cambia la tasa de habla.</span></li> + <li><span class="tlid-translation translation">Contenedores: muévete entre los diferentes contenedores semánticos de la página.</span></li> + <li><span class="tlid-translation translation">Encabezados: muévete entre los encabezados de la página.</span></li> + <li><span class="tlid-translation translation">Enlaces: Mover entre enlaces en la página.</span></li> + <li><span class="tlid-translation translation">Controles de formulario: muévase entre los controles de formulario en la página.</span></li> + <li><span class="tlid-translation translation">Idioma: Mover entre diferentes traducciones, si están disponibles.</span></li> + </ul> + </li> + <li><span class="tlid-translation translation">Seleccionar encabezados. Ahora podrá desplazarse hacia arriba y hacia abajo para moverse entre los encabezados de la página.</span></li> +</ol> + +<p><span class="tlid-translation translation"><strong>Nota</strong>: Para obtener una referencia más completa que cubra los gestos de VoiceOver disponibles y otros consejos sobre las pruebas de accesibilidad en iOS, consulte </span><a href="https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3"> Probar la accesibilidad en su dispositivo con VoiceOver</a><span class="tlid-translation translation">.</span></p> + +<p> </p> + +<h2 id="Mecanismos_de_control">Mecanismos de control</h2> + +<p>En nuestro artículo de accesibilidad de CSS y JavaScript, examinamos la idea de eventos que son específicos de un determinado tipo de mecanismo de control (<a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events">eventos ratón-específicos</a>). Para resumir, esto causa problemas de accesibilidad porque otros mecanismos de control no pueden activar la funcionalidad asociada.</p> + +<p>Como ejemplo, el evento de clic es bueno en términos de accesibilidad: se puede invocar un controlador de eventos asociado haciendo clic en el elemento en el que está configurado el controlador, haciendo tabulaciones en él y presionando Intro / Retorno, o tocándolo en un dispositivo de pantalla táctil. Pruebe nuestro ejemplo <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html">simple-button-example.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html">véalo en vivo</a>) para ver lo que queremos decir.</p> + +<p>Alternativamente, los eventos específicos del mouse como <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmousedown">mousedown</a> y <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmouseup">mouseup</a> crean problemas: sus controladores de eventos no pueden invocarse usando controles que no sean del mouse.</p> + +<p>Si intenta controlar nuestro ejemplo de <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html">simple-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html">ver ejemplo en vivo</a>) con el teclado o el toque, verá el problema. Esto ocurre porque estamos usando un código como el siguiente:</p> + +<pre><code>div.onmousedown = function() { + initialBoxX = div.offsetLeft; + initialBoxY = div.offsetTop; + movePanel(); +} + +document.onmouseup = stopMove;</code></pre> + +<p>Para habilitar otras formas de control, debe usar eventos diferentes pero equivalentes; por ejemplo, los eventos táctiles funcionan en dispositivos con pantalla táctil:</p> + +<pre><code>div.ontouchstart = function(e) { + initialBoxX = div.offsetLeft; + initialBoxY = div.offsetTop; + positionHandler(e); + movePanel(); +} + +panel.ontouchend = stopMove;</code></pre> + +<p>Hemos proporcionado un ejemplo sencillo que muestra cómo usar el mouse y los eventos táctiles juntos <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html">multi-control-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html">ver ejemplo en vivo</a>).</p> + +<p><strong>Nota:</strong> También puede ver ejemplos totalmente funcionales que muestran cómo implementar diferentes mecanismos de control en <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms">Implementando mecanismos de control de juego.</a></p> + +<h2 id="Diseño_de_respuesta">Diseño de respuesta</h2> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Responsive">El diseño de respuesta</a> es la práctica de hacer que sus diseños y otras características de sus aplicaciones cambien dinámicamente dependiendo de factores como el tamaño de la pantalla y la resolución, para que sean utilizables y accesibles para usuarios de diferentes tipos de dispositivos.</p> + +<p>En particular, los problemas más comunes que deben abordarse para dispositivos móviles son:</p> + +<p> </p> + +<ul> + <li>Adecuación de diseños para dispositivos móviles. Un diseño de varias columnas no funcionará tan bien en una pantalla estrecha, por ejemplo, y es posible que deba aumentar el tamaño del texto para que sea legible. Dichos problemas se pueden resolver creando un diseño sensible utilizando tecnologías tales como <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">mconsultas de medios, </a><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">vista</a> and <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>. .</li> + <li>Conservando tamaños de imagen descargados. En general, los dispositivos de pantalla pequeña no necesitarán imágenes tan grandes como sus contrapartes de escritorio, y es más probable que estén en conexiones de red lentas. Por lo tanto, es aconsejable servir imágenes más pequeñas para dispositivos de pantalla estrecha, según corresponda. Puede manejar esto <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"> técnicas de imagenes de respuesta</a>.</li> + <li>Pensando en altas resoluciones. Muchos dispositivos móviles tienen pantallas de alta resolución y, por lo tanto, necesitan imágenes de mayor resolución para que la pantalla pueda seguir luciendo nítida y nítida. Nuevamente, puede servir imágenes según corresponda utilizando técnicas de imágenes sensibles. Además, muchos requisitos de imagen se pueden cumplir con el formato de imágenes vectoriales SVG, que es compatible con todos los navegadores actuales. SVG tiene un tamaño de archivo pequeño y se mantendrá nítido independientemente del tamaño que se muestre (consulte <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Agregar gráficos vectoriales a la web</a> para obtener más detalles).</li> +</ul> + +<p><strong>Nota</strong>: No proporcionaremos una discusión completa de las técnicas de diseño receptivo aquí, ya que están cubiertas en otros lugares alrededor de MDN (vea los enlaces anteriores).</p> + +<h3 id="Consideraciones_específicas_para_móviles">Consideraciones específicas para móviles</h3> + +<p>Hay otros aspectos importantes a tener en cuenta al hacer que los sitios sean más accesibles en dispositivos móviles. Hemos enumerado un par aquí, pero agregaremos más cuando pensemos en ellos.</p> + +<h4 id="No_deshabilitar_el_zoom">No deshabilitar el zoom</h4> + +<p>Usando viewport, es posible deshabilitar el zoom, usando un código como este en su {{htmlelement("head")}}:</p> + +<pre><code><meta name="viewport" content="user-scalable=no"></code></pre> + +<p>Nunca debe hacer esto si es posible: muchas personas confían en el zoom para poder ver el contenido de su sitio web, por lo que eliminar esta funcionalidad es una muy mala idea. Hay ciertas situaciones en las que el zoom podría romper la interfaz de usuario; en tales casos, si cree que necesita deshabilitar el zoom, debe proporcionar algún otro tipo de equivalente, como un control para aumentar el tamaño del texto de una manera que no rompa su interfaz de usuario.</p> + +<h4 id="Mantener_los_menús_accesibles.">Mantener los menús accesibles.</h4> + +<p> </p> + +<p>Debido a que la pantalla es mucho más estrecha en los dispositivos móviles, es muy común utilizar consultas de medios y otras tecnologías para hacer que el menú de navegación se reduzca a un pequeño icono en la parte superior de la pantalla, que se puede presionar para mostrar el menú solo si es necesario - cuando el sitio se ve en el móvil. Esto suele representarse mediante un icono de "tres líneas horizontales" y, por lo tanto, el patrón de diseño se conoce como "menú de hamburguesas".</p> + +<p>Al implementar un menú de este tipo, debe asegurarse de que el control para revelarlo sea accesible mediante los mecanismos de control apropiados (normalmente, toque para dispositivos móviles), como se explica en {{ anch("Control mechanisms" )}}, y que el resto La página se aleja o se oculta de alguna manera mientras se accede al menú, para evitar confusiones al navegar.</p> + +<p>Haga clic aquí para un buen<a href="http://fritz-weisshart.de/meg_men/"> ejemplo de menú de hamburguesa.</a></p> + +<h2 id="Entrada_de_usuario">Entrada de usuario</h2> + +<p> </p> + +<p>En los dispositivos móviles, el ingreso de datos tiende a ser más molesto para los usuarios que la experiencia equivalente en computadoras de escritorio. Es más conveniente escribir texto en las entradas de formulario utilizando un teclado de computadora de escritorio o portátil que un teclado virtual de pantalla táctil o un pequeño teclado físico móvil.</p> + +<p>Por esta razón, vale la pena intentar minimizar la cantidad de escritura necesaria. Como ejemplo, en lugar de hacer que los usuarios completen el título de su trabajo cada vez que usan una entrada de texto regular, podría ofrecer un menú {{htmlelement ("select")}} que contenga las opciones más comunes (que también ayuda a mantener la coherencia en entrada de datos), y ofrece una opción "Otro" que muestra un campo de texto para escribir cualquier valor atípico. Puedes ver un ejemplo simple de esta idea en acción en <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html">common-job-types.html</a> (ver el <a href="http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html">common jobs ejemplo en vivo</a>).</p> + +<p>También vale la pena considerar el uso de los tipos de entrada de formulario HTML5, así como la fecha en las plataformas móviles, ya que ambos los manejan bien: tanto Android como iOS, por ejemplo, muestran widgets utilizables que se adaptan bien a la experiencia del dispositivo. Ver <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html">html5-form-examples.html</a> para algunos ejemplos (ver el <a href="http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html">ejemplo de formulario en vivo en HTML5</a>) — intenta cargarlos y manipularlos en dispositivos móviles. Por ejemplo:</p> + +<ul> + <li>Los tipos de <code>number</code>, <code>tel</code>, <code>y email</code> muestran teclados virtuales adecuados para ingresar números / números de teléfono.</li> + <li>Los tipos de <code>time</code> and <code>date</code> muestran selectores adecuados para seleccionar horas y fechas.</li> +</ul> + +<p>If you want to provide a different solution for desktops, you could always serve different markup to your mobile devices using feature detection. See <a href="http://diveinto.html5doctor.com/detect.html#input-types">input types</a> for raw information on detecting different input types, and also check out our <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">feature detection article</a> for much more information.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>En este artículo, le proporcionamos algunos detalles sobre problemas comunes comunes relacionados con la accesibilidad móvil y cómo superarlos. También lo llevamos a través del uso de los lectores de pantalla más comunes para ayudarlo en las pruebas de accesibilidad.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://www.smashingmagazine.com/guidelines-for-mobile-web-development/">Directrices para desarrollo web en móviles</a> — Una lista de artículos en Smashing Magazine que cubren diferentes técnicas para el diseño web móvil.</li> + <li><a href="http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644">Haz funcionar tu web en dispositivos táctiles</a> — Artículo útil sobre el uso de eventos táctiles para que las interacciones funcionen en dispositivos móviles.</li> +</ul> + +<div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div> + +<div> +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">¿Qué es la accesibilidad?</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: Una buena base para la accesibilidad</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">Mejores prácticas de accesibilidad en CSS y JavaScript </a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA básico</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Multimedia accesible </a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Accessibilidad mobil </a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Solucionador de problemas en </a><a href="/en-US/docs/Learn/Accessibility/Mobile">Accessibilidad</a></li> +</ul> +</div> +</div> diff --git a/files/es/learn/accessibility/qué_es_la_accesibilidad/index.html b/files/es/learn/accessibility/qué_es_la_accesibilidad/index.html new file mode 100644 index 0000000000..e92994e37c --- /dev/null +++ b/files/es/learn/accessibility/qué_es_la_accesibilidad/index.html @@ -0,0 +1,211 @@ +--- +title: ¿Qué es la accesibilidad? +slug: Learn/Accessibility/Qué_es_la_accesibilidad +translation_of: Learn/Accessibility/What_is_accessibility +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</div> + +<p class="summary">En este artículo se inicia el módulo con una explicación ampliada sobre qué es la accesibilidad. Esta visión general incluye qué grupos de personas necesitamos tener en cuenta y por qué, qué herramientas utilizan estas personas para interactuar con la web y cómo podemos hacer que la accesibilidad sea parte de nuestro flujo de trabajo de desarrollo web.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conocimientos básicos de informática y de lenguaje HTML y CSS.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Familiarizarse con la accesibilidad (qué es y cómo te afecta como desarrollador web).</td> + </tr> + </tbody> +</table> + +<h2 id="¿Qué_es_la_accesibilidad">¿Qué es la accesibilidad?</h2> + +<p>La accesibilidad hace que tus sitios web puedan ser utilizados por el mayor número de personas posible. Tradicionalmente, se ideó para las personas con discapacidad, pero la creación de sitios accesibles también beneficia a otros grupos, como los que utilizan los dispositivos móviles o los que tienen conexiones de red lentas.</p> + +<p>También podrías pensar en la accesibilidad como una forma de tratar a todos por igual y darles las mismas oportunidades, sin importar su capacidad o circunstancias. Al igual que es injusto excluir a alguien de un edificio porque vaya en silla de ruedas (generalmente, los edificios públicos modernos tienen rampas o ascensores), tampoco es correcto excluir a alguien de un sitio web porque tenga una discapacidad visual. Todos somos diferentes, pero todos somos humanos, y por lo tanto tenemos los mismos derechos.</p> + +<p>Por eso debemos hacer las cosas accesibles. En algunos países es obligado por ley proporcionar sitios web accesibles, lo que te puede abrir algunos mercados importantes que de otra manera no serían capaces de utilizar tus servicios o comprar tus productos.</p> + +<p>Crear sitios web accesibles nos beneficia a todos:</p> + +<ul> + <li>El HTML semántico, aparte de mejorar la accesibilidad, también mejora la optimización en motores de búsqueda (SEO), y la gente encuentra tu sitio web con mayor facilidad.</li> + <li>Preocuparse por la accesibilidad demuestra buenos criterios éticos y morales, lo que mejora tu imagen pública.</li> + <li>Mejorar la accesibilidad también hace que tu sitio sea más fácil de usar por otros grupos, como los usuarios de dispositivos móviles o los que tienen internet de baja velocidad. De hecho, todo el mundo puede beneficiarse de estas mejoras.</li> + <li>¿Hemos mencionado también que en algunos países está estipulado por ley?</li> +</ul> + +<h2 id="¿Con_que_tipo_de_discapacidades_nos_encontraremos">¿Con que tipo de discapacidades nos encontraremos?</h2> + +<p>Las personas con discapacidad son tan diversas como las personas sin discapacidad, y también lo son sus discapacidades. La clave está en pensar más allá de tu ordenador y en cómo utilizas la web y empezar a aprender acerca de cómo otros la utilizan. <em>Tú no eres tus usuarios</em>. A continuación explicaremos los principales tipos de discapacidad que vamos a considerar, junto con las herramientas especiales que se utilizan para acceder al contenido web (conocidas como <strong>tecnologías de apoyo</strong> o <strong>AT</strong>, de <em>assistive technologies</em>).</p> + +<div class="note"> +<p><strong>Nota</strong>: La hoja informativa sobre <a href="https://www.who.int/es/news-room/fact-sheets/detail/disability-and-health">discapacidad y salud</a> de la Organización Mundial de la Salud establece que «Más de mil millones de personas, aproximadamente el 15% de la población mundial, tienen alguna forma de discapacidad» y «Entre 110 millones y 190 millones de adultos tienen dificultades funcionales significativas».</p> +</div> + +<h3 id="Personas_con_discapacidad_visual">Personas con discapacidad visual</h3> + +<p>Las personas con discapacidad visual son aquellas con ceguera, poca visión o daltonismo. Muchas personas con discapacidad visual utilizan amplificadores de pantalla que consisten en lupas físicas o funciones de zoom por software. La mayoría de los navegadores y sistemas operativos de hoy en día tienen instaladas funciones de zoom. Algunos usuarios confían en los lectores de pantalla, un software que lee en voz alta los textos digitales. Algunos ejemplos de lectores de pantalla incluyen:</p> + +<ul> + <li>Productos comerciales de pago, como <a class="external external-icon" href="https://www.freedomscientific.com/Products/software/JAWS/">JAWS</a> (Windows) y <a href="https://yourdolphin.com/screenreader">Dolphin Screen Reader</a> (Windows).</li> + <li>Productos gratuitos, como <a class="external external-icon" href="https://www.nvaccess.org/">NVDA</a> (Windows), <a class="external external-icon" href="https://www.chromevox.com/">ChromeVox</a> (Chrome, Windows y Mac OS X) y <a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux).</li> + <li>Productos integrados en el sistema operativo, como <a class="external external-icon" href="https://www.apple.com/accessibility/mac/vision/">VoiceOver</a> (MacOS, iPadOS, IOS), <a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a> (Microsoft Windows), <a class="external external-icon" href="https://www.chromevox.com/">ChromeVox</a> (en Chrome OS) y <a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li> +</ul> + +<p>Familiarizarse con los lectores de pantalla puede ser útil, así como configurar un lector de pantalla y jugar con él para aprender cómo funciona. Consulta nuestra <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders"> guía de lectores de pantalla de prueba para la navegación cruzada</a> para obtener más detalles sobre su uso. El vídeo siguiente proporciona un breve ejemplo de cómo es esta experiencia.</p> + +<p>{{EmbedYouTube("IK97XMibEws")}}</p> + +<p>En términos de estadística, la Organización Mundial de la Salud estima que «Alrededor de 285 millones de personas de todo el mundo tienen discapacidad visual: 39 millones son ciegas y 246 tienen visión reducida.» (Véase <a href="https://www.who.int/es/news-room/fact-sheets/detail/blindness-and-visual-impairment">Discapacidad visual y ceguera</a>). Esa es una población grande y significativa de usuarios (casi la misma población de los Estados Unidos de América), a la que simplemente perderás porque tu sitio web no está codificado correctamente.</p> + +<h3 id="Personas_con_discapacidades_auditivas">Personas con discapacidades auditivas</h3> + +<p>También conocidas como personas con trastornos auditivos o personas sordas. Son un grupo de personas con niveles de audición bajos o nulos. Las personas con discapacidad auditiva usan AT (véase <a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">Dispositivos de asistencia para personas con trastornos auditivos, de voz, del habla o del lenguaje</a>), pero en realidad no hay AT específicos para el uso del ordenador/web.</p> + +<p>Hay, sin embargo, técnicas específicas para ofrecer alternativas textuales a contenidos de audio, que van desde simples transcripciones hasta pistas de texto (es decir, subtítulos) que se pueden mostrar junto con el vídeo. Pero lo veremos más adelante.</p> + +<p>Las personas con discapacidad auditiva también representan una importante base de usuarios: «466 millones de personas en todo el mundo tienen pérdida auditiva discapacitante», dice la hoja informativa sobre <a href="https://www.who.int/es/news-room/fact-sheets/detail/deafness-and-hearing-loss">Sordera y pérdida auditiva</a> de la Organización Mundial de la Salud.</p> + +<h3 id="Personas_con_discapacidad_motriz">Personas con discapacidad motriz</h3> + +<p>Estas personas tienen discapacidades relativas a la movilidad, que pueden implicar problemas puramente físicos (como la pérdida de una extremidad o la parálisis) o trastornos neurológicos/genéticos que conducen a la debilidad o pérdida de control en las extremidades. Algunas personas simplemente pueden tener dificultades a la hora de mover el ratón, mientras que otras podrían verse más gravemente afectadas, tal vez estén paralizadas y necesiten utilizar un <a href="https://www.performancehealth.com/baseball-cap-head-pointer">puntero de cabeza</a> para interactuar con los ordenadores.</p> + +<p>Este tipo de discapacidad se da principalmente por la vejez, y no por cualquier trauma o condición específica, y también podría resultar de limitaciones en el hardware (algunos usuarios podrían no tener un ratón).</p> + +<p>La forma en que esto afecta al desarrollo web es el requisito de que los controles sean accesibles por el teclado. Hablaremos de la accesibilidad del teclado en artículos posteriores de este módulo, pero te recomendamos probar algunos sitios web utilizando solo el teclado para ver cómo funcionan. Por ejemplo, ¿se puede utilizar la tecla de tabulación para moverse entre los diferentes controles de un formulario web? Puedes encontrar más detalles sobre los controles del teclado en nuestro apartado <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Accesibilidad desde el teclado</a>.</p> + +<p>Si nos basamos en las estadísticas, vemos que un número significativo de personas tienen problemas de movilidad. Los Centros para el Control y la Prevención de Enfermedades de <a href="https://www.cdc.gov/nchs/fastats/disability.htm">Discapacidad y Funcionalidad (Adultos a partir de 18 años no registrados en una institución)</a> de los Estados Unidos informan de que el porcentaje de adultos con alguna disfunción física en los EUA es del 16,1%.</p> + +<h3 id="Personas_con_discapacidad_cognitiva">Personas con discapacidad cognitiva</h3> + +<p>La discapacidad cognitiva engloba una amplia gama de discapacidades, desde las personas que presentan las capacidades intelectuales más limitadas hasta toda la población que tiene problemas a la hora de recordar por los síntomas de la edad. Este amplio abanico incluye a las personas con enfermedades mentales como la <a href="https://www.nimh.nih.gov/health/topics/depression/index.shtml">depresión</a> y la <a href="https://www.nimh.nih.gov/health/topics/schizophrenia/index.shtml">esquizofrenia</a>. También incluye a personas con dificultades de aprendizaje, como la <a href="https://www.ninds.nih.gov/Disorders/All-Disorders/Learning-Disabilities-Information-Page">dislexia</a> y el <a href="https://www.nimh.nih.gov/health/topics/attention-deficit-hyperactivity-disorder-adhd/index.shtml">trastorno por déficit de atención con hiperactividad</a>. Es importante destacar que, aunque hay una gran diversidad dentro de las definiciones clínicas de alteraciones cognitivas, las personas que las experimentan tienen un conjunto común de problemas funcionales, que incluye dificultades a la hora de entender los contenidos, recordar cómo completar las tareas y confusión ante páginas web diseñadas de forma incoherente.</p> + +<p>Una buena base de accesibilidad para personas con deficiencias cognitivas incluye:</p> + +<ul> + <li>proporcionar el contenido en más de un formato, como puede ser texto-a-voz o vídeo;</li> + <li>proporcionar contenidos fáciles de entender, como texto escrito con estándares de lenguaje sencillo;</li> + <li>centrar la atención en el contenido importante;</li> + <li>minimizar las distracciones, tales como contenidos innecesarios o anuncios;</li> + <li>proporcionar un diseño coherente de la página web y del sistema de navegación;</li> + <li>usar elementos ya conocidos, como los enlaces subrayados en azul cuando aún no se han visitado, y en morado cuando sí;</li> + <li>dividir los procesos en pasos lógicos y esenciales con indicadores de progreso;</li> + <li>ofrecer un sistema de autenticación del sitio web de la forma más fácil posible sin comprometer la seguridad; y</li> + <li>diseñar formularios fáciles de completar, con mensajes de error claros y de fácil solución.</li> +</ul> + +<h3 id="Observaciones">Observaciones</h3> + +<ul> + <li>Diseñar para la <a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility">accesibilidad cognitiva</a> proporcionará buenas prácticas de diseño que beneficiarán a todo el mundo.</li> + <li>Muchas personas con discapacidades cognitivas también tienen discapacidades físicas. Los sitios web deben cumplir con las directrices de accesibilidad a los contenidos web <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines</a> de W3C, que incluyen las <a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility#Guidelines">directrices de accesibilidad cognitiva</a>.</li> + <li>El apartado <a href="https://www.w3.org/WAI/GL/task-forces/coga/">Cognitive and Learning Disabilities Accessibility Task Force</a> de W3C aporta pautas de accesibilidad web para personas con discapacidades cognitivas.</li> + <li>WebAIM tiene una <a href="https://webaim.org/articles/cognitive/">página cognitiva</a> con la información y los recursos correspondientes.</li> + <li>Los Centros para el Control de Enfermedades estimaron que, en 2018, 1 de cada 4 ciudadanos de Estados Unidos presentaba alguna discapacidad y que la discapacidad cognitiva es la más común entre los jóvenes.</li> + <li>En los EUA, el término «retraso mental» se ha sustituido por el de «discapacidad intelectual». En el Reino Unido, a la «discapacidad intelectual» se le llama comúnmente «discapacidades de aprendizaje» o «dificultades de aprendizaje».</li> +</ul> + +<h2 id="Implementa_la_accesibilidad_en_tu_proyecto">Implementa la accesibilidad en tu proyecto</h2> + +<p>Un mito común de la accesibilidad es que se trata de un «extra añadido» que encarece tu proyecto. Este mito <em>puede</em> resultar cierto si:</p> + +<ul> + <li>Tratas de «readaptar» la accesibilidad de un sitio web que tiene problemas de accesibilidad importantes.</li> + <li>Solo has empezado a considerar la accesibilidad y temas relacionados en las últimas etapas de un proyecto.</li> +</ul> + +<p>Sin embargo, si se tiene en cuenta la accesibilidad desde el inicio de un proyecto, el coste es muy reducido.</p> + +<p>Al planificar tu proyecto, debes tener en cuenta las pruebas de accesibilidad en la fase de pruebas, lo mismo que las pruebas para cualquier otro sector de público objetivo importante (por ejemplo, los navegadores de escritorio o los navegadores para dispositivo móvil). Somete tu proyecto a pruebas desde una etapa temprana y con frecuencia, idealmente con pruebas automatizadas para detectar carencias detectables en la programación, como la falta de <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">textos alternativos</a> en las imágenes o textos de enlace no adecuados (consulta <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context">Relaciones entre elementos y contexto</a>). Y haz algunas pruebas con grupos de usuarios con discapacidad para ver cómo se desenvuelven con las características más complejas de tu sitio web. Por ejemplo:</p> + +<ul> + <li>¿Las personas que utilizan lectores de pantalla tendrán problemas con mi selector de fechas?</li> + <li>¿Pueden saber las personas con discapacidad visual si el contenido se actualiza dinámicamente?</li> + <li>¿Puedo acceder a los botones de mi interfaz de usuario desde el teclado y desde las interfaces táctiles?</li> +</ul> + +<p>Puedes y debes tener en cuenta las áreas potencialmente problemáticas del contenido que habrá que modificar para proporcionarles accesibilidad, asegúrate de que se prueban a fondo y piensa en soluciones/alternativas. El contenido textual (como veremos en el próximo artículo) es fácil, pero ¿qué pasa con el contenido multimedia y con esos fantásticos gráficos 3D? Echa un ojo al presupuesto del proyecto y piensa en soluciones que estén a tu disposición para convertir tales contenidos en accesibles. Transcribir todos tus archivos multimedia es una opción posible, aunque cara.</p> + +<p>Seamos realistas. El «100% de accesibilidad» es un ideal inalcanzable, ya que siempre te encontrarás con algún tipo de caso límite en que un determinado usuario encuentra ciertos contenidos difíciles de usar, pero debes hacer todo lo que puedas. Si planeas incluir un gráfico 3D circular creado a partir de WebGL, es posible que desees incluir una tabla de datos como una representación alternativa accesible. O bien puedes simplemente incluir la tabla y deshacerte del gráfico circular 3D (todo el mundo puede acceder a la tabla, su codificación resulta más simple, y además consume menos recursos de la CPU y es de mantenimiento más fácil.</p> + +<p>Por otro lado, si trabajas en un sitio web de una galería que muestra obras de arte interesantes en 3D, no sería razonable esperar que cada obra de arte sea perfectamente accesible para las personas con discapacidad visual, ya que se trata de un medio completamente visual.</p> + +<p>Para demostrar que te importa y que has pensado en la accesibilidad, publica una declaración de accesibilidad en la página web que explique tu política de accesibilidad y los pasos realizados para hacer que el sitio web sea accesible. Si alguien se queja de que tiene un problema de accesibilidad: inicia un diálogo con ellos, se empático y toma las medidas razonables para tratar de solucionar el problema.</p> + +<div class="note"> +<p><strong>Nota</strong>: Nuestro artículo sobre <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Cómo afrontar los problemas de accesibilidad más comunes</a> expone los detalles de accesibilidad que es necesario tener más en cuenta.</p> +</div> + +<p>En resumen:</p> + +<ul> + <li>Considera la accesibilidad desde el inicio de un proyecto y haz pruebas con frecuencia. Al igual que cualquier otro error, un problema de accesibilidad se vuelve más caro de arreglar cuanto más tarde se descubre.</li> + <li>Ten en cuenta que muchas de las buenas prácticas de accesibilidad benefician a todo el mundo, no solo a los usuarios con discapacidad. Por ejemplo, el marcado semántico no solo es bueno para los lectores de pantalla, sino que también es de carga y ejecución rápidas. Esto nos beneficia a todos, especialmente a quienes entran con dispositivos móviles y/o tienen conexión lenta.</li> + <li>Publica una declaración de accesibilidad en la página web y relacionarse con la gente que tiene problemas.</li> +</ul> + +<h2 id="Directrices_de_accesibilidad_y_la_ley">Directrices de accesibilidad y la ley</h2> + +<p>Hay numerosas listas de control y conjuntos de directrices en las cuales basar las pruebas de accesibilidad, por lo que podría parecer abrumador a primera vista. Nuestro consejo es que te familiarices con las áreas básicas en las que te interesa centrarte, así como que comprendas las estructuras de alto nivel de las directrices que son más relevantes para ti.</p> + +<ul> + <li>Para empezar, el W3C ha publicado un documento muy extenso y detallado que incluye criterios de accesibilidad muy precisos, independientes de la tecnología. Se llaman <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines</a> (WCAG). Los criterios se dividen en cuatro categorías principales, las cuales especifican según el tipo de implementaciones: perceptibles, operables, comprensibles y robustas. El mejor lugar para adquirir una ligera introducción y comenzar el aprendizaje es <a href="https://www.w3.org/WAI/standards-guidelines/wcag/glance/">WCAG at a Glance</a>. No es necesario que te aprendas las directrices WCAG de memoria, solo tienes que ser consciente de las áreas de preocupación principales y utilizar una variedad de técnicas y herramientas para destacar aquellas áreas que no se ajustan a los criterios WCAG (véase más abajo).</li> + <li>Tu país también puede tener una legislación específica que regule la necesidad de la accesibilidad que los sitios web. Por ejemplo, la norma <a href="https://www.etsi.org/deliver/etsi_en/301500_301599/301549/02.01.02_60/en_301549v020102p.pdf">EN 301 549</a> en la UE, la <a href="https://www.section508.gov/training">sección 508 de la Ley de Rehabilitación</a> en los EUA, la <a href="https://www.einfach-fuer-alle.de/artikel/bitv_english/">Ordenanza Federal de Tecnología de la Información sin barreras</a> en Alemania, el <a href="https://www.legislation.gov.uk/uksi/2018/952/introduction/made">Reglamento de accesibilidad 2018</a> en el Reino Unido, la <a href="https://www.agid.gov.it/it/design-servizi/accessibilita-siti-web">Accessibilità</a> en Italia, la <a href="https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014">Ley de Discriminación por Discapacidad</a> en Australia, etc. La W3C tiene una lista de <a href="https://www.w3.org/WAI/policies/">políticas y leyes de accesibilidad web</a> según países.</li> +</ul> + +<p>Así, mientras que la WCAG es un conjunto de directrices, tu país probablemente tiene leyes que rigen la accesibilidad web, o al menos la accesibilidad de los servicios disponibles para el público (que incluyen sitios web, televisión, espacios físicos, etc.). Conocer estas leyes puede resultarte útil. Si no te preocupas por comprobar que tu contenido sea accesible, podrías incurrir en alguna responsabilidad legal, si la gente se queja.</p> + +<p>Suena serio, pero en realidad solo tienes que considerar la accesibilidad como la prioridad principal a la hora de desarrollar tu web, como ya hemos dicho. En caso de duda, asesórate por un abogado cualificado. Y como nosotros no lo somos, no vamos a ofrecer más consejos sobre este tema.</p> + +<h2 id="API_de_accesibilidad">API de accesibilidad</h2> + +<p>Los navegadores web hacen uso de <strong>API de accesibilidad</strong> especiales (proporcionadas por el sistema operativo subyacente) que exponen información útil para las tecnologías de asistencia (AT, <em>assistive technologies</em>): la mayoría de AT tienden a utilizar información semántica, por lo que esta información no incluye información de estilo o JavaScript. Esta información se estructura en un árbol de datos, denominado <strong>árbol de accesibilidad</strong>.</p> + +<p>Los diferentes sistemas operativos disponen de diferentes API de accesibilidad:</p> + +<ul> + <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li> + <li>Mac OS X: NSAccessibility</li> + <li>Linux: AT-SPI</li> + <li>Android: Accessibility framework</li> + <li>iOS: UIAccessibility</li> +</ul> + +<p>Cuando la información semántica nativa proporcionada por los elementos HTML de tus aplicaciones web falla, puedes complementarlo con características de la <a href="https://www.w3.org/TR/wai-aria/">especificación WAI-ARIA</a>, que añaden información semántica al árbol para mejorar la accesibilidad. Puedes aprender más acerca de WAI-ARIA en nuestro artículo de <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">fundamentos WAI-ARIA</a>.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>Este artículo debería haber dado una descripción detallada sobre la accesibilidad, mostrar por qué es importante y enseñar cómo puede encajar en tu flujo de trabajo. Ahora también deberías tener sed de conocimientos sobre los detalles de implementación que hacen que los sitios sean accesibles. Comenzaremos con esto en la sección siguiente, observando por qué HTML es una buena base para la accesibilidad.</p> + +<p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">¿Qué es la accesibilidad?</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: Una buena base para la accesibilidad</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">Buenas prácticas de accesibilidad en CSS y JavaScript</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">Fundamentos WAI-ARIA</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Multimedia accesible</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Accesibilidad móvil</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Resolución de problemas de accesibilidad</a></li> +</ul> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">WCAG</a> + + <ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable">Perceptible</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable">Operable</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable">Comprensible</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust">Robusto</a></li> + </ul> + </li> +</ul> |