Adactio: Links—Tagged with attributes

Inclusive Inputs « Texte | ovl – code & design

This is a great walkthough of making a common form pattern accessible. No complex code here: some HTML is all that’s needed.

What Does `playsinline` Mean in Web Video? | CSS-Tricks

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.

Why the GOV.UK Design System team changed the input type for numbers - Technology in government

Some solid research here. Turns out that using input type=”text” inputmode=”numeric” pattern="[0-9]*" is probably a better bet than using input type="number".

A Complete Guide to Links and Buttons | CSS-Tricks

Chris takes two side-by-side deep dives; one into the a element, the other into the button element.

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 formaction, formenctype, formmethod, formnovalidate, and formtarget?

ARIA labels | Amber’s Website

A great explanation of aria-label and aria-labelledby!

HTML attributes to improve your users’ two factor authentication experience - Twilio

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 rel values:

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 span, div, and section elements.

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.

An Introduction to ARIA States | a11y with Lindsey

A very useful explanation of the ARIA attributes relating to state:

aria-expanded,
hidden,
aria-hidden, and
aria-current.

Make Your ARIA Labels Sing on Key — Knowbility

A good look at the (over)use of the aria-label attribute that confirms the first rule of ARIA.

Accessibility: Start with the foundations | susan jean robertson

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.

Short note on progressive ARIA by The Paciello Group

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.

Know your ARIA: ‘Hidden’ vs ‘None’ | scottohara.me

When to use aria-hidden="true", and when you might need display: none:

aria-hidden by 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-hidden can be used to completely hide content from assistive technology, modifying an element’s role to “none” or “presentation” removes the semantics of the element, but does not hide the content from assistive technologies.

Link tags: attributes

16