This is a very handy table of elements from Steve of where
aria-label can be applied.
Like, for example, not on a
Did you know there’s an
imagesrcset attribute you can put on
link rel="preload" as="image" (along with an
I didn’t. (Until Amber pointed this out.)
A handy reminder from Léonie (though remember that the best solution is to avoid the problem in the first place—if you avoid using ARIA, do that).
A really great one-page guide to HTML from Bruce. I like his performance-focused intro:
If your site is based on good HTML, it will load fast. Browsers incrementally render HTML—that is, they will display a partially downloaded web page to the user while the browser awaits the remaining files from the server.
Smart thinking from Sara to improve usability for keyboard users by using
aria-hidden="true" tabindex="-1" to skip duplicate links:
A good rule of thumb for similar cases is that if you have multiple consecutive links to the same page, there is probably a chance to improve keyboard navigation by skipping some of those links to reduce the number of tab stops to one. The less tab stops, the better, as long as it does not worsen or compromise on other aspects of usability.
I’ve cautiously implemented this pattern now over on The Session where snippets of comments had both a title link and a “more” link going to the same destination.
Chris has put together one of his indispensable deep dives, this time into responsive images. I can see myself referring back to this when I need to be reminded of the syntax of
Here’s one simple, practical way to make apps perform better on mobile devices: always configure HTML input fields with the correct
autocompleteattributes. While these three attributes are often discussed in isolation, they make the most sense in the context of mobile user experience when you think of them as a team.
This is an excellent deep dive with great advice:
You may think that you are familiar with the basic
autocompleteoptions, such as those that help the user fill in credit card numbers or address form fields, but I’d urge you to review them to make sure that you are aware of all of the options. The spec lists over 50 values!
A nice succint explanation of using the
sizes attributes on the
img element—remember, you probably don’t need
source elements if your use case is swapping out different sized versions of the same image.
One caveat thought: you do need to know the dimensions of the images. If you’re dealing with unknown or user-generated photos, that can be an issue.
This is a great walkthough of making a common form pattern accessible. No complex code here: some HTML is all that’s needed.
I have to admit, I don’t think I even knew of the existence of the
playsinline attribute on the
video element. Here, Chris runs through all the attributes you can put in there.
Some solid research here. Turns out that using
input type=”text” inputmode=”numeric” pattern="[0-9]*" is probably a better bet than using
Chris takes two side-by-side deep dives; one into the
a element, the other into the
Even if you think you already know those elements well, I bet there’ll be something new here for you. Like, did you know that the
button element can have form over-riding attributes like
A great explanation of
The many ways of improving a single form field in HTML.
I love these kinds of deep dives into markup!
Official Google Webmaster Central Blog [EN]: More options to help websites preview their content on Google Search
Google’s pissing over HTML again, but for once, it’s not by making up
A new way to help limit which part of a page is eligible to be shown as a snippet is the “
data-nosnippet” HTML attribute on
This is a direct contradiction of how
data-* attributes are intended to be used:
…these attributes are intended for use by the site’s own scripts, and are not a generic extension mechanism for publicly-usable metadata.
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:
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 with
loading=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.