Skip to content

Commit deecda1

Browse files
dz4kdz4k
authored
Add alt text to images in content and examples (#3423)
1 parent 148fc95 commit deecda1

20 files changed

+134
-68
lines changed

‎test/manual/no-indicator-css.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@ <h1>You should see bars here:</h1>
1111
We are overriding the normal CSS inclusion with the meta directive <code>{"includeIndicatorStyles":false}</code>
1212
so you should see the indicator because it is not being hidden by the default classes.
1313
</p>
14-
<img class="htmx-indicator" src="../img/bars.svg" width="200">
14+
<img class="htmx-indicator" src="../img/bars.svg" alt="Loading..." width="200">
1515
</body>
1616
</html>

‎test/manual/yes-indicator-css.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
</head>
77
<body style="padding:20px;font-family: sans-serif">
88
<h1>You should not see bars here:</h1>
9-
<img class="htmx-indicator" src="../img/bars.svg" width="200">
9+
<img class="htmx-indicator" src="../img/bars.svg" alt="Loading..." width="200">
1010
</body>
1111
</html>

‎www/content/_index.md‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,8 @@ if(window.location.search=="?ads=true") {
6464

6565
<div class="ad" style="margin-bottom: 30px">
6666
<a href="https://swag.htmx.org">
67-
<img src="/img/ads_top.png"/>
67+
<img src="/img/ads_top.png" alt="Ad: MacMall PowerBooks as low as 1999$!
68+
Call 888-932-1569. Get your FREE 64MB RAM with your PowerBook!"/>
6869
</a>
6970
</div>
7071

@@ -75,19 +76,21 @@ if(window.location.search=="?ads=true") {
7576
</div>
7677
<div class="wuw">
7778
<a href="https://swag.htmx.org/products/shut-up-warren-tee">
78-
<img src="/img/wuw.png">
79+
<img src="/img/wuw.png" alt="shut up warren ⁺₊✦ uwu">
7980
</a>
8081
</div>
8182
<div class="uwu">
8283
<a href="https://swag.htmx.org/products/htmx-katakana-shirt">
83-
<img src="/img/kawaii.png">
84+
<img src="/img/kawaii.png" alt="htmx エイチティーエムエックス uwu">
8485
</a>
8586
</div>
8687

8788
</div>
8889
<div class="ad">
8990
<a href="https://swag.htmx.org">
90-
<img src="/img/ads_bottom.png"/>
91+
<img src="/img/ads_bottom.png" alt="Ads: Get Flash! FREE Microsoft Internet Explorer!
92+
Netscape Now! (3.0) Site created with Microsoft&reg; FrontPage&trade;.
93+
Powered by Microsoft BackOffice."/>
9194
</a>
9295
</div>
9396

@@ -139,7 +142,7 @@ We are happy to announce the release of [Hypermedia Systems](https://hypermedia.
139142
[Hypermedia-Driven Applications](@/essays/hypermedia-driven-applications.md) using htmx & more:
140143

141144
<div style="text-align: center;padding: 24px">
142-
<a href="https://www.amazon.com/dp/B0C9S88QV6/ref=sr_1_1?crid=1P0I3GXQK32TN"><img src="/img/hypermedia-systems.png" alt="hypermedia systems"></a>
145+
<a href="https://www.amazon.com/dp/B0C9S88QV6/ref=sr_1_1?crid=1P0I3GXQK32TN"><img src="/img/hypermedia-systems.png" alt="Hypermedia Systems hardcover edition"></a>
143146
</div>
144147

145148
<h2>sponsors <iframe src="https://github.com/sponsors/bigskysoftware/button" title="Sponsor htmx" height="32" width="114" style="border: 1px solid gray; border-radius: 12px; float:right"></iframe></h2>

‎www/content/attributes/hx-indicator.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ Here is an example with a spinner adjacent to the button:
2121
<button hx-post="/example" hx-indicator="#spinner">
2222
Post It!
2323
</button>
24-
<img id="spinner" class="htmx-indicator" src="/img/bars.svg"/>
24+
<img id="spinner" class="htmx-indicator" src="/img/bars.svg" alt="Loading..."/>
2525
</div>
2626
```
2727

@@ -34,7 +34,7 @@ CSS selectors:
3434
<button hx-post="/example" hx-indicator="inherit, #spinner">
3535
Post It!
3636
</button>
37-
<img id="spinner" class="htmx-indicator" src="/img/bars.svg"/>
37+
<img id="spinner" class="htmx-indicator" src="/img/bars.svg" alt="Loading..."/>
3838
</main>
3939
```
4040

@@ -79,7 +79,7 @@ call it out with the `hx-indicator` attribute:
7979
```html
8080
<button hx-post="/example">
8181
Post It!
82-
<img class="htmx-indicator" src="/img/bars.svg"/>
82+
<img class="htmx-indicator" src="/img/bars.svg" alt="Loading..."/>
8383
</button>
8484
```
8585

@@ -89,7 +89,7 @@ This simulates what a spinner might look like in that situation:
8989

9090
<button class="btn" classes="toggle htmx-request:3s">
9191
Post It!
92-
<img class="htmx-indicator" src="/img/bars.svg"/>
92+
<img class="htmx-indicator" src="/img/bars.svg" alt="Loading..."/>
9393
</button>
9494

9595
## Notes

‎www/content/docs.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -343,7 +343,7 @@ on it to transition to an opacity of 1, showing the indicator.
343343
```html
344344
<button hx-get="/click">
345345
Click Me!
346-
<img class="htmx-indicator" src="/spinner.gif">
346+
<img class="htmx-indicator" src="/spinner.gif" alt="Loading...">
347347
</button>
348348
```
349349

@@ -373,7 +373,7 @@ attribute with a CSS selector to do so:
373373
<button hx-get="/click" hx-indicator="#indicator">
374374
Click Me!
375375
</button>
376-
<img id="indicator" class="htmx-indicator" src="/spinner.gif"/>
376+
<img id="indicator" class="htmx-indicator" src="/spinner.gif" alt="Loading..."/>
377377
</div>
378378
```
379379

‎www/content/essays/_index.md‎

Lines changed: 90 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,8 @@ page_template = "essay.html"
8181

8282
## Banners
8383
<div style="text-align: center;margin:32px">
84-
<img width="90%" loading="lazy" src="/img/createdwith.jpeg">
84+
<img width="90%" loading="lazy" src="/img/createdwith.jpeg"
85+
alt="Site created with htmx, The Right Way.">
8586
</div>
8687

8788
## Memes
@@ -97,30 +98,92 @@ page_template = "essay.html"
9798
}
9899
</style>
99100
<div class="memes">
100-
<img loading="lazy" src="/img/memes/original.png">
101-
<img loading="lazy" src="/img/memes/20yearold.png">
102-
<img loading="lazy" src="/img/memes/whowillwin.png">
103-
<img loading="lazy" src="/img/memes/uarealldoingitwrong.png">
104-
<img loading="lazy" src="/img/memes/restapi.png">
105-
<img loading="lazy" src="/img/memes/justusehtml.png">
106-
<img loading="lazy" src="/img/memes/istudiedhtml.png">
107-
<img loading="lazy" src="/img/memes/htmlvsjson.png">
108-
<img loading="lazy" src="/img/memes/dontknowwhatclientsideroutingis.png">
109-
<img loading="lazy" src="/img/memes/nocap.png">
110-
<img loading="lazy" src="/img/memes/ie11enjoyer.png">
111-
<img loading="lazy" src="/img/memes/hydration.png">
112-
<img loading="lazy" src="/img/memes/viewsource.png">
113-
<img loading="lazy" src="/img/memes/javascripthistory.png">
114-
<img loading="lazy" src="/img/memes/bellcurve.png">
115-
<img loading="lazy" src="/img/memes/drakearchitecture.png">
116-
<img loading="lazy" src="/img/memes/bellcurve2.png">
117-
<img loading="lazy" src="/img/memes/dbtohtml.png">
118-
<img loading="lazy" src="/img/memes/normal.png">
119-
<img loading="lazy" src="/img/memes/feelbad.png">
120-
<img loading="lazy" src="/img/memes/drakememes.png">
121-
<img loading="lazy" src="/img/memes/fullstack.jpg">
122-
<img loading="lazy" src="/img/memes/frontenddevs.png">
123-
<img loading="lazy" src="/img/memes/htmxanddjango.png">
124-
<img loading="lazy" src="/img/memes/aye.png">
125-
<img loading="lazy" src="/img/memes/extinction.png">
101+
<img loading="lazy" src="/img/memes/original.png"
102+
alt="2004 architecture: router, controller, model and view on server side,
103+
browser, DOM and JS on client. 2019 architecture: browser, DOM, js, model,
104+
view, controller, virtual DOM, server-side JS runtime, router, model view
105+
and controller again, another virtual dom, another model-view-controller
106+
for the JSON API... discontent wojak. and 2021 architecture, same as 200 but
107+
with htmx and smug wojak.">
108+
<img loading="lazy" src="/img/memes/20yearold.png"
109+
alt='crying wojak with smiling mask says "lol you are going to use twenty year
110+
old technology to build modern websites lol maybe for a toy website good
111+
luck w/ that lmao"
112+
django, php, flask and rails say: "Yes."
113+
lisp says: "no, sixty years old."'>
114+
<img loading="lazy" src="/img/memes/whowillwin.png"
115+
alt='Who Will Win? On the left corner: the champions Angular and React, with
116+
their respective Google and Facebook legions.
117+
On the right corner: a lunatic in montana and his internet friends
118+
"u guys should use hypermedia"'>
119+
<img loading="lazy" src="/img/memes/uarealldoingitwrong.png"
120+
alt='Despair.com poster with Roy Fielding&apos;s face.
121+
"REST: You&apos;re doing it completely wrong."'>
122+
<img loading="lazy" src="/img/memes/restapi.png"
123+
alt='"I&apos;m going to create a RESTful API..." happy roy
124+
"Using JSON..." distressed roy
125+
"here are my API docs" angery laser eyes roy'>
126+
<img loading="lazy" src="/img/memes/justusehtml.png"
127+
alt="diagram explaining difference between 'hydration' which has 4 long stages
128+
and 'resumability' which is apparently one step.
129+
or just use HTML in one tiny step (loading the html)">
130+
<img loading="lazy" src="/img/memes/istudiedhtml.png"
131+
alt="When You wrote class components I studied HTML.
132+
When you were converting classes to hooks I mastered the HTML.
133+
While you wasted time moving all your client-side logic to server components
134+
I cultivated inner HTML.
135+
And now that the browser won't hydrate your thick client JSON API you have
136+
the audacity to come to me for help?">
137+
<img loading="lazy" src="/img/memes/htmlvsjson.png"
138+
alt='HTML says "I feel bad for you".
139+
JSON says "I don&apos;t think about you at all.'>
140+
<img loading="lazy" src="/img/memes/dontknowwhatclientsideroutingis.png"
141+
alt="Roll Safe meme: Can't route client side if u don't know what client-side routing is.">
142+
<img loading="lazy" src="/img/memes/nocap.png"
143+
alt="yo no cap u don't even need that for web dev fr. hypermedia straight bussin. mf deadass simple fr
144+
-- grug with broccoli hair">
145+
<img loading="lazy" src="/img/memes/ie11enjoyer.png"
146+
alt='average "browsers should follow open standards" fan vs average IE11 enjoyer'>
147+
<img loading="lazy" src="/img/memes/hydration.png"
148+
alt="How much water is in your body? Adult male 60%, adult female 55%, children 65%, infant 75%, React 100%">
149+
<img loading="lazy" src="/img/memes/viewsource.png"
150+
alt='Gigachad: "I wonder how this works..." *clicks view source* "Oh, neat."'>
151+
<img loading="lazy" src="/img/memes/javascripthistory.png"
152+
alt="Friends? Free time? Happiness? Nope, says the JavaScript History API">
153+
<img loading="lazy" src="/img/memes/bellcurve.png"
154+
alt="Bell curve meme. Lower percentile: HTML + a backend.
155+
Median: ONE BILLION COMPONENTS highest percentile: HTML + a backend">
156+
<img loading="lazy" src="/img/memes/drakearchitecture.png"
157+
alt="Disapproving Drake: web dev learning graph with a dozen branches.
158+
Pleased Drake: Learn the basics - HTML and CSS">
159+
<img loading="lazy" src="/img/memes/bellcurve2.png"
160+
alt="Bell curve meme. Low: HTML is fine. Median: we have to use react and
161+
react router and graphql and redux and... high: htmx is fine">
162+
<img loading="lazy" src="/img/memes/dbtohtml.png"
163+
alt="DB to JSON to HTML -- or you can just do DB to HTML...">
164+
<img loading="lazy" src="/img/memes/normal.png"
165+
alt="Me: Why can't you just be normal? JavaScript: *screams*">
166+
<img loading="lazy" src="/img/memes/feelbad.png"
167+
alt="You are using the term REST bad and you should feel bad -- zoidberg">
168+
<img loading="lazy" src="/img/memes/drakememes.png"
169+
alt="Disapproving Drake: well reasoned, detailed and insightful content
170+
explaining the strengths and weaknesses of htmx vs other perfectly valid
171+
potential approaches to front end web development">
172+
<img loading="lazy" src="/img/memes/fullstack.jpg"
173+
alt="htmx to backend dev: 'Look at me. You're fullstack now.'">
174+
<img loading="lazy" src="/img/memes/frontenddevs.png"
175+
alt="front end devs thinkin' everyone is going to be using JavaScript on the
176+
backend soon: htmx:">
177+
<img loading="lazy" src="/img/memes/htmxanddjango.png"
178+
alt="django is a monkey sitting on htmx's back and it's refusing something labeled
179+
'all that complicated js noise">
180+
<img loading="lazy" src="/img/memes/aye.png"
181+
alt='me, an old java dev: "I never thought I would die fighting side by side
182+
w/ dotnet developers"
183+
"what about side by side w/ someone who also hates JS frameworks?"
184+
"aye, I could do that"'>
185+
<img loading="lazy" src="/img/memes/extinction.png"
186+
alt="still from an avengers movie? idk. javascript/node is thanos and java, ruby,
187+
lisp, python and php are fighting it, also haskell is dr strange i think which
188+
seems relevant">
126189
</div>

‎www/content/essays/hypermedia-driven-applications.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ Consider the htmx [Active Search](@/examples/active-search.md) example:
5252
<h3>
5353
Search Contacts
5454
<span class="htmx-indicator">
55-
<img src="/img/bars.svg"/> Searching...
55+
<img src="/img/bars.svg" alt=""/> Searching...
5656
</span>
5757
</h3>
5858
<input class="form-control" type="search"

‎www/content/essays/hypermedia-on-whatever-youd-like.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,8 @@ Here is a screenshot of the [htmx discord](/discord)'s HOWL subsection recently.
111111
that happen to have active traffic, there are many more.
112112

113113
<div style="text-align: center; padding: 16px">
114-
<img src="/img/howl-channels.png">
114+
<img src="/img/howl-channels.png" alt="Django, alpine, bash, clojure, cobol,
115+
deno, dotnet, go, java, node, ocaml, php, ruby, rust -- all active.">
115116
</div>
116117

117118
You can see we have ongoing conversations in a bunch of different programming languages and frameworks: Java, Go, .NET,

‎www/content/essays/lore.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ tag = ["posts"]
1313
+++
1414

1515
<center style="padding: 12px">
16-
<img src="/img/i-lied.png" alt="I lied." style="border-radius: 32px; max-width: 100%">
16+
<img src="/img/i-lied.png" alt="I lied, I don't have a Twitter account. Take off your shoes, we're going to learn about hypermedia." style="border-radius: 32px; max-width: 100%">
1717
</center>
1818

1919
For better or [for worse](https://x.com/IroncladDev/status/1866185587616596356), htmx has collected a lot of lore, mainly around [the twitter account](https://twitter.com/htmx_org).

‎www/content/essays/web-security-basics-with-htmx.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ Unlike calling untrusted HTML routes, there are a lot of good reasons to let use
259259
What if, say, you want to let users link to an image?
260260

261261
```html
262-
<img src="{{ user.fav_img }}">
262+
<img src="{{ user.fav_img }}" alt="{{ user.fav_img_alt }}">
263263
```
264264

265265
Or link to their personal website?
@@ -272,7 +272,7 @@ The default "escape everything" approach escapes forward slashes, so it will bor
272272
You can fix this in a couple of ways. The simplest, and safest, trick is to let users customize these values, but don't let them define the literal text. In the image example, you might upload the image to your own server (or S3 bucket, or the like), generate the link yourself, and then include it, unescaped. In nunjucks, you use the [safe](https://mozilla.github.io/nunjucks/templating.html#safe) function:
273273

274274
```html
275-
<img src="{{ user.fav_img_s3_url | safe }}">
275+
<img src="{{ user.fav_img_s3_url | safe }}" alt="{{ user.fav_img_alt }}">
276276
```
277277

278278
Yes, you're including unescaped content, but it's a link that you generated, so you know it's safe.

0 commit comments

Comments
 (0)