Adactio: Links

Nutrition Cards for Accessible Components A11Y Expectations

A handy bunch of checklists from Dave for creating accessible components. Each component gets a card that lists the expectations for interaction.

Accessibility: Start with the foundations | susan jean robertson

I encourage you to think about and make sure you are using the right elements at the right time. Sometimes I overthink this, but that’s because it’s that important to me - I want to make sure that the markup I use helps people understand the content, and doesn’t hinder them.

The Accessibility of Styled Form Controls & Friends | a11y_styled_form_controls

A great collection of styled and accessible form elements:

Form controls are necessary in many interfaces, but are often considered annoying, if not downright difficult, to style. Many of the markup patterns presented here can serve as a baseline for building more attractive form controls without having to exclude users who may rely on assistive technology to get things done.

Short note on progressive ARIA by The Paciello Group

Léonie makes a really good point here: if you’re adding aria attributes to indicate interactions you’re making available through JavaScript, then make sure you also use JavaScript to add those aria attributes.

Transform your type online with variable fonts | Creative Bloq

This is a great interview with Rich on all things related to web typography—including, of course, variable fonts.

I’m so lucky that I literally get to work side by side with Rich; I get to geek out with him about font stuff all the time.

Font Playground — Play with variable fonts!

A fun way to play around with the options in variable fonts.

Ampersand 2018 | Rob Weychert

Rob attended the excellent Ampersand event last Friday and he’s made notes for each and every talk.

Don’t Use The Placeholder Attribute — Smashing Magazine

A lot of the issues here are with abuses of the placeholder attribute—using it as a label, using it for additional information, etc.—whereas using it quite literally as a placeholder can be thought of as an enhancement (I almost always preface mine with “e.g.”).

Still, there’s no getting around that terrible colour contrast issue: if the contrast were greater, it would look too much like an actual pre-filled value, and that’s potentially worse.

Text Effects - a Collection by Mandy Michael on CodePen

Mandy’s experiments with text effects in CSS are kinda mindblowing—I can’t wait to see her at Ampersand at the end of the month!

How to start with variable fonts on the web – Oliver Schöndorfer

A nice intro to variable fonts.

Know your ARIA: ‘Hidden’ vs ‘None’ | scottohara.me

When to use aria-hidden="true", and when you might need display: none:

aria-hidden by itself is not enough to completely hide an element from all users, if that is the end goal.

When to use role="presentation" (or role="none"):

Where aria-hidden can be used to completely hide content from assistive technology, modifying an element’s role to “none” or “presentation” removes the semantics of the element, but does not hide the content from assistive technologies.

Dark theme in a day – Marcin Wichary – Medium

On Ev’s blog, Marcin goes into great detail on theming an interface using CSS custom properties, SVG, HSL, and a smattering of CSS filters.

I was kind of amazed that all of this could happen via CSS and CSS alone: the colours, the transitions, the vectors, and even the images.

Super-powered layouts with CSS Variables + CSS Grid by Michelle Barker on CodePen

This article is about using custom properties and CSS grid together, but I think my favourite part is this description of how custom properties differ from the kind of variables you get from a preprocessor:

If you’re familiar with Javascript, I like to think of the difference between preprocessor variables and CSS Variables as similar to the difference between const and let - they both serve different purposes.

The Next Big Thing in Type

Over the course of a semester, students at UMPRUM Academy in Prague made variable fonts. I think Krabat might be my favourite.

Wakamai Fondue

A drag-and-drop tool for examining variable fonts (kind of like FontDrop but with more sliders to play with).

I didn’t get the name until I said it out loud.

What’s new in Microsoft Edge in the Windows 10 April 2018 Update - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog

Service workers, push notifications, and variable fonts are now shipping in Edge.

Upcoming changes to the CSS you need for variable fonts | Clagnut

Rich enumerates some changes in how you set up variable fonts. So if you’re pulling in a font that has weight as an axis, you can now add this to your @font-face rule:

font-weight: 1 999;

I’m already very excited about variable fonts—I’m going to be positively giddy by the time Ampersand rolls around (which, by the way, you should totally go to—it’s going to be sooo good!).

Tags: aria

85