Cuidando textos para robots con Bootstrap 4

Hola, soy Carlos Sanchidrián, desarrollador en Premium Leads, y he creado esta guía con la esperanza de que la gente que tiene que editar contenidos usando temas que incluyen Bootstrap, tengan una forma fácil de conocer las herramientas que éste incluye para mejorar la presentación, accesibilidad, y posicionamiento en motores de búsqueda.

Esta guía no pretende ser una adaptación completa de la documentación que hay actualmente para Bootstrap, sino una colección de aquellas utilidades que suelen pasar desapercibidas y resultan bastante útiles (valga la redundancia), con las implicaciones que puedan tener a nivel de accesibilidad y SEO.

Para obtener más información recomiendo consultar la documentación oficial.

Nota: Bootstrap, aunque generalmente se incluye en su totalidad, especialmente en temas creados por terceros (como temas de WordPress, Drupal…) no siempre es el caso; en desarrollos más a medida no sería raro que sólo se integrasen aquellas partes de Bootstrap para las que se haya contemplado su uso.

En adelante hay 3 términos que se repiten a menudo:

• Elemento: Elemento HTML (span, p, div…).
• Clase o clases: Es el contenido del atributo class de un elemento, generalmente son ignoradas por los robots (excepto en algunos casos específicos como por ejemplo algunos lectores de pantallas o la cola de renderizado del robot de google).
• Robot: Todo aquello (por lo menos no humano) que rastrea nuestra página web, ya sea el robot de google, el de una herramienta de ayuda técnica para personas con una discapacidad visual, o cualquier aplicación que por ejemplo muestre datos de tu página web, como un lector RSS.

Encabezados

Los elementos de encabezado (h1, h2, h3…) han sido utilizados con bastante frecuencia para cambiar la presentación de un artículo, ya que los navegadores suelen darles un tamaño y grosor que aumenta o disminuye de forma inversamente proporcional al nivel de encabezado, así un h1 sería el más grande, y el h6 el más pequeño.

Sin embargo, su verdadera misión es la de indicar una jerarquía, por así decirlo, en el contenido de nuestra página web. Es decir, el h1 sería el título principal del artículo, el h2 sería el título de una sección, el h3 el de una subsección… y así hasta el h6.

La importancia radica en que ésta es la forma que tienen los robots de conocer cómo está estructurado tu contenido, si el primer nivel de encabezado no es un h1, o si el encabezado de una subsección no es el inmediatamente inferior, el robot no lo va a interpretar correctamente y las implicaciones de esto son obviamente negativas.

Por ello, Bootstrap ofrece unas clases con el nombre del elemento de encabezado, para cumplir su función. De este modo si queremos mostrar por ejemplo un encabezado h5 tras un h2 porque consideramos que no debería tener una carga visual como la que traen los estilos del h3; usando el h3 con la clase h5 atajaremos este problema y mantendremos la jerarquía correcta de encabezados. Ejemplo:

See the Pen
Bootstrap para contenidos (Español) – Títulos 1 by Carlos Sanchidrián (@Katenmi)
on CodePen.

Estas clases también es posible asociarlas a cualquier otro elemento html para que tomen esos estilos:

See the Pen
Bootstrap para contenidos – Títulos by Carlos Sanchidrián (@Katenmi)
on CodePen.

Tenemos otra opción en cuanto al cambio de presentación en títulos, las clases display.

Estas clases hacen destacar más los elementos de encabezado, proporcionando un mayor tamaño y menor grosor al texto. Hay que tener especial cuidado con estas clases eso sí, ya que un texto un poco extenso con un tamaño de fuente muy grande puede empeorar la presentación de nuestra web desde un dispositivo móvil.

See the Pen
Bootstrap para contenidos (Español) – Títulos 3 by Carlos Sanchidrián (@Katenmi)
on CodePen.

 

Ajustando la importancia del texto de contenido

En este caso diferenciaremos entre clases y elementos, las clases proporcionan una información puramente visual, mientras que los elementos tienen unos estilos asignados, y es por ser elementos que además proporcionan información a los robots.

Quitando importancia a un texto

Podemos indicar visualmente que un texto es menos importante tachándolo, reduciéndolo, o mostrándolo con un color más claro.

Clases

• text-muted: establece una menor carga visual (generalmente poniendo el color de texto más claro). Se puede usar casi en cualquier parte, por ejemplo, si lo usamos dentro de un título estaremos mostrando el texto con la clase aplicada como un texto complementario.
• small: Aplica la misma presentación que el elemento small pero no traslada ningún significado.

