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.
Léonie makes a really good point here: if you’re adding
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.
When to use
aria-hidden="true", and when you might need
aria-hiddenby itself is not enough to completely hide an element from all users, if that is the end goal.
When to use
aria-hiddencan be used to completely hide content from assistive technology, modifying an element’s
roleto “none” or “presentation” removes the semantics of the element, but does not hide the content from assistive technologies.
A really deep dive into the
lang attribute, and the
:lang() pseudo-class (hitherto unknown to me). This is all proving really useful for a little side project I’m working on.
The hits just keep on coming from the Filament Group. Here Scott shares a really clever technique for creating an image magnifier using the
sizes attribute of the
I love these kinds of deep dives into one seemingly simple pattern; in this case it’s a download link with the humble
Everything you ever wanted to know about the
title attribute in HTML.
What’s hot: using
What’s not: using
title on anything else.
Great advice for writing usable
alt attributes. This gem seems obvious in hindsight but I hadn’t considered it before:
End the alt-text with a period. This will make screen readers pause a bit after the last word in the alt-text, which creates a more pleasant reading experience for the user.
A useful primer on which combinations of attributes and values work best for which form fields:
A nice succinct description of the placeholder attribute, with an emphasis on accessibility.
This single issue is what's stopping me using the HTML 5 audio element on Huffduffer.
A guide to using ARIA roles from the mighty Steve Faulkner.
Useful markup statistics from Google, complete with snotty commentary.