El Blog de Accede Me
En ese artículo os vamos a dar 10 consejos fáciles para hacer accesible tu página web.
Es evidente que Internet es para muchas personas una parte esencial de su vida. Lo usan para trabajar, aprender, para consultar, para viajar, para el ocio, etc.
La accesibilidad web implica que todas las personas, incluidas las que tienen algún tipo de discapacidad, puedan utilizar Internet sin barreras.
Es importante que las páginas web estén desarrolladas teniendo en cuenta este concepto.
Es importante que las web sean accesibles.
Consejo nº 1: Textos alternativos
Los medios no textuales, por ejemplo una imagen, un video…, deben tener una alternativa textual para que los visitantes que no pueden acceder a ese contenido puedan acceder a la misma información que ofrece ese medio.
Consejo nº 2: Color y contraste
Los medios textuales deberían poder ser destacados sobre el fondo en el que están. Esto es que la diferencia entre los colores del texto y el fondo sean suficientes para que puedan ser leídos aún en circunstancias de poca luz, por ejemplo.
Consejo nº 3: Diseños limpios y claros
El diseño es uno de los factores principales que afectan a la comprensión de la información presentada en una página web. Un diseño claro y minimalista es mucho mejor que uno con mucha información poco separada.
Consejo nº 4: Navegación por teclado
Para que un sitio web sea accesible debe poder navegarse sólo con el teclado. Muchas personas no pueden utilizar el ratón y por ello deben utilizar el teclado. La tecla “Tab” es la sustituta del ratón.
Consejo nº 5: Estructura del contenido
Los elementos h, contrariamente a lo que piensan muchos diseñadores sirven para dar estructura a una página web y que así sea mucho más fácil de entender.
Los encabezados funcionan como los índices de un documento de texto con secciones y subsecciones.
Siempre debe de haber un h1 por página, y su debajo de el tantos h2 como necesitemos. No puede haber un h3 directamente debajo de un h1.
Si te gusta el diseño, por ejemplo, del h3 solo tienes que aplicárselo al elemento en cuestión y no convertirlo en un h3 para conseguir ese diseño.
Consejo nº 6: Marcado del foco
Si no puedes usar el ratón por cualquier razón, por ejemplo, lesión en la mano, enfermedad de Parkinson, te lo has dejado en casa… puedes navegar con el teclado.
Los elementos interactivos, por ejemplo, un botón, un enlace… pueden recibir el foco, esto quiere decir que si pulsas la tecla Intro o la barra espaciadora, el navegador lo interpretará como si hicieras clic en ese elemento.
El navegador muestra que elemento tiene el foco con una fina línea alrededor de él. Con CSS puedes quitar esa marca, pero si lo haces es muy probable que el visitante se pierda por que no sepa que elemento tiene el foco ni en que elemento está ni cual es el siguiente ni cual es el anterior.
Consejo nº 7: No uses tablas
En los años 80, justo antes de que los elementos div aparecieran, sólo se podía diseñar páginas web con tablas. Pero las tablas no fueron creadas para diseñar.
Ahora ya disponemos de herramientas muy potentes como el Flexbox y el Grid para hacer que los div sean el elemento ideal para diseñar páginas web.
Dejemos las tablas para mostrar información tabulada, en la que la posición en una fila y una columna determinada explique lo que significa la información que hay en esa celda de la tabla.
Consejo nº 8: Los formularios
Los formularios sacan lo peor de nosotros mismos.
Daría para un libro explicar todo lo que hay que tener en cuenta para hacer un formulario totalmente accesible.
Te damos algunas notas, deben de estar organizados lógicamente (no pedir la contraseña entre los campos de provincia y ciudad), todos los campos tienen que tener una etiqueta (label), aunque esté oculta, debe de estar identificado visualmente si es obligatorio (*), debes proporcionar instrucciones e información para completar el formulario de forma clara para que el usuario entienda la información que se le está solicitando.
Consejo nº 9: Responsive
Que un diseño sea responsive no sólo quiere decir que se adaptará al tamaño de la pantalla de la que está siendo visualizado.
Existe una relación entre el nivel de zoom y el tamaño de la pantalla. Si sólo aumentas el nivel de zoom (control + tecla +) en algún momento, si el diseño es responsive, cambiará a otro formato. Por ejemplo, si estás visualizándolo en formato pantalla de ordenador y aumentas el zoom lo suficiente pasará a mostrarse como en una tablet.
De esta forma podemos controlar que aumentando el zoom los elementos de la página web no se solaparán.
Consejo nº 10: Elementos multimedia
Los elementos multimedia tienen algunas condiciones que dificultan su comprensión. Son las imágenes, el sonido y el tiempo.
Añade alternativas textuales para ayudar a comprender el contenido del elemento multimedia.
No permitas la reproducción automática, no todo el mundo está preparado para que pase algo en su pantalla sin esperarlo.
Esperamos que con estos consejos puedas, de forma más o menos fácil ayudar a que los visitantes de un sitio web accedan a la información de forma más conveniente.