- The perfect link — Rian Rietveld defines them: “When you click on them, they take you somewhere else.” Not much code in here (we’ve got that), just a lot of practical accessibility advice. For example, the
alttext for a linked image can allude to the fact that it is a link. Just an image: “A cherry tree in full bloom.” Link: “Wikipedia on cherry blossoms.” - Google Announces Seismic Change to Docs — George Joeckel covers the unfolding news that Google Docs is going to be rendered in
<canvas>, which feels like a massive WTF moment when it comes to accessibility. At one point, the vibe was that there would be a separate product for people with screen reader needs. Separate but equal isn’t a good situation. Looks like the<canvas>based rendering stuff is on hold for now, so community feedback FTW? - Don’t use custom CSS mouse cursors — Eric Bailey:
I believe that letting CSS load a custom cursor was a mistake.
- Web Designers Grapple With Downside to Flashy Animation: Motion Sickness — Katie Deighton covers the idea that things like preference toggles and
prefers-reduced-motionexists (although not by name). Always interesting to see a topic like this makes its way to a major publication like The Wall Street Journal. prefers-reduced-motionand browser defaults — Speaking ofprefers-reduced-motion, Bruce Lawson on the paragraph-of-the-year:Yes, it was a meeting request from Marketing to discuss a new product page with animations that are triggered on scroll. Much as a priest grasps his crucifix when facing a vampire, I immediately reached for Intersection Observer to avoid the browser grinding to a halt when watching to see if something is scrolled into view. And, like an exoricst sprinkling holy water on a demon, I also cleansed the code with a prefers-reduced-motion media query.
- Using CSS to Enforce Accessibility — Adrian Roselli covers this great tactic where you don’t get the proper CSS styling unless you’ve also implemented the appropriate accessibility attributes (e.g.
[role="region"][aria-labelledby][tabindex]for a scrolling table). This is a powerful idea and happens to showcase the power of CSS nicely in a way that styling solutions that avoid using selectors don’t benefit from. - Accessibility testing with Storybook — Varun Vachhar covers how you can run Axe over your component library even as you code. Accessibility issues, like color contrast problems, are bugs. Might as well give yourself the same tooling opportunities to fix them at the same time you’d fix any other bug.
- Making A Strong Case For Accessibility — Todd Libby covers how you can fight for accessibility at work. Attempt 1.) Ethical. Attempt 2.) Financial. Attempt 3.) Legal. 4.) Humanization. Attempt 5.) Don’t ask, just do it.
- Your Image Is Probably Not Decorative — Eric Bailey covers that most images with an empty
altattribute (literallyalt="", no space) probably should have had one, and that when and alt description isn’t available, there are other options (e.g. make it available as an inline image (spacer.gif) even if it isn’t one otherwise,<title>in SVG, etc.). - Writing great alt text: Emotion matters — Annnnd speaking of
alt, Jake Archibald learns from a 2011 Léonie Watson article:The relevant parts of an image aren’t limited to the cold hard facts.
- Creating An Accessible Dialog From Scratch — Kitty Giraudel takes on the final boss in accessibility.
I agree the ability to load custom mouse cursors should generally not be used on websites, but it’s very useful when developing HTML5 games that require you to point and click on things.
If you draw a mouse cursor manually in your game (“software” cursor), it will suffer from a 1-frame delay, which is noticeable even on 144 Hz monitor. You could use extrapolation to make this delay less visible, but this will make the cursor jitter around when it moves. In contrast, a “hardware” cursor is much more responsive and doesn’t jitter at all – it’s on the same level as the default OS mouse cursor.
Let me save this one then, I’ve saved them all. You’re article is now an aray.