Sesión 9 - Accesibilidad en la WEB

La discapacidad en números


En Costa Rica, alrededor de 452 849 presentan alguna discapacidad, esto es al rededor del 10,5% de la población del país. Además según la UNESCO al rededor del mundo la cifra aumenta considerablemente, habiendo 1000 millones personas en esta condición.




Las personas con discapacidad y las tecnologías


El surgimiento de Internet ha hecho que las páginas web sean parte de nuestra vida cotidiana, además, estas simplifican muchos trámites, ya que cualquier tarea se puede hacer desde nuestra casa siempre y cuando exista una página web que lo facilite. Para las personas con discapacidad, esto es una gran ventaja, sin embargo, ¿son todas las páginas web accesibles para este tipo de personas? Es importante tener en cuenta que muchas personas, en diferentes condiciones usarán nuestra página, esto hace que exista un compromiso con fomentar la igualdad de oportunidades.  

El término accesibilidad de la Web, se refiere a que las personas con alguna especie de capacidad van a poder acceder, interactuar y entender una página web. 

Resultado de imagen para accesibilidad web


Discapacidades y barreras de acceso


  • Discapacidades visuales:
Para evitar que las personas con este tipo de discapacidad vean limitada su experiencia en una página web se debe considerar las siguientes barreras de acceso:
  1. Imágenes sin texto alternativo.
  2. Videos sin descripción textual o sonora.
  3. Tablas desordenadas.
  4. Tamaño de letra.
  5. Uso de color para elementos muy significativos.
Para apoyar a este tipo de personas es posible contar con herramientas como lectores de pantalla, navegadores de voz y teclados.

  • Discapacidades auditivas:
Para personas con alguna discapacidad de este tipo las principales barreras de acceso son:
  1. Falta de transcripción de contenidos sonoros.
  2. Contenido muy complejo.
  3. Herramientas de apoyo: videos con interpretes, contenido de fácil entendimiento.

  • Discapacidades motoras:
Las barreras de acceso para esta discapacidad son:
  1. Elementos de interacción pequeños.
  2. Difícil uso del teclado en la página.
  3. Tiempos de respuesta muy limitados.
Algunas herramientas que podrían ayudar a este tipos de personas son, ratones especiales, teclados alternativos, ratones de cabeza, software reconocimiento de voz, sistema de seguimiento de ojos, etc.

W3C

Resultado de imagen para w3c

Es el organismo que define los estándares para la Web, además se encarga de promover la accesibilidad por medio de su grupo de trabajo WAI (Web Accesibility Initiative).

Evaluación

Existen gran cantidad de herramientas que permiten a los desarrolladores u otras personas conocer que errores o violaciones a los estándares establecidos para la accesibilidad están presentes en su página web. Algunos de ellos son:


  • HeadingsMap: crea un mapa de títulos h1-h3.
  • WCAG Contrast checker: al activar la herramienta análisis el contraste de colores.
  • Web developer: activa los atributos alt, y comprueba la estructura de la página.
  • WAVE: verifica que pautas la WCAG 2.0 se están incumpliendo.

Ejemplo:

En este ejemplo se realiza una evaluación con WAVE:























Referencias

Mora, V. Rodríguez, J. (2018). Validación de accesibilidad en sitios Web. Inclutec: Tecnologías inclusivas.

Comentarios

Publicar un comentario

Entradas más populares de este blog

Sesión 6 - Javascript

Imagen
¿Qué es Javascript? Javascript es considerado el lenguaje de programación de HTML y por ende, de la web. Es un lenguaje dinámico, levemente tipado y multiparadigma. ¿Por qué usar Javascript? Permite controlar el comportamiento de las páginas web. Permite la creación de páginas web dinámicas. Puede usarse en aplicaciones móviles, desktop applications y web applications. Facilidad  de uso. Amplia comunidad de desarrolladores que lo usan. Permite el uso de Single-page applications (el navegador se encarga de representar la página). ¿Cómo usar Javascript? Una de las formas más sencillas y conocidas para usar Javascript en nuestra página web es usando el evento onclick , en HTML la sintaxis sería algo así:  <element onclick="myScript"> Este evento se usa en la mayoría de casos para darle funcionalidad a botones, aunque también puede funcionar con otros tipos de elementos. Ejemplo: -----------------------------------------------
Leer más

Sesión 3 - Ejemplo de uso de servlets y JSP

Imagen
Enunciado A continuación se presenta un enunciado con el trabajo a desarrollar en este ejemplo, el siguiente PDF, describe que se debe hacer con el fin de que el ejemplo pueda ser considerado válido. 1. Creación de un nuevo proyecto Para este ejemplo, usaremos Netbeans IDE 8.2, por lo que para crear la aplicación Java Web, la guía será sobre este IDE. En caso de usar otro, puede brincar hasta el paso 2. Al hacer click en Nuevo Proyecto... se abrirá una ventaja como la siguiente, en este caso crearemos una aplicación Java Web > Web Application. Seguidamente, asignamos un nombre y ubicación a nuestro proyecto. Finalmente, podemos escoger el servidor web a usar. En caso de no tener servidor, será necesario descargar uno y seguidamente agregarlo con el botón Add mostrado en la siguiente captura. En este caso usaremos GlassFish Server 5, pero es posible usar cualquier otro servidor. Después de este paso podemos dar a Finish. 2. Creaci
Leer más

Laboratorio 1 : Desarrollo práctico de una página WEB acerca de su vida personal

Imagen
Para este laboratorio se tomará en cuenta únicamente la parte visual de la página web, es decir no se realizará funcional. Para entender mejor lo solicitado se presenta el enunciado del Laboratorio 1: Para acceder al código HTML y CSS de la  página web creada como resultado del laboratorio use el siguiente link:  https://drive.google.com/drive/folders/1byjlM9hELTEGUPWGojJ3YUDIHoQddy8v?usp=sharing NOTA: En el los archivos subidos, el link al CSS contiene un path local, basta con cambiar el path a  "css/custom.min.css" Elementos usados HTML <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">:  se encarga de que la página realizada tenga la característica responsive, esto diciéndole al navegador como debe ajustarse.  <li><a class="active" href="home.html">Home</a></li>: usado para representar un item en una lista, en este caso, se usó como elemento del m
Leer más