Mejora la accesibilidad de navegación web al contenido principal

Accesibilidad de navegación web hacia el contenido principal - SocraTech

Uno de los temas que cada vez tiene más relevancia en una página web es la accesibilidad, para que cualquier persona pueda navegar de forma sencilla. Por ello, existen distintas prácticas y consejos que se pueden aplicar y que mejoran considerablemente la accesibilidad de nuestra web.

En esta ocasión, nuestro profesor del bootcamp, Sergio Jiménez, recomienda una solución para las personas que utilizan lector de pantalla. Una forma con la que al usar el tabulador se puede saltar directamente al contenido principal de la página sin necesidad de recorrer todo el menú de navegación que suele encontrarse en el header.

Como explica Sergio, una solución sencilla para acceder al contenido principal de la página sin que el usuario tenga que pasar por todo el menú de navegación sería fijar un enlace con el que se pueda saltar directamente.

Para ello, hay que crear un enlace fuera del header con la etiqueta <a>, dentro del código HTML. En el interior de la etiqueta <a> se añade el atributo href que indicará el lugar al que se quiere acceder de la página tras pulsar sobre el enlace.

En el vídeo, Sergio pone el siguiente ejemplo:

				
					<body>
    <a 
        class="skip" 
        href="#skip-to-main"
        >Saltar al contenido principal</a>
    <header></header>
    <main id="skip-to-main"></main>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
				
			

Estas son las partes del código importantes que Sergio edita en el vídeo. Se puede ver cómo la etiqueta <a> se sitúa encima de la etiqueta <header> y que enlaza mediante el atributo por href con la etiqueta <main> gracias al id, llamado: skip-to-main.

Para que el enlace se vea solo cuando se utiliza el tabulador, Sergio añade la clase skip dentro de la etiqueta <a> y así poder editar el estilo con CSS. En el archivo CSS se diseña el enlace al gusto de cada uno y se añade la propiedad top con un valor alto para que se oculte, como por ejemplo -999rem, por lo que quedaría:

				
					.skip {
    top=-999rem;
}
				
			

Si quieres que aparezca en pantalla cuando se utilice el tabulador, es tan sencillo como establecer el selector skip en focus-visible y añadir la propiedad top con valor 0. Así, quedaría:

				
					.skip:focus-visible {
    top = 0;
}
				
			

De esta forma, puedes mejorar la accesibilidad de tu web tan solo añadiendo un poco de código.

Si quieres seguir aprendiendo más sobre desarrollo web y poder trabajar de ello, apúntate a nuestro Bootcamp Full Stack Web Developer y empieza tu carrera en el campo de la tecnología.

Otros posts relacionados...

Abrir chat
Hola, estaba visitando esta web (https://socratech.es/blog/mejora-la-accesibilidad-de-navegacion-web-al-contenido-principal) y me gustaría solicitar información sobre...