Jeremy Keith

It all started with a trip into the countryside one Sunday a few weeks back.

The weather has been getting better and better. The countryside was calling. Meanwhile, Jessica was getting worried about her newly-acquired driving skills getting rusty. She has her license, but doesn’t get the chance to drive very often. She signed up to a car club that lets her book a hybrid car for a few hours at a time—just enough to keep in practice, and also just enough for a little jaunt into the countryside.

We went for Sunday lunch at the Shepherd and Dog in Fulking, near to Devil’s Dyke (I swear that sentence makes sense if you live ’round these parts). It was a lovely day. The Sunday roast was good. But it was on the way back that things started to go wrong.

We had noticed that one of the front tyres was looking a little flat so we planned to stop into a garage to get that seen to. We never made it that far. The tell-tale rhythmic sounds of rubber flapping around told us that we now had a completely flat tyre. Cue panic.

Fortunately we weren’t too far from a layby. We pulled in on the side of the busy road that runs by Saddlescombe Farm.

This is when the Kafkaesque portion of the day began. Jessica had to call the car club, but reception was spotty to put it mildly. There was much frustration, repitition, and hold music.

Eventually it was sorted out enough that we were told to wait for someone from the AA who’d come by and change the tyre in a few hours. To be fair, there are worse places to be stuck on a sunny Summer’s day. We locked the car and walked off across the rolling hills to pass the time.

The guy from the AA actually showed up earlier than expected. We hurried back and then sat and watched as he did his mechanical mending. We got the all-clear to drive the car back to Brighton, as long we didn’t exceed 50 miles per hour.

By the time we got home, we were beat. What a day! I could feel the beginnings of a headache so I popped some ibuprofin to stave it off. Neither of us could be bothered cooking, so we opted for a lazy evening in front of the telly eating takeaway.

I went onto Deliveroo and realised I couldn’t even manage the cognitive overhead of deciding what to eat. So I just went to my last order—a nice mix of Chinese food—and clicked on the option to place exactly the same order again.

And so we spent our Sunday evening munching on Singapore fried noodles and catching up on the most excellent Aussie comedy series, Colin From Accounts. It was just what I needed after an eventful day.

I had just finished my last bite when I felt I needed to cough. That kicked off some wheezing. That was a bit weird. So was the itchy sensation in my ears. Like, the insides of my ears were itchy. Come to think of it, my back was feeling really itchy too.

The wheeziness was getting worse. I had been trying to pass it off, responding to Jessica’s increasingly worried questions with “I’m grand, I’ll be f…” Sorry, had to cough. Trying to clear my throat. It feels a bit constricted.

When Jessica asked if she should call 111, I nodded. Talking took a bit of effort.

Jessica described my symptoms over the phone. Then the operator asked to speak to me. I answered the same questions, but in a much wheezier way.

An ambulance was on its way. But if the symptoms got worse, we should call 999.

The symptoms got worse. Jessica called 999. The ambulance arrived within minues.

The two paramedics, Alastair and Lucy, set to work diagnosing the problem. Let’s go into the ambulance, they said. They strapped a nebuliser onto my face which made breathing easier. It also made everything I said sound like a pronouncement from Bane.

They were pretty sure it was anaphylaxis. I’ve never been allergic to anything in my life, but clearly I was reacting to something. Was it something in the Chinese food? Something in the countryside?

In any case, they gave me a jab of antihistamine into my arm and took us to the emergency room.

By the time we got there, I was feeling much better. But they still needed to keep me under observation. So Jessica and I spent a few hours sitting in the hallway. Someone came by every now and then to check on me and offer us some very welcome cups of tea.

Once it was clear that I was fully recovered, I was discharged with a prescription for an EpiPen.

I picked up the prescription the next day. Having an EpiPen filled with adrenaline was reassuring but it was disconcerting not knowing what caused my anaphylactic reaction in the first place.

After that stressful weekend, life went back to normal, but with this cloud of uncertainty hovering above. Was that it? Would it happen again? Why did it happen?

The weather stayed nice all week. By the time the next weekend rolled around, I planned to spend it doing absolutely nothing. That was just as well, because when I woke up on Saturday morning, I had somehow managed to twist something in my shoulder. I guess I’m at that age now where I can injure myself in my sleep.

