Writing Good Alt Text - HTTP 203

[@jakearchibald]

Our moderation team is pretty strict because, y'know, KZbin comments can be seriously bad. However, this results in a lot of false-positives on our videos. In fact, in our last video, most of the deleted comments were helpful/funny/kind and totally fine. I've been proposing solutions, but I don't think anything will change in the near future. Sorry if one of your comments gets caught up in this. I eventually see deleted comments, so I'll repost the good ones in this thread.

[@jakearchibald]

From SEO Video Show: > Love the emotion matters tip. Had to share it on my live stream this week kzbin.info/www/bejne/i5XPqK2tmtlri80 Cheers! From Tsia: > I was thinking if a speaker like Jake deliberately creates a picture of himself behind a plant and makes a silly face then he actively chose to appear like this in public. So why not let the speaker decide how they want to be described by a screen reader?On the other hand: i can have a quick glimpse at the site and actually not care about the silly face of jake. Maybe a screen reader user should have the option to decide how much detail should be described depending on their current preference. Interesting idea! I'm not sure how you could categorise this in a way that would be useful to a screenreader user though. From Jazzy Michael: > You're experience at google seems to be extremely different than my experience at apple. I have worked on several different orgs within Apple and have literally never worked with another white engineer. It is just me. So when you say that a white person talking about diversity makes you "feel different about it" is pretty ignorant. If they're talking about their experience of inclusion, then the colour of their skin matters, because unfortunately people exclude folks based on their skin. And urm, if you want to work with some white Apple engineers, do a stint on the WebKit team. From Chris Brown: > ahhhh Valley girl, stop saying "like" This comment was rightly deleted, but I want to make it clear: Neither of us are from the Valley. I'm from Northern England and will occasionally fall into the speech patterns I grew up with. I make no apology for that. Deal with it, or go away. From Chris Adels: > Nice 👍 and once again, take something simple and make it complicated 😎 exactly what we want The next episode is going to be EVEN WORSE. From Mcha: > Thanks for that VERY informative piece... but that putting-on-the-spot though ..Jake can be 😈 :D Glad you enjoyed it! There were more wrongly-deleted comments, some of them really interesting, but they were replies to other comments, and that information isn't given to me, so I wasn't confident I'd be putting them back in the right place. Again, I'm very sorry about this.

[@ChromeDevs]

// TODO: replace with compelling comment that persuades viewers to 👍 LIKE and 🔔 SUBSCRIBE

[@kyay10]

Sorry, but I prefer more Kotlin's "TODO("replace with ...")" function

[@mondial3206]

Boss NOW

[@corvinyt]

Thank you for covering this important topic from a deafblind user.

[@IkraamDev]

Can you reply to comments? How accessible are KZbin comment notifications?

[@Stoney_Eagle]

Yeah, I'm seriously curious how you manage to use the internet with being blind and deaf. Like, what are the things that make it easy, and just straight-out impossible?

[@chrsbll]

Such a helpful video - I find myself struggling with alt attributes so often, but the "emotion matters" axiom really gets the point across. Thank you!

[@victornpb]

It’s also super bad that a lot of SEO gurus encourages people to put garbage keywords as alt text in order to “boost” search engines. 🤦🏻

[@shoelessone]

Thanks as always. Seriously love these.

[@tangiblewords]

This video does a great job of explaining why the context of an image is important. Context seems to often be overlooked when the concept of alt text is taught. Excellent explanation!

[@alexbodurri1117]

Love this show. Great topic that is often overlooked even by big companies. Gonna share this one around :)

[@alanraftel5033]

0:52 I would leave the alt attribute empty because the images are too small. As a sighted user, if I'm interested in a speaker I would click on the link to read the description and view the large profile picture, so in this case I would add an alt text. Context matters.

[@Brunoenribeiro]

This series is seriously underrated

[@robincrowflies]

Emotion matters. Great. Also, author intent matters. Context matters. :-)

