Read on Twitter
Let's do a quick #a11y review of the first website for each voting category for @AWWWARDS' best of 2020. https://annual.awwwards.com/categories
KODE, for their Site category:
- Does not honor reduced motion media queries, opens with full-screen zooming and panning.
- No focus styles. https://www.kodeclubs.com/
- Does not honor reduced motion media queries, opens with full-screen zooming and panning.
- No focus styles. https://www.kodeclubs.com/
Active Theory, for their Agency category:
- Does not honor reduced motion media queries, opens with autoplaying video and full-screen motion.
- No focus styles.
- Color contrast. https://activetheory.net/home
- Does not honor reduced motion media queries, opens with autoplaying video and full-screen motion.
- No focus styles.
- Color contrast. https://activetheory.net/home
Before I get too far in, I'm not doing full audits, just noting things that even a cursory check would surface as non-trivial access barriers. https://www.matuzo.at/blog/testing-with-tab/
Garden Eight, for their Studio category:
- Does not honor reduced motion media queries, opens with autoplaying video.
- Focus styles? How gauche.
- Viewport is preventing zooming and scaling, thankfully browsers largely ignore this nonsense.
https://garden-eight.com/
- Does not honor reduced motion media queries, opens with autoplaying video.
- Focus styles? How gauche.
- Viewport is preventing zooming and scaling, thankfully browsers largely ignore this nonsense.
https://garden-eight.com/
Jesper Landberg, for their Independent category:
- While you can use your keyboard to navigate the portfolio carousel, you can't use it to open a case study.
- Does not honor reduced motion media queries, large areas of content move on scroll. https://jesperlandberg.dev/
- While you can use your keyboard to navigate the portfolio carousel, you can't use it to open a case study.
- Does not honor reduced motion media queries, large areas of content move on scroll. https://jesperlandberg.dev/
Pioneer - Corn Revolutionized, for their Developer category (these people should know better):
- Fullscreen autoplaying video (notice a trend here?).
- Can't access or navigate chapters via keyboard in their hamburger modal thing.
- No lang attribute. https://go.pioneer.com/cornrevolution
- Fullscreen autoplaying video (notice a trend here?).
- Can't access or navigate chapters via keyboard in their hamburger modal thing.
- No lang attribute. https://go.pioneer.com/cornrevolution
unspun, for their Ecommerce category:
- No focus styles, tabbing unpredictably whips you through their homepage categories instead (that's a enw one).
- Large, moving content that doesn't honor reduced motion.
- Missing alt text descriptions. http://unspun.ouiwill.com/
- No focus styles, tabbing unpredictably whips you through their homepage categories instead (that's a enw one).
- Large, moving content that doesn't honor reduced motion.
- Missing alt text descriptions. http://unspun.ouiwill.com/
Synchronized Studio, for their Mobile category:
- A marquee (seriously?) that doesn't honor reduced motion.
- Color contrast issues.
- No focus styles.
https://synchronized.studio/
- A marquee (seriously?) that doesn't honor reduced motion.
- Color contrast issues.
- No focus styles.
https://synchronized.studio/
This isn't a call out of the websites featured, in that I'm just grabbing them off the top of the stack. It is, however, a condemnation of best-of lists that don't take accessibility into account.
Note that this quasi-audit took just under half an hour, far more effort than the @AWWWARDS team apparently took!
The notion that you need to sacrifice aesthetics for accessibility is untrue. All the sites here could be remediated without sacrificing their overall look or experience. Setting aside legal liability for a second, they'd even be enhanced by the effort.
There are sites put in the work to make beautiful, accessible experiences. Our industry just does not champion them the way they should be.
Any time you see contests like this, ask yourself:
- Who isn't present and why? Can you trust that they've done their due diligence?
- How does their selection criteria affect what you consider good craft?
- How does participating in this system affect representation?
- Who isn't present and why? Can you trust that they've done their due diligence?
- How does their selection criteria affect what you consider good craft?
- How does participating in this system affect representation?
