An in-depth look at the current Shadow DOM spec. It’s well-written but I don’t think this will really click with me until I start playing around with it for myself.
It’s good to see that the examples have some thought given to fallback content.
There’s also a corresponding tutorial on custom elements
Yummy wallpapers for your desktop, tablet, and phone, from NASA and ESA.
I thoroughly enjoyed playing this game. On the face of it, it seems like little more than a cow-clicker, but the way that the plot and the gameplay unfolds is really delightful.
This feels like the kind of game that would only work on the web—keep it in a browser tab in the background, revisiting occasionally throughout the day.
Zoe asked a question on Twitter recently:
#a11y folks: Is it still best to put form field instruction/help text inside the <label>, or is aria-describedby sufficient nowadays?
— Zoe M. Gillenwater (@zomigi) August 18, 2016
‘Sfunny—I had been pondering this exact question. In fact, I threw a CodePen together a couple of weeks ago.
Visually, both examples look the same; there’s a label, then a form field, then some extra text (in this case, a validation message).
The first example puts the validation message in an em element inside the label text itself, so I know it won’t be missed by a screen reader—I think I first learned this technique from Derek many years ago.
<div class="first error example">
<label for="firstemail">Email
<em class="message">must include the @ symbol</em>
</label>
<input type="email" id="firstemail" placeholder="e.g. you@example.com">
</div>
The second example puts the validation message after the form field, but uses aria-describedby to explicitly associate that message with the form field—this means the message should be read after the form field.
<div class="second error example">
<label for="secondemail">Email</label>
<input type="email" id="secondemail" placeholder="e.g. you@example.com" aria-describedby="seconderror">
<em class="message" id="seconderror">must include the @ symbol</em>
</div>
In both cases, the validation message won’t be missed by screen readers, although there’s a slight difference in the order in which things get read out. In the first example we get:
And in the second example we get:
In this particular example, the ordering in the second example more closely matches the visual representation, although I’m not sure how much of a factor that should be in choosing between the options.
Anyway, I was wondering whether one of these two options is “better” or “worse” than the other. I suspect that there isn’t a hard and fast answer.
Two pieces of good news from Google:
I giggled at quite of few of these mashups.
The first in a series of articles looking at the history of British airships a century ago …just in time for the revival.