Accesibilidad web AA y su importancia

Accesibilidad web AA y su importancia

Accesibilidad web

Según el W3C, el nivel de accesibilidad web AA, sería el resultado de tener una web validada correctamente para que sea visible por personas con discapacidad, es decir, una web accesible y usable por la mayoría de usuarios.

¿Por qué la accesibilidad es importante?

Hablar de accesibilidad web no es nada nuevo, desde hace muchos años se trabaja para ofrecer una información accesible a todos y para todos, si bien ahora parece estar más en boca de todos y por fin ya muchos la relacionan con una buena experiencia de Internet.

Las primeras preguntas que surgen cuando se trata o consulta un sitio web, pueden ser, ¿es el sitio web accesible a las personas con discapacidad?, ¿Es compatible con los navegadores que no sean Internet Explorer?, ¿Cumple con los estándares recomendados?

Accesibilidad web AA y niveles¿Qué es la accesibilidad?

Tradicionalmente, es un término que se asocia más con el pensamiento arquitectónico y sus barreras, en lugar de usabilidad accesible para sitios web. Al igual que existe una legislación, que determina las normas mínimas para los nuevos edificios, para los sitios web accesibles hay una serie de normativas y consorcios que definen como hay que desarrollar las páginas web para que sean accesibles.

Hoy en día los nuevos edificios tienen rampas para sillas de ruedas, ascensores y plazas de aparcamiento accesibles a personas con discapacidad, lo que permite tener acceso a un edificio, movilidad, comunicación, etc. Bien, con los nuevos sitios web accesibles, todos los usuarios pueden visitar la web y acceder a su contenido sin limitaciones.

El director del W3C e inventor de la World Wide Web Tim Berners-Lee, define el término en cuestión como «el acceso de todas las personas, independientemente de su discapacidad.»

A pesar de que la World Wide Web está creciendo continuamente, muchos usuarios:

  • No cuentan con los últimos navegadores web y ciertos programas.
  • Utilizan navegadores de voz o ojos ocupados / manos ocupadas, como la gente en los coches.
  • El acceso a internet es con módems lentos, o residen en zonas rurales o remotas con acceso limitado a Internet.
  • Navegan si visualizar gráficos, utilizando navegadores de que son solamente para texto.

En definitiva hay una lista muy variada de condiciones que hay que tener en cuenta a la hora de llegar con el contenido a todos los internautas.

Ademas, los usuarios contentos pueden convertirse en usuarios leales, continuar utilizando el sitio web, e incluso recomendarlo a otros.

Los beneficios de accesibilidad son muchos

  • Aumentar el número de visitas
  • Mejorar la eficacia del sitio web
  • Aumentar y recuperar la reputación
  • Mejorar el posicionamiento SEO
  • Aumentar la rapidez de carga de una página
  • Gusta a los motores de búsqueda
  • Mejora la experiencia de usabilidad del visitante
  • Apoyo a la web semántica
  • Optimización del ancho de banda y recursos de cara al servidor

Es ideal contar con personal cualificado y experiencia en el sector a la hora de desarrollar un sitio web 100% accesible, para ello se verán las cosas desde el punto de vista de las personas que tienen discapacidades.

En su próximo proyecto tenga en cuenta utilizar los estándares web y sus recomendaciones.

Accesibilidad Web y Diseño Web Adaptable

En diferentes post, artículos o contenidos de páginas web, se habla de accesibilidad web y diseño web responsable como si ambas cosas fuesen lo mismo o, en algunas, como si aplicar técnicas para conseguir una web que se adapta a los diferentes dispositivos de usuario ya tienes una web accesible.

Para intentar aclarar los conceptos incluyo a continuación:

 Accesibilidad Web

Se puede definir la accesibilidad como la posibilidad de que un sitio o servicio Web pueda ser visitado y utilizado de forma satisfactoria por el mayor número posible de personas, independientemente de las limitaciones personales que tengan o de aquellas limitaciones que sean derivadas de su entorno. (INTECO. Introducción a la accesibilidad web)

 Diseño Web Adaptable – Responsive Web Design

