Beyond WCAG: Losing Spoons Online

A lady looks at a laptop screen, apparently overloaded by all the stimulation that the screen she's viewing is causing.

Have you heard of Christine Miserandino’s spoon theory?

Spoon theory is a metaphor in which one’s physical and mental capacity for each day is represented by a fixed number of spoons that gets replenished each day. Some people are given more spoons than others, and each time you need to expend mental or physical energy as part of your day, that removes one (or more than one) of your spoons. And once you reach zero spoons, that means that you’ve exhausted your mental and physical capacity for the day—and there’s no more that you can do.

A long-time acquaintance of mine, Luna Corbden, put it like this:

Every morning, most [neuro]typical people wake up with infinite spoons. They don’t even think of spoons as a resource because they almost never run out. They can easily choose to do this or that without risking much other than time consumption. Sure, they get tired by the end of a full day, but generally they have enough spoons to do all the normal things. It’s a gift they take for granted.

Those with chronic pain or serious illness or certain types of mental illness, like depression, only get twelve or twenty spoons a day. Each activity, even small things like getting dressed or making breakfast, takes a spoon. Careful choices must be made about how the spoons are spent; otherwise, they will be gone before the day is through. Or worse. A bad spoon-management choice might leave them without spoons for several days.

It’s worth noting that even neurotypical people don’t actually have unlimited spoons. But perceptively speaking, they have so many more spoons than neurodivergent folks—and it may take so many fewer of their spoons to accomplish the same tasks so as to seem that they have an almost unlimited number to many in the neurodivergent community. And if neurodivergent people have to push through their physical limitations (think: pulling an all-nighter before a big meeting), the consequences are often much more severe.

I’ve got a chronic illness, autoimmune disease, and chronic pain. And like Luna, I’m likely an aspie (someone on the autism spectrum) or something similar. I’ve got a few things working against my daily spoon allotment even on good days. So spoon management is pretty important to me. Maybe that’s why I find the internet and internet-connected devices so utterly frustrating, especially lately now that I review websites for a living. I’m an accessibility engineer. This means that I look at websites and web products and ask, “Is this accessible to people with disabilities?” Incorporating the needs of cognitively diverse people like Luna and me is new even to the digital accessibility world. Experts in the field are working hard right now to understand how cognitive disabilities fit in the digital accessibility effort. This is what they’ve got published so far: Making Content Usable for People with Cognitive and Learning Disabilities (w3.org). The next iteration of the Web Content Accessibility Guidelines (WCAG), 3.0, a.k.a. Silver, is likely to dive into this in depth in 2023. I’ve joined the Cognitive subgroup and I’m excited to see what we’re able to bring you.

In the meantime, though, I’d like to share some of the things online that drain my spoons to help you go beyond WCAG today. For the sake of this scenario, I’ll include how many spoons I can expect to lose when I encounter these blockers. Let’s say that I start my day with twenty spoons.

High-Contrast Content – 1 Spoon

This one is tough. Having content elements with enough contrast is a WCAG requirement and it’s important for low-vision users. But in a complex world, some things that can help one group can hurt another. So accessibility needs to be as much a conversation as a set of criteria and boxes to check. In this case, high-contrast content is a trigger for many people with overstimulation sensitivities, me included. As such, it increases the energy drain experienced when using a website or software product considerably.

This is a great case for making contrast-preference settings available at the OS and browser level and having those settings persist across all sites and products.

[The state of OS and browser accommodations today is] highly variable. Windows has deepest support for user-specified contrast preferences across the entire experience. Mac has some support. Browsers in both operating systems have extensions such as Midnight Lizard and Stylus that can override website visuals. Design not blocking is also highly variable. A lot of it depends on if you’re building with semantic markup and components that map back to OS APIs. [Internal] documentation is probably your best bet to be proactive about this.

Eric Bailey, inclusive design and accessibility advocate

For the product developers out there, this means ensuring that your code doesn’t block such settings or override them with your default colors, fonts, text sizes, and so on. For allies in general, continued polite pressure on browser and OS makers is encouraged.

Note: While high-contrast page content doesn’t consume as many spoons as some of the other items mentioned here, as more sites adhere to the WCAG recommendation (which is overall a very good thing), high-contrast content is becoming more common.

High-Alert Colors – 10 spoons

High-alert colors are those that are typically reserved for warnings and emergency notices. They’re usually bright reds, but they’re also occasionally an orange or yellow. These colors are very bright and extremely attention grabbing.

