Skip to content

Add alt text to images in content and examples #3423

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add alt text to images in content and examples #3423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion test/manual/no-indicator-css.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@ <h1>You should see bars here:</h1>
We are overriding the normal CSS inclusion with the meta directive <code>{"includeIndicatorStyles":false}</code>
so you should see the indicator because it is not being hidden by the default classes.
</p>
<img class="htmx-indicator" src="../img/bars.svg" width="200">
<img class="htmx-indicator" src="../img/bars.svg" alt="Loading..." width="200">
</body>
</html>
2 changes: 1 addition & 1 deletion test/manual/yes-indicator-css.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@
</head>
<body style="padding:20px;font-family: sans-serif">
<h1>You should not see bars here:</h1>
<img class="htmx-indicator" src="../img/bars.svg" width="200">
<img class="htmx-indicator" src="../img/bars.svg" alt="Loading..." width="200">
</body>
</html>
13 changes: 8 additions & 5 deletions www/content/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,8 @@ if(window.location.search=="?ads=true") {

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

Expand All @@ -75,19 +76,21 @@ if(window.location.search=="?ads=true") {
</div>
<div class="wuw">
<a href="https://swag.htmx.org/products/shut-up-warren-tee">
<img src="/img/wuw.png">
<img src="/img/wuw.png" alt="shut up warren ⁺₊✦ uwu">
</a>
</div>
<div class="uwu">
<a href="https://swag.htmx.org/products/htmx-katakana-shirt">
<img src="/img/kawaii.png">
<img src="/img/kawaii.png" alt="htmx エイチティーエムエックス uwu">
</a>
</div>

</div>
<div class="ad">
<a href="https://swag.htmx.org">
<img src="/img/ads_bottom.png"/>
<img src="/img/ads_bottom.png" alt="Ads: Get Flash! FREE Microsoft Internet Explorer!
Netscape Now! (3.0) Site created with Microsoft&reg; FrontPage&trade;.
Powered by Microsoft BackOffice."/>
</a>
</div>

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

<div style="text-align: center;padding: 24px">
<a href="https://www.amazon.com/dp/B0C9S88QV6/ref=sr_1_1?crid=1P0I3GXQK32TN"><img src="/img/hypermedia-systems.png" alt="hypermedia systems"></a>
<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>
</div>

<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>
Expand Down
8 changes: 4 additions & 4 deletions www/content/attributes/hx-indicator.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Here is an example with a spinner adjacent to the button:
<button hx-post="/example" hx-indicator="#spinner">
Post It!
</button>
<img id="spinner" class="htmx-indicator" src="/img/bars.svg"/>
<img id="spinner" class="htmx-indicator" src="/img/bars.svg" alt="Loading..."/>
</div>
```

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

Expand Down Expand Up @@ -80,7 +80,7 @@ call it out with the `hx-indicator` attribute:
```html
<button hx-post="/example">
Post It!
<img class="htmx-indicator" src="/img/bars.svg"/>
<img class="htmx-indicator" src="/img/bars.svg" alt="Loading..."/>
</button>
```

Expand All @@ -90,7 +90,7 @@ This simulates what a spinner might look like in that situation:

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

## Notes
Expand Down
4 changes: 2 additions & 2 deletions www/content/docs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -343,7 +343,7 @@ on it to transition to an opacity of 1, showing the indicator.
```html
<button hx-get="/click">
Click Me!
<img class="htmx-indicator" src="/spinner.gif">
<img class="htmx-indicator" src="/spinner.gif" alt="Loading...">
</button>
```

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

Expand Down
117 changes: 90 additions & 27 deletions www/content/essays/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@ page_template = "essay.html"

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

## Memes
Expand All @@ -95,30 +96,92 @@ page_template = "essay.html"
}
</style>
<div class="memes">
<img loading="lazy" src="/img/memes/original.png">
<img loading="lazy" src="/img/memes/20yearold.png">
<img loading="lazy" src="/img/memes/whowillwin.png">
<img loading="lazy" src="/img/memes/uarealldoingitwrong.png">
<img loading="lazy" src="/img/memes/restapi.png">
<img loading="lazy" src="/img/memes/justusehtml.png">
<img loading="lazy" src="/img/memes/istudiedhtml.png">
<img loading="lazy" src="/img/memes/htmlvsjson.png">
<img loading="lazy" src="/img/memes/dontknowwhatclientsideroutingis.png">
<img loading="lazy" src="/img/memes/nocap.png">
<img loading="lazy" src="/img/memes/ie11enjoyer.png">
<img loading="lazy" src="/img/memes/hydration.png">
<img loading="lazy" src="/img/memes/viewsource.png">
<img loading="lazy" src="/img/memes/javascripthistory.png">
<img loading="lazy" src="/img/memes/bellcurve.png">
<img loading="lazy" src="/img/memes/drakearchitecture.png">
<img loading="lazy" src="/img/memes/bellcurve2.png">
<img loading="lazy" src="/img/memes/dbtohtml.png">
<img loading="lazy" src="/img/memes/normal.png">
<img loading="lazy" src="/img/memes/feelbad.png">
<img loading="lazy" src="/img/memes/drakememes.png">
<img loading="lazy" src="/img/memes/fullstack.jpg">
<img loading="lazy" src="/img/memes/frontenddevs.png">
<img loading="lazy" src="/img/memes/htmxanddjango.png">
<img loading="lazy" src="/img/memes/aye.png">
<img loading="lazy" src="/img/memes/extinction.png">
<img loading="lazy" src="/img/memes/original.png"
alt="2004 architecture: router, controller, model and view on server side,
browser, DOM and JS on client. 2019 architecture: browser, DOM, js, model,
view, controller, virtual DOM, server-side JS runtime, router, model view
and controller again, another virtual dom, another model-view-controller
for the JSON API... discontent wojak. and 2021 architecture, same as 200 but
with htmx and smug wojak.">
<img loading="lazy" src="/img/memes/20yearold.png"
alt='crying wojak with smiling mask says "lol you are going to use twenty year
old technology to build modern websites lol maybe for a toy website good
luck w/ that lmao"
django, php, flask and rails say: "Yes."
lisp says: "no, sixty years old."'>
<img loading="lazy" src="/img/memes/whowillwin.png"
alt='Who Will Win? On the left corner: the champions Angular and React, with
their respective Google and Facebook legions.
On the right corner: a lunatic in montana and his internet friends
"u guys should use hypermedia"'>
<img loading="lazy" src="/img/memes/uarealldoingitwrong.png"
alt='Despair.com poster with Roy Fielding&apos;s face.
"REST: You&apos;re doing it completely wrong."'>
<img loading="lazy" src="/img/memes/restapi.png"
alt='"I&apos;m going to create a RESTful API..." happy roy
"Using JSON..." distressed roy
"here are my API docs" angery laser eyes roy'>
<img loading="lazy" src="/img/memes/justusehtml.png"
alt="diagram explaining difference between 'hydration' which has 4 long stages
and 'resumability' which is apparently one step.
or just use HTML in one tiny step (loading the html)">
<img loading="lazy" src="/img/memes/istudiedhtml.png"
alt="When You wrote class components I studied HTML.
When you were converting classes to hooks I mastered the HTML.
While you wasted time moving all your client-side logic to server components
I cultivated inner HTML.
And now that the browser won't hydrate your thick client JSON API you have
the audacity to come to me for help?">
<img loading="lazy" src="/img/memes/htmlvsjson.png"
alt='HTML says "I feel bad for you".
JSON says "I don&apos;t think about you at all.'>
<img loading="lazy" src="/img/memes/dontknowwhatclientsideroutingis.png"
alt="Roll Safe meme: Can't route client side if u don't know what client-side routing is.">
<img loading="lazy" src="/img/memes/nocap.png"
alt="yo no cap u don't even need that for web dev fr. hypermedia straight bussin. mf deadass simple fr
-- grug with broccoli hair">
<img loading="lazy" src="/img/memes/ie11enjoyer.png"
alt='average "browsers should follow open standards" fan vs average IE11 enjoyer'>
<img loading="lazy" src="/img/memes/hydration.png"
alt="How much water is in your body? Adult male 60%, adult female 55%, children 65%, infant 75%, React 100%">
<img loading="lazy" src="/img/memes/viewsource.png"
alt='Gigachad: "I wonder how this works..." *clicks view source* "Oh, neat."'>
<img loading="lazy" src="/img/memes/javascripthistory.png"
alt="Friends? Free time? Happiness? Nope, says the JavaScript History API">
<img loading="lazy" src="/img/memes/bellcurve.png"
alt="Bell curve meme. Lower percentile: HTML + a backend.
Median: ONE BILLION COMPONENTS highest percentile: HTML + a backend">
<img loading="lazy" src="/img/memes/drakearchitecture.png"
alt="Disapproving Drake: web dev learning graph with a dozen branches.
Pleased Drake: Learn the basics - HTML and CSS">
<img loading="lazy" src="/img/memes/bellcurve2.png"
alt="Bell curve meme. Low: HTML is fine. Median: we have to use react and
react router and graphql and redux and... high: htmx is fine">
<img loading="lazy" src="/img/memes/dbtohtml.png"
alt="DB to JSON to HTML -- or you can just do DB to HTML...">
<img loading="lazy" src="/img/memes/normal.png"
alt="Me: Why can't you just be normal? JavaScript: *screams*">
<img loading="lazy" src="/img/memes/feelbad.png"
alt="You are using the term REST bad and you should feel bad -- zoidberg">
<img loading="lazy" src="/img/memes/drakememes.png"
alt="Disapproving Drake: well reasoned, detailed and insightful content
explaining the strengths and weaknesses of htmx vs other perfectly valid
potential approaches to front end web development">
<img loading="lazy" src="/img/memes/fullstack.jpg"
alt="htmx to backend dev: 'Look at me. You're fullstack now.'">
<img loading="lazy" src="/img/memes/frontenddevs.png"
alt="front end devs thinkin' everyone is going to be using JavaScript on the
backend soon: htmx:">
<img loading="lazy" src="/img/memes/htmxanddjango.png"
alt="django is a monkey sitting on htmx's back and it's refusing something labeled
'all that complicated js noise">
<img loading="lazy" src="/img/memes/aye.png"
alt='me, an old java dev: "I never thought I would die fighting side by side
w/ dotnet developers"
"what about side by side w/ someone who also hates JS frameworks?"
"aye, I could do that"'>
<img loading="lazy" src="/img/memes/extinction.png"
alt="still from an avengers movie? idk. javascript/node is thanos and java, ruby,
lisp, python and php are fighting it, also haskell is dr strange i think which
seems relevant">
</div>
2 changes: 1 addition & 1 deletion www/content/essays/hypermedia-driven-applications.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ Consider the htmx [Active Search](@/examples/active-search.md) example:
<h3>
Search Contacts
<span class="htmx-indicator">
<img src="/img/bars.svg"/> Searching...
<img src="/img/bars.svg" alt=""/> Searching...
</span>
</h3>
<input class="form-control" type="search"
Expand Down
3 changes: 2 additions & 1 deletion www/content/essays/hypermedia-on-whatever-youd-like.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,8 @@ Here is a screenshot of the [htmx discord](/discord)'s HOWL subsection recently.
that happen to have active traffic, there are many more.

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

You can see we have ongoing conversations in a bunch of different programming languages and frameworks: Java, Go, .NET,
Expand Down
2 changes: 1 addition & 1 deletion www/content/essays/lore.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ tag = ["posts"]
+++

<center style="padding: 12px">
<img src="/img/i-lied.png" alt="I lied." style="border-radius: 32px; max-width: 100%">
<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%">
</center>

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).
Expand Down
4 changes: 2 additions & 2 deletions www/content/essays/web-security-basics-with-htmx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ Unlike calling untrusted HTML routes, there are a lot of good reasons to let use
What if, say, you want to let users link to an image?

```html
<img src="{{ user.fav_img }}">
<img src="{{ user.fav_img }}" alt="{{ user.fav_img_alt }}">
```

Or link to their personal website?
Expand All @@ -272,7 +272,7 @@ The default "escape everything" approach escapes forward slashes, so it will bor
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:

```html
<img src="{{ user.fav_img_s3_url | safe }}">
<img src="{{ user.fav_img_s3_url | safe }}" alt="{{ user.fav_img_alt }}">
```

Yes, you're including unescaped content, but it's a link that you generated, so you know it's safe.
Expand Down
8 changes: 5 additions & 3 deletions www/content/essays/why-gumroad-didnt-choose-htmx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ could be a good solution to keep our front-end super light.

<figure>
<a href="/img/gumroad-red.jpeg" target="_blank">
<img alt="Gumroad Red" src="/img/gumroad-red.jpeg" style="width: 100%">
<img alt="GitHub screenshot shows deleted files" src="/img/gumroad-red.jpeg" style="width: 100%">
</a>
<figcaption>Source with htmx - Click Image To View</figcaption>
</figure>
Expand Down Expand Up @@ -71,7 +71,7 @@ Here's why:

<figure>
<a href="/img/gumroad-green.jpeg" target="_blank">
<img alt="Gumroad Green" src="/img/gumroad-green.jpeg" style="width: 100%">
<img alt="GitHub: 1 added file" src="/img/gumroad-green.jpeg" style="width: 100%">
</a>
<figcaption>Source with Next.js - Click Image To View</figcaption>
</figure>
Expand All @@ -82,7 +82,9 @@ experiences, and leverage a wealth of existing tools and libraries.

<figure>
<a href="/img/gumroad-helper-before-after.png" target="_blank">
<img alt="Gumroad Helper Before After" src="/img/gumroad-helper-before-after.png" style="width: 100%">
<img alt="The old Gumroad Helper interface is quite basic with a single flat form,
while the new one has multiple levels of navigation and editable lists."
src="/img/gumroad-helper-before-after.png" style="width: 100%">
</a>
<figcaption>Gumroad Helper Before & After - Click Image To View</figcaption>
</figure>
Expand Down
4 changes: 2 additions & 2 deletions www/content/examples/active-search.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ We start with a search input and an empty table:
<h3>
Search Contacts
<span class="htmx-indicator">
<img src="/img/bars.svg"/> Searching...
<img src="/img/bars.svg" alt=""/> Searching...
</span>
</h3>
<input class="form-control" type="search"
Expand Down Expand Up @@ -70,7 +70,7 @@ Finally, we show an indicator when the search is in flight with the `hx-indicato
return ` <h3>
Search Contacts
<span class="htmx-indicator">
<img src="/img/bars.svg"/> Searching...
<img src="/img/bars.svg" alt=""/> Searching...
</span>
</h3>

Expand Down
4 changes: 2 additions & 2 deletions www/content/examples/click-to-load.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ the final row:
<button class='btn primary' hx-get="/contacts/?page=2"
hx-target="#replaceMe"
hx-swap="outerHTML">
Load More Agents... <img class="htmx-indicator" src="/img/bars.svg">
Load More Agents... <img class="htmx-indicator" src="/img/bars.svg" alt="">
</button>
</td>
</tr>
Expand Down Expand Up @@ -85,7 +85,7 @@ results (which will contain a button to load the *next* page of results). And s
<button class='btn primary' hx-get="/contacts/?page=${page + 1}"
hx-target="#replaceMe"
hx-swap="outerHTML">
Load More Agents... <img class="htmx-indicator" src="/img/bars.svg">
Load More Agents... <img class="htmx-indicator" src="/img/bars.svg" alt="">
</button>
</center>
</td>
Expand Down
5 changes: 1 addition & 4 deletions www/content/examples/infinite-scroll.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ The last element of the results will itself contain the listener to load the *ne
function tableTemplate(contacts) {
return `<table hx-indicator=".htmx-indicator"><thead><tr><th>Name</th><th>Email</th><th>ID</th></tr></thead><tbody>
${rowsTemplate(1, contacts)}
</tbody></table><center><img class="htmx-indicator" width="60" src="/img/bars.svg"></center>`
</tbody></table><center><img class="htmx-indicator" width="60" src="/img/bars.svg" alt="Loading..."></center>`
}

function rowsTemplate(page, contacts) {
Expand All @@ -87,6 +87,3 @@ The last element of the results will itself contain the listener to load the *ne
return txt;
}
</script>



Loading