Adactio: Links—Tagged with aria

Mona Sans & Hubot Sans

Two new lovely open source variable fonts from Github.

How to (not) make a button - Tomas Pustelnik’s personal website

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.

Fontshare: Quality Fonts. Free.

A whole lotta nice fonts—most of them variable fonts—from Indian Type Foundry.

Style with Stateful, Semantic Selectors

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.

Bring Focus to the First Form Field with an Error :: Aaron Gustafson

A handy little script from Aaron to improve the form validation experience.

Patterns | APG | WAI | W3C

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!

Roboto … But Make It Flex - Material Design

This version of Roboto from Font Bureau is a very variable font indeed.

Fluid type sizes and spacing — Piper Haywood

Prompted by Utopia, Piper shares her methodology for fluid type in Sass.

Manrope – free sans-serif variable font

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.

In Quest of Search

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.

MD Nichrome by Mass-Driver

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.

CSS { In Real Life } | Quick Tip: Style Pseudo-elements with Javascript Using Custom Properties

Oh, this is smart! You can’t target pseudo-elements in JavaScript, but you can use custom properties as a proxy instead.

Show/Hide password accessibility and password hints tutorial | Part of a Whole

A good tutorial on making password fields accessible when you’ve got the option to show and hide the input.

Building Dark Mode | Product Blog • Sentry

Robin makes a good point here about using dark mode thinking as a way to uncover any assumptions you might have unwittingly baked into your design:

Given its recent popularity, you might believe dark mode is a fad. But from a design perspective, dark mode is exceptionally useful. That’s because a big part of design is about building relationships between colors. And so implementing dark mode essentially forced everyone on the team to think long, hard, and consistently about our front-end design components. In short, dark mode helped our design system not only look good, but make sense.

So even if you don’t actually implement dark mode, acting as though it’s there will give you a solid base to build in.

I did something similar with the back end of Huffduffer and The Session—from day one, I built them as though the interface would be available in multiple languages. I never implemented multi-language support, but just the awareness of it saved me from baking in any shortcuts or assumptions, and enforced a good model/view/controller separation.

For most front-end codebases, the design of your color system shows you where your radioactive styles are. It shows you how things are tied together, and what depends on what.

From a syntax perspective, CSS variables are “extremely permissive”.

Van11y (for Vanilla-Accessibility) is a collection of accessible scripts for rich interfaces elements, built using progressive enhancement and customisable.

Link tags: aria

138