Elementos

Se muestran como tachados:

• del: Indica que contiene un texto que se pretende considerar como borrado, por ejemplo, las tareas ya realizadas en un listado.
• s: Contiene un texto del que se ha realizado una corrección, por ejemplo, el «antes» en el precio de un producto.

Se muestran más pequeños:

• small: Para indicar la letra pequeña de por ejemplo un contrato (como «IVA no incluído»).

See the Pen
Quitando importancia a un texto by Carlos Sanchidrián (@Katenmi)
on CodePen.

Texto más importante o destacado

También se puede indicar que un texto es más importante aumentando su tamaño, su grosor o subrayándolo.

Clases

• lead: Muestra un texto ligeramente más grande que el resto.
• mark: Sirve para aplicar el mismo estilo que el elemento mark.
• font-weight-bold: Muestra el texto en negrita, pero con un menor grosor que font-weight-bolder.
• font-weight-bolder: Muestra el texto en negrita, con mayor grosor que font-weight-bold.

Elementos

Se muestra con fondo amarillo:

• mark: Se utiliza para destacar un fragmento de texto.

Se muestra como subrayado:

• ins: Sirve para indicar un texto añadido.
• u: No traslada información a los robots, su uso es puramente de presentación.

Se muestra en negrita:

• b: No traslada información a los robots, su uso es puramente de presentación.
• strong: Indica un texto de mayor importancia.

Se muestra en cursiva:

• i: No traslada información a los robots, su uso es puramente de presentación.
• em: Indica un texto con énfasis

See the Pen
Dando importancia a un texto by Carlos Sanchidrián (@Katenmi)
on CodePen.

Ahora me ves, ahora no me ves

Porque «Utilidades de bootstrap para mostrar u ocultar información en función de la plataforma de acceso a la web» era muy largo.

General

Gracias a Bootstrap disponemos de clases con las que cambiar la forma de mostrarse un elemento, no puedo explicar todas aquí porque tendría que ampliar sobremanera este artículo para hablar de maquetación, pero para alguien que se encarga de los contenidos de una página, posiblemente las que comento a continuación sean muy útiles además de ser las más simples:

• d-none: Oculta el elemento.
• d-block: Muestra el elemento como elemento de bloque (como un div o un párrafo).
• d-inline: Muestra el elemento como un elemento en línea (como un span).

Fragmentos de resolución en el nombre de la clase

Buena parte de las clases de Bootstrap pueden tener considerada la inclusión de un fragmento en el nombre de la clase, que indique a partir de qué resoluciones se debería aplicar. Sigue la siguiente fórmula:

{prefijo}-{fragmento de resolución}-{sufijo}

Estos fragmentos de los que hablo son:

• sm (small): Dispositivos a partir de un ancho de resolución mayor a 575px (por ejemplo: tablets pequeñas).
• md (medium): Dispositivos cuyo ancho de resolución sea mayor a 767px (por ejemplo: tablets grandes).
• lg (large): Dispositivos cuyo ancho de resolución sea mayor a 991.
• xl (xtra large): Dispositivos cuyo ancho de resolución sea mayor a 1199 (por ejemplo: pantallas de escritorio).

Nota: Es importante ser consciente de que los ejemplos son puramente orientativos, ya que las resoluciones pueden variar bastante, habiendo por ejemplo tablets que pueden tener una resolución en la que aplique el fragmento xl.

Tras explicar esto creo que es necesario que queden dos cosas claras:

• Los fragmentos de resoluciones aplican a partir de una resolución, y siempre que no haya otra regla cuya resolución mínima sea más cercana. Por ejemplo, si definimos una clase con fragmento sm, esta se va a aplicar en todos los dispositivos que tengan una resolución mayor a 575px.
• Las clases sin fragmento aplican por defecto siempre y cuando no haya una clase con fragmento de aplicación (como se puede ver en el segundo ejemplo).

Accesibilidad: la clase sr-only

Es posible que en nuestra web tengamos contenido que no sea accesible para gente con una discapacidad visual que usa lectores de pantalla, por ejemplo:

La web muestra una imagen pero cambia de lugar en función de la maquetación y es posible que el lector de pantalla no lea el atributo alt donde tiene sentido.

Hay un vídeo incrustado pero es puramente ilustrativo y sin audio (por ejemplo, un texto que va rotando) y a falta de una mejor opción hay que ver en qué intervalos de tiempo se meten qué subtítulos.

