This is a really lovely little HTML web component from Jason. It does just one thing—wires up a trigger button to toggle-able content, taking care of all the ARIA for you behind the scenes.
Browse through some truly web-native artwork by Eric, and read all about it:
There is a lot, and I mean a lot, of room for variability in web technologies. We work very hard to tame it, to deny it, to shun it.
A fun variable font with three axes: inktrap, balloon, and curve.
Five lovely monospaced variable fonts.
This online course from Sara looks superb!
I know how overwhelming and even frustrating accessibility may feel at first. But I promise you, accessibility isn’t always as hard as it seems (especially if you know where and when to start!). And my goal with this course is to make it friendlier and more approachable.
Best of all, there’s $100 off if you sign up now—that’s a 25% saving.
The slides from Hidde’s presentation at Paris Web—a great overview of using and misusing ARIA.
I’ve already add the search element to thesession.org, but while browser support is still rolling out, I’m being extra verbose:
<search role="search">
...
</search>Brought to you by the department of redunancy department.
I’ll remove the ARIA role once browsers are all on board. As Scott says:
Please be aware that this element landing in the HTML spec today does not mean it is available in browsers today. Issues have been filed to implement the search element in the major browsers, including the necessary accessibility mappings. Keep this in mind before you get all super excited and willy nilly add this new element to your pages.
Two new lovely open source variable fonts from Github.
A demonstration of how even reinventing a relatively simple wheel takes way more effort than it’s worth when you could just use what the brower gives you for free.
A whole lotta nice fonts—most of them variable fonts—from Indian Type Foundry.
I’ve done this quite a bit: using ARIA attributes as “hooks” for styling and behaviour. It’s a way of thinking of accessibility as the baseline to build upon rather than something that can sprinkled on top later.
A handy little script from Aaron to improve the form validation experience.
This is a terrific resource! A pattern library of interactive components: tabs, switches, dialogs, carousels …all the usual suspects.
Each component has an example implementation along with advice and a checklist for ensuring its accessible.
It’s so great to have these all gathered together in one place!
This version of Roboto from Font Bureau is a very variable font indeed.
Prompted by Utopia, Piper shares her methodology for fluid type in Sass.
This font is a crossover of different font types: it is semi-condensed, semi-rounded, semi-geometric, semi-din, semi-grotesque. It employs minimal stoke thickness variations and a semi-closed aperture.
On the surface this is about the pros and cons of minting a new HTML search element to replace div role="search" but there’s a deeper point which is that, while ARIA exists to the plug the gaps in HTML, the long-term goal is to have no gaps.
ARIA is not meant to replace HTML. If anything, the need to use ARIA as ‘polyfill’ for HTML semantics could be considered as a sign and a constant reminder of the fact that HTML falls short on some semantics that benefit users of assistive technologies.
Marvin has some competition! Here’s another beautiful sci-fi variable font:
MD Nichrome is a display typeface based on the typography of paperback science fiction from the 70s and early 80s.
Oh, this is smart! You can’t target pseudo-elements in JavaScript, but you can use custom properties as a proxy instead.
A good tutorial on making password fields accessible when you’ve got the option to show and hide the input.