I took some neproxin, which helped. After a while, the pain was gone completely.

Jessica and I strolled to the park and had brunch in a nice local café. Then we strolled home and sat out in the garden, enjoying the sunshine.

I was sitting there reading my book when I noticed it. The insides of my ears. They were getting itchy. I swallowed nervously. Was it my imagination or did that swallowing sensation feel slightly constricted. And is that a wheeze I hear?

It was happening again.

The symptoms continued to get worse. Alright, it was time to use that EpiPen. I had read the instructions carefully so I knew just what to do. I did the EpiPen mambo: hold, jab, press.

It worked. We called 999 (as instructed) and were told to go the emergency room. This time we went by taxi.

I checked in, and then sat in the waiting room. I noticed that everyone else had white wristbands, but mine was red. I guess my place in the triage was high priority.

As I sat there, I could feel some of those symptoms returning, but very slowly. By the time we saw someone, there was no mistaking it. The symptoms were coming back.

I was hooked up to the usual instruments—blood pressure, heart rate, blood oxygen—while the hospital staff conferred about what to do. I was getting a bit clammy. I started to feel a bit out of it.

Beep, beep! One of those numbers—blood oxygen?—had gone below a safe threshold. I saw the staff go into action mode. Someone hit a button—the red light in the ceiling started flashing. Staff who had been dealing with other patients came to me.

Instructions were spoken clearly and efficiently, then repeated back with equal clarity and efficiency. “Adrenaline. One in ten thousand.” “Adrenaline. One in ten thousand.” They reclined my chair, elevated my legs, pulled down my trousers, and gave me my second shot in one day.

It worked. I started to feel much better straight away. But once again, I needed to be kept under observation. I was moved to the “recus” ward, passing through the corridor that was so familiar from the previous weekend.

This time we’d spend a grand total of twelve hours in the hospital. Once again, it was mercifully uneventful. But it gave us the opportunity to put two and two together. What was the common thread between both episodes?

Ibuprofin. Neproxin. They’re both non-steroidal anti-inflammatory drugs (NSAIDS). That fits

Foods are the most common trigger in children and young adults, while medications and insect bites and stings are more common in older adults. … Any medication may potentially trigger anaphylaxis. The most common are β-lactam antibiotics (such as penicillin) followed by aspirin and NSAIDs.

The doctors agreed—the connection looked pretty clear. I saw my GP a few days later and she’s reffered me to an allergy-testing clinic to confirm it. That might take a while though. In the meantime, I also got another prescription for more EpiPens.

Hopefully I won’t need them. I’m very, very glad that I don’t appear to be allergic to a foodstuff. I’d rather do without ibuprofin and aspirin than have to vigilantly monitor my diet.

But I do need to get into the habit of making sure I’ve got at least one EpiPen with me wherever I go. I’ll probably never need to use it. I feel like I’ve had enough anaphylaxis in the past couple of weeks to last me a lifetime.

Oh, and one more thing. I know everyone says this after dealing with some kind of health emergency in this country, but I’m going to say it anyway:

The NHS is easily the best thing ever invented in the UK. Everyone I dealt with was fantastic. It was all in a day’s work for them, but I am forever in their debt (whereas had this happened in, say, the USA, I would forever be in a much more literal debt).

Thank you, NHS!

It’s often said that it’s easier to make a fast website than it is to keep a website fast. Things slip through. If you’re not vigilant, performance can erode without you noticing.

It’s a similar story for other invisible but important facets of your website: privacy, security, accessibility. Because they’re hidden from view, you won’t be able to see if there’s a regression.

That’s why it’s a good idea to have regular audits for performance, privacy, security, and accessibility.

I wrote about accessibility testing a while back, and how there’s quite a bit that you can do for yourself before calling in an expert to look at the really gnarly stuff:

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.

I recently did an internal audit of the Clearleft website. After writing up the report, I also did a lunch’n’learn to share my methodology. I wanted to show that there’s some low-hanging fruit that pretty much anyone can catch.

To start with, there’s keyboard navigation. Put your mouse and trackpad to one side and use the tab key to navigate around.

Caveat: depending on what browser you’re using, you might need to update some preferences for keyboard navigation to work on links. If you’re using Safari, go to “Preferences”, then “Advanced”, and tick “Press Tab to highlight each item on a web page.”