Mostramos un icono de un sobre siendo el único elemento que transmite información sobre la acción a realizar (enviar un e-mail), siendo además un icono de una librería de iconos que parte de una tipografía y no de una imagen (por lo que no disponemos de el atributo alt).

Para estos casos lo idóneo en un principio parece ser la clase d-none, los robots lo ven todo y suelen ignorar las clases; pero los lectores de pantalla no, están para que un usuario que no pueda interpretar una web con sus propios medios pueda entenderla de la forma más aproximada posible a alguien que sí, por ello si ocultamos contenido de forma visual es posible que estos lectores también lo omitan.

Para solucionar todo esto sr-only viene al rescate; es una clase que, aplicada a cualquier elemento, lo oculta excepto para lectores de pantalla (el sr viene de screen reader como se podrá suponer). De este modo podemos introducir contenido que pueda aportar información, o que dé sentido a un contenido ya existente.

Esto junto a las consideraciones con respecto a los robots, mejorará bastante la accesibilidad en nuestra página web y siempre es un punto a favor: por un lado, en los casos en los que no sea un requisito indispensable del proyecto, por aportar un valor añadido (y aumentar el porcentaje de público potencial); y por otro, porque en los casos en los que sí sea necesario mantener determinados estándares de accesibilidad, cuesta bastante más tener que volver a repasarlo todo y meter estas medidas en un contenido ya creado.

Extra: Si queremos el efecto contrario (mostrarlo en pantalla pero ocultarlo para los lectores de pantalla) podemos usar el atributo aria-hidden con el valor true (es decir, aria-hidden=»true»)

Cuidando la presentación de nuestra web impresa

No siempre hacemos la web pensando en que va a ser impresa, pero si tenemos un sitio de recetas, guías o documentación de algún tipo, el usuario va a agradecer no ver menús ni barras laterales en la página cuando la imprima (o guarde en PDF).

Bootstrap ofrece varias clases dedicadas a la versión impresa de una web, pero para comentarlas todas correctamente habría que empezar a explicar cómo maquetar la página web y no es el objetivo de esta guía.  Por ello me voy a centrar en las que son más importantes, para alguien que edita el contenido de una página web:

La clase d-print-hidden

Esta clase oculta contenido en la versión impresa de la web, es de bastante utilidad para mejorar la presentación de nuestra página web una vez impresa ya que nos permite sacar todo el contenido que no tiene mucho sentido para alguien que la ve en una hoja de papel: anuncios, formularios, barras laterales que no aporten ninguna información con respecto a la página actual… todo esto sobra y ocultándolo le estaremos haciendo un favor al usuario (y hasta al medio ambiente).

Las clases d-print-inline y d-print-block

La primera presenta el elemento como un elemento en línea (es decir, un texto plano como un span) y el segundo como un elemento de bloque (como un div o un párrafo).

Esto puede no parecer muy útil, pero si lo usamos junto a un elemento que tenga la clase d-none o el atributo hidden (que lo que hace es ocultar contenido), podemos tener un contenido que sólo se muestre en la versión impresa de la web y no en la de navegador. Un caso de uso, por ejemplo, sería el mostrar un texto con la url de nuestra web (especialmente si es breve y fácil de recordar) que invite al lector que quiera obtener más información a visitarla, ya que puede darse el caso de que la persona que lea el documento no sea la misma que haya encontrado la web para imprimirla.

¿Y los robots? ¿Es que nadie va a pensar en los robots?

Es posible que queramos tener un mismo bloque de contenido en dos sitios diferentes, por ejemplo, si queremos mostrar uno en vista impresa y otro en navegador, o si queremos que un texto se vea arriba en móviles y abajo en escritorio.

Pero, desafortunadamente, a los robots poco les importan las clases: lo ven todo, y lo que es peor, no les gusta nada el texto duplicado; estos casos requieren un cambio a nivel de maquetación para poder contentar a humanos y robots, y es algo que también puede ser modificable con Bootstrap (aunque su complejidad depende de cómo se haya maquetado la web). Pero posiblemente caiga más en manos de un diseñador o desarrollador que en la de alguien que se dedica a crear contenidos (aunque no descarto que en el futuro, servidor o algún compañero de Premium Leads se lance y redacte una guía de maquetación con Bootstrap orientada a redactores).

Fin (¿ya era hora eh?)

Eso es todo, como he dicho al principio, he creado esta guía pensando en humanos y en robots; sin embargo, estoy acostumbrado a usar tecnicismos y puede que no me haya explicado de la forma más clara posible, por ello consideraré toda duda o sugerencia recibida para mejorar su entendimiento.