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 😊
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
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?
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.
I'll be talking about this topic on the Hamburg HTML Meetup on Tuesday at 7PM CET:
Hamburg HTML meetup
@hhhtml
Super excited to confirm the second talk for the August 31st, 7pm CEST (utc+2): Creating Accessible CSS Art A lightning talk by @alvaro_montoro github.com/hhtml-de/call-…
19:30 PM - 28 Aug 2021
Zoom meeting coming soon 🙂
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Ouch! 😅
We could make it more accessible but we'd need to add a
role="image"and anaria-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 (replacebodywith.typewriterin the CSS)... More tips for making CSS art more accessible 😊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?Good point. I would need to test, but it probably would be better to move it to a different element altogether.
I tested having
aria-labelandrole="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.I'll be talking about this topic on the Hamburg HTML Meetup on Tuesday at 7PM CET:
Zoom meeting coming soon 🙂