a creative developer’s guide to creating accessible, award winning websites
“Creative”
developer*
*/web developer/frontender/creative engineer who REALLY likes animation
Why are so many award winning websites inaccessible?
Screenshot: the Development jury scores of an inaccessible website on Awwwards
Screenshot: the Development jury scores of an inaccessible website on Awwwards
Are jury members bad at judging accessibility?
Common mistakes
in (creative) websites
- Removing ability to select text *
- Removing focus styles with no replacement
- Removing native scrolling functionality **
- Omitting alternative text in buttons/images/etc.
- Not adding a text alternative to letter animations
- Not respecting prefers-reduced-motion
The curse of bad defaults
'Smooth' scrolling
I'm still learning
Exhibit B: a painful one; I love this animation but it requires every letter in this text to be in an individual html element which makes a screenreader read it out per letter. Not sure about the solution yet but I imagine adding aria-hidden and a screen reader only text 3/5 pic.twitter.com/KWJdgzm4fX
— cyd (@cydstumpel) January 11, 2023
Tips
- Rethink your defaults, your resets, your go-to code snippets
- Add text alternatives to letter/word/line animations
- Consider native functionality in virtual scrolling libraries
- Respect user settings with animations