Tab around and find out. You should see some nice chunky :focus-visible styles on links and form fields.

Here’s something else that anyone can do: zoom in. Increase the magnification to 200%. Everything should scale proportionally. How about 500%? You’ll probably see a mobile-friendly layout. That’s fine. As long as nothing is broken or overlapping, you’re good.

At this point, I reach for some tools. I’ve got some bookmarklets that do similar things: tota11y and ANDI. They both examine the source HTML and CSS to generate reports on structure, headings, images, forms, and so on.

These tools are really useful, but you need to be able to interpret the results. For example, a tool can tell you if an image has no alt text. But it can’t tell you if an image has good or bad alt text.

Likewise, these tools are great for catching colour-contrast issues. But there’s a big difference between a colour-contrast issue on the body copy compared to a colour-contrast issue on one unimportant page element.

I think that demonstrates the most important aspect of any audit: prioritisation.

Finding out that you have accessibility issues isn’t that useful if they’re all presented as an undifferentiated list. What you really need to know are which issues are the most important to fix.

By the way, I really like the way that the Gov.uk team prioritises accessibility concerns:

The team puts accessibility concerns in 2 categories:

1. Theoretical: A question or statement regarding the accessibility of an implementation within the Design System without evidence of real-world impact.
2. Evidenced: Sharing new research, data or evidence showing that an implementation within the Design System could cause barriers for disabled people.

The team will usually prioritise evidenced issues and queries over theoretical ones.

When I wrote up my audit for the Clearleft website, I structured it in order of priority. The most important things to fix are at the start of the audit. I also used a simple scale for classifying the severity of issues: low, medium, and high priority.

Thankfully there were no high-priority issues. There were a couple of medium-priority issues. There were plenty of low-priority issues. That’s okay. That’s a pretty good distribution.

If you’re interested, here’s the report I delivered…

Accessibility audit on clearleft.com

Colour contrast

There are a few issues with the pink colour. When it’s used on a grey background, or when it’s used as a background colour for white text, the colour contrast isn’t high enough.

The SVG arrow icon could be improved too.

Recommendations

Medium priority

• Change the pink colour universally to be darker. The custom property --red is currently rgb(234, 33, 90). Change it to rgb(210, 20, 73) (thanks, James!)

Low priority

• The SVG arrow icon currently uses currentColor. Consider hardcoding solid black (or a very, very dark grey) instead.

Images

Alt text is improving on the site. There’s reasonable alt text at the top level pages and the first screen’s worth of case studies and blog posts. I made a sweep through these pages a while back to improve the alt text but I haven’t done older blog posts and case studies.

Recommendations

Medium priority

• Make a sweep of older blog posts and case studies and fix alt text.

Low priority

• Images on the contact page have alt text that starts with “A photo of…” — this is redundant and can be removed.

Headings

The site is using headings sensibly. Sometimes the nesting of headings isn’t perfect, but this is a low priority issue. For example, on the contact page there’s an h1 followed by two h3s. In theory this isn’t correct. In practice (for screen reader users) it’s not an issue.

Recommendations

Low priority

• On the home page, “UX London 2023” should probably be h3 instead of h1.
• On the case studies index page we’re currently using h3 headings for the industry sector (“Charities”, “Education” etc.) but these should probably not be headings at all. On the blog index page we use a class “Tags” for a similar purpose. Consider reusing that pattern on the case studies index page.
• On the about index page, “We’re driven to be” is an h3 and the subsequent three headings are h2s. Ideally this would be reversed: a single h2 followed by three h3s.

Link text

Sometimes the same text is used for different links.

Recommendations

Low priority

• On the home page the text “Read the case study” is re-used for multiple links. It would be better if each link were different e.g. “Read about The Natural History Museum.”

Forms

The only form on the site is the newsletter sign-up form. It’s marked up pretty well: the input has an associated label, although a visible (clickable) label would be better.

Tabbing order

The site doesn’t use JavaScript to mess with tabbing order for keyboard users. The source order of elements in the markup generally makes sense so all is good.

The focus styles are nice and clear too!

Structure

The site is using HTML landmark elements sensibly (header, nav, main, footer, etc.).