As a person living with chronic illness, interfacing with the medical community is a very regular activity for me. Recently I moved, and so I had to set about connecting with a new team of specialist doctors. I use the internet to see who is close, and I explore their webpages and ratings to choose who I will interview for fit. On one occasion, I found myself on the site of the only doctor with the specialty I was looking for within thirty minutes of my new apartment. Within thirty seconds of landing on the page, my anxiety began to spike. I pushed through, because this was the only doctor nearby. I just needed to get their contact information. The site was a chaotic experience for me, and sixty seconds in I began to have nerve pain. I found their phone number and hurriedly closed my laptop. I paused for a few minutes to assess the damage that sixty seconds on this website had caused. I was having nerve pain in my back, neck and arms. My heart was racing. My head felt buzzy and anxious, and I couldn’t quite think straight. I called the doctor and made the appointment. Over the next several hours my symptoms decreased slowly.

A few days later, I received an email asking me to fill out the new-patient paperwork on their online portal. Clicking the link, I was back to this horrible site. This time, I think I only made it thirty seconds before I gave up, closed my computer, and emailed the doctor’s office simply, “Because this site and portal are not accessible to people with disabilities, I will need to fill out any paperwork live on paper at the time of the appointment.” On a hunch, I had hit “Run Tests” in ARC Toolkit, an accessibility-testing tool, on my way out the door. In the two seconds before shutting the browser I caught the error totals. It was—let’s just say—not good, so I was confident in speaking to their accessibility in general in addition to my own experience.

Ok. Now I know what you’re thinking. What were the issues that set off such an extreme overstim response? Along with the site being generally oversaturated with content and having a poorly designed menu system, its standout trait for me was its color palette. They had chosen to build the entire site out of bright white, black, and that bright demanding red that’s typically reserved for emergency bulletins and serious warnings. Here are some examples of commonly used emergency reds. (I’ve had my editor who does not have this sensitivity add them, and place them behind a disclosure button so that you can look at them only if and for how long you choose. Seriously—they’re that bad. But for the purposes of this section, I want you to have the option of understanding exactly what I’m talking about.)

Example 1: A modified version of a TPGi page that uses a lot of ’emergency’ colors
A very garish adaptation of TPGi blog with lots of emergency colors used

It should be noted, we would not actually do this. Also: there are numerous color contrast violations here too.

Example 2: Examples of colors that cause Lē discomfort

Red

Orange

Yellow

I’m going to draw a hard line with this one for myself, for others like me, and frankly for everyone. There is a reason that colors like this are used for emergencies and warnings. They are aggressive. They grab your attention whether you want them to or not. They even have the power to interrupt your focus from more interesting things and to force you to redirect your attention to receive the warning. Branding colors like this are simply not an appropriate choice. I don’t care if you make stop signs or if your product is emergency-management software. Do not use these colors for website or web product branding. Use them instead for vital, life or death, and short emergency messaging. If you have an emergency message that’s long, use these colors only on a small area that directs the user to the full message. In addition to causing horrible experiences including panic attacks and physical pain for people like me, if these colors aren’t held in reserve for emergencies, they’ll lose their distinction and stop functioning as they’re intended for all audiences. If it’s not an emergency, instead try using autism-friendly colors to avoid triggering overstim in users.

Content Clutter or High-Density Content – 3 spoons

Have you ever tried to focus on work in a messy room? For many people this is an obstacle. For people with cognitive disabilities, it can be a nonstarter. I work from home, and if the space I’m in isn’t organized and clean, that context bleeds into the way my mind works. It too becomes cluttered, and focusing takes more strain and time. The same is true online. If your site isn’t well organized, or if it’s overly packed with content and there isn’t much white space to create separation between items, I’m not sticking around because I know that anything that I do here will be inefficient at best.

Unless it’s absolutely necessary, avoid complex menus with submenus nested inside other submenus. Designers should take care to include plenty of white space to visually separate sections of content clearly. This helps to prevent your content from vying for my attention all at once.

Flashing, Blinking, and Moving Content – 6 spoons

WCAG addresses flashing, blinking and moving content. This has such coverage because that kind of content can be harmful to several groups, and it can even induce seizures. For me, I can generally manage a little bit of motion, though being able to turn it off is helpful. But when flashing, blinking and motion are combined, I can’t meaningfully interact with the page or product at all.

In late December, I was assigned an accessibility audit for an ecommerce site. Within five seconds of arriving on the home page, a popup floated from the bottom of the page to the center. Within that popup was a blinking, flashing, spinning animation. The effect on my nervous system was so immediate and so severe that my mind fogged over, and it took me several seconds longer than it should have to figure out how to close the popup and make the visual noise stop. Below the popup were more moving elements, all at different tempos and locations on the screen.

