Published by

Color contrast tools to check against APCA

EL introduced me to contrast.tools recently, it uses the Advanced Perception of Color Algorithm (APCA) to check the accessibility of your text based on the desired colors and the font weight + size. But importantly, it also provides a lookup table to verify how you should (possibly, probably) interpret things.

I think that APCA is being floated as the new contrast algorithm for WCAG 3.0? But I’d need to look in to it more to be sure. Apparently APCA Readability Criterion (ARC) might be a new standard for visual contrast.

Side note: I kind of wish we could get away from acronyms-within-acronyms-within-acronyms in the accessibility standards world…

Published by

“Kill your personas”

Counterpoint to yesterday’s post: “Kill your personas: How persona spectrums champion real user needs” by Margaret Price at Microsoft.

A persona spectrum is not a fake person. It’s an articulation of a specific human motivation and the ways it’s shared across multiple groups. It shows how that motivation can change depending on context. Sometimes, a trait can be permanent, like someone who has been blind since birth. A person recovering from eye surgery might temporarily have limited or no vision. Another person might face this barrier in certain environments, like when dealing with screen glare out in the sun. How would your product adapt to this range of people and circumstances with similar needs?

I can get behind that!

Related, check out Microsoft’s Inclusive Design Toolkit. (Though I reeeeeally wish that were a webpage…)

Via Doug Belshaw’s “Temporarily Abled” article on Thought Shrapnel.

Published by

GDS’s Accessibility Personas

If you’re a designer or engineer and have never dug in to accessibility personas or cognitive walkthroughs before, I’d recommend checking out GDS’s accessibility persona homepages and their accompanying blog post about how they use persona profiles to test accessibility. As of right now, their profiles include the following personas:

  • Claudia – a sight impaired screen magnifier user
  • Ashleigh – a severely sight impaired screenreader user
  • Ron – an older user with multiple conditions
  • Chris – a user with rheumatoid arthritis
  • Pawel – an autistic user
  • Simone – a dyslexic user
  • Saleem – a profoundly deaf user

It’s no substitute for testing with real users, but it’s a big step in the right direction if it’s not already a part of your design and engineering process.

Published by

Why can’t you show AM/PM time on an iPhone?

So apparently you can’t set your iPhone to show AM and PM alongside the 12-hour time. This may not seem like a big deal, but I think it’s a pretty significant accessibility issue.

My grandpa is 100 years old, we just celebrated his birthday in March. He’s doing pretty darn well for his age. The only thing he’s having trouble with is short-term memory. This usually isn’t a big enough problem to cause any major concern at the moment. Although he lives on his own, it’s in an apartment that is equipped for his needs within an assisted living building, and my parents aren’t too far from him.

The thing that is causing problems, pretty major problems, is when he takes a nap and then wakes up and thinks it’s the wrong time of day. This causes him to miss meals because he doesn’t go down to the dining room in time. And when older folks start to regularly miss meals, they get pretty weak pretty fast.

He doesn’t want to cause a fuss, so we don’t know exactly how often this happens. I imagine with other folks, it also might be a bit embarrassing (maybe it is for him as well, I’m not sure). He naps a lot, which is fair enough considering his age, so I suspect it might be more often than we think.

I was talking about this with my mom, asking him if he has a big digital clock in his apartment or something. He does have a clock, but he usually looks at his watch or his phone for the time. I don’t want to suggest that he wear a digital watch, because his watch came from my grandma. So we were looking at our phones, and she pointed out that there’s no AM/PM.

There’s no way of changing it! That seems ludicrous.

I know he could change it to 24-hr time. But I doubt he would do that, because he would probably convince himself that it’s fine and he doesn’t need it. It would be a heck of a lot easier if you could just show AM/PM via the iOS Date & Time settings, as one would expect.

If any Apple folks happen to read this, I’d love if you could take this feedback onboard in some way. Or if you happen to know anyone at Apple, I’d really appreciate if you shared this with them.

In the meantime… I guess we get him a bigger digital clock for his apartment? I’m really not sure.

Published by

The serial (“Oxford”) comma and screen readers

People think that serial / “Oxford” commas should be an optional style thing. But if you’re writing for the web, please use it.

Here’s an example of a sentence without a serial comma:

Please bring Jack, your brother and your uncle to the party

And an example of a sentence with a serial comma:

Please bring Jack, your brother, and your uncle to the party

First point: the second sentence makes it much clearer that Jack isn’t some questionable relative and that you’re meant to bring three people to the party.

