Guides, Opinions, and Other Things

I'm Melanie Sumner; you may know me from such places as the internet. I started learning how to build for the web in 1997, and I'm still as thrilled about it today as I was then. I figured I should write some stuff down before I start forgetting things. So here we are.

Articles

• ↠ Reasonable Wcag Additions

  I’ve been reading the WCAG Success Criteria on a nearly-daily basis for…well, for a really long time now, and I have come to the opinion that some no-nonsense, reasonable additions would be useful. Note that all of these are based on my own personal experience and don’t reflect anyone else’s opinions but my own, unless they share this blog post with you and tell you that they explicitly think these things are a good idea. Which they are, of course.

  I’m also grateful for WCAG Success Criterion 1.3.1 Information and Relationships because it covers a multitude of sins, BUT I dream of a little more clarity, a little more guidance, a little more explicit “lolno quit that.”

  Heading Level Order

  Right now, this is just considered a “best practice” but really, everyone benefits from well-organized content that puts the heading levels in order. This is something we have had to do since we were kids in school, writing book report outlines and such. Surely we can be expected to produce content in a reasonable manner as adults.

  Use the same kind of heading order like you would in a document, and use CSS for styling. That’s it. No exceptions. Just do it.

  No Tables for Layout

  Forget adding role="presentation" to your table element that you used for layout. It’s 2024 and we have all kinds of ways to easily and evenly lay out content on a page with CSS. Promise. I know we can’t break the web by introducing rules that would make existing content non-conformant, but we can add “effective from” dates to these things, really. Imagine never changing laws because “well it used to be legal and people might still be using it.” lolno.

  No Toasts for Errors

  Look, toasts are clever or whatever, but those little boxes pop up, say their thing and then disappear. When you put error messages in them, how the heck am I supposed to read the message fast enough, figure out what it means, figure out what field it belongs to, and figure out how to fix it? That’s asking way too much. Put the error message by the input field where the error actually happened.

  No Nested Interactive Elements

  No nested interactive elements. Ever. Not ever. No exceptions. Stop doing this. I never know if the thing I’m about to click on will do that or do something else entirely. Jira does this and it drives me up the wall, and I even like Jira. But I hate that I can’t trust it to do the same thing every time. I never really know what’s going to happen. A user should KNOW WHAT WILL HAPPEN AND BE ABLE TO TRUST YOU. I know there are other WCAG SC’s that technically provide this coverage, but it’s time for us to say this out loud and in unison.

  Links are for URLs, Buttons are for…not that

  If it goes to a URL, it should be a <a href="your-url-here"> kind of situation. If it’s a toggle, or action, or…really anything that doesn’t go a URL, then it’s a button. Stop fucking with users. Again, users must be able to trust that the thing that looks like a link is actually a link. I know designers have kind of eroded user trust over the years but I’m fed up with it. It’s time we take it back and things need to be what they are, especially because they are asking for the user’s trust.

  I think I will add more to this list later, but I have an accessibility audit to get back to.

  Until next time -M