[@shexec32]

The original primary purpose of the alt attribute was to be alternate text displayed when the browser was incapable of rendering the image. This would be because the browser was something like Lynx, or had no support for the image type (sort of what's happening now with webp & avif, at least if we ignore srcset/picture). It's still common to see the alt text when using content blockers. Are those purposes no longer deemed relevant? I kind of see the thinking there, because content blockers can always be deactivated on a site-by-site basis. Whereas, there's no such option for accessibility users, a computer becomes unusable the moment you turn off their screen reader.

[@SimonBuchanNz]

I don't really see (ha ha) how is any different. In both cases, you can consume text but not images.

[@jakearchibald]

@@SimonBuchanNz agreed. If it's good enough for screen reader users, it should be good enough for "didn't load" cases.

[@shexec32]

​@@jakearchibald With the CItybike case (3:32). Omitting the alt text will land you with a 408px broken image, with the only description of what it conveyed being a figcaption line 500px below, nearly half a screen down (will the user know it's there? Will the user recognise it as a figcaption?). Here, having redundant descriptions in both the figcaption and the image alt will be appreciated. The alt text description will appear right next to the broken image icon (as opposed to the figcaption 500px below). Otherwise, you'll be relying on the user discovering the figcaption (hopefully, it's styled distinctively), clocking onto the fact that this represents the description/figcaption for the image that was meant to be loaded in the blank space. In the case of the 42x42 headshot images (1:13), the bounding rectangle is so small, you don't have enough space to say anything more than "Jake Archibald" (Actually, my experiments on the devsummit site found that I was only able to fit "Jake" in that space). Any text longer than that clips off the end of the bounding rectangle and is unreadable. So we have a conflict - the screen reader guidelines recommend you use "Jake Archibald cheekily hiding behind a plant". The "alt text" guidelines state anything longer than "Jake" will be unredable on content-blocking browsers. If your argument is: Let's just use "Jake Archibald cheekily hiding behind a plant", screen readers read the whole thing, and content blockers truncate it to "Jake", good enough for those users. I would counterargue: A) you don't have that kind of luck with every English sentence; B) if you can convey the meaning of the image with just the word "Jake", why do you need the extra text? A Word waffle easter egg? SEO-fu? A fairytale story designed to manipulate your emotions?

[@stalinsampras]

Lol, I'm not even a web developer, I'm a Data Scientist but I like watching this series, I love the interaction between these two guys and the way the content is structured. The dynamic between these two make it work

[@kyay10]

Same here I'm more of an Android/Kotlin guy but HTTP203 is just phenomenal

[@stepheningermany]

What would be the best alt text for product images in a shop? You mentioned it is a bad idea to have whatever system is serving the images also to have alt texts and say this is a mistake that large companies make, but where should the alt texts come from then in an online shop like amazon? Or an online electronics retailer? Making an image alt text in such cases from properties the product may have may not result in a good description of the image. So would you consider it ok for products that the alt text is stored with the image in whatever system the shop uses to mange products and images? For products the context is not going to change.

[@garganourakis]

Very interesting! Thank you for sharing.

[@letradavis8260]

Thank you. As a person who is currently building my website, the ALT text for images (SEO) stuff is new to me so I'm happy that I discovered your channel but what an incredible bonus I received because of the question posed about should race matter? I have dedicated my life to DEI (Diversity, Equity, Inclusion) and I wondered if it would be a part of my strategy to add that to the Alt text. Thank you again.

[@jakearchibald]

Glad you found that bit useful. Some folks were *ahem* unhappy that we included that bit, but it felt important.

[@letradavis8260]

@@jakearchibald I'm so glad you followed your gut and included it. I needed it at that very moment and others will too.

[@delulu6969]

I think if the image shows a person in a formal context, that is a description by itself relative to other images of other speakers

[@Benimation]

An empty string makes sense, because then you're telling the browser that the alternative is literally nothing

[@Stoney_Eagle]

Would it be in any way possible to simulate being impaired by the most common impairments? I want to experience my web creations the way they would.

[@MacoveiVlad]

It would be interesting to have a service using AI to caption images. I vaguely remember Deep Mind doing something like that.

[@Krilllind]

I really like this thought of how to describe an image. Back in the old days when alt attribute was mainly used for when images didn't load, we were told to keep it short in order to not break the layout. Is that something to think about as well?

[@jakearchibald]

I wouldn't worry too much about that. You can always use an overflow: hidden on a parent to prevent it impacting layout.

[@AdrianRoselli]

Is there a way to get to the auto-transcript on mobile (app or web)? I had to open my desktop browser to get to it. Or a stand-alone transcript URL?

[@jakearchibald]

Not that I'm aware of, sorry.

[@AdrianRoselli]

@@jakearchibald Gotcha. If there is somewhere I can log a feature request, please let me know. Great vid, BTW. Glad to see the overall discussion around context and intent.

[@lastshirtlaundry3440]

I don't really see anyone covering like , EXACTLY how to do Alt text for like Yelp. And certain social media aps where it's hard to figure out.

[@ashleyhoward14]

You raised some important and interesting points and I loved that mentioned race and pronouns. As a web designer, you are definitely making me think more about alt text! ahh it's hard! Maybe in the future, people can plug directly into the internet and see images in their mind, and then we wouldn't have to write alt text anymore.

[@jakearchibald]

There are parts of the web that I wouldn't want plugged straight into my brain 😀

[@jakearchibald]

Restoring deleted comment from Youssef Shoaib: > Speak for yourself... (sorry your comment was deleted, it made me chuckle)

[@shexec32]

Appealing to emotion is a very sensationalist way of thinking, relying on the same strategy exploited by clickbaiters (and before that, tabloid journalists) to draw in users. However, activating your emotion centre isn't suitable for all types of content. Examples which spring to mind are academic articles, educational videos, or content which requires intense system II thinking (analyses, coding, facts). Here, you want to activate the user's memory and executive centres. In academia, appeal to emotion is considered a logical fallacy and frowned upon as a debating tactic. Theirs is a reinforcement system designed to punish sensationalism, reward knowledge. Unfortunately, with Google Search specifically engineered to reward clickbait, even if at the expense of academic thought, I accept that clickbait-like appeal to emotion is the only way to survive on the modern web.

[@jakearchibald]

I find your framing of emotion here really weird. It feels like you maybe missed the point. The same rules discussed in the video easily apply to content in academia. Context matters: if the image contains raw data that isn't expressed elsewhere, then it should be detailed. Emotion matters: if there's something about the presentation of the data that makes you feel something beyond the raw data, include that too. Note that you're not telling the reader how to feel, you're including relevent details that might create an emotional response that a sighted user may experience. But seriously dude, emotion isn't a character flaw.

[@shexec32]

@@jakearchibald ​ I'm only warning about the dangers of implementing a system (/guideline/mandate/recommendation/whatever you're going to call it) that uses emotional engagement as a goal metric. The adult human brain is hardwired to engage more with negative emotions (such as anger, depression, or fear) than positive ones (like affection, happiness, or belongingness). I'll defer to John Tierney's "The Power of Bad" about this cognitive bias (and also Rozin & Rozman 2001, Cacioppo et al 2014), but the negativity effect explains why you find anger-inducing images more effective at engaging your users & will drive more traffic to your site than neutral / positive emotional images. Journalists know about this psychological effect. Advertisers and Political propagandists know we're just macabre creatures deep down. Clickbait is nothing but emotional manipulation, and as you have pointed out in several previous videos, clickbait works. However, negative emotion is a problem for a product that only cares about site traffic (eg. Google Ads-supported sites, PageRank-based search). A crawler doesn't check a page to see if its traffic is due to something controversial, or because it contains a seminal result that will revolutionise an industry (there's no sentiment analysis). It just sees that this controversial page is really popular so it will promote it more. 👏 you've engineered the latest feedback loop that maximally promotes the worst of the web: REDACTED speech, REDACTED chambers, REDACTED subgroups (and other REDACTED theories likely to flag this post with your moderation team). To combat this bias, a safer alternative rule would be: "Information trumps emotion". If you have to rely on emotion to argue your point (rather than data, information, or logic, deductive or otherwise), you don't have an academically sound argument. Your alt-text should convey as much relevant information about your image as you can easily express subject to your technical (or conciseness) limitations. It covers your point about the importance of context as well. You may not elicit the same response as you would had you conveyed emotion, but at least you won't risk inducing that feedback loop of hate. Yes, I'm aware I have relied on emotion to argue my point. By my logic, that means my argument is unsound, emotional manipulation works, clickbait is effective and tabloid journalism has been a commercially successful industry for the past several centuries. Doesn't mean I have to like it.

[@marijblack]

@@shexec32 I think, and I say this with caution, that we need to think about the emotional vs analytical in such a charged way. Emotions do absolutely matter. After all we're human beings and social creatures, and not robots void of empathy and consideration. Emotions aren't inherently bad (nor good), but still important nonetheless. Otherwise the alternative to that is the flawed and ironically (emotionally) charged argument of "facts don't care about your feelings" that is often used a cover to spread negativity and hate as well when empathy and sympathy are virtues. So you have to approach this conversation in a different perspective as well or you can unintentional become counterintuitive. Yes I know it's a difficult minefield to navigate, I don't like it either because there so many factors to consider, but it must be navigated.

[@KimJohannesen]

Important point: leaving out the alt-attribute all together is not valid HTML.

[@hugo4it]

* vibing epicly in the intro

[@geooot]

Wouldn’t having some speaker images have alt’s and some not break the sequential pattern of how a screen reader would iterate over the the speaker badges? Thanks for yet another great episode!

[@jakearchibald]

Good question, but I don't think it matters. Screen reader users are people too 😀, and just as sighted users are fine that only some of the headines on www.theguardian.com/uk have an extra paragraph, I think screen reader users would be fine with some avatars having further description, and some not.

[@hobbyturystaSEO]

Just seen Your faces on SEO VIDEO SHOW =) I would like to see You on the SEO VIDEO SHOW live. Any chance?

[@ColinRichardson]

The only way to win Alt Text is to deny the battle

[@jakearchibald]

Like HTML semantics, imperfect alt text is better than no alt text 😀

[@ColinRichardson]

@@jakearchibald I was kinda doing a play on 'War games'

[@yogeshkad6928]

Please make a video on how to become a fastest web developer and please guide me thank you and tell me any resources for web development that is for good

[@31redorange08]

Can there be more than one fastest?

[@technikhil314]

I just cant cope with the speed they are releasing the content. Please you need to slow down guys. @dassurma @jaffthecake Give some time to tryout things at our end. Just kidding I know the videos are here to stay much more than I live. 😃

[@jakearchibald]

Haha well we're out of pre-recorded content now. Back in the 'studio' on Monday.

[@JaseTheAussie]

Yay the so is back!

[@mondial3206]

On the air

[@halilbasmaci]

They was here once 15 minutes 😎😎😎😎

[@dwighthouse]

Sounds like an impossible goal to me. Blind people don’t all think the same. Some blind people would think it is racist to call out people’s skin color, while other blind people would think it is racist to ignore skin color; and both modes of thought exist for sighted people as well. It’s racist to someone either way.

[@jakearchibald]

Eh this is why I suggested asking the person being represented. If they want their appearance represented in text form in a particular way, it seems weird to tell them they're wrong. Similar to pronouns, it's _their_ representation.

[@dwighthouse]

@@jakearchibald Sounds logical to me, but that hasn't stopped cries of racism before. Additionally, what do you do when you do not know the opinion of the person being depicted, such as historical or stock photos? The argument that context would dictate the choice don't settle the issue of such cries in regard to those photos by viewers.

[@jakearchibald]

@@dwighthouse can you give me an example where someone's choice of representation in an alt attribute has result in these 'cries' that you're referring to?

[@dwighthouse]

​@@jakearchibald Nope. The average internet user either ignores alt-text on images, or doesn't know it exists. The potential for offense right now is a fraction of a fraction of a percent. However, from previous experience with calls of racism and the like, it really only takes one person on twitter to take offense at something, followed by sudden social vitality, to get people removed from their jobs or clubs, especially over subjects and people the average person had no knowledge of just days earlier. To my knowledge this hasn't happened yet for alt text. But in other areas, I have seen it happen due to a private joke between two people. I've seen someone attacked by press over something they didn't actually write, but were simply assumed to have written. Stuff like that. As soon as someone decides to care and take offense, image alt text will become the absolute minefield you mentioned, which is largely beyond your control as the writer in this regard. I had never considered skin color in my image alt-text before until I saw this video. Now I will probably not just consider what alt-text I write, but also what images I might include in the first place simply due to this issue.

[@jakearchibald]

@@dwighthouse this seems like a lot of worry over very little

[@ColinBrown33]

I was hoping to hear about how to handle alt text in a programmatic sense, like when the content of the image is unknown.

[@Zolbat]

Why is diversity mainly about what people look like? Shouldn't we evaluate people by their thoughts instead of their looks?

[@dassurma]

It is not. But it comes up when you talk about the intersection of diversity and people with visual impairments

[@lnplum]

It's less about what their look like than their identity. Since most societies distinguish between races (and skin color is a frequent short-hand for this), race is part of a speaker's identity whether they like it or not and affects how they are perceived. "Diversity of thought" is a great idea but as long as society considers race, gender and appearance meaningful, it will lead to negative outcomes if we don't account for those biases. As a simple example that has nothing to do with skin color: consider two companies, one with a very authoritarian hierarchical management style frequently firing people for minor mistakes, the other quite the opposite, emphasizing blameless post-mortems and seeing mistakes as learning opportunities while promoting people for showing an ability to overcome issues and help others rather than simply avoiding mistakes and trying to be the very best. Now imagine both companies hold a meeting polling employees for feedback on what they are dissatisfied with and what the company could do to improve. I'd say it's safe to assume the employees of the former company would be much more reserved about which opinions they voice and unlikely to directly criticize any aspect of how the business is run as they don't want to risk losing their jobs or otherwise being punished, whereas the employees of the latter company are much likely to voice concerns and grievances, having been ensured that they won't be penalized for it. This of course doesn't translate 1-to-1 to skin color or appearance but if you constantly face scrutiny when voicing the same opinions as others only because of aspects of your identity that you can't change (e.g. your race or gender), you'll be far more cautious in voicing them even when reassured that "looks don't matter to us" and you're more likely to open up when surrounded by people who share those aspects. As white men (or white people in general, especially in white majority countries) we don't tend to think about these things because they don't seem to affect us. But that doesn't mean they're not having an effect on others or that they're not actually benefitting us over others. As an example: women and people of color are more likely to be perceived as "troublemakers" by default, especially when they're not deliberately making an effort to be excessively agreeable (which wouldn't be required of a white man in the same situation).

[@AlexSav]

Totally disagree

[@jakearchibald]

oh well

[@jakearchibald]

Restoring deleted comment from Kai Salmon: > Google Dev DESTROYED with FACTS and LOGIC I may never recover! (Sorry your comment was deleted, it made me laugh anyway)

[@jakearchibald]

Restoring deleted comment from Patrick Lauke: > Jake Archibald yup, pack it in now guys. it's OVER... We might have survived if it was just 'disagree', but 'totally'…