Hello friends. 💜
I hope this newsletter brings you a moment of calm today.
It's a tough time at the moment. We're both hunkering down for another month in lockdown. Louis in Belgium and me in the UK.
And, well... broadly gestures at the election battleground in the USA.
It seems like a good time to focus our attention on empathy.
This month we're going to be talking about accessibility, or as you may have seen it written down – A11y.
💵 If you're enjoying this newsletter, donate to the ACLU. Help them protect civil liberties and fight for structural reform.
💌 Let's open up the box and see what's inside...
💡 SVG tip
As 'builders of the web' it's our responsibility to make sure that the things we make can be accessed by everyone, regardless of ability.
If your SVG graphic is adding context or information to your content it's important to make sure that people with visual impairments don't miss out!
You may have used alternative text before to describe an image to screenreader users?
<img src="image.svg" alt="my description">
But did you know that you can also make inline SVG accessible?
We can do this by adding a title and description element.
To ensure cross-browser compatibility we also add
aria-labelledby="uniqueTitleID uniqueDescID" and role="img"
Check out Heather Taylor's pen
✏️ Article
This article by Heather Migliorisi is a mine of knowledge!
She covers a ton of use cases – from decorative SVG, to icons, to animated and interactive examples.
✨ Fun demos
Text Masking -- view demo
Leslie made this colourful text animation at Cassie's recent SVG workshop. It's not just beautiful, it's also accessible to users of assistive technology. Hooray!
Accessible Buttons -- view demo
SVG icons are often used to infer meaning on buttons. This demo from Marco Hengstenberg shows us how to ensure that the meaning isn't lost for visually impaired users.
Alien Rating Control -- view demo
We love animation over here – but for people with vestibular disorders, it can trigger motion sickness and confusion.
We can make the web less nausea-inducing by using the prefers-reduced-motion media query. This media query checks to see if the user has indicated a preference to see less animation.
This demo by Darin Senneff is a great example of using animation on as a progressive enhancement. Users who prefer reduced motion get a non-animated version which is just as lovely!
Karma Chameleon. -- view demo
This demo by Carie Fisher is absolutely brilliant! Not only does she demo the prefers-reduced-motion media query – but she also implemented a space scene for users who prefer dark mode using prefers-color-scheme: dark.
Toggle your preferences and take a look at how the chameleon changes.
🏆 viewBox Challenge!
Each month we'll give you a theme to kick-start your imagination. We'll feature our favourite one in next month's edition.
Last month's challenge was a tricky one! Data-viz
Our favourite entry this month was this animated graph from alphardex007. Such a smooth animation.
We've also gathered all previous entries in a single CodePen collection! Browse through them here.
🎨 This months theme is Accessibility
Ideas...
- Create an SVG character – give them a name and backstory using the title and description tags.
- Add
prefers-reduced-motionto an animated demo.
- Make a fun day/night toggle that respects the users
prefers-color-schemepreference.