Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout

Cómo mantener tus diseños accesibles con la cuadrícula CSS

by
Length:MediumLanguages:

Spanish (Español) translation by Steven (you can also view the original English article)

La cuadrícula CSS permite crear diseños bidimensionales al organizar elementos en filas y columnas. Te permite definir cualquier aspecto de tu cuadrícula, desde el ancho y la altura de los elementos de la cuadrícula, hasta las áreas de la cuadrícula y el tamaño de los espacios. Sin embargo, la cuadrícula de CSS también puede generar problemas de accesibilidad, principalmente para los lectores de pantalla y los usuarios que solo usan el teclado. Esta guía te ayudará a evitar esos problemas.

Independencia del orden de origen

La “independencia del orden de origen” es una de las mayores ventajas de la cuadrícula CSS. Significa que ya no tienes que definir la estructura de diseño en HTML, que siempre ha sido el caso con los elementos flotantes y los diseños basados en tablas. Puedes cambiar la presentación visual de tu archivo HTML utilizando las propiedades de colocación y la cuadrícula de CSS.

La sección de Reordenación y Accesibilidad de los documentos de W3C con respecto a la cuadrícula de CSS definen la independencia del orden de origen de la siguiente manera:

"Al combinar el diseño de cuadrícula con media queries, el autor puede usar el mismo marcado semántico, pero reorganizar el diseño de elementos independientemente de su orden de origen, para lograr el diseño deseado en ambas orientaciones".

Con la cuadrícula CSS, puedes desacoplar el orden lógico y visual. La independencia del orden de origen puede ser bastante útil en muchos casos, sin embargo, también puedes dañar seriamente la accesibilidad. Los usuarios del lector de pantalla y del teclado solo encuentran el orden lógico de tu documento HTML y no "ven" el orden visual que creaste con la cuadrícula CSS.

Si tienes un documento simple, esto generalmente no es un problema, ya que el orden lógico y visual probablemente será el mismo. Sin embargo, los diseños creativos más complicados, asimétricos, rotos u otros con frecuencia causan problemas al lector de pantalla y a los usuarios que solo usan el teclado.

Propiedades que cambian el orden visual

La cuadrícula CSS tiene una serie de propiedades que cambian el orden visual de un documento:

Si deseas leer más sobre cómo usar las propiedades de colocación de la cuadrícula, echa un vistazo a nuestro artículo anterior sobre áreas de la cuadrícula. Ahora, veamos cómo pueden salir mal las cosas con el reordenamiento visual.

Reordenamiento visual contra el reordenamiento lógico

Aquí hay una cuadrícula simple con un par de enlaces para que puedas probar la accesibilidad del teclado en el código:

Ahora agreguemos algunos estilos. El siguiente CSS organiza los elementos de la cuadrícula en tres columnas iguales. Luego, el primer elemento se mueve al comienzo de la segunda fila con la propiedad grid-row:

A continuación, puedes ver cómo se ve con un estilo adicional para mayor claridad. Mientras que los usuarios habituales verán primero el Enlace 2, los lectores de pantalla comenzarán con el Enlace 1, ya que siguen el orden de origen definido en el código HTML.

También será difícil para los usuarios del teclado pasar por la página, ya que las pestañas también comenzarán con el Enlace 1, en la esquina inferior izquierda de la página (pruébelo usted mismo).

La solución

La solución es simple y elegante. En lugar de cambiar el orden visual, debes mover el enlace 1 hacia abajo en el HTML. De esta manera, el orden lógico y visual del documento será el mismo.

No necesitarás agregar ninguna propiedad relacionada con la cuadrícula a .item-1 en el CSS. Como no deseas cambiar el orden de origen predeterminado, solo necesitas definir las propiedades del contenedor de cuadrícula.

Echa un vistazo. Aunque la demostración a continuación se ve igual que antes, ahora es accesible. Tanto la tabulación como la lectura de pantalla comenzarán con Link 2 y seguirán lógicamente el orden de origen.

Cómo hacer que los diseños sean accesibles

Hay un par de patrones de diseño comunes que puedes usar para hacer el diseño más accesible utilizando las propiedades de reordenamiento de la cuadrícula CSS. Por ejemplo, el "Diseño del Santo Grial" es exactamente ese patrón. Consiste en un encabezado, un área de contenido principal, un pie de página y dos barras laterales de ancho fijo: una a la izquierda y otra a la derecha.

Los diseños de la barra lateral izquierda pueden causar problemas a los usuarios de lectores de pantalla. Como la barra lateral izquierda precede al área de contenido principal en el orden de origen, eso es lo que los lectores de pantalla leen en voz alta primero. Sin embargo, en la mayoría de los casos, sería mejor si los usuarios de lectores de pantalla pudieran comenzar con el contenido principal. Esto es especialmente cierto si la barra lateral izquierda contiene principalmente anuncios, contenido del blog, nubes de etiquetas u otro contenido menos relevante.

