Writing texts for robots with Bootstrap 4

Hi! My name is Carlos Sanchidrián and I work as a developer at Premium Leads. I have created this guide hoping that those who need to edit content using themes that may include Bootstrap, find an easy way to know about the tools that this includes in order to improve the look, accessibility, and position in search browsers.

With this guide, I do not pretend to show you a complete adaptation of all the current information about Bootstrap, but just to collect those utilities that usually go unnoticed and can be very useful when it comes to SEO and accessibility.

In order to have more info, my advice is to check Bootstrap official web.

NB: Bootstrap, though is usually included as a whole, specially on those themes created by third-parties (such as WordPress, Drupal…), may be included just for those parts in which it will be useful.

There are 3 terms that are repeated frequently:

• Element: HTML element (span, p, div…).
• Class or classes: this is the content of an element’s class attribute. Those are generally ignored by robots (except in some specific cases, such as in some screen readers or Googlebot rendering queues).
• Robot: all non-human element that crawls our webpage. This can be a Googlebot, a technical tool that helps those people with visual impairment, or any other application that can show your web data, such as a RSS reader.

Headings

Heading elements (h1, h2, h3…) have been frequently used to change the look of an article, as browsers usually give them a size and width that may increase or decrease inversely proportionally to the heading level, being a h1 the biggest, and a h6 the smallest.

However, its real mission is to show a hierarchy ir our webpage content. In other words, h1 would be the main title in an article, h2 would be a section’s title, h3 would be the title for a sub-section, and so on until the h6.

This is important because that is the way robots can know how your content is structured. Whenever your first heading is not an h1, or the sub-section heading is not immediately the following one, robots will not understand the structure and this will have negative consequences.

For this reason, Bootstrap offers some classes with the name of the heading element in order to achieve their function. This way, if we want to show for instance an h5 heading after an h2 because we consider this way there will not be a visual charge like that of an h3, by means of using the h3 with an h5 class we will keep the right hierarchical order. As an example:

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

It is also possible to associate these classes to any other html element so they can take these styles:

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

There is another option regarding changes in titles, display classes.

These classes highlight heading elements even more, bringing a bigger size but less width to the text. We must be very careful with these classes however, as a short text with a very big font can make the display of our web worse from a mobile device.

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

 

Adjusting the importance of the content text

In this case, we must differentiate between classes and elements: classes will provide us with merely visual information, while elements have styles assigned as they also give information to robots.

Resting importance to a text

We can visually indicate that a text is less important by crossing it out, reducing it, or by showing it with a lighter color.

Classes

• text-muted: this establishes a less visual charge (usually by setting a lighter color text). It can be used anywhere, for example, if we use it in a title, we will be showing this text with an applied class like a complementary text.
• small: this applies the same look that the small element but without adding any meaning.

Elements

They appear as crossed out:

• del: this is used for texts we pretend to consider as deleted, for example tasks already done in a list.
• s: it contains a text that has been corrected, for example, the “before” in the price of a product.

They are shown as smaller:

• small: to show the small print or a contract, for instance (such as “Tax not included”).

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

Higlighted or important text

We can show thast a text is more important by increasing its size or width, or underlining it.

Classes

• lead: It shows a text slightly bigger than another.
• mark: It is useful to apply the same style than the mark element.
• font-weight-bold: It shows the text in bold, but with less width than using font-weight-bolder.
• font-weight-bolder: It shows the text in bold, with more width than using font-weight-bold.

Elements

They are shown with a yellow background:

• mark: used to highlight a section in the text.

They are shown as underlined:

• ins: to show some added text.
• u: this does not pass information to robots, it just changes the style of text.

They appear in bold:

• b: this does not pass information to robots, it just changes the style of text.
• strong: it shows a more important text.

They appear in italics:

• i: this does not pass information to robots, it just changes the style of text.
• em: it shows a text with some stress

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

Now you see me, now you don’t

Because to say “Bootstrap utilities to show or hide information depending on the web’s access platform” was too long.

General

Thanks to Bootstrap we have classes to change the way an element is shown. I cannot explain all of them here because I would need to expand this article endlessly, but for somebody in charge of the contents of a page, the next ones will probably be very useful and simple:

• d-none: it hides the element.
• d-block: it shows the element as a block element (like a div or a paragraph).
• d-inline: it shows the element like a line element (like a span).

Resolution fragments in class’ name

