The problem with the "typewriter effect" on your website and how to fix it.

(Thread)

#100DaysOfCode #CodeNewbie #accessibility

So you want to show off your portfolio website and you want to add some fancy graphics to show off your Javascript skills. What better way than by adding a fancy "typewriter effect" to show the world your multi-faceted personality?

It's nice, sure! But there's a problem. And it has to do with accessibility.

Simply put, blind people visiting your website with screen readers, just can't see what the hell you've written on that section.

Here's an example, using VoiceOver on Safari for iOS:

Transcript: "Coffee underscore. Heading level 1"

That is pretty horrible! And it's probably already on your website! How do we fix it? Let's see!

Let's say the HTML code for your typewriter effect:

<h1 id="typewriter-effect">
<span id="text"></span>
</h1>

You then write some CSS for the colouring, and then some Javascript to actually create the effect

Example: https://codepen.io/SavvStudio/pen/KKzvbOx

If you use a screen reader, it would result in the effect shown above. To fix this we're going to use two ARIA attributes: "aria-label" and "aria-hidden":

aria-label - to make the screen reader say what we want
aria-hidden - to make the screen reader skip the typewriter text

So your new HTML would look like this:

<h1 id="typewriter-effect" aria-label="Developer, designer and coffee addict">
<span id="text" aria-hidden="true"></span>
</h1>

And this is what it sounds like to screen reader users

Transcript: "Developer, designer and coffee addict. Heading level 1"

A lot better! Try it for yourself and see that your website will become more accessible as a result!