DEV Community

Cover image for Animated no-element typewriter
Alvaro Montoro
Alvaro Montoro

Posted on • Updated on

Animated no-element typewriter

After sharing a typewriter effect with CSS, @afif beat the drums of "CSS War" and created a different solution, and @inhuofficial hopped in and is preparing a "type-righter"... Here's another entry: an animated no-element cartoon of a typewriter.

And the demo on CodePen (click the "re-run" button at the bottom right corner to see the animation again):

There is no HTML tab because there's no HTML code on this pen. The trick? CodePen adds a basic HTML structure, including the <body> tag so that we can add styles via CSS to the body, and it will look like there aren't any HTML elements, but there are some... they are just hiding!

Discussion (22)

Collapse
darkwiiplayer profile image
DarkWiiPlayer

Cool. Now make it accessible.

Collapse
alvaromontoro profile image
Alvaro Montoro Author • Edited

Ouch! πŸ˜…

We could make it more accessible but we'd need to add a role="image" and an aria-label="animated cartoon of a typewriter typing 'Hello!'" to the body... All this would be easier to do if we moved this to a component (replace body with .typewriter in the CSS)... More tips for making CSS art more accessible 😊

Collapse
inhuofficial profile image
InHuOfficial

Can you add role="image" to the <body> element? I would imagine that isn't supported as the <body> element isn't something you can focus with a screen reader?

Thread Thread
alvaromontoro profile image
Alvaro Montoro Author

Good point. I would need to test, but it probably would be better to move it to a different element altogether.

Thread Thread
alvaromontoro profile image
Alvaro Montoro Author

I tested having aria-label and role="img" with Chromevox and VoiceOver. They both announce it as an image and read the aria-label, and VoiceOver also mentions it's empty. It doesn't look ideal anyway. Probably better to move it to an element to make it more accessible.

Collapse
alvaromontoro profile image
Alvaro Montoro Author

I'll be talking about this topic on the Hamburg HTML Meetup on Tuesday at 7PM CET:

Zoom meeting coming soon πŸ™‚

Collapse
inhuofficial profile image
InHuOfficial • Edited

Technically it is, as it is purely decorative and CSS doesn't show up!

Although it would be easy to make it accessible "to standards" with the content property as it now accepts alt text! It has 70% support already (although screen readers haven't caught up yet!)

content: "" / "Typewriter typing out hello";
Enter fullscreen mode Exit fullscreen mode

And as the animation is short it doesn't need a prefers-reduced-motion.

Crap, I just said nice things / supportive thing about an enemy article again...I really need to work on this "being at war" thing 🀣

Collapse
alvaromontoro profile image
Alvaro Montoro Author

I need to read about this

Collapse
cgousley profile image
Clayton G. Ousley

It's a typewriter. You can't get even install a screen reader on a typewriter.

Collapse
darkwiiplayer profile image
DarkWiiPlayer

Pretty sure these days you could install a screen reader on a mid-priced shower-head xD

Collapse
afif profile image
Temani Afif

Now, the real fun starts. Get ready for my next attack!

Collapse
alvaromontoro profile image
Alvaro Montoro Author

animated gif of a man asking to bring it

Collapse
nombrekeff profile image
Keff

I never though I'd say this, but I'm enjoying the war!

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Join us! Come to the dark side... we have (CSS) cookies πŸ˜‰πŸͺ

Collapse
nombrekeff profile image
Keff

Hmm, cookies... really tempting... But I think I'll stick to the "Swiss" cheese for this war and maybe join in the next one 😜

Thread Thread
alvaromontoro profile image
Alvaro Montoro Author

@afif @inhuofficial do we have a topic for next time? Swiss cheese?

Thread Thread
afif profile image
Temani Afif

we don't decide about topic in advance. It won't be funny πŸ˜‰ anyone can start a war at any time! We need some "random" and "unexpected" things

Collapse
mayannaoliveira profile image
Mayanna Oliveira

It's so cute! I like it so much. Thanks to share with us.

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thanks 😊

Collapse
coeneivan profile image
Ivan Coene

Dahm that's cool!

Collapse
dannyengelman profile image
Danny Engelman

You are speaking in Berlin so must be German. Judging by this design you never used a typewriter...

Collapse
posandu profile image
Posandu

What a cute little typewriter !