Tags: attribute
40
Tuesday, March 16th, 2021
Wednesday, November 11th, 2020
Not so short note on aria-label usage – Big Table Edition – HTML Accessibility
This is a very handy table of elements from Steve of where aria-label
can be applied.
Like, for example, not on a div
element.
Tuesday, November 10th, 2020
aria-live
I wrote a little something recently about using ARIA attributes as selectors in CSS. For me, one of the advantages is that because ARIA attributes are generally added via JavaScript, the corresponding CSS rules won’t kick in if something goes wrong with the JavaScript:
Generally, ARIA attributes—like
aria-hidden
—are added by JavaScript at runtime (rather than being hard-coded in the HTML).
But there’s one instance where I actually put the ARIA attribute directly in the HTML that gets sent from the server: aria-live
.
If you’re not familiar with it, aria-live
is extremely useful if you’ve got any dynamic updates on your page—via Ajax, for example. Let’s say you’ve got a bit of your site where filtered results will show up. Slap an aria-live
attribute on there with a value of “polite”:
<div aria-live="polite">
...dynamic content gets inserted here
</div>
You could instead provide a value of “assertive”, but you almost certainly don’t want to do that—it can be quite rude.
Anyway, on the face it, this looks like exactly the kind of ARIA attribute that should be added with JavaScript. After all, if there’s no JavaScript, there’ll be no dynamic updates.
But I picked up a handy lesson from Ire’s excellent post on using aria-live
:
Assistive technology will initially scan the document for instances of the aria-live attribute and keep track of elements that include it. This means that, if we want to notify users of a change within an element, we need to include the attribute in the original markup.
Good to know!
Tuesday, October 27th, 2020
ARIA in CSS
Sara tweeted something recently that resonated with me:
Also, Pro Tip: Using ARIA attributes as CSS hooks ensures your component will only look (and/or function) properly if said attributes are used in the HTML, which, in turn, ensures that they will always be added (otherwise, the component will obv. be broken)
Yes! I didn’t mention it when I wrote about accessible interactions but this is my preferred way of hooking up CSS and JavaScript interactions. Here’s old Codepen where you can see it in action:
[aria-hidden='true'] {
display: none;
}
In order for the functionality to work for everyone—screen reader users or not—I have to make sure that I’m toggling the value of aria-hidden
in my JavaScript.
There’s another advantage to this technique. Generally, ARIA attributes—like aria-hidden
—are added by JavaScript at runtime (rather than being hard-coded in the HTML). If something goes wrong with the JavaScript, the aria-hidden
value isn’t set to “true”, which means that the CSS never kicks in. So the default state is for content to be displayed. There’s no assumption that the JavaScript has to work in order for the CSS to make sense.
It’s almost as though accessibility and progressive enhancement are connected somehow…
Thursday, October 1st, 2020
AddyOsmani.com - Preload late-discovered Hero images faster
Did you know there’s an imagesrcset
attribute you can put on link rel="preload" as="image"
(along with an imagesizes
attribute)?
I didn’t. (Until Amber pointed this out.)
Tuesday, August 25th, 2020
The difference between aria-label and aria-labelledby - Tink - Léonie Watson
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).
Monday, August 17th, 2020
Netlify redirects and downloads
Making the Clearleft podcast is a lot of fun. Making the website for the Clearleft podcast was also fun.
Design wise, it’s a riff on the main Clearleft site in terms of typography and general layout. On the development side, it was an opportunity to try out an exciting tech stack. The workflow goes something like this:
- Open a text editor and type out HTML and CSS.
Comparing this to other workflows I’ve used in the past, this is definitely the most productive way of working. Some stats:
- Time spent setting up build tools: 00:00
- Time spent wrangling the pipeline to do exactly what you want: 00:00
- Time spent trying to get the damn build tools to work again when you return to the project after leaving it alone for more than a few months: 00:00:00
I have some files. Some images, three font files, a few pages of HTML, one RSS feed, one style sheet, and one minimal service worker script. I don’t need a web server to do anything more than serve up those files. No need for any dynamic server-side processing.
I guess this is JAMstack. Though, given that the J stands for JavaScript, the A stands for APIs, and I’m not using either, technically it’s Mstack.
Netlify suits my hosting needs nicely. It also provides the added benefit that, should I need to update my CSS, I don’t need to add a query string or anything to the link
elements in the HTML that point to the style sheet: Netlify does cache invalidation for you!
The mp3 files of the actual podcast episodes are stored on S3. I link to those mp3 files from enclosure
elements in the RSS feed, which is what makes it a podcast. I also point to the mp3 files from audio
elements on the individual episode pages—just above the transcript of each episode. Here’s the page for the most recent episode.
I also want people to be able to download the mp3 file directly if they want (or if they want to huffduff an episode). So I provide a link to the mp3 file with a good ol’-fashioned a
element with an href
attribute.
I throw in one more attribute on that link. The download
attribute tells the browser that the URL in the href
attribute should be downloaded instead of visited. If you give a value for the download
attribute, it will over-ride the file name:
<a href="/files/ugly-file-name.xyz" download="nice-file-name.xyz">download</a>
Or you can use it as a Boolean attribute without any value if you’re happy with the file name:
<a href="/files/nice-file-name.xyz" download>download</a>
There’s one catch though. The download
attribute only works for files on the same origin. That’s an issue for me. My site is podcast.clearleft.com
but my audio files are hosted on clearleft-audio.s3.amazonaws.com
—the download
attribute will be ignored and the mp3 files will play in the browser instead of downloading.
Trys pointed me to the solution. It turns out that Netlify can do some server-side processing. It can do redirects.
I added a file called _redirects
to the root of my project. It contains one line:
/download/* https://clearleft-audio.s3.amazonaws.com/podcast/:splat 200
That says that any URLs beginning with /download/
should redirect to clearleft-audio.s3.amazonaws.com/podcast/
. Everything after the closing slash is captured with that wild card asterisk. That’s then passed along to the redirect URL as :splat
. That’s a new one on me. I hadn’t come across that terminology, but as someone who can never remember the syntax of regular expressions, it works for me.
Oh, and the 200
at the end is the status code: okay.
Now I can use this /download/
path in my link:
<a href="/download/season01episode06.mp3" download>Download mp3</a>
Because this URL on the same origin, the download
attribute works just fine.
Friday, June 12th, 2020
HTML Tutorial for Beginners 101 (Including HTML5 Tags) - WebsiteSetup
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.
Modern fashionable development techniques, such as React, require a lot of JavaScript to be sent to the user. When it’s all downloaded, the user’s device must parse and execute the JavaScript before it can even start to construct the page. On a slow network, or on a cheaper, low-powered device, this can result in an excruciatingly slow load and is a heavy drain on the battery.
Wednesday, June 10th, 2020
Optimizing keyboard navigation using tabindex and ARIA — Sara Soueidan
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.
Friday, May 29th, 2020
A Guide to the Responsive Images Syntax in HTML | CSS-Tricks
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 srcset
and sizes
.
Monday, April 20th, 2020
Better Form Inputs for Better Mobile User Experiences | CSS-Tricks
Here’s one simple, practical way to make apps perform better on mobile devices: always configure HTML input fields with the correct
type
,inputmode
, andautocomplete
attributes. 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
autocomplete
options, 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!
Friday, April 3rd, 2020
Responsive Images the Simple Way - Cloud Four
A nice succint explanation of using the srcset
and sizes
attributes on the img
element—remember, you probably don’t need picture
and 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.
Monday, March 23rd, 2020
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.
Friday, March 20th, 2020
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.
Friday, February 28th, 2020
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"
.
Friday, February 14th, 2020
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
!
Saturday, January 25th, 2020
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!
Tuesday, October 29th, 2019
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 onspan
,div
, andsection
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.
Thursday, August 8th, 2019
Native lazy-loading for the web | web.dev
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.