El diseño web adaptativo o adaptable (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario. (Wikipedia)

Y así mismo, también incluyo esta interesante charla en Ask UXmatters sobre como encajar Responsive Web Design and Accessibility.

Como conclusión, podemos indicar que ambas técnicas son complementarias, pero que el aplicar una de ellas – accesibilidad o diseño web adaptable- no te asegura el conseguir los beneficios de la otra.

Así mismo, podemos constatar que el Diseño Web Adaptable se centra en el aspecto de diseño (imagen), de cómo se ve la web en los diferentes dispositivos y, principalmente, en los dispositivos móviles. Este es un aspecto que cada día se debe tener más en cuante porque el uso tanto de tabletas como de smarthphones va aumentando considerablemente.

Cascada, especificidad y herencia

Tal y como indicábamos en nuestro anterior post, Inicializar los estilos. Reset CSS, la visualización de las páginas web en un navegador se ven afectadas por los hojas de estilo que se cargan. Asimismo, se indicó que hay una prelación entre ellas.

En este post, vamos a hablar de los conceptos: cascada, especificidad  y herencia.

Cascada

Cuando dos o más reglas coinciden en un mismo elemento, dicho conflicto se resuelve mediante un proceso denominado cascada.

La cascada es el orden de prelación, importancia, que se le asigna a cada regla de las hojas de estilos. De ahí, que las hojas de estilo de autor/diseñador se consideren las más importantes, seguidas por las hojas de estilo de usuario y por último, las hojas de estilo predefinidas por el navegador.

El orden de importancia de las hojas de estilo coincide con el orden de carga de las hojas CSS al visualizar una página web: de izquierda a derecha, de menor a mayor prelación.

Sin embargo, teniendo en cuenta la accesibilidad web y su principio básico de eliminación de barreras para el acceso a la información para determinados grupos de personas – discapacitados y mayores-, el usuario mediante la regla !important toma el control de la presentación visual al asignar a su regla el máximo nivel de importancia, incluso por encima de las reglas !important declaradas por el autor/diseñador.

El orden de importancia de los estilos declarados es de mayor a menor:

  1. Estilos de usuario etiquetados como !important
  2. Estilos de autor/diseñador etiquetados como !important
  3. Estilos de autor/diseñador
  4. Estilos de usuario
  5. Estilos aplicados por el navegador

Ejemplo de declaración de !important:

el resultado será: Prueba de especificidad

El texto se muestra en rojo porque la regla color:red está declarada como de mayor importancia, rompiendo de esta forma, con la norma sobre especificidad que a continuación pasaremos a tratar.

Especificidad

Las reglas se ordenan según lo específico que sea el selector. Las reglas con selectores más específicos tienen prioridad sobre aquellas reglas con selectores menos específicos, es decir, más genéricos.

El color del texto será verde: Prueba de especificidad.

El selector de tipo <p> es el mismo en las tres declaraciones y su importancia es la  misma, pero el texto se pintará de color verde (color: green;) porque la declaración p id=”especial” es la más específica, la más concreta. Es decir, sólo se aplicará a aquellos párrafos que lleven el selector ID.

Las otras declaraciones tienen un carácter mucho más genérico; bien para todos los párrafos –p color: red-; obien, para todos los elementos de la página – * color: blue-.

Si dos reglas tienen la misma especificidad, la última definida tiene prioridad.

El resultado es el texto en rojo (Prueba de especificidad) porque ambos selectores <p> tienen la misma prioridad, pero prevalece el último definido, p color: blue.

Para calcular cómo de específica es una regla, cada tipo de selector tiene asignado un valor numérico.  La especificidad de una regla se calcula al sumar el valor de cada uno de sus selectores.

La especificidad de un selector se divide en cuatro niveles:

  1. Nivel A es igual a 1 si el estilo es un estilo en línea
  2. Nivel B es igual al número total de selectores ID
  3. Nivel C es igual al número de selectores de clase, pseudo clase y atributo
  4. Nivel D es igual al número de selectores tipo y selectores pseudo elemento

Una regla escrita en un atributo de estilo/style siempre será más específica que cualquier otra regla. Una regla con un ID será más específica que una sin un ID, y una regla con un selector de clase/class será más específica que una regla con selectores tipo (h1-h6, p, etc.).

La especificidad de las hojas CSS permite establecer estilos generales para elementos comunes y luego ir anulándolos para elementos más concretos, más específicos.

Herencia

Los documentos HTML están estructurados de forma jerárquica para ordenar el contenido. El primer elemento de esta estructura es el <html>, y de él son descendientes el resto de elementos que constituyen y forman una página web.

Esta característica de las hojas de estilo nos va ha permitir que determinadas propiedades como por ejemplo color o tamaño de la fuente no se tenga que indicar elemento por elemento, sino que con indicárselo al elemento padre, éste, por herencia, lo trasladará a sus hijos, a sus descendientes.

Con motivo de esta característica, se nos puede dar el caso que un elemento herede valores de todos sus superiores jeráquicos.

Los párrafos en rojo con tipo de fuente Arial, tamaño 14px.

La herencia se puede interumpir si declaramos una nueva regla CSS. Por ejemplo, indiquemos que el color para body y sus descendientes es negro,  pero cambiemos el tipo de fuente, tamaño,  y color para el elemto p.

La regla definida para el elemto <p> prevalece sobre las que debería heredar de sus elementos superiores jerárquicos. Al igual que en la la especificidad, la regla CSS más próxima tiene mayor prioridad. Así, si en el elemento aplicamos una regla de estilo directa, ésta prevalecerá sobre la que se haya definido en las hojas de estilo CSS.

Información de interés:

Inicializar los estilos css

Cuando publiquemos nuestra página web, una de los puntos a revisar es su visualización en los difrentes navegadores y sus correspondientes versiones, por ello es importante inicializar los estilos CSS.

Los navagadores cuando muestra una página web, no sólo aplican los estilos creados por el diseñador web, sino que también aplican las hojas de estilos del propio navegador y las del usuario.

Como podemos constatar, son tres las hojas de estilo que se pueden aplicar cuando visualizamos un sitio web: las del navegador, las del usuario y las del diseñador.

Así mismo, indicar que por ser las primeras en aplicarse, el orden de prioridad más bajo le corresponde a las CSS del navegador, luego son las del usuario, y las de mayor prioridad, al ser las últimas en cargarse y aplicarse, son las del diseñador.

Este orden de prioridad puede ser modificado si se incluye en la regla CSS la palabra !important. Si una regla definida en las CSS del usuario es igual a una defenidia en la del diseñador, tendrá prioridad las del usuario si en ella incluye la palabra !important. Esto es así, al objeto de dar mayor control al usuario al objeto de conseguir una mayor accesibilidad web para aquellas personas con determinada discapacidad.

Una web para todos, diseño para todos.

Hoja de estilo del navegador: es la que establece el estilo inicial de todos los elementos HTML . Si al cargar nuestra página web, no hemos definido el estilo a algun elemento, éste tomará el aspecto que por defecto esté definido en las hojas CSS del navegador.

Hoja de estilo del usuario: tal y como su nombre indica, es aquella que el propio usuario aplica a través de su carga en el navegador.

Hoja de estilo del diseñador: son los estilos definidos por el diseñador de la página web.

Los valores de los elementos HTML -tipo de letra, márgenes verticales, títulos de secciónetc.- son aplicados de diferente forma por cada uno de los navagadores. Por ello, para que no nos ocurra como en la captura de pantalla, que nuestro diseño no coincide con la visualización en el navegador, deberemos neutralizar los estilos prefijados en las CSS del navegador.

Una forma rápida y sencilla sería neutralizar los márgenes y relleno de todos los elementos de la página.

La solución ideal es crearse una hoja de estilo CSS –reset css– para inicializar los estilos CSS que aplican por defecto los navegadores y que afectan a la visualización de nuestro site.

Incluimos como ejemplo, la propuesta de hoja de estilo reset css del diselñador Eric Meyer.

Por qué utilizar los estándares web

Los estándares web son un conjunto de reglas/normas que marcan los requisitos que  se deben cumplir en el diseño, desarrollo y puesta en producción de un sitio web para que sea compatible por los diferentes elementos que lo utilicen.

De los estándares web más conocidos para diseño de páginas web cabe destacar para estructurar documento, el HTML y XML; para controlar la visualización del documento, el CSS; para dibujos/gráficos el SVG y PNG; para la sindicación de contenidos el RDF/RSS; para sincronizar texto, audio y video, el SMIL.

Cuando nos ponemos a pensar en la creación de un sitio web, lo que básicamente pretendemos es que nuestros textos, fotos, vídeos, etc. lleguen a nuestro público objetivo. Y, lo que queremos es que el número de visitantes sean el mayor número posible, indistintamente de su ubicación geográfica, capacidades cognitivas o discapacidades físicas.

Para alcanzar dichos objetivos y al mismo tiempo reducir nuestra carga de trabajo en el mantenimiento y actualización de nuestra web, debemos ajustar nuestros procedimientos a los estándares web.

El organismo internacional que coordina a los diferentes grupos de trabajo para el desarrollo de los estándares web es el World Wide Web Consortium (W3C).

Las áreas que se benefician con el uso correcto de los estándares web son:

Compatibilidad: el uso de estándares web facilita la compatibilidad del código que se haya utilizado en el desarrollo de nuestra web con independientemente del navegador o plataforma que se emplee para su visualización –dispositivos móviles, lectores de pantalla, navegadores de imágenes, etc.-

Accesibilidad: cumpliendo con los estándares se consigue una web para todos y globalizada. Para todos, porque será independiente del conocimiento o discapacidad del visitante. Globalizada, porque se podrá visualizar e interpretar indistintamente desde cualquier parte del mundo.

Usuarios, dispositivo final y mantenimiento: gracias al uso del estándar de hojas de estilo en cascadas-CSS, cada usuario puede adaptar la página que visita a sus necesidades. Así mismo, con el uso de este estándar se consigue presentar, adaptar nuestro sitio a los distintos tipos de dispositivos  –teléfonos móviles, tablets,  lectores de pantalla, etc.-, que utilicen nuestros visitantes. Por otro lado, al utilizar las hojas de estilo CSS que controlan la presentación de nuestros contenidos en la web, se consigue reducir el tiempo que se dedica a realizar el mantenimiento o actualización de nuestro site –es más fácil modificar sólo el fichero CSS que todas las hojas/secciones de la página-.

Posicionamiento: al utilizar los estándares web junto con diferentes técnicas de accesibilidad –metadatos, fichero robot, palabras claves, etc.- conseguiremos que los motores de búsqueda ‘entiendan/interpreten’ mejor el código de nuestra web y con ello, estar entre las primeras posiciones de la página de resultado de una búsqueda.

Ancho de banda y carga de las páginas: con el uso de los estándares se consigue por un alado, reducir el consumo de ancho de banda al tener mejor estructurado su código; y por otro, que las páginas se carguen más rápido por ser más limpio y comprensible por los navegadores.

Enlaces de interés:
Oficina española del W3C. Estándares

http://www.w3c.es/estandares/

Oficina española del W3C. Guía breve sobre estandares web
http://www.w3c.es/Divulgacion/GuiasBreves/Estandares

Iniciación en el desarrollo web

Muchos son las actores que hay que tener en cuenta cuando nos pongamos a diseñar y desarrollar una página web, por ello, los primeros pasos en el diseño y desarrollo web consiste en familiarizarse con aquellos términos que condicionarán nuestro proyecto web.

Algunos de éstos nos son conocidos -seguridad, formatos: foto, vídeos, Red.es, etc-, otros, quizás, algo menos, principalmente por tratarse de términos más técnicos -‘apache’, ‘tomcat’, base de datos, etc.-.

AI: objetivo de la web

Tanto los unos como los otros, deben ser tenidos en cuenta a la hora realizar el diseño y desarrollo  de nuestra web.

Insisto, si lo que pretendemos con nuestro proyecto es que éste pueda ser visto, consultado, interactuado, desde distintos soportes -fijos, portátiles-, desde distintos canales de comunicación -web 1.0, redes sociales-, es muy importante que los conceptos de accesibilidad y usabilidad web los tengamos en cuenta desde el inicio del proyecto.

Ya estamos hablando de conceptos como usabilidad, acesibilidad web, etc, y sin embargo, siendo nuestros primeros pasos en este ‘mundillo’, aún no hemos definido un poco quienes son los personajes a tener en cuenta.

Tedioso es el mundo de las definiciones, pero son necesarias para ir fijando conceptos que debemos tener en cuenta para desarrollar y diseñar una web. Estos conceptos son:

Usabilidad web: una web es más o menos usable en tanto ésta consigue que sus visitantes logran sus fines, propósitos de la visita de una manera eficiente, efectiva y satisfactoria.

Accesibilidad web: que nuestra página web pueda tener el mayor número posible de visitantes, independientemente de las dificultades que imponga el entorno desde el que se realiza la visita o de las  limitaciones que dischas personas puedan tener -físicas, psíquicas, cognitivas, sensiorale, etc.-.

SEO: se conoce por SEO (siglas en inglés, de Search Engine Optimization) al conjunto de técnicas y tareas para optimizar estrucutra y contenidos web con la finalidad de mejorar el posicionamiento del sitio web en los resultados del buscador.

SEM: técnicas de marketing consistente en pagar -publicidad contextual, pago por posicionamineto- para colocar en situar entre los primeros resulyados de los buscadores. Normalmente, el enlace a este tipo de páginas se diferencia del resto por el color de fondo y su posición en la página de resultados.

Apache:

Tomcat:

MySQL:

CMS:

Arquitectura de la información: consiste en estrucutrar y clasificar todos aquellos elementos que componen un sitio web -rotulado, navegación, búsqueda, indexación, etc.- para que el usuario pueda encontrar los contenidos que busca y sepa manejarlos.

Otros conceptos como navegación, diseño, búsqueda, escribir para la web, organización del sitio, etc, si bien unos los sitúan como entidades propias, estimamos que están más bien incluidas dentro de los dos/tres conceptor principales del diseño y desarrollo web:

1.- arquitectura de la información.

2.- usabilidad / 3.- accesibilidad web.