Tags: cc

668

sparkline

Tuesday, January 4th, 2022

The UI fund

This is an excellent initiate spearheaded by Nicole and Sarah at Google! They want to fund research into important web UI work: accessibility, form controls, layout, and so on. If that sounds like something you’ve always wanted to do, but lacked the means, fill in the form.

Monday, January 3rd, 2022

2021

2020 was the year of the virus. 2021 was the year of the vaccine …and the virus, obviously, but still it felt like the year we fought back. With science!

Whenever someone writes and shares one of these year-end retrospectives the result is, by its very nature, personal. These last two years are different though. We all still have our own personal perspectives, but we also all share a collective experience of The Ongoing Situation.

Like, I can point to three pivotal events in 2021 and I bet you could point to the same three for you:

  1. getting my first vaccine shot in March,
  2. getting my second vaccine shot in June, and
  3. getting my booster shot in December.

So while on the one hand we’re entering 2022 in a depressingly similar way to how we entered 2021 with COVID-19 running rampant, on the other hand, the odds have changed. We can calculate risk. We’ve got more information. And most of all, we’ve got these fantastic vaccines.

I summed up last year in terms of all the things I didn’t do. I could do the same for 2021, but there’s only one important thing that didn’t happen—I didn’t catch a novel coronavirus.

It’s not like I didn’t take some risks. While I was mostly a homebody, I did make excursions to Zürich and Lisbon. One long weekend in London was particurly risky.

At the end of the year, right as The Omicron Variant was ramping up, Jessica and I travelled to Ireland to see my mother, and then travelled to the States to see her family. We managed to dodge the Covid bullets both times, for which I am extremely grateful. My greatest fear throughout The Situation hasn’t been so much about catching Covid myself, but passing it on to others. If I were to give it to a family member or someone more vulnerable than me, I don’t think I could forgive myself.

Now that we’ve seen our families (after a two-year break!), I’m feeling more sanguine about this next stage. I’ll be hunkering down for the next while to ride out this wave, but if I still end up getting infected, at least I won’t have any travel plans to cancel.

But this is meant to be a look back at the year that’s just finished, not a battle plan for 2022.

There were some milestones in 2021:

  1. I turned 50,
  2. TheSession.org turned 20, and
  3. Adactio.com also turned 20.

This means that my websites are 2/5ths of my own age. In ten years time, my websites will be 1/2 of my own age.

Most of my work activities were necessarily online, though I did manage the aforementioned trips to Switzerland and Portugal to speak at honest-to-goodness real live in-person events. The major projects were:

  1. Publishing season two of the Clearleft podcast in February,
  2. Speaking at An Event Apart Online in April,
  3. Hosting UX Fest in June,
  4. Publishing season three of the Clearleft podcast in September, and
  5. Writing a course on responsive design in November.

Outside of work, my highlights of 2021 mostly involved getting to play music with other people—something that didn’t happen much in 2020. Band practice with Salter Cane resumed in late 2021, as did some Irish music sessions. Both are now under an Omicron hiatus but this too shall pass.

Another 2021 highlight was a visit by Tantek in the summer. He was willing to undergo quarantine to get to Brighton, which I really appreciate. It was lovely hanging out with him, even if all our social activities were by necessity outdoors.

But, like I said, the main achievement in 2021 was not catching COVID-19, and more importantly, not passing it on to anyone else. Time will tell whether or not that winning streak will be sustainable in 2022. But at least I feel somewhat prepared for it now, thanks to those magnificent vaccines.

2021 was a shitty year for a lot of people. I feel fortunate that for me, it was merely uneventful. If my only complaint is that I didn’t get to travel and speak as much I’d like, well boo-fucking-hoo, I’ll take it. I’ve got my health. My family members have their health. I don’t take that for granted.

Maybe 2022 will turn out to be similar—shitty for a lot of people, and mostly unenventful for me. Or perhaps 2022 will be a year filled with joyful in-person activities, like conferences and musical gatherings. Either way, I’m ready.

Thursday, December 23rd, 2021

Even more writing on web.dev

The final five are here! The course on responsive design I wrote for web.dev is now complete, just in time for Christmas. The five new modules are:

  1. Accessibility
  2. Interaction
  3. User interface patterns
  4. Media features
  5. Screen configurations

These five felt quite “big picture”, and often quite future-facing. I certainly learned a lot researching proposals for potential media features and foldable screens. That felt like a fitting way to close out the course, bookending it nicely with the history of responsive design in the introduction.

And with that, the full course is now online. Go forth and learn responsive design!

