Esta va a ser la ultima clase del modulo 4 y que hemos dedicado íntegramente a las etiquetas semánticas estructurales en HTML5. En esta ocasión vamos a estudiar el tema de la accesibilidad en los sitios web, vamos a aprender a hacer nuestro sitio web accesible para aquellos usuarios/as con discapacidad.
Debemos tener en cuenta que desde su aparición, las páginas web han sufrido cambios en cuanto a su objetivo y estructura. En la actualidad han surgido nuevas necesidades que han convertido estas páginas, en documentos más complejos y más parecidos a las aplicaciones de escritorio. Tampoco voy a escribir más sobre el tema, lo que nos interesa es conocer como vamos a implementar esta accesibilidad en nuestro sitio web, y precisamente eso es lo que vamos a ver a continuación.
ARIA: Accessible Rich Internet Applications.
Esta es una iniciativa propuesta por la W3C para la creación de aplicaciones web accesibles. Es decir, que personas con cualquier tipo de discapacidad y valiéndose de alguna tecnología de apoyo como puede ser un lector de pantalla o un tablero braille, pueda tener una experiencia amigable dentro de tu sitio.
Cuando una página web está correctamente marcada, evitamos que los usuarios que están usando un lector de pantalla, tengan que hacer una lectura lineal de todo nuestro sitio. Podíamos hacer que nuestros visitantes cuando ingresen en nuestro sitio, usando o pulsando diferentes teclas puedan ir saltando a diferentes zonas de nuestro sitio. Para hacer esto, nosotros tenemos que insertar diferentes puntos de referncia,dentro de cada zona de nuestro sitio. Estos puntos de referencia se llaman "landmark roles". Es un atributo que se agrega dentro de una etiqueta, concretamente el atributo role="[tipo_landmark]. Permiten identificar diferentes regiones importantes de una página web para que los usuarios de lectores de pantalla puedan navegar directamente entre estas secciones.
La recomendación de la W3C es que se use una única vez. Con este role se debe marcar aquella zona que contiene el encabezado principal de tu página. En mi caso, siempre pongo a <header> el role="banner". El <header> no es una sección importante para una persona invidente, y en la mayoría de ocasiones colocamos un banner. De esta forma el lector de pantalla no va a darle importancia a la hora de hacer la lectura.
<header role="banner"> <img src="baner.jpg" alt="publicidad"< </header>
Debemos usar role="navigation" para aquella sección que contiene enlaces de navegación de nuestra página. No es necesario asignar este atributo para los enlaces de pié de página. Es solo para menú principal o una compilación de enlaces importantes.
<header role="banner"> <nav role="navigation"> <ul> <li><a href="index.html">Inicio</a></li> <li><a href="nosotros.html">Nosotros</a></li> <li><a href="servicios.html">Servicios</a></li> <li><a href="contacto.html">Contacto</a></li> </ul> </nav> <img src="baner.jpg" alt="publicidad"< </header>
Vamos a usar role="main" una sola vez en el documento, se le tiene que asignar a aquella zona que contiene el contenido principal de página, como es evidente me refiero a <main>.
<main role="main"> <article> <h1>ARCHIPIELAGOS EN BARCELONA</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt earum eius, dolor voluptates vel architecto assumenda quaerat deserunt, aliquid quos, fugit. Vitae dolore nemo animi quisquam adipisci necessitatibus iure! Numquam. </p> </article> </main>
El rol que debemos asignar al contenido secundario o de poca relevancia es role="complementary" , que lo normal es que se le agregue a la etiqueta <aside>
<aside role="complementary"> <h1>INFORMACIÓN COMPLEMENTARIA<h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda reprehenderit, laborum expedita suscipit ipsum ex cum, nesciunt voluptatem, repudiandae id ullam minima molestiae quis pariatur adipisci impedit atque quibusdam.</p> <ul> <li>enlaces</li> <li>enlaces</li> <li>enlaces</li> <li>enlaces</li> </ul> </aside>
Para definir el rol para el pie de nuestra pagina o <footer> vamos a usar role="conteninfo".
<footer role="conteninfo">> <p> <small>Copyright © 2018 HTML5 Doctor. All rights reserved. Hosted by (mt) Media Temple. Branding by Oliver Ker.<small> </p> </footer>
Un par de roles que no quiero que se queden en el tintero, ya que son bastante importantes, son role="form" se usa para los formularios de contacto o registro y podríamos definirlo en la etiqueta contenedora de <form> que pudiera ser un <div>. role="search" lo usaremos para los formularios de búsqueda.
Conclusiones
Es todo lo que debes saber por el momento sobre ARIA, evidentemente no todo, pero si lo necesario para hcer tu sitio web accesible. Hemos aprendido a definir los roles necesarios para un sitio web básico, a través de unos ejemplos que seguro que te han ayudado a entender todo esto, y si no lo has entendido siempre puedes preguntarme. Si te has saltado la clase Etiquetas semánticas estructurales en HTML5 - <footer> y <div>, no la dejes para más tarde y échale un ojo ya que es imprescindible para seguir el curso de HTML5 desde 0.
0 Comentarios