The metaphor of sound is a useful one here. Imagine that you’re in a quiet, peaceful field. The only sound is your own breath and a distant chattering of small birds. Stay with that sensation for a moment—let the peace sink in. Now, quite without warning you’re transported to Times Square in the middle of the Macy’s Thanksgiving Day Parade! There’s a marching band all around you, and a horn player is blasting their instrument directly into your right ear, while on your left an eager drummer bangs away on her snare. People are shouting, horns are honking, you are stuck, and your ears feel like you’ve pressed your face against the speaker at a black metal concert and told the sound-board operator to “turn it up to eleven” This is kind of how it feels for me to be suddenly and unexpectedly bombarded with flashing, blinking, and moving content online.

In the case of that accessibility audit, I was unable to work on that account and asked to be removed. There was plenty more work to do elsewhere, so I was just fine. But I did send a note to the client. They are trying to sell a product after all, and here I was, a potential customer perhaps, unable to use their site at all. My guess was that that probably wasn’t the outcome they were hoping for.

Conclusion

As you can see, running across a multitude of sites that use features like these without at least some way to consent to them could leave me with zero spoons or even a spoon deficit—stealing spoons from the next day or from the day after that. This is no fun at all, and it also leaves me little to no spoons to be able to get the things done so that I can maintain my quality of life, hold down a job, care for my family, take care of myself, take care of those around me, and to contribute to my community.

If you must use these features, use them sparingly. Try offering “Off” buttons and “Pause” switches, let users opt into interactions rather than starting them automatically, offer alternate color palettes, and follow WCAG standards for motion and flashing content. And most importantly, include people who are neurodivergent as well as people of other disability and diversity demographics in your user research and testing.

Years ago, before I understood any of this, I’d try to push through—to force my body to do things that it didn’t have the capacity to do. I was stuck in a pattern of boom and bust, building up spoon debt and then crashing, forced to take the time to pay back the spoons that I had borrowed. It’s taken a lot of time and education to understand my body and mind well enough to start managing my spoons better, and I’m proud to say that I’ve come a long way. I’ve done and continue to do my part, just like so many others like me.

Now it’s your turn. According to the social model of disability:

The social model [views that] ‘disability’ is the result of the interaction between people living with impairments and an environment filled with physical, attitudinal, communication and social barriers. It therefore carries the implication that the physical, attitudinal, communication and social environment must change to enable people living with impairments to participate in society on an equal basis with others.

If we work together, we can remove some of the barriers that people with cognitive disabilities experience online, and in doing so, we can also increase basic quality of living, leaving more spoons each day—more energy to be your best friend, your favorite aunt, your amazing dad, or your super cool boss. We have a lot to offer, online and off.

Go beyond WCAG and remember neurodiverse people in your next project!

Do you lose spoons online? Please share your experiences in the comments.

Categories: Development
Tags: ,

About Lē McNamara

Lē, pronounced “Lee”, (they/them) brings a diverse background and skillset to the a11y space as an accessibility engineer at TPGi. Lē discovered their passion for accessibility in 2019 after a career transition from public relations and community work to software engineering in 2018. They’re passionate about accessibility for the neurodivergent (ND) and identify as a member of the ND community. Lē is also a member of the W3C Cognitive and Learning Disabilities Accessibility Task Force and the acting executive director of My Homestead Heroes.

Comments

Seirdy says:

I meet both both WCAG AAA and Advanced Perceptual Contrast Algorithm contrast thresholds. Against dark backgrounds, blue and purple have poor perceptual contrast; they need to be lightened until they’re almost white.

I used to think yellow worked for dark themes since it didn’t have to be so pale to have good perceptual contrast. Now I see that it’s too harsh unless I lighten it the same way I would for blue.

I softened my yellows accordingly. Pink beats red, and white-yellow beats #f00.

WCAG 2 is actually low contrast, and resulted in a lowering of contrast relative to sites that predated WCAG 2. This is bad for readability, bad for perception, and bad in terms of creating misunderstandings of what is and is not needed for perception and readability.

Relative to cognitive, WCAG 2 does nothing to prevent excess brightness and highly saturated bright colors. A full-white page at #fff is much too bright to be the background for body text and most readable content, for instance.

To continue briefly, all of this is a matter of current, active research. The Visual Contrast project for WCAG 3 resulted in the APCA, but that work is expanding into areas beyond readability contrast, though it is not clear how much of that will be incorporated into WCAG 3.

Nikki says:

I find it difficult when websites have scrolling pictures/stories in which you have arrows to the left or right to get to the next story. I have ADHD and poor working memory, so when an important story is relayed that way and I have to remember where it was on the page to show somebody else, I am not likely to remember how to get back there if I have to remember to click through to get to the next story or wait for it to scroll to that story on its own.

Add Your Comment