Friday, December 10th, 2021

Test Your Product on a Crappy Laptop - CSS-Tricks

Eric’s response to Chris’s question—“What is one thing people can do to make their website better?”—dovetails nicely with my own answer:

The two real problems here are:

  1. Third-party assets, such as the very analytics and CRM packages you use to determine who is using your product and how they go about it. There’s no real control over the quality or amount of code they add to your site, and setting up the logic to block them loading their own third-party resources is difficult to do.
  2. The people who tell you to add these third-party assets. These people typically aren’t aware of the performance issues caused by the ask, or don’t care because it’s not part of the results they’re judged by.

Thursday, December 9th, 2021

Ain’t no party like a third party

This was originally published on CSS Tricks in December 2021 as part of a year-end round-up of responses to the question “What is one thing people can do to make their website bettter?”

I’d like to tell you something not to do to make your website better. Don’t add any third-party scripts to your site.

That may sound extreme, but at one time it would’ve been common sense. On today’s modern web it sounds like advice from a tinfoil-hat wearing conspiracy nut. But just because I’m paranoid doesn’t mean they’re not out to get your user’s data.

All I’m asking is that we treat third-party scripts like third-party cookies. They were a mistake.

Browsers are now beginning to block third-party cookies. Chrome is dragging its heels because the same company that makes the browser also runs an advertising business. But even they can’t resist the tide. Third-party cookies are used almost exclusively for tracking. That was never the plan.

In the beginning, there was no state on the web. A client requested a resource from a server. The server responded. Then they both promptly forgot about it. That made it hard to build shopping carts or log-ins. That’s why we got cookies.

In hindsight, cookies should’ve been limited to a same-origin policy from day one. That would’ve solved the problems of authentication and commerce without opening up a huge security hole that has been exploited to track people as they moved from one website to another. The web went from having no state to having too much.

Now that vulnerability is finally being closed. But only for cookies. I would love it if third-party JavaScript got the same treatment.

When you add any third-party file to your website—an image, a style sheet, a font—it’s a potential vector for tracking. But third-party JavaScript files go one further. They can execute arbitrary code.

Just take a minute to consider the implications of that: any third-party script on your site is allowing someone else to execute code on your web pages. That’s astonishingly unsafe.

It gets better. One of the pieces of code that this invited intruder can execute is the ability to pull in other third-party scripts.

You might think there’s no harm in adding that one little analytics script. Or that one little Google Tag Manager snippet. It’s such a small piece of code, after all. But in doing that, you’ve handed over your keys to a stranger. And now they’re welcoming in all their shady acquaintances.

Request Map Generator is a great tool for visualizing the resources being loaded on any web page. Try pasting in the URL of an interesting article from a news outlet or magazine that someone sent you recently. Then marvel at the sheer size and number of third-party scripts that sneak in via one tiny script element on the original page.

That’s why I recommend that the one thing people can do to make their website better is to not add third-party scripts.

Easier said than done, right? Especially if you’re working on a site that currently relies on third-party tracking for its business model. But that exploitative business model won’t change unless people like us are willing to engage in a campaign of passive resistance.

I know, I know. If you refuse to add that third-party script, your boss will probably say, “Fine, I’ll get someone else to do it. Also, you’re fired.”

This tactic will only work if everyone agrees to do what’s right. We need to have one another’s backs. We need to support one another. The way people support one another in the workplace is through a union.

So I think I’d like to change my answer to the question that’s been posed.

The one thing people can do to make their website better is to unionize.

Wednesday, December 1st, 2021

Best laid plans by Amy Hupe, content designer.

All of Amy’s writing recently has been absolutely wonderful, some of the best I’ve read in a long while, but I particularly needed this one.

I don’t know where we go from here, with this latest pandemic setback, but I do know that things will keep moving.

And if you feel bad today, feel bad. Feel sad or angry or scared or whatever it is you need to feel. Give yourself to yourself as you are.

Things will keep changing. Life will keep unfolding. We will keep going.

Tuesday, November 30th, 2021

Speakers | State of the Browser 2021

All the talks from this year’s State Of The Browser event are online, and they’re all worth watching.

I laughed out loud at multiple points during Heydon’s talk.

Monday, November 15th, 2021

Checked in at Fox On the Downs. Session 🎶☘️🎻 — with Jessica map

Checked in at Fox On the Downs. Session 🎶☘️🎻 — with Jessica

Tuesday, November 2nd, 2021

HmntyCntrd | Critical UX Event

