Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal...
Transcript of Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal...
![Page 1: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/1.jpg)
Desarrollo de software y web accesible
Sergio Luján Mora [email protected] @sergiolujanmora sergiolujanmora.es
![Page 2: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/2.jpg)
![Page 3: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/3.jpg)
![Page 4: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/4.jpg)
QUÉ ES LA ACCESIBILIDAD WEB
![Page 5: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/5.jpg)
![Page 6: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/6.jpg)
Diseño inclusivo Diseño universal
Diseño para todos
![Page 7: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/7.jpg)
Tim Berners-Lee
![Page 8: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/8.jpg)
El poder de la Web está en su universalidad. El acceso por cualquier persona, independientemente de la discapacidad que presente es un aspecto esencial. El arte de garantizar que, en la mayor medida posible, las instalaciones (tales como, por ejemplo, acceso a Internet) están disponibles para las personas independientemente de que tengan algún tipo de discapacidad.
![Page 9: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/9.jpg)
• Pero la accesibilidad web no beneficia únicamente a las personas con discapacidad, NOS BENEFICIA A TODOS
![Page 10: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/10.jpg)
CÓMO SE LOGRA QUE UN SITIO WEB SEA ACCESIBLE
![Page 11: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/11.jpg)
Octubre 1994
![Page 12: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/12.jpg)
![Page 13: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/13.jpg)
![Page 14: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/14.jpg)
![Page 15: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/15.jpg)
![Page 16: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/16.jpg)
![Page 17: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/17.jpg)
![Page 18: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/18.jpg)
![Page 19: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/19.jpg)
Principio 1: Perceptible: la información y los componentes de la interfaz de
usuario deben ser mostrados a los usuarios en formas que ellos puedan percibirlos.
Principio 2: Operable: los componentes de la interfaz de usuario y la
navegación debe ser manejable.
Principio 3: Comprensible: la información y el manejo de la interfaz de
usuario deben ser comprensibles
Principio 4: Robusto: el contenido deber ser suficientemente robusto para
que pueda ser bien interpretado por una gran variedad de agentes de usuario, incluyendo los productos de apoyo.
![Page 20: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/20.jpg)
Principios 4
Directrices 12
Criterios de cumplimiento 61
Técnicas suficientes Técnicas de asesoramiento
![Page 21: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/21.jpg)
![Page 22: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/22.jpg)
![Page 23: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/23.jpg)
![Page 24: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/24.jpg)
![Page 25: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/25.jpg)
![Page 26: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/26.jpg)
Ejemplo
![Page 27: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/27.jpg)
Fuente: Internet users (per 100 people) / The World Bank
![Page 28: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/28.jpg)
Fuente: Internet users (per 100 people) / The World Bank
¿Cómo se puede hacer este gráfico más accesible?
![Page 29: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/29.jpg)
![Page 30: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/30.jpg)
![Page 31: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/31.jpg)
![Page 32: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/32.jpg)
Problemas de percepción de contraste Aunque las pautas no lo dicen explícitamente, el gráfico transmite información y puede ser que el texto o las propias barras no tengan contraste suficiente: - Para el texto, lo normal es un contraste 4,5:1 mínimo. - Para las barras se podría aceptar un contraste 3:1 mínimo porque su grosor es bastante mayor que el de un texto.
![Page 33: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/33.jpg)
![Page 34: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/34.jpg)
0
10
20
30
40
50
60
70
80
90
100
Eritrea Ecuador España Islandia
2011
2012
![Page 35: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/35.jpg)
![Page 36: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/36.jpg)
![Page 37: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/37.jpg)
Daltonismo y problemas percepción de colores Hay que asegurarse de que sin color la leyenda de las barras tiene sentido y se puede saber cuál es cada dato. Por ejemplo: - Terminar cada barra con un remate diferente (plano, circular, triangular). - Bordes de distinto tipo. - Contenido con rayados diferentes - Un icono o letra al principio de cada barra.
![Page 38: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/38.jpg)
![Page 39: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/39.jpg)
0
10
20
30
40
50
60
70
80
90
100
Eritrea Ecuador España Islandia
2011
2012
![Page 40: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/40.jpg)
Discapacidad cognitiva / intelectual Conviene indicar los valores de cada barra al final de las mismas, de forma que no haya que calcular el valor de cada barra con una regla. En realidad, ayuda a todo el mundo.
![Page 41: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/41.jpg)
0,7
31,4
67,6
95
0,8
35,1
72
96
0
10
20
30
40
50
60
70
80
90
100
Eritrea Ecuador España Islandia
2011
2012
![Page 42: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/42.jpg)
Baja visión, vista cansada Tipo de letra grande, de alto contraste.
![Page 43: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/43.jpg)
0,7
31,4
67,6
95
0,8
35,1
72
96
0
10
20
30
40
50
60
70
80
90
100
Eritrea Ecuador España Islandia
2011
2012
![Page 44: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/44.jpg)
¿Cómo se puede hacer este gráfico más accesible? ¿Qué más se puede hacer?
![Page 45: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/45.jpg)
País 2011 2012
Eritrea 0,7 0,8
Ecuador 31,4 35,1
España 67,6 72
Islandia 95 96
Encabezado de columna
Encabezado de fila
![Page 46: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/46.jpg)
<img src="internet.png"
alt="Índice de penetración de Internet por países
(gráfico de barras, datos disponibles en la
siguiente tabla)" />
![Page 47: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/47.jpg)
<table class="oculto"
summary="Datos de penetración de Internet;
filas: países; columnas: % de la población que dispone
de acceso a Internet">
<caption>Índice de penetración de Internet por
países</caption>
<thead>
<tr>
<th scope="col">País</th>
<th scope="col">2011</th>
<th scope="col">2012</th>
</tr>
</thead>
![Page 48: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/48.jpg)
<tbody>
<tr>
<th scope="row">Eritrea</th>
<td>0,7</td>
<td>0,8</td>
</tr>
<tr>
<th scope="row">Ecuador</th>
<td>31,4</td>
<td>35,1</td>
</tr>
...
</tbody>
</table>
![Page 49: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/49.jpg)
.oculto {
position: absolute;
left: -9999em;
width: 1px;
height: 1px;
overflow: hidden;
}
![Page 50: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/50.jpg)
<img src="internet.png"
alt="Índice de penetración de Internet por países
(gráfico de barras, datos disponibles en la
siguiente tabla)“
longdesc="tabla-datos.html"/>
![Page 51: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/51.jpg)
![Page 52: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/52.jpg)
![Page 53: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/53.jpg)
![Page 54: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/54.jpg)
![Page 55: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/55.jpg)
CÓMO SE EVALÚA LA ACCESIBILIDAD DE UN SITIO WEB
![Page 56: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/56.jpg)
![Page 57: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/57.jpg)
![Page 58: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/58.jpg)
![Page 59: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/59.jpg)
• Pero no es suficiente para realmente saber si un sitio web es accesible…
![Page 60: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/60.jpg)
• Pero no es suficiente para realmente saber si un sitio web es accesible…
![Page 61: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/61.jpg)
ERRORES MÁS COMUNES DE ACCESIBILIDAD WEB
![Page 62: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/62.jpg)
• La accesibilidad web sólo se logra si se garantiza el cumplimiento de todos los puntos de verificación de WCAG 2.0 (A, AA, AAA)
• Sin embargo…
![Page 63: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/63.jpg)
• Si se solucionan los problemas más comunes, podemos lograr una alta accesibilidad, aunque NO PODEMOS GARANTIZAR QUE SEA REALMENTE ACCESIBLE
![Page 64: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/64.jpg)
![Page 65: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/65.jpg)
![Page 66: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/66.jpg)
Roger Hudson “Ten Common Accessibility Problems”
1. Failure to include text alternatives for images.
2. Use of CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart).
3. Failure to provide adequate alternatives for other inaccessible content.
4. Failure to use HTML header elements appropriately.
5. Failure to explicitly associate form inputs with their labels (or use the input title attribute).
![Page 67: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/67.jpg)
Roger Hudson “Ten Common Accessibility Problems”
6. Failure to ensure sufficient difference between foreground (text) colour and background colour.
7. Failure to identify data tables with summary attribute or caption element.
8. Failure to mark-up data tables correctly.
9. Failure to ensure sites can be used without the mouse.
10. Use of “onchange” event handlers with select menus.
![Page 68: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/68.jpg)
Ted Drake of Yahoo! Accessibility Lab “Are you still doing that?!?! Common Accessibility Errors”
1. Contrast. 2. Don’t use colour as the only delimiter. 3. Use appropriate alt text. 4. Don’t forget to add the alt attribute to every
image. 5. Add a background colour to your background
CSS when the link text is the same colour as the container background colour.
![Page 69: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/69.jpg)
Ted Drake of Yahoo! Accessibility Lab “Are you still doing that?!?! Common Accessibility Errors”
6. Use clip to visually hide content.
7. Don’t forget keyboard accessibility.
8. Don’t remove focus and active styles without providing an alternative.
9. Don’t use a link for a button.
10. Make sure you don’t duplicate input id’s on the same page.
![Page 70: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/70.jpg)
![Page 71: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/71.jpg)
Survey 2
![Page 72: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/72.jpg)
Survey 4
![Page 73: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/73.jpg)
![Page 74: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/74.jpg)
https://www.youtube.com/user/accesibilidadenlaweb
![Page 75: Desarrollo de software y web accesible - RUA: Principal · Diseño inclusivo Diseño universal Diseño para todos . Tim ... ¿Cómo se puede hacer este gráfico más accesible? Problemas](https://reader031.fdocuments.mx/reader031/viewer/2022021719/5bacd6f509d3f230528c2035/html5/thumbnails/75.jpg)
https://www.udemy.com/aprende-accesibilidad-web-paso-a-paso/