Mini Charlas Tecnológicas @ UTN 2013
Algunos detalles para que me conozcan un poco mejor...
La accesibilidad Web significa que personas con algún tipo de discapacidad van a poder hacer uso de la Web. En concreto, al hablar de accesibilidad Web se está haciendo referencia a un diseño Web que va a permitir que estas personas puedan percibir, entender, navegar e interactuar con la Web, aportando a su vez contenidos a la misma.
En nuestro entorno cotidiano (la web) y a pesar de que las personas (usuarios) cuenten con herramientas, tales como una silla de ruedas, para disminuir sus dificultades (tecnologías de apoyo, por ejemplo un lector de pantalla) existen lugares públicos o privados (sitios web) que NO tienen las condiciones para recibirlos (Accesibilidad Web).
Aproximadamente el 15% de la personas en el mundo están afectadas por algún tipo de discapacidad. (13 veces la población Argentina)
Fuente: World Report on Disability 2011 - OMS
En Argentina aproximadamente el 7.1% de la población sufre de algún tipo de discapacidad (equivaldría a toda la población de la provincia de Santa Fe).
Fuente: Encuesta Nacional de Personas con Discapacidad 2002-2003. INDEC
(Opinión Personal)
Personas con discapacidad versus uso de IE 6 y 7 (combinado)
Argentina | Mundial | |
---|---|---|
Internet Explorer 6 y 7 | 2.0% | 8.0% |
Población con discapacidad | 7.1% | 15.0% |
Existe la creencia entre los desarrolladores y los dueños de negocio que no existe público beneficiado por la Accesibilidad Web, además que no es tema de gran debate.
Fuente: Google Trends, Net Market Share y Stats Counter
Imagen cortesía de Tsahi Levent-Levi
Su implementación en sitios Web beneficia a todas las personas y no solo a aquellas que tienen un algún tipo de dificultad.
Si la accesibilidad Web mejora la experiencia de usuario para las personas con discapacidades, por qué no lo haría en personas sin dificultades.
Las estadísticas anteriores no tienen en cuenta que todos podemos quedar temporalmente disminuidos, siendo entonces el número de personas afectadas, en un período de tiempo, aún mayor.
Imagen cortesía de Cameron Parkins
Fuente: Web Accessibility Web Standards and Regulatory Compliance
La aplicación de técnicas de Accesibilidad Web mejora la facilidad de uso, legibilidad y comprensión del contenido en la Web.
La empresa Legal & General aumentó un 300% sus conversiones y disminuyó un 10% su tasa de rebote tras aplicar un nuevo diseño accesible.
Legal & General recibe 34 mil visitantes únicos diarios según Alexa.
Este ejemplo de aumento de conversiones por aplicar accesibilidad Web fue presentado por Karl Groves en su blog.
En Argentina como en otros países del mundo ciertos grupos de páginas o sitios Web están obligados a ser accesibles.
La ley de ACCESIBILIDAD DE LA INFORMACION EN LAS PAGINAS WEB número 26.653 se encuentra en vigencia desde el .
Esta ley obliga a los sitios alcanzados (poderes del Estado Nacional, organismos autárquicos o descentralizados, entes públicos, empresas públicas y las empresas privadas contratistas del Estado) a desarollar sus sitios de manera accesible o a adecuar sus sitios actuales a las normativas de Accesibilidad Web Internacionales (WCAG).
El 98% de los sitios gubernamentales alojados bajo los dominios gob.ar y gov.ar presentan al menos una barrera de acceso al contenido.
Estos sitios fallan en algunos de los criterios de nivel A propuestos en las pautas WCAG.
Fuente: Accesibilidad Web Gubernamental - 2012Finalmente ...
Imagen cortesía de Kelly Sue
Concentrarnos en un pequeño número de técnicas que tendrán efecto en una gran cantidad de barreras (Principio de Paretto).
Con un pequeño esfuerzo podemos mejorar ampliamente la accesibilidad Web de nuestros sitios.
(*) 80-20 es marketinero y no 100% real.
button
) no es lo que se dijo (div
).
<div class="boton-guardar">
no es un botón (<button class="boton-guardar">
).
<span onclick="document.location='index.html'">
no es un link (<a href="index.html">
).
<span class="etiqueta">
no es una etiqueta (<label for="algun-input" class="etiqueta">
).
<div class="page-title">
no es un título (<h1 class="page-title">
).
Son un conjunto de funciones que otorga un sistema operativo para facilitar la accesibilidad de cualquier aplicación.
Los navegadores Web implementan esta API sobre los elementos HTML presentes en cada sitio.
Usar elementos nativos con un cierto significado, es asegurarse que tengan su correspondiente acceso a la API.
Utilizar HTML de manera incorrecta o no semántica anula el acceso a las API de accesibilidad, afectando entre otros a las siguientes interacciones: foco, estados, acceso por teclado.
Los controles sin etiquetas no comunican a las personas con dificultades en la visión el objetivo de dicha entrada y tampoco los requisitos del mismo (ejemplo: es obligatorio).
Ejemplo: API Santa FE - Reimpresión de boleta.
<label title="Este campo es obligatorio" for="ctal">Número de Partida:</label>
<input type="text" name="cta1" id="cta1" />
alt
No todo es lo que parece
Utilizar el atributo title
en aquellos elementos que su contenido va a ser una imagen de fondo en CSS.
<div id="columna2">
<a target="_blank" title="Trámites online (abre en nueva ventana)"
href="http://www.rosario.gov.ar/tramitesonline/" </a>
<!-- Enlace que va ser leído como "LINK" -->
</div>
<div id="cultura">
<a target="_blank" title="Rosario Cultura (abre en nueva ventana)"
href="http://www.rosariocultura.gob.ar/" </a>
<!-- Enlace que va ser leído como "LINK" -->
</div>
<div id="banner">
<!-- Objeto FLASH que no va ser leído, requiere que se agregue texto accesible -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"
width="200" height="50">
<param name="movie" value="flash/banner_1.swf">
<param name="quality" value="high">
<embed src="flash/banner_1.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"
width="200" height="50">
</object>
</div>
<!-- . . . -->
</div>
alt
de manera correcta (primera parte)alt
en todas imágenes de la página, el contenido del atributo debe describir la función de la imagen y no la imagen en si misma.
alt
debería ser el nombre de la empresa y no "logo".
alt="Principal"
alt
de manera correcta (segunda parte)alt=""
cuando la imagen que se está describiendo cumple una función decorativa o no es necesaria para la comprensión del contenido. Por ejemplo si la imagen es un gráfico cuya información se encuentra descripta en el texto de la página, no existe necesidad de repetir la información.
alt
tenga que ser el mismo para cada una, ya que el contenido del mismo cambia con el contexto de la imagen. Por ejemplo, ya vimos que un logo podría reemplazar a el nombre de la empresa alt="Mi empresa"
, puede utilizarse en un enlace alt="Principal"
o pudiera ser simplemente un decorado alt=""
.
En ocaciones para dar una alternativa textual requerimos de texto extra que visualmente puede estropear el diseño de una página Web.
Existen técnicas en CSS para ocultar texto visualmente mientras que continuan siendo leídos por los programas de lectura de pantalla. Por ejemplo la clase "visuallyhidden" del HTML5 Boilerplate.
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Esta técnica puede ser útil por ejemplo para ocultar visualmente contenido que tenga sentido a la vista pero no a la lectura. Por ejemplo un sistema de pestañas.
Se trata de una prueba desafío-respuesta utilizada para determinar cuándo el usuario es o no un ser humano. Mal implemetada puede resultar ser una barrera para personas con dificultades.
Utilizar sistemas que sean accesibles como reCAPTCHA.
Otra alternativa es realizar directamente preguntas textuales.
Prueba que eres humano, ¿cuanto es dos más dos?
Es una especificación de la W3C que describe como incrementar la accesibilidad de las páginas Web, en particular, aquellas con contenido dinámico y con componentes de interfaz desarrollados con HTML, CSS y JavaScript.
<button aria-label="cerrar">x</button>
será leído como "botón cerrar".
aria-hidden="true"
representaría contenido textual que no debería ser leído.
accesskey
En el sitio de Garbarino hay lugares de la página que no se pueden acceder por teclado.
En ocaciones requerimos lograr que un elemento HTML(que no recibe foco de manera nativa) pueda recibir foco.
Mediante el atributo tabindex
podemos lograr que un elemento reciba foco. Si marcamos el valor en 0 recibirá foco de acuerdo al flujo natural del documento.
<div tabindex="0" class="x-widget"><!-- contenido --></div>
outline
de los elementos
Retirar el outline
provoca que no se pueda saber que elemento tiene el foco, afecta a personas que navegan utilizando la vista y el teclado.
Ejemplo de lo que no hay que hacer: Página de trámites Santa Fe.
Algunos reset de CSS o templates incluyen erroneamente el siguiente código:
*:focus {
outline: 0;
}
Solución: No eliminar el outline del navegador, o proveer uno de mayor contraste.
hover
).
Cuando un texto no es presentado de manera correcta incluso a cualquier persona le puede resultar difícil poder leerlo e interpretarlo.
Ejemplos: Sitio Web UTN - Regional Rosario y Portal de trámites Santa Fe
line-height
) debe ser al menos de una vez y media (1.5em
) del tamaño de la fuente.
alt
de manera correcta y CAPTCHA accesibles.
Cortesía de Jay Gooby
Contacto
@pablo_botta en Twitter - p4bl1t0 en GitHub - Pablo en Google Plus Mail: pabloluisbotta(arroba)gmail.com