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.
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.
Cool. Now make it accessible.
It's a typewriter. You can't get even install a screen reader on a typewriter.
Pretty sure these days you could install a screen reader on a mid-priced shower-head xD
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
contentproperty as it now accepts alt text! It has 70% support already (although screen readers haven't caught up yet!)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 🤣
I need to read about this
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 🙂