Second point, and more the point of this post: the sentence with the serial comma is much more intelligibly read by screen readers, particularly when content is being read quickly.

Use the serial comma!

Published by

Memory dump

Life has felt kind of hard recently. Water running through my hands. So many things backed up in my “Blog stuff” folder in Notes, things I didn’t want to forget but wasn’t able to sit down and put in a post. Here’s a bunch so they don’t languish there forever. Oldest to newest.

Image of color gradient from white in lower left corner, through light blue to navy, with a tiny bit of pink in the upper right corner

I want to make a “Uses” page, but not just software/hardware. Skincare, furniture, kitchen tools, etc.

To read: Werner Herzog’s new book, The Twilight World. Or books? I don’t think the other one from lockdown is out yet. See this New Yorker interview. Via RS.

People talk about finding joy in the way your kid looks at the world. I really didn’t understand how moving that could be until recently. Hilarious, pure, and sometimes a little melancholic.

B was being funny about dinner because of a long day, so we just gave him a huge block of cheese to go ham. He couldn’t believe it. Imagine being handed a whole forearm-sized block of the best thing you’ve ever tasted in your short life.

He’d never seen anything like it, and I’ve never seen someone eyes go like that.

Generally more interested in the process than the outcome. In my work and others’. See CBToF (again), also the guy that’s piloting a tiny speedboat around Britain at his own pace. Boat guy via SB.

People in the US seem individualist to a fault.

A generalization, and obviously that individualism has certain upsides as well—don’t get me started on the way that UK schools force you to choose subjects so young—but I see the negative effects every day.

Was talking to DB, she mentioned how in the UK, there is a natural flow to walking. For example, getting between platforms on the tube. In NYC, it’s an absolute free for all.

Woman on the stairs at Broadway and Lafayette, walking up the left hand side of the stairs not holding on to the handrail when the person walking down, their right, clearly needs the handrail. “You see me fuckin comin, right?!” Wild.

[And do not tell me this is just a thing in US cities. I’ve seen it in suburban Tennessee, the middle of Ohio, all over the place. It just comes in different guises. An able-bodied person parking in a handicap spot in a packed Walmart parking lot, believing that Andrew Wakefield’s vaccine bullshit is more important than your children’s friends’ health, asserting that your right to any gun that could possibly exist is more important than reducing the likelihood of serious injury or death during a shooting in our schools and places of worship, etc.]

I think one of my least favorite phrases in the whole entire world has to be “you can’t teach an old dog new tricks”.

It’s a turning away from the world. Announcing that, no, I don’t want to learn anymore thank you very much. No thank you, life is perfect for me as it is, heaven forbid I grow or change. Much better for the world to bend to me.

Gross.

Great article on accessibility: “Writing even more CSS with Accessibility in Mind, Part 2: Respecting user preferences” by Manuel Matzo.

See also: “Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective” by Facundo Corradini.

Came across these while writing a manual accessibility testing guide, an auditing system, etc. for SuperHi.

If things have been calm for a while in life, little stress and so on, I feel like my body can build up stress of its own accord. Is this some sort of innate expectation that if things are going well for a while, surely they must go wrong soon? A sort of fight/flight overture? If so, it kind of makes sense that exercise could help. Literally getting your ya yas out. Don’t know.

Getting properly dressed in the morning, makeup and everything, is such an important part of my day working from home. Don’t know what it is, but I really don’t feel like myself otherwise. I fell out of the cycle once a while back and it actually led to some really low points. It helps if my skin is cooperating.

Related to current events: So one time I had to get a birth control prescription refilled while we were visiting family in the Tennessee. This was in high school (maybe early college?). It was a little more complicated at that point to get a prescription transferred between pharmacies, especially between states, so it had stressed me out but I was able to get it sorted. Anyways, I got the prescription filled and went on my way. It was a very forgettable experience.

Until I got a text from the pharmacist. He used the private contact information in my file to reach out and ask if I was available.

I should have done something about it, but I didn’t know what to do. Thank god I didn’t live there, imagine having to go back.

The shooting in Uvalde happened, and I reflexively went on Twitter. I don’t know what it was about that moment in time, but the instant I started scrolling I felt actual revulsion. It suddenly clicked, how horrible Twitter can make me feel. It didn’t used to be like that. I haven’t really used it since then. I met some great people on it in the past, but that hasn’t happened in a long time. I hope people realize they can always reach out to me here.

