The title is somewhat misleading—currently it’s about native lazy-loading for Chrome, which is not (yet) the web.
I’ve just been adding loading="lazy" to most of the iframes and many of the images on adactio.com, and it’s working a treat …in Chrome.
A very useful explanation of the ARIA attributes relating to state:
aria-expanded,hidden,aria-hidden, andaria-current.The loading attribute for images and iframes is coming to Chrome. The best part:
You can also use
loadingas a progressive enhancement. Browsers that support the attribute can get the new lazy-loading behavior withloading=lazyand those that don’t will still have images load.
A good reminder from Chris—prompted by Scott O’Hara’s article—that the figcaption element and the alt attribute do different things. If you use an empty alt attribute on an img inside a figure, then your figcaption element is captioning nothing …and no, using the same text for both is not the solution.
A good look at the (over)use of the aria-label attribute that confirms the first rule of ARIA.
This is a great explanation of the difference between the [lang] and :lang CSS selectors. I wouldn’t even have thought’ve the differences so this is really valuable to me.
A terrific explanation of the aria-live attribute from Ire. If you’re doing anything with Ajax, this is vital knowledge.
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 aria attributes to indicate interactions you’re making available through JavaScript, then make sure you also use JavaScript to add those aria attributes.
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 display: none:
aria-hiddenby 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-hiddencan be used to completely hide content from assistive technology, modifying an element’sroleto “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 img element.
I love these kinds of deep dives into one seemingly simple pattern; in this case it’s a download link with the humble A element.
Everything you ever wanted to know about the title attribute in HTML.
What’s hot: using title on inputs, abbrs, and iframes.
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: type, autocomplete, autocorrect, and autocapitalize.
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.