Improve hellothere flex cards accessibility (#8325)

* add alt-text field to image meta data files

* add aria-label to some HelloThere links

* improve flex-card procedure to render alt-text for images and aria-hide the new-badge because it causes problems

* revert HelloThere modified date

editions/tw5.com/tiddlers/hellothere/HelloThere.tid

@@ -9,7 +9,7 @@ type: text/vnd.tiddlywiki
 
 Use it to keep your [[to-do list|TaskManagementExample]], to plan an [[essay or novel|"TiddlyWiki for Scholars" by Alberto Molina]], or to organise your wedding. Record every thought that crosses your brain, or build a flexible and responsive website.
 
-TiddlyWiki lets you choose where to keep your data, guaranteeing that in the decades to come you will [[still be able to use|Future Proof]] the notes you take today.
+~TiddlyWiki lets you choose where to keep your data, guaranteeing that in the decades to come you will [[still be able to use|Future Proof]] the notes you take today.
 
 !! ''Quick Start''
 
@@ -19,7 +19,7 @@ TiddlyWiki lets you choose where to keep your data, guaranteeing that in the dec
 </$list>
 </div>
 <div class="tc-cards tc-small">
-<$link to="中文社区 - Chinese Community" class="tc-btn-big-green tc-card">
+<$link to="中文社区 - Chinese Community" class="tc-btn-big-green tc-card" aria-label="Chinese Community">
 中文社区<br/>Chinese Community
 </$link>
 </div>

editions/tw5.com/tiddlers/hellothere/badges/ProductHunt-Link.tid

@@ -1,4 +1,4 @@
 title: Product Hunt Link
 tags: [[HelloThere Badge]]
 
-<a href="https://www.producthunt.com/posts/tiddlywiki-2?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-tiddlywiki-2" alt="Product Hunt: Product of the Day" target="_blank" rel="noopener noreferrer">{{ProductHunt-Badge.svg}}</a>
+<a href="https://www.producthunt.com/posts/tiddlywiki-2?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-tiddlywiki-2" aria-label="Product Hunt: Product of the Day" target="_blank" rel="noopener noreferrer">{{ProductHunt-Badge.svg}}</a>

editions/tw5.com/tiddlers/images/Blurry Lawn.jpg.meta

@@ -1,4 +1,5 @@
 title: Blurry Lawn.jpg
 type: image/jpeg
 tags: picture external-image
-source: https://www.flickr.com/photos/jermy/16386332964/in/photostream
+source: https://www.flickr.com/photos/jermy/16386332964/in/photostream
+alt-text: Blurry image with green grass with flowsers.

editions/tw5.com/tiddlers/images/Favicon template.svg.meta

@@ -1,3 +1,4 @@
 title: Favicon template.svg
 tags: picture
-type: image/svg+xml
+type: image/svg+xml
+alt-text: Motovun Jack with blue background.

editions/tw5.com/tiddlers/images/Funding.png.meta

@@ -1,3 +1,4 @@
 title: Funding.png
 type: image/png
 tags: picture
+alt-text: Hand over a debit-card.

editions/tw5.com/tiddlers/images/Grok TiddlyWiki.png.meta

@@ -1,3 +1,4 @@
 title: Grok TiddlyWiki Banner
 type: image/png
 tags: picture
+alt-text: Grok TiddlyWiki page and siluette of Motovun Jack.

editions/tw5.com/tiddlers/images/Introduction Video Thumbnail.jpg.meta

@@ -1,3 +1,4 @@
 title: Introduction Video Thumbnail.jpg
 type: image/jpeg
 tags: picture
+alt-text: Screenshot with a headline: TiddlyWiki. Below are several tiddlers randomly stacked.

editions/tw5.com/tiddlers/images/Marketplace Banner.png.meta

@@ -1,3 +1,4 @@
 title: TiddlyWiki Marketplace Banner
 type: image/jpeg
 tags: picture
+alt-text: Motovun Jack with a shopping cart. Blue floor, orange background.

editions/tw5.com/tiddlers/images/Motovun Jack.ascii.tid

@@ -1,5 +1,6 @@
 title: Motovun Jack.ascii
 tags: picture
+alt-text: Motovun Jack ASCII-art.
 
 \rules only html
 <pre style="font-size:10px; font-family: monospace; line-height:13px">

editions/tw5.com/tiddlers/images/Motovun Jack.jpg.meta

@@ -2,3 +2,4 @@ title: Motovun Jack.jpg
 type: image/jpeg
 source: https://www.flickr.com/photos/jermy/6292279493/in/photostream
 tags: picture
+alt-text: Motovun Jack on a stone wall with treas and hills in the background.

editions/tw5.com/tiddlers/images/Motovun Jack.pdf.meta

@@ -1,3 +1,4 @@
 title: Motovun Jack.pdf
 type: application/pdf
 tags: picture
+alt-text: PDF reader with Motovun Jack siluette on a white background page 1 of 1.

editions/tw5.com/tiddlers/images/New Release Banner.png.meta

@@ -1,3 +1,4 @@
 title: New Release Banner
 type: image/png
 tags: picture
+alt-text: Release banner, with a custom background and a release version in big letters.

editions/tw5.com/tiddlers/images/Newnham Horizon.jpg.meta

@@ -2,3 +2,4 @@ title: Newnham Horizon.jpg
 type: image/jpeg
 tags: picture external-image
 source: https://www.flickr.com/photos/jermy/289999155/in/photostream
+alt-text: Newham Horizon. Green field, blue skey with some clouds on a sunny day.

editions/tw5.com/tiddlers/images/Open Collective Logo.tid

@@ -2,5 +2,6 @@ created: 20240621075644739
 modified: 20240621075647009
 tags: picture
 title: Open Collective Logo
+alt-text: Open Collective Logo
 
 <svg style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 28 28"><path d="M25.509 6.026A13.934 13.934 0 0 1 28 14c0 2.963-.92 5.71-2.491 7.974l-3.626-3.627A8.96 8.96 0 0 0 23 14a8.964 8.964 0 0 0-1.117-4.347l3.626-3.627Z"/><path d="m21.974 2.49-3.627 3.628a9 9 0 1 0 0 15.765l3.627 3.626A13.934 13.934 0 0 1 14 27.999C6.268 28 0 21.733 0 14 0 6.269 6.268 0 14 0c2.963 0 5.711.922 7.974 2.492Z"/></svg>

editions/tw5.com/tiddlers/images/PerlinLight.jpg.meta

@@ -1,2 +1,3 @@
 title: PerlinLight.jpg
 type: image/jpeg
+alt-text: Backgournd tile with light gray dots randomly scatterd.

editions/tw5.com/tiddlers/images/Reddit Logo.tid

@@ -1,4 +1,5 @@
 title: Reddit Logo
+alt-text: Reddit Logo
 
 \parameters (size:"22pt")
 <svg width=<<size>> height=<<size>> viewBox="0 0 20 20">

editions/tw5.com/tiddlers/images/TWEUM Thumbnail.jpg.meta

@@ -1,3 +1,4 @@
 title: TWEUM Thumbnail.jpg
 type: image/jpeg
 tags: picture
+alt-text: TW EU Meeting thumbnail. Skyline of Oxford on a sunny day with blue sky. Motovun Jack and a TiddlyWiki sceenshot in the back.

editions/tw5.com/tiddlers/images/Tiddler Fishes.svg.meta

@@ -1,3 +1,4 @@
 title: Tiddler Fishes.svg
 type: image/svg+xml
 tags: picture
+alt-text: 5 coloured sketched fish arranged in a cyrcle.

editions/tw5.com/tiddlers/images/Tiddler Poster.png.meta

@@ -2,3 +2,4 @@ title: Tiddler Poster.png
 type: image/png
 source: https://tiddlywiki.com/poster
 tags: picture
+alt-text: Poster with a headline: Your messy thoughts. Organized. Below is an abstract Stickleback fish and tiddlywiki.com URL.

editions/tw5.com/tiddlers/images/TiddlyFox Apocalypse.png.meta

@@ -1,3 +1,4 @@
 title: TiddlyFox Apocalypse.png
 type: image/png
 tags: picture
+alt-text: Motovun Jack's head with a FireFox logo over the head and a date: Nov. 14th 2017 on the left.

editions/tw5.com/tiddlers/images/TiddlyWiki Classic.png.meta

@@ -1,3 +1,4 @@
 title: TiddlyWiki Classic.png
 type: image/png
 tags: picture
+alt-text: TiddlyWiki classic screenshto thumbnail.

editions/tw5.com/tiddlers/images/TiddlyWiki Newsletter Badge.png.meta

@@ -1,3 +1,6 @@
-title: TiddlyWiki Newsletter Badge.png
+alt-text: Motovun Jack reads a Newsletter.
-type: image/png
+created: 20240630093143711
+modified: 20240630094906495
 tags: picture
+title: TiddlyWiki Newsletter Badge.png
+type: image/png

editions/tw5.com/tiddlers/images/TiddlyWikiLinks.png.meta

@@ -1,3 +1,4 @@
 title: TiddlyWikiLinks
 type: image/png
 tags: picture
+alt-text: Motovun Jack body with "chain liks" around the neck.

editions/tw5.com/tiddlers/images/Tiddlyhost Logo.png.meta

@@ -1,3 +1,4 @@
 title: Tiddlyhost Logo
 type: image/png
 tags: picture
+atl-text: TiddlyHost logo.

editions/tw5.com/tiddlers/images/Xememex Logo.svg.meta

@@ -1,2 +1,3 @@
 type: image/svg+xml
 title: Xememex Logo
+alt-text Xememex Logo

editions/tw5.com/tiddlers/images/favicon.png.meta

@@ -1,2 +1,3 @@
 title: $:/favicon.ico
 type: image/png
+alt-text: Motovun Jack with blue background.

editions/tw5.com/tiddlers/images/green_favicon.png.meta

@@ -1,2 +1,3 @@
 title: $:/green_favicon.ico
 type: image/png
+alt-text: Motovun Jack with green background.

editions/tw5.com/tiddlers/system/wikitext-macros.tid

@@ -89,10 +89,13 @@ type: text/vnd.tiddlywiki
 \end
 
 \procedure flex-card(class,bordercolor:"",backgroundcolor:"",textcolor:"",imageField:"image",captionField:"caption",subtitle:"",descriptionField:"description",linkField:"link")
-<$link class={{{ [<class>addprefix[tc-card ]] }}} to={{{ [<currentTiddler>get<linkField>else<currentTiddler>] }}}>
+<$link class={{{ [<class>addprefix[tc-card ]] }}}
+	to={{{ [<currentTiddler>get<linkField>else<currentTiddler>] }}}
+	aria-label=<<currentTiddler>>
+>
 	<div class="tc-card-accent" style.borderTop={{{ [<bordercolor>!is[blank]addprefix[5px solid ]] }}} style.background={{!!background}} style.backgroundColor=<<backgroundcolor>> style.color=<<textcolor>> style.fill=<<textcolor>>>
 		<$list filter="[<currentTiddler>has[ribbon-text]]" variable="ignore">
-			<div class="tc-card-ribbon-wrapper">
+			<div class="tc-card-ribbon-wrapper" aria-hidden="true">
 				<div class="tc-card-ribbon" style.backgroundColor={{{ [<currentTiddler>get[ribbon-color]else[red]] }}}>
 					<div class="tc-card-ribbon-inner">
 						<$text text={{!!ribbon-text}}/>
@@ -102,7 +105,9 @@ type: text/vnd.tiddlywiki
 		</$list>
 		<$list filter="[<currentTiddler>has<imageField>]" variable="ignore">
 			<div class="tc-card-image">
-				<$image source={{{ [<currentTiddler>get<imageField>] }}}/>
+				<$image source={{{ [<currentTiddler>get<imageField>] }}}
+					alt={{{ [<currentTiddler>get<imageField>get[alt-text]else[Image.]] }}}
+				/>
 			</div>
 		</$list>
 		<div class="tc-card-title"><$transclude field=<<captionField>>><$view field="title"/></$transclude></div>