Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
EJEMPLO DE CORRECCIÓN DE
ERRORES DE ACCESIBILIDAD
WCAG 2.0
José Ramón Hilera
Contenido
• Página web de ejemplo
• Error en texto alternativo de una imagen
• Error en enlace no visualizado
• Error en s...
Página web de ejemplo
• Los ejemplos de esta presentación son del W3C:
– www.w3.org/WAI/demos/bad/
3
Ejemplo de “no accesible” a “accesible”
Error en texto alternativo de una imagen
Imagen con texto
alternativo
inadecuado
<...
Ejemplo de “no accesible” a “accesible”
Error en texto alternativo (solución)
Esta imagen se muestra
sólo con fines decora...
Ejemplo de “no accesible” a “accesible”
Error en enlace no visualizado
El enlace no es lo suficientemente claro,
ya que se...
Ejemplo de “no accesible” a “accesible”
Error en enlace no visualizado (solución)
Resaltar los enlaces cuando se seleccion...
Ejemplo de “no accesible” a “accesible”
Error en secuencia de lectura
"After three years of effort city scientists now agr...
Ejemplo de “no accesible” a “accesible”
Error en secuencia de lectura (solución)
<table>
<tr>
<td>After three
years of ......
Ejemplo de “no accesible” a “accesible”
Error en enlace
Esta imagen tiene una alternativa de texto
vacío, pero es el único...
Ejemplo de “no accesible” a “accesible”
Error en enlace (solución)
<a href="news.html" class="more">
Heat wave –
<br>full ...
Ejemplo de “no accesible” a “accesible”
Versión accesible
www.w3.org/WAI/demos/bad/after/home.html
Próxima SlideShare
Cargando en…5
×

Ejemplo de corrección de errores de accesibilidad WCAG 2.0 en una página web

646 visualizaciones

Publicado el

Ejemplo de corrección de errores de accesibilidad WCAG 2.0 en una página web.
Video de la presentacion disponible en:
https://youtu.be/or77o2EX_vc

Publicado en: Internet
  • Sé el primero en comentar

Ejemplo de corrección de errores de accesibilidad WCAG 2.0 en una página web

  1. 1. EJEMPLO DE CORRECCIÓN DE ERRORES DE ACCESIBILIDAD WCAG 2.0 José Ramón Hilera
  2. 2. Contenido • Página web de ejemplo • Error en texto alternativo de una imagen • Error en enlace no visualizado • Error en secuencia de lectura • Error en enlace 2
  3. 3. Página web de ejemplo • Los ejemplos de esta presentación son del W3C: – www.w3.org/WAI/demos/bad/ 3
  4. 4. Ejemplo de “no accesible” a “accesible” Error en texto alternativo de una imagen Imagen con texto alternativo inadecuado <div style="background: url(BrainInJar.jpg)" title="image" ... >
  5. 5. Ejemplo de “no accesible” a “accesible” Error en texto alternativo (solución) Esta imagen se muestra sólo con fines decorativos, por lo que debe tener una alternativa de texto vacío. <img src="../../img/after /BrainInJar.jpg" alt="">
  6. 6. Ejemplo de “no accesible” a “accesible” Error en enlace no visualizado El enlace no es lo suficientemente claro, ya que se asemeja a una cabecera, y no hay ningún cambio de estilo al tomar el foco o pasar por encima con el ratón. <a href="news.html">Heat wave linked to temperatures</a>
  7. 7. Ejemplo de “no accesible” a “accesible” Error en enlace no visualizado (solución) Resaltar los enlaces cuando se seleccionan utilizando el teclado o se pasa sobre ellos con el ratón. .news h2 a:hover {color: #ba2710; background-image: none;} .news h2 a:focus {color: #ba2710} <div class="news"> <h2><a href="news.html">Heat wave linked to temperatures</a></h2></div> CSS
  8. 8. Ejemplo de “no accesible” a “accesible” Error en secuencia de lectura "After three years of effort city scientists now agree that the primary cause of the 2003 heatwave was hot air from our Mayor: These kinds of crimes need more creative, effective punishments. For example, we could require compulsory Brain donations: huge drop off in brain donations down due to the 'success' of 'Slow Traffic, Safe Streets' policy"
  9. 9. Ejemplo de “no accesible” a “accesible” Error en secuencia de lectura (solución) <table> <tr> <td>After three years of ...</td> <td>Mayor: These kinds of ...</td> <td>Brain donations: huge ...</td> </tr> </table> <div class="news"> <p>After three years of ...</p></div> <div class="news"> <p>Mayor: These kinds of ...</p></div> <div class="news"> <p> td>Brain donations: huge...</p></div> CSS
  10. 10. Ejemplo de “no accesible” a “accesible” Error en enlace Esta imagen tiene una alternativa de texto vacío, pero es el único contenido en el enlace, por lo que el propósito del enlace no está claro para algunos usuarios. <a href="news.html" ... ><img src="morearrow.gif" alt="" ... ></a>
  11. 11. Ejemplo de “no accesible” a “accesible” Error en enlace (solución) <a href="news.html" class="more"> Heat wave – <br>full story </a>
  12. 12. Ejemplo de “no accesible” a “accesible” Versión accesible www.w3.org/WAI/demos/bad/after/home.html

×