Read Notes on maintaining an internal React component library, an article by Gabe Scholz. Via CDM.

Watch How I Code and Use a Computer at 1,000 WPM!! by blind coder Sina Bahram. See also Coyote, “a project developed by cultural heritage professionals and people from the accessibility community to encourage the use of visual description in museum practice”. Very cool. Via RS.

Read about Meno’s Paradox on this University of Washington faculty page. I do not know how to summarize it, only that I have tried to articulate this and have failed every time. Now maybe I can just refer to Meno’s Paradox, or at least to this page. Via CDM.

Read this Guardian article on a neurologist’s tips for fighting memory loss and Alzheimers. “Samuel Johnson said that the art of memory is the art of attention.”

Claire McCardell was incredible. She popularized separates for women! Capsule wardrobes! In like, the 30s!! This is a great article about her contribution to fashion: Claire McCardell originated The American Look (part 1)

Explore philosopher.life. Via LS.

To read: Social Warming: How Social Media Polarises Us All by Charles Arthur. Or not. It sounds worthy, but depressing.

Dig further in to Roni Horn’s work. Specifically, “Still Water (The River Thames, for Example)”. Via BL.

There is no reason to be anything but nice to strangers. It makes you both feel good. Being a dick to someone makes you both feel bad.

Yep, exactly. Well said, and happy birthday, Chris Coyier!

Thanks to B for the photo ❤️

Published by

How to embed an Are.na channel using an `iframe` in HTML

A friend got in touch recently about using this WordPress theme, asking if it would be possible to integrate support for Are.na channels in the theme. I suggested that it’s probably out of scope for the theme but could be great as a plugin that integrates the Are.na API, definitely something I’d be interested in making. Started thinking about how it might work best, wanted to keep it relatively simple and such since ideally I’d want it to work with classic WP and Gutenberg.

Turns out, I was way overcomplicating it. I mentioned the plugin idea to Sam and he suggested just doing an iframe embed like they do on the lovely Are.na blog. Of course! 🤦🏻‍♀️

I’d still like to explore the plugin idea at some point since it would offer a few more opportunities (see things to consider about embeds below, particularly the fact that Are.na embed support is undocumented), but this seems like a nice way of doing it in the meantime.

Example below of Gemma’s Internet Explorers channel as an embed:

How it works

This is the embed code for that particular iframe:

<iframe style="border:none;" width="100%" height="590" src="https://www.are.na/gemma-copeland/internet-explorers/embed" title="Gemma Copeland’s Are.na channel “Internet Explorers”"></iframe>

If you’re less familiar with HTML, here’s what’s going on.

The opening and closing HTML tags <iframe></iframe> stand for an Inline Frame element. This type of element nests a separate resource like a webpage on to the page you’re currently looking at. It contains the attributes style, width, height, src, and title to modify the way it behaves.

Since many browsers render an iframe with a border by default, we’re using the style attribute to get rid of the border on this iframe. You can also style HTML elements with classes and CSS, but we’re using this technique, known as inline styles, for simplicity’s sake.

The width and height attributes specify—you guessed it—the width and height of the iframe. If you were missing either of these attributes, the iframe would collapse. According to the standards, these values should both be set as integers which the browser interprets as pixels. That said, browsers seem to be able to interpret a 100% width correctly, meaning that it fills 100% of the width of its container. If you want to stick to standards, you could add a high width value and then add max-width:100%; to your inline styles.