This looks like an excellent (and very reasonably-priced) online event happening on November 12th with three panels:

  1. beyond accessibility,
  2. failure of diversity, and
  3. design as resistance!

Saturday, October 23rd, 2021

Checked in at Clayton Crown Hotel. Matt Molloy and Sean Keane 🎶 — with Jessica map

Checked in at Clayton Crown Hotel. Matt Molloy and Sean Keane 🎶 — with Jessica

Wednesday, October 20th, 2021

The Button Cheat Sheet

Do you need a button for your next project but you’re not sure about the right markup? Don’t worry, The Button Cheat Sheet™️ has got you covered.

Spoiler alert: it’s the button element.

Thursday, October 7th, 2021

Have Single-Page Apps Ruined the Web? | Transitional Apps with Rich Harris, NYTimes - YouTube

This is a terrific and nuanced talk that packs a lot into less than twenty minutes.

I heartily concur with Rich’s assessment that most websites aren’t apps or documents but something in between. It’s a continuum. And I really like Rich’s proposed approach: transitional web apps.

(The secret sauce in transitional web apps is progressive enhancement.)

Have Single-Page Apps Ruined the Web? | Transitional Apps with Rich Harris, NYTimes

Saturday, October 2nd, 2021

Wayforward Machine • Visit the future of the internet

This speculative version of the internet archive invites you to see how websites will look in 2046.

Thursday, September 23rd, 2021

Checked in at Sadler's Wells. Opening night of Akram Khan’s Creature! — with Jessica map

Checked in at Sadler’s Wells. Opening night of Akram Khan’s Creature! — with Jessica

Monday, September 20th, 2021

In Quest of Search

On the surface this is about the pros and cons of minting a new HTML search element to replace div role="search" but there’s a deeper point which is that, while ARIA exists to the plug the gaps in HTML, the long-term goal is to have no gaps.

ARIA is not meant to replace HTML. If anything, the need to use ARIA as ‘polyfill’ for HTML semantics could be considered as a sign and a constant reminder of the fact that HTML falls short on some semantics that benefit users of assistive technologies.

Thursday, September 16th, 2021

Notes on synthetic speech - Tink - Léonie Watson

This is a fascinating deep dive by Léonie on the inner workings of speech synthesis. She has quite a conundrum: she wants fast playback, but she also wants a voice that doesn’t sound robotic. Unfortunately it’s the robotic-sounding voices that work best at speed.

If you’re interested in this topic, I highly recommend listening to (or reading) the accessibility episode of the Clearleft podcast which featured Léonie as a guest giving demos and explanations.

Tuesday, September 14th, 2021

Accessibility testing

I was doing some accessibility work with a client a little while back. It was mostly giving their site the once-over, highlighting any issues that we could then discuss. It was an audit of sorts.

While I was doing this I started to realise that not all accessibility issues are created equal. I don’t just mean in their severity. I mean that some issues can—and should—be caught early on, while other issues can only be found later.

Take colour contrast. This is something that should be checked before a line of code is written. When designs are being sketched out and then refined in a graphical editor like Figma, that’s the time to check the ratio between background and foreground colours to make sure there’s enough contrast between them. You can catch this kind of thing later on, but by then it’s likely to come with a higher cost—you might have to literally go back to the drawing board. It’s better to find the issue when you’re at the drawing board the first time.

Then there’s the HTML. Most accessibility issues here can be caught before the site goes live. Usually they’re issues of ommission: form fields that don’t have an explicitly associated label element (using the for and id attributes); images that don’t have alt text; pages that don’t have sensible heading levels or landmark regions like main and nav. None of these are particularly onerous to fix and they come with the biggest bang for your buck. If you’ve got sensible forms, sensible headings, alt text on images, and a solid document structure, you’ve already covered the vast majority of accessibility issues with very little overhead. Some of these checks can also be automated: alt text for images; labels for inputs.

Then there’s interactive stuff. If you only use native HTML elements you’re probably in the clear, but chances are you’ve got some bespoke interactivity on your site: a carousel; a mega dropdown for navigation; a tabbed interface. HTML doesn’t give you any of those out of the box so you’d need to make your own using a combination of HTML, CSS, JavaScript and ARIA. There’s plenty of testing you can do before launching—I always ask myself “What would Heydon do?”—but these components really benefit from being tested by real screen reader users.

So if you commission an accessibility audit, you should hope to get feedback that’s mostly in that third category—interactive widgets.

If you get feedback on document structure and other semantic issues with the HTML, you should fix those issues, sure, but you should also see what you can do to stop those issues going live again in the future. Perhaps you can add some steps in the build process. Or maybe it’s more about making sure the devs are aware of these low-hanging fruit. Or perhaps there’s a framework or content management system that’s stopping you from improving your HTML. Then you need to execute a plan for ditching that software.

