---
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>&lt;style&gt;</code>  /  <code>&lt;script&gt;.</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>&lt;div class="nav"&gt;&lt;/div&gt;</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>&lt;audio&gt;</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>&lt;audio&gt;</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>&lt;input&gt;</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>&lt;input&gt;</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>