Savvas Stephanides Profile picture
Sep 1, 2020 10 tweets 3 min read Read on X
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: codepen.io/SavvStudio/pen…
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!

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Savvas Stephanides

Savvas Stephanides Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @SavvasStephnds

Jan 23, 2023
What are Data Structures? 💿

Let's explain.
When you use a website or an app, a lot of things are going on in the background in order to give its users what they're looking for.

Things are being carried out and the result of these things depend on other things.
One of these things that influence how an app behaves, is the information that it has on hand. For example:

💿 The user's name so the app can give a personalised greeting.
💿 The list of tasks in a to-do list so the app can list them, add things or remove things from it.
Read 12 tweets
Sep 27, 2021
Javascript is the most versatile programming language out there.

You can build anything: interactive web apps, to servers, to mobile and desktop apps.

It does come with its own set of concepts that anyone working with it should know.

Here's 11 of them, explained.

👇🧵
Promises, explained:

savvas.me/explained/prom…
async/await explained:

savvas.me/explained/asyn…
Read 12 tweets
Sep 25, 2021
TOP 5 CHEST PRESS EXERCISES!

Thread 🧵👇 #FitnessWeekend Image
5. MACHINE CHEST PRESS

Equipment: machine

How to do it: bodybuilding.com/exercises/leve… Image
4. CABLE CROSS-OVER

Equipment: cable

How to do it: bodybuilding.com/exercises/cabl… Image
Read 8 tweets
Jun 3, 2021
WHAT IS GRAPHQL?

Let's explain!
This thread is also available in a more readable and accessible format here:

🔗 savvas.me/explained/grap…
You probably heard of GraphQL as a new way to retrieve data from a web service. Possibly as an alternative to REST services. But what is it exactly?
Read 16 tweets
Jun 1, 2021
How I made savvas.me

A thread 🧵👇 Image
1⃣ The stack:

I wanted my website to be as fast and snappy as possible.

Which is why this website is 100% Jamstack. The code, posts, assets are all stored in a repository on Github - github.com/savvasStephani….

...and the website itself is made with Gatsby. Image
2⃣ Hosting

For my website, I wanted for the builds to execute immediately after pushing new changes.

The Markdown blog files, the assets (images, videos), JS files, styling etc are all hosted on Github.

The end result from building the website is hosted and managed on Netlify. Image
Read 9 tweets
Mar 29, 2021
Should I use forEach() or map()?

Both iterate through arrays in Javascript, but how do they differ? Let's see:

Thread 🧵👇

#100DaysOfCode #CodeNewbie #javascript
🚨 This thread is also available in a more accessible version here:

👇

🌐 savvas.netlify.app/explained/fore…
If you're learning Javascript, sooner or later you'll come across the forEach() and map() functions. It is quite often that there is some confusion about what each one does.
Read 15 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(