About

Many personal websites have tried to differentiate themselves from the rest by adding some fancy special effects. From fancy animations to hover effects. Once of the most popular effects however, is what I call the "typewriter effect".

Adding such an effect might be fancy and a cool way to advertise yourself, but there's a major problem with it, and it has to do with accessibility.

The problem

If a user tries to visit the website with the help of a screen reader, they'll eventually reach the part when you created your typewriter effect. What do you think the screen reader is going to announce?

Once the typewriter section gains focus, it's going to announce whatever is written on screen at the that time.

For example, if your "typewriter" is trying to write "Developer" and at time of focus it's an "Devel", the screen reader is going to announce exactly that:

Devel

This will definitely confuse your visitors with screen readers! Not a very good experience! We would want the screen reader to announce something like:

Developer, designer and coffee addict.

So how do we fix this?

The solution

We can accomplish this with 2 attributes in our typewriter section: aria-label and aria-hidden.

Suppose our typewriter section is written like this in HTML:

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

And then some Javascript to implement the typewriter effect in the span called text. We can use the two attributes like so:

aria-label

Use the aria-label attribute in the div so that the screen reader knows what to announce back to the user:

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

aria-hidden

Secondly, we hide the span from the screen reader so it doesn't make an attempt to read the contents to the user, using aria-hidden="true"

And that's it! Now the screen reader will announce this when the screen reader focuses on our typewriter:

Developer, designer and coffee addict

Much more clear and exactly what we want!

Conclusion

The "typewriter effect" are a feature that shows up on a ton of personal portfolio websites and for good reason: it's freaking cool! But it usually comes at the cost of accessibility if care isn't taken for it. This article has shown you an easy way to face this problem in a few seconds.

Do you have a "typewriter" in your website? Will you make the attempt to make it accessible?