La cuadrícula CSS te permite cambiar el orden de origen de tu documento HTML y colocar el área de contenido principal antes de las dos barras laterales:

Existen diferentes soluciones que puedes usar para definir el orden visual modificando la cuadrícula CSS. La mayoría de los tutoriales utilizan áreas de cuadrícula con nombre y las reordenan con la propiedad grid-template-areas.

El siguiente código es la solución más simple, ya que solo agrega reglas adicionales a los elementos donde el orden visual es diferente del orden de origen. La cuadrícula CSS tiene una excelente característica de colocación automática que se encarga del resto de los elementos de la cuadrícula.

Entonces, grid-column hace que el <header> y el <footer> abarquen toda la pantalla (3 columnas) y grid-area (abreviatura de grid-row y grid-column) fija el lugar de la barra lateral izquierda. Así es como se ve con un estilo extra:

Aunque el diseño del Santo Grial es un diseño bastante simple, también puedes usar la misma lógica con diseños más complicados. Siempre piensa en cuál es la parte más importante de tu página a la que los usuarios de lectores de pantalla pueden acceder primero, antes que el resto de tu contenido.

Cuando se pierde la semántica

En algunos casos, la cuadrícula CSS también puede dañar la semántica; otro aspecto importante de la accesibilidad. Como display: grid; el diseño solo es heredado por los elementos secundarios directos de un elemento, los elementos secundarios de los elementos de la cuadrícula no serán parte de la cuadrícula. Para ahorrar trabajo, los desarrolladores pueden encontrar una buena solución para aplanar los diseños para que cada elemento que quieran incluir en el diseño de la cuadrícula sea un elemento secundario directo del contenedor de la cuadrícula. Sin embargo, cuando un diseño se aplana artificialmente, el significado semántico del documento se pierde con frecuencia.

Supongamos que deseas crear una galería de elementos (Ej., Imágenes) en la que los elementos se muestran como una cuadrícula y abarcan un encabezado y un pie de página. Así es como se vería el marcado semántico:

Si deseas utilizar la cuadrícula CSS, la etiqueta <section> sería el contenedor de la cuadrícula y <h1>, <h2> y <ul> serían los elementos de la cuadrícula. Sin embargo, los elementos de la lista se excluirían de la cuadrícula, ya que serían solo los nietos del contenedor de la cuadrícula.

Por lo tanto, si deseas hacer el trabajo rápidamente, puede parecer una buena idea aplanar la estructura de diseño haciendo que todos los elementos sean hijos directos del contenedor de cuadrícula:

Ahora, puedes crear fácilmente el diseño que desees con la cuadrícula CSS:

Todo se ve bien, sin embargo, el documento ha perdido su significado semántico, así que:

  • los usuarios de lectores de pantalla no sabrán que sus elementos están relacionados entre sí y son parte de la misma lista (la mayoría de los lectores de pantalla notifican a los usuarios sobre la cantidad de elementos de la lista);
  • la semántica rota dificultará que los motores de búsqueda entiendan tu contenido;
  • las personas que acceden a tu contenido con el CSS deshabilitado (por ejemplo, en áreas de baja conectividad) pueden tener problemas para hojear tu página, ya que solo verán divs no relacionados.

Como regla general, nunca debes comprometer la semántica por la estética.

La solución

Como el display: subgrid; del diseño aún no está implementado por los navegadores, puedes resolver el problema de dos maneras diferentes.

Primero, puedes agregar la regla display: contents; a la lista desordenada que elimina el elemento <ul> del árbol de accesibilidad. Por lo tanto, los elementos <li> serán hijos directos del contenedor de cuadrícula. Sin embargo, el soporte del navegador de esa función es bastante irregular: Edge no lo admite en absoluto y otros navegadores también tienen problemas con él.

La otra solución es crear una cuadrícula anidada agregando las siguientes reglas CSS a la lista desordenada:

En la demostración a continuación, puedes ver cómo la cuadrícula anidada se relaciona con la cuadrícula principal. Los elementos se presentan como se esperaba, sin embargo, el documento aún conserva su significado semántico.

Conclusión

No es probable que las implementaciones simples del diseño de la cuadrícula CSS generen problemas de accesibilidad. Los problemas se producen cuando deseas cambiar el orden visual o crear cuadrículas de varios niveles. La solución generalmente no requiere mucho trabajo, por tanto, siempre vale la pena solucionar todos los problemas, ya que puedes facilitar mucho el acceso para que los usuarios que requieren asistencia tecnológica puedan ver tu contenido.

Aprende más sobre el diseño y la accesibilidad de la cuadrícula CSS


Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.