Read on Twitter
The problem with the "typewriter effect" on your website and how to fix it.
(Thread)
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread">https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten">
#100DaysOfCode #CodeNewbie #accessibility
(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& #39;s nice, sure! But there& #39;s a problem. And it has to do with accessibility.
Simply put, blind people visiting your website with screen readers, just can& #39;t see what the hell you& #39;ve written on that section.
Simply put, blind people visiting your website with screen readers, just can& #39;t see what the hell you& #39;ve written on that section.
Here& #39;s an example, using VoiceOver on Safari for iOS:
Transcript: "Coffee underscore. Heading level 1"
Transcript: "Coffee underscore. Heading level 1"
That is pretty horrible! And it& #39;s probably already on your website! How do we fix it? Let& #39;s see!
Let& #39;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">https://codepen.io/SavvStudi...
<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">https://codepen.io/SavvStudi...
If you use a screen reader, it would result in the effect shown above. To fix this we& #39;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
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>
<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"
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!