If you get feedback about colour contrast issues, just fixing the immediate problem isn’t going to address the underlying issue. There’s a process problem, or perhaps a communication issue. In that case, don’t look for a technical solution. A design system, for example, will not magically fix a workflow issue or route around the problem of designers and developers not talking to each other.

When you commission an accessibility audit, you want to make sure you’re getting the most out of it. Don’t squander it on issues that you can catch and fix yourself. Make sure that the bulk of the audit is being spent on the specific issues that are unique to your site.

Thursday, September 9th, 2021

Accent all areas

Whenever a new version of Chrome comes out, there’s an accompanying blog post listing what’s new. Chrome 93 just came out and, sure enough, Pete has written a blog post about it.

But what I think is the most exciting addition to the browser isn’t listed.

What is this feature that’s got me so excited?

Okay, I’ve probably oversold it now because actually, it looks like a rather small trivial addition. It’s the accent-color property in CSS.

Up until now, accent colour was controlled by the operating system. If you’re on a Mac, go to “System Preferences” and then “General”. There you’ll see an option to change your accent colour. Try picking a different colour. You’ll see that change cascade down into the other form fields in that preference pane: checkboxes, radio buttons, and dropdowns.

Your choice will also cascade down into web pages. Any web page that uses native checkboxes, radio buttons and other interface elements will inherit that colour.

This is how interface elements are supposed to work. The browser inherits the look’n’feel of the inputs from the operating system.

That’s the theory anyway. In practice, form elements—such as dropdowns—can look different from browser to browser, something that shouldn’t be happening if the browsers are all inheriting from the operating system.

Anyway, it’s probably this supposed separation of responsibility between browser and operating system which has led to the current situation with form fields and CSS. Authors can style form fields up to a point, but there’s always a line that you don’t get to cross.

The accent colour of a selected radio button or a checkbox has historically been on the other side of that line. You either had to accept that you couldn’t change the colour, or you had to make your own checkbox or radio button interface. You could use CSS to hide the native element and replace it with an image instead.

That feels a bit over-engineered and frankly kind of hacky. It reminds me of the bad old days of image replacement for text before we had web fonts.

Now, with the accent-color property in CSS, authors can over-ride the choice that the user has set at the operating system level.

On the one hand, this doesn’t feel great to me. Who are we to make that decision? Shouldn’t the user’s choice take primacy over our choices?

But then again, where do we draw the line? We’re allowed over-ride link colours. We’re allowed over-ride font choices.

Ultimately I think it’s a good thing that authors can now specify an accent colour. What makes me think that is the behaviour that authors have shown if they don’t have this ability—they do it anyway, and in a hackier manner. This is why I think the work of the Open UI group is so important. If developers don’t get a standardised way to customise native form controls, they’ll just recreate their own over-engineered versions.

The purpose of Open UI to the web platform is to allow web developers to style and extend built-in web UI controls, such as select dropdowns, checkboxes, radio buttons, and date/color pickers.

Trying to stop developers from styling checkboxes and radio buttons is like trying to stop teenagers from having sex. You might as well accept that it’s going to happen and give them contraception so they can at least do it safely.

So I welcome this new CSS condom.

You can see accent-color in action in this demo. Change the value of the accent-color property to see the form fields update:

:root {
  accent-color: rebeccapurple;
}

Applying it at the document level like that will make it universal, but you can also use the property on an element-by-element basis using whatever selector you want.

That demo works in Chrome and Edge 93, the current release. It also works in Firefox 92, which literally just landed (like as I was writing this blog post, support for accent-color magically arrived!).

As for Safari, well, who knows? If Apple published a roadmap, then developers would have a clue when to expect a property like this to land. But we mere mortals cannot be trusted with such important hush-hush information.

In the meantime, keep an eye on Can I Use. And lack of support on one browser is no reason not to use accent-color anyway. It’s a progressive enhancement. Add it to your CSS today and it will work in more browsers in the future.

Monday, September 6th, 2021

Schedule / Inclusive Design 24 (#id24) 23 September 2021

The annual day-long online accessibility event is back on September 23rd.

No sign-up. No registration. All sessions are streamed live and publicly on the Inclusive Design 24 YouTube channel.

Thursday, August 19th, 2021

Sentence Forms (not Mad Libs) | Adrian Roselli

Apparently the sentence forms that I kicked off with Huffduffer are making a comeback.