Accessibility on Websites — For People and Search Engines

The importance of accessibility on websites is forgotten for many developers while the development process. Nowadays, almost 3% of the population has Visual Impairment and depending on the format of our code, can bring some problems in reading websites by special tools like ChromeSpeak.

Besides that, the search engines don’t do miracles, we need to take care of our site in a way of leaving the code more semantic.

In that way, it’s important to understand these 3 points that provide more accessibility to websites.

→ Image-Replacement (Not so much use currently but it is important to know about)

→ Semantic Elements

→Color Contrast

Image Replacement

Before we talk about this topic, is important to notice that this technique is falling out of use because now we have web fonts and SVG that are really powerful style tools.

CSS Image Replacement is a technique to replace a text element with an image element.

For example, we want to put a logo on a website but we can put an <h1> element text with the name of the company and after this replace with the image logo.

CSS-Tricks has a post with a lot of techniques all of these years, with pros and cons and I recommend it https://css-tricks.com/the-image-replacement-museum/

Semantic Elements (HTML5)

Semantic Tags were introduced in HTML5, and the reason for this is that over the years the websites started to get bigger, a lot of search engines tools began to merge, more and more customers and also, we can’t forget about that 3 % of the population with Visual Impairment depends on extensions that read our website code.

Some of the 100 semantic elements available:

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

Let’s compare some tags:

→ <strong> vs <b>

<strong>: This part of the text must be read more forcefully, with more intensity.

<b>: This tag doesn’t bring anything about the text content and just about his appearance, that should be bold.

→ <em> vs <i>

<em>: This part of the text must be read with more emphasis.

<b>: This tag doesn’t bring anything about the text content and just about his appearance, that should be bold.

For more examples: https://css-tricks.com/video-screencasts/100-lets-write-semantic-markup/

Color Contrast

Almost 8% of men and 0.5% of women in the world difficulty differentiating colors, in order for these people’s browsing experience to not be compromised, it is important that site information is not color-coded. The use of bold or underline can be used for highlighting texts instead of using colors for this.

These tools can help you:

→ https://webaim.org/resources/contrastchecker/

→ https://www.toptal.com/designers/colorfilter

Finally, don’t forget that the most powerful part of the internet is people and for us developers, our clients. So always think ways to improve their navigation.