• ↠ Let's talk about Lensa

  Recently, my internet has been awash with Lensa.ai images. At first I was resistant, but then I realized that the computers have my everything anyway, so might as well. How would AI imagine me? What would I learn about myself? Would I finally have an avatar I didn’t hate? I had questions.

  I uploaded 20 of my best selfies and paid the $5.99 for 100 AI-generated images and…meh. Okay, there were a few I liked:

  

  The first fairy princess version of myself was fun, the “pop” and “anime” versions of myself were super adorable, but the rest definitely left something to be desired. Not very impressed. But my husband saw the images and of course he asked me to do it for him. So I did and…then I got annoyed! He got interesting themes like “adventurer” and “astronaut.” My son wanted some too and he looks like he’s straight out of a detective anime series…and rock star! Um, my “wait WTF” radar just went off.

  When you upload the selfies/photos of yourself, you’re asked to pick one of three genders. “Female”, “Male” and “Other.” I am not going to go into the “other” as a gender, I think it’s reductive and I’m sure someone else will write an article about it. But I noticed it and was annoyed by it (“ugh do better already”)

  Anyway, after seeing my husband’s cool “GTA meets Fear and Loathing in Las Vegas” and “super cool jedi” images, I decided to do a little experiment.

  

  My Experiment

  Now, my sample size is small so this isn’t a proper experiment by any means, so this should be considered anecdotal.

  People involved and genders:

  • Me: identify as a female, adult.
  • My husband: identifies as a male, adult with facial hair.
  • My son: identifies as a male, teenager and no facial hair.

  I have seven (7) samples of 100 ai-generated avatars each.

  • female x3
  • male x3
  • other x1

  Categories

  I was mostly interested in what kind of categories seemed “assigned” to a gender, mostly because I hate feeling typecast.

  So I uploaded the same set of 20 selfies of me for each gender to see what results I would get. I also compared my results to my husband and son’s results.

  Theme	Female	Male	Other
  Adventure		X
  Anime	X	X	X
  Astronaut		X
  Cosmic	X	X	X
  Cyborg		X	X
  Cyber Scientist			X
  Fantasy	X		X
  Fairy Princess	X
  Focus	X
  Iridescent	X
  Kawaii	X
  Light	X		X
  Mystical		X	X
  Pop	X
  Sci-Fi		X	X
  Stylish	X	X	X
  Superhero		X	X
  Rainbow			X
  Rock Star		X

  The male gender got a lot more interesting categories and resulting images. They could definitely give women the rock star category, there were plenty of my “male rockstar” avatars that were pretty great. The only one that was blatantly sexist was the “astronaut” category– each of my avatars had facial hair! I was irritated by that, and not only because I kind of wanted to see what “Astronaut Mel” would look like. But then I went and looked at my husband’s “astronaut” avatars again and they were really terrible, distorted…everything. Half-formed space craft, misplaced eyeballs, the works. Our son had the cool astronaut avatars, so maybe that’s something.

  Overall, I think my son won the avatar game. My son’s avatars looked like a characters out of a video game or anime series. Ahh, youth.

  

  Observations

  Resting Bitch Face One really interesting pattern stood out to me more than the rest. My “female” avatars had distinctly disdainful looks on their faces…but none of my “male” avatars did. The machine definitely knows resting bitch face. Very annoying.

  

  I would have done this more but… I only did this a few times because it was $5.99 for each set of 100 avatars. I am curious to see this done as a proper experiment but I am not interested enough to give this app any more of my money.

  Sexy? I read an article about another woman’s experience of getting over-sexualized ai-generated avatars back. I did not experience this. For clarity, one of my selfies had some cleavage in it, none of the rest did. So I’d be curious to see if feeding the machine “sexier” photos will return more dramatic results.

  “Other” is a joke It’s very clear that some of these are just fillers for the count. There were more distorted ai-generated images for the set where I chose “other” as my gender. The “Rainbow” category definitely produced the highest number of distorted images. It was really kind of grotesque. I had such high hopes for “Cyber Scientist” but alas, it also had a higher distorted image count for me. “Other” doesn’t mean surreal or grotesque, but AI seems to think so. Really, it just needs to refactor all of whatever it shipped to determine what “other” means.

  

  Closing Thoughts

  The thing is, sure we train the AI but we can also tell the AI that we want more diversity, we want to see more possibilities, and we want a really cool imagination land future…and it could provide it. Right now, my observation is that this tool is just reinforcing stale biases instead of the REALLY COOL SHIT IT COULD BE DOING. The tech future was supposed to be cool, but it’s mostly just broken, and it’s a total bummer.

  This app doesn’t waste any more of your time than Candy Crush and steals less of your data than Facebook or TikTok. It’s mostly a waste of money but hey, I finally have that “Melanie-as-a-mystic-being” avatar I always wanted. Male Mystic Mel wins this competition.

  

• ↠ The Web I Want(ed) To Dev

  If you’re unfamiliar with me, or my work, there’s a good chance you won’t automatically grok the context for the work that I do. You might even be tempted to find me on Twitter and tell me how wrong I am about any number of things that I have written. Or if I was a real developer I wouldn’t have been okay with leaving something out. But the truth is, the reality of the work we do as web developers is much different that then work we wish we did as web developers. So for now, let’s dream a little.

• ↠ My Process for Accessibility Testing

  This is a guide. This document intends to provide insight into the steps that I take when evaluating the accessibility of a page. It can be used to estimate the work needed to do any kind of accessibility evaluation in general, or help inform your own process.

• ↠ Getting Started With Accessibility

  This article is meant to be a practical guide to answer the question, “how do we get started with accessibility?” This is based on my own experience, but that’s a lot of experience, so it’s probably sufficient for unpaid advice. Hopefully you found this because you’re interested in building an accessibility practice at your company, and not just because you asked accessibility experts to give you their time (without compensation).

• ↠ Links in Labels

  It seems to be a relatively common pattern to have links in labels, but is that accessible? In this article, I’ll explain what’s going on, and explore some options, see how they work with a screen reader, and (hopefully) provide some food for thought.

• ↠ How to Learn Ember

  I get asked this question enough that I have the answer saved to a file so I can copy/paste it. I think I’ll post it here, that way anyone can benefit from it.

• ↠ The Cost of Copying Design

  They say that you can tell an experienced developer because when you ask them a question about how they would approach or solve a specific problem, their answer will be “it depends.” These days, if a designer were to ask me if it would be okay to design a component in a certain way (“just like Twizonple does it”), my response is probably going to be “I’ll look at it, but it’s unlikely since they are well-known for inaccessible design. Out of curiosity, what features do you like best about it?”

• ↠ Details-As-A-Menu

  A few months back, I had to work on a situation where the details element was being used as a dropdown menu for a site navigation. In this post, I’m going to explain why I think you should not use a details element as a dropdown menu. TL;DR? Don’t use the <details> element for a dropdown menu, use a <button> element that toggles open a list of links instead.

• ↠ The Web is Awesome, the Web is Horrible

  Today marks the 25th year of my first foray into building something for the internet. Happy web-versary to me! It seems like forever ago, but it also seems like just yesterday. I suppose this is the nature of how time passes, or feels like it happens. If you are focusing on it then it doesn’t seem like any time has passed at all, but if you ignore it for a bit it just flies by.