The src or “source” attribute tells the browser what content you want to embed. Without it, you’d just have an empty iframe. The URL we’re using here is exactly the same as the URL for Gemma’s actual Internet Explorers channel (https://www.are.na/gemma-copeland/internet-explorers), with the addition of /embed on the end. If you try visiting this URL, https://www.are.na/gemma-copeland/internet-explorers/embed, you’ll see that it is essentially a stripped-down version of the original Channel page that is more suitable for embedding.

The title attribute indicates the contents of the iframe. It can be important for accessibility since some screen readers will use it.

Things to consider before embedding content on your site

There are a few things worth keeping in mind if you decide to try this. These notes apply to any embedded content, regardless of where it’s coming from.

1. An iframe embeds the tracking and cookie behavior of its source, not just its contents

When you embed another webpage on your site with an iframe, it will behave the exact same way as if you had visited the source website. In other words, that website may collect data about your visitors, use cookies, embed additional third-party tracking, or monitor your visitors’ interaction with the embedded content.

You should be sure that you’re ok with this before including an embed on your site. Personally, this is one reason why I don’t use embeds very often.

I feel comfortable embedding an Are.na channel in this case because it’s for demonstration purposes, they adhere to the GDPR, and I’m satisfied by the way they handle data according to their privacy policy.

2. The accessibility of an iframe embed depends mostly on the source page

It’s recommended to add a title attribute to your embeds for better accessibility, but that’s pretty much where your accessibility control stops. If the source page hasn’t been built with accessibility in mind, it may be difficult to browse for people that use alternative ways to navigate the web.

Unfortunately, Are.na channel embed pages are missing accessibility features such as unique title elements, descriptive alt texts for the block images, and semantic elements such as <figure> or <figcaption>. This is kind of understandable though since these embed pages are an undocumented feature, something that they probably made more for their own use, and they’re no doubt focusing their main efforts on the public-facing product. Would love to see it tweaked though, particularly since they use these embeds on their own blog.

3. It’s nearly impossible to change the way an embed looks

There’s very little you can do to change the look of an embed. You can change the way the frame itself appears, like removing the default border as we’ve done in the example above, but you usually can’t change the contents of the embed.

Sometimes a platform will accept additional attributes or URL parameters that change an embed’s functionality. YouTube is an example, see their Player Parameters documentation. But this just changes the general functionality, it doesn’t allow you to actually change the placement of the play button or change the controls from red to blue. You can use some fiddly JavaScript to get things looking like you want, but it’s pretty hacky.

Instead, if you want to heavily customize the way that the embed contents look, you should probably integrate the content using the platform’s API if they offer it. This is what we did on Gemma’s site, using the Are.na API and Eleventy to add channels directly to her homepage. This content inherits her site’s styles, so it’s more in keeping with the look and feel of her site.

4. Embeds can break

Broken links are an ever-present problem on the web, people are always changing URLs and taking down content. A broken link is only noticeable if you click it, whereas a broken iframe can look pretty crap. If this would bother you, then you might want to be careful about how much embedded content you include on your site.

Besides this, the source website can restrict which domains are allowed to embed their content at any time. This is unlikely to happen with a platform like Vimeo or YouTube which offer embeds as a part of their advertised functionality. But with this Are.na channel embed for example, Are.na might decide that they only want to allow their embed pages to be embedded on their own site and change their Content-Security-Policy or X-Frame-Options HTTP response headers accordingly. And it’s their right to do so if they wish!

If you want to increase the likelihood that third-party content will be available on your site in the future, it’s best to use documented methods, ideally an API. If you integrate content via an API, you can craft a graceful error message in the event that the content doesn’t load. This can look a lot more forgiving than a broken embed.

5. Embeds probably won’t be crawled by search engine bots

This is… not a huge concern IMO. But I mention it since it may be a concern for others. Search engine bots don’t tend to crawl iframe contents, meaning that they won’t take that content in to account when determining what your page is all about. If this is super important to you, then use the platform’s API (if available) to integrate third-party content directly in to your site.

Edit at 2pm: Changed width description since 100% isn’t technically in line with standards, though it works.

Published by

“I don’t think we know how to separate when we’re feeling pity and when we’re feeling inspiration.”

A short surfing with coffee. It’s getting quiet as clients and collaborators head off for the holidays, so I played inbox catch-up this morning

Issue 227 of Rachel Andrew’s CSS Layout News is full of excellent reading and listening related to accessible and inclusive design. The link I dug most in to was “Future Accessibility Guidelines—for People Who Can’t Wait to Read Them” by Alan Dalton. His article led me to Liz Jackson’s Interaction 2019 keynote “Empathy reifies disability stigmas”. Part way through, she recommends the book Pathological Altruism. Looks like a big read (and it’s not cheap!) but it seems very worthwhile.

From about 8min 28sec in to her talk:

Step two of the design thinking process is defining the problem — but because disabled people are rarely able to lead, it often becomes us that are defined as the problem rather than the problem being defined as the problem. It becomes about what we can or can’t do, rather than how something does or doesn’t work for us.

So you have our insights gleaned, we’re defined as the problem, and then designers enter this iterative process of ideation, prototyping, and testing which leads to the unacknowledged stick stepper design thinking or as I call it, design thanking.

Because we’re expected to be grateful for that which has been done for us.

Her talk is roughly 20 minutes long and well worth a watch.

Thanks to Sam for the CSS Layout News recommendation.