mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-10 20:09:57 +00:00
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
This commit is contained in:
Mario Pietsch
GitHub
parent
232cffb0a1
commit
0c1d478e19
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -2,3 +2,4 @@ title: Blurry Lawn.jpg
|
||||
type: image/jpeg
|
||||
tags: picture external-image
|
||||
source: https://www.flickr.com/photos/jermy/16386332964/in/photostream
|
||||
alt-text: Blurry image with green grass with flowsers.
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
title: Favicon template.svg
|
||||
tags: picture
|
||||
type: image/svg+xml
|
||||
alt-text: Motovun Jack with blue background.
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
title: Funding.png
|
||||
type: image/png
|
||||
tags: picture
|
||||
alt-text: Hand over a debit-card.
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
title: Grok TiddlyWiki Banner
|
||||
type: image/png
|
||||
tags: picture
|
||||
alt-text: Grok TiddlyWiki page and siluette of Motovun Jack.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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>
|
||||
@ -1,2 +1,3 @@
|
||||
title: PerlinLight.jpg
|
||||
type: image/jpeg
|
||||
alt-text: Backgournd tile with light gray dots randomly scatterd.
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
title: Reddit Logo
|
||||
alt-text: Reddit Logo
|
||||
|
||||
\parameters (size:"22pt")
|
||||
<svg width=<<size>> height=<<size>> viewBox="0 0 20 20">
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
title: Tiddler Fishes.svg
|
||||
type: image/svg+xml
|
||||
tags: picture
|
||||
alt-text: 5 coloured sketched fish arranged in a cyrcle.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
title: TiddlyWiki Classic.png
|
||||
type: image/png
|
||||
tags: picture
|
||||
alt-text: TiddlyWiki classic screenshto thumbnail.
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
alt-text: Motovun Jack reads a Newsletter.
|
||||
created: 20240630093143711
|
||||
modified: 20240630094906495
|
||||
tags: picture
|
||||
title: TiddlyWiki Newsletter Badge.png
|
||||
type: image/png
|
||||
tags: picture
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
title: TiddlyWikiLinks
|
||||
type: image/png
|
||||
tags: picture
|
||||
alt-text: Motovun Jack body with "chain liks" around the neck.
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
title: Tiddlyhost Logo
|
||||
type: image/png
|
||||
tags: picture
|
||||
atl-text: TiddlyHost logo.
|
||||
@ -1,2 +1,3 @@
|
||||
type: image/svg+xml
|
||||
title: Xememex Logo
|
||||
alt-text Xememex Logo
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
title: $:/favicon.ico
|
||||
type: image/png
|
||||
alt-text: Motovun Jack with blue background.
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
title: $:/green_favicon.ico
|
||||
type: image/png
|
||||
alt-text: Motovun Jack with green background.
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user