Most Bootstrap classes can consider including a fragment in the class name that shows from which resolutions it should be applied. The formula is the following:

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

The fragmenos I am talking about are:

• sm (small): Devices with a resolution bigger than 575px (for example: small tablets).
• md (medium): Devices with a resolution bigger than 767px (for example: big tablets).
• lg (large): Devices with a resolution bigger than 991.
• xl (xtra large): Devices with a resolution bigger than 1199 (desktops).

NB: We must be aware that these examples are just that, examples. Resolutions may vary, and we have tablets whose resolution may be suitable for xl fragment.

That said, we must have clear a couple of things:

• Resolution fragments are applied from a concrete resolution and as long as we do not have another rule whose resolution is closer. For example, if we define a class with a sm fragment, this will be applied in all devices with a resolution bigger than 575px.
• Those classes without fragment will be applied by default as long as we do not have a class with an application fragment(as seen in the second example).

Accessibility: sr-only class

It may happen that in our web we have content that may not be accessible for people with a visual impairment who use screen readers, for example:

Our web shows an image but this changes according to the layout and it is possible that the screen reader does not read the alt attribute where it makes sense.

There is an embedded video but this is purely illustrative and has no audio (for example, a rotary text) and we should see in which time intervals we add which subtitles.

We show an envelope icon being this the only element that transmits the information regarding the action to perform (send an e-mail), being besides an icon from an icon library (without the alt attribute).

For these cases, the ideal thing would be the d-none class. Robots see everything and tend to ignore classes, but screen readers do not: they are there for those users who cannot understand a web by their own means can understand it like somebody who does. For this reason, if we hide visual content it is possible that some readers may not see it too.

In order to solve this, sr-only comes to the rescue. This is a class that, when applied to any element, it hides it except for those screen readers. This way, we can introduce content that may bring information or make sense to an already existing content.

All of this, besides those considerations regarding robots, will improve the accessibility in our web page and this is always something good: on one hand, in those cases where it may not be an essential requirement of the project, it will add some value (and increase the percentage of potential public); and on the other, because on those cases in which it will be necessary to keep some accessibility standards, it will be harder to review everything and add these measures in some already existing content.

Extra: If we want the contraty effect (to show it in screen but hide it for screen readers) we can use the attribute aria-hidden with a true value (in other words, aria-hidden=”true”)

Taking care of our web’s printed version

We don’t usually make our web thinking that it will be printed, but if we have for instance a web with recipes, guides, or any other kind of documents, our users will be thankful if there are no menus or sidebars in our web when printed (or saved as a PDF).

Bootstrap has several classes dedicated to the printed version of a web, but in order to explain them all, we should start by saying how to design the webpage and this is not the main objective of this guide. For this reason I am going to mention those more important for somebody in charge of editing a web’s content:

The d-print-hidden class

This class hides content in the printed version of the web, and it is very useful to improve our webpage’s presentation once impressed, as all the content that makes no sense in a piece of paper will be left out: adverts, forms, sidebars… All this content is not necessary and by hiding it we will be doing a favour to the user (and even to the environment).

d-print-inline and d-print-block classes

The first one shows the element as a line element (in other words, it is plain text like a span) and the second one as a block element (like a div or a paragraph).

This may not seem very useful, but when used next to an element with the d-none class or a hidden attribute (which hides content), we can have content that only shows in the printed version and not in the browser one. An example of use is to show a text with our web’s url (especially if it is short and easy to remember) that can invite the reader to click on it and have more information, as it may be the case that the person that reads the document is not the same that has found the web to print it.

What about robots? Nobody cares about robots?

It is possible that we may want to have a same block of contents in two different places, for example, if we want to show in the printed version and the other in our browser, or if we want a text to appear at the top on mobile devices and at the bottom on desktops.

But, unfortunately, robots do not care about classes: they see it all and, what is worse, they do not like duplicated texts. These cases require a change at the design level, to keep both humans and robots happy. This is something that can also be modified with Bootstrap (though the complexity will depend on how the web was designed). However, it is more probable that this will end in a designer or developer’s hands, rather than in somebody who creates content (maybe soon, somebody at Premium Leads will write a guide on Bootstrap layouts oriented to writers and content editors).

The End (it was about time, right?)

that’s all folks! As I said at the beginning, I have created this guide thinking about humans and robots. However, since I tend to use technicisms, I may have not explained myself clearly, so all suggestions and doubts will be welcomed.