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.
A very useful explanation of the ARIA attributes relating to state:
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
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.
I love these kinds of deep dives into one seemingly simple pattern; in this case it’s a download link with the humble
A useful primer on which combinations of attributes and values work best for which form fields:
A guide to using ARIA roles from the mighty Steve Faulkner.
Useful markup statistics from Google, complete with snotty commentary.