mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-12-24 01:42:10 +00:00
Microdata: fix relative urls, add a11y metadata
- Add a11y metadata to transcribed images to communicate the presence of a transcript - Fix relative urls in navigation: make them absolute urls, so that the parsed navigation elements have the correct destinations. This also switches image transcripts from a section with a heading to a div with an ARIA label. That should reduce duplication between the <summary> content and the heading while still being semantically sound.
This commit is contained in:
Rohan Kumar
parent
ec1ace911b
commit
7bd9784653
9 changed files with 27 additions and 17 deletions
|
|
@ -97,7 +97,7 @@ TE techniques typically revolve around minimizing the size of one's fingerprint,
|
|||
|
||||
If an adversary employs multiple fingerprinting vectors, then normalizing or randomizing a small subset of those vectors might make a user stand out even more.
|
||||
|
||||
{{< transcribed-image type="comic" id="xkcd-1105" >}}
|
||||
{{< transcribed-image type="comic" itemtype="VisualArtwork" id="xkcd-1105" >}}
|
||||
|
||||
#### <span itemprop="name">xkcd comic: license plate</span> {#infinite-scrolling}
|
||||
|
||||
|
|
|
|||
|
|
@ -363,7 +363,7 @@ A hybrid between the two is paginated content in which users click a "load next
|
|||
|
||||
I've discussed loading pages in the background, but what about saving a page offline (e.g. with <kbd>Ctrl</kbd> + <kbd>s</kbd>)? While lazy-loading won't interfere with the ability to save a complete page offline, some of these related issues can. Excessive pagination and inline scrolling make it impossible to download a complete page without manually scrolling or following pagination links to the end.
|
||||
|
||||
{{< transcribed-image type="comic" id="xkcd-1309" >}}
|
||||
{{< transcribed-image type="comic" itemtype="VisualArtwork" id="xkcd-1309" >}}
|
||||
|
||||
#### <span itemprop="name">xkcd comic: infinite scrolling</span> {#infinite-scrolling}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
{{ range .Site.Menus.main -}}
|
||||
{{ $isCurrent := false }}
|
||||
<li itemprop="hasPart" itemscope="" itemtype="https://schema.org/SiteNavigationElement">
|
||||
<a href="{{ .URL }}" itemprop="url"
|
||||
<a href="{{ .URL | absURL}}" itemprop="url"
|
||||
{{- if or (eq .Identifier "notes" ) (eq .Identifier "articles") (eq .Identifier "bookmarks") }} rel="feed"{{- end }}
|
||||
{{- if or (eq $currentPage.RelPermalink .URL) ($currentPage.HasMenuCurrent "main" .) -}}{{- $isCurrent = true }} aria-current="page"{{- end -}}>
|
||||
{{- if or $isCurrent (eq $currentPage.Section .Title) (and (eq $currentPage.Section "posts") (eq .Identifier "articles")) -}}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
{{- else -}}
|
||||
{{- $logURL = $logURL | strings.ReplaceRE `\.md` `.gmi` -}}
|
||||
{{- end -}}
|
||||
{{- $action }} <time{{ if not (.Params.evergreen) }} itemprop="dateCreated datePublished" class="dt-published published"{{ end }} datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format "2006-01-02" }}</time> by {{ partial "indieweb-author.html" -}} on his <a rel="canonical" itemprop="mainEntityOfPage url" class="u-url url" href="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">Website</a>{{- with .OutputFormats.Get "gemtext" -}}{{- printf " " -}}and <a rel="syndication" class="u-syndication" href="{{replace .Permalink "/gemini" "" 1 | safeURL}}">Gemini capsule</a>{{- end -}}.
|
||||
{{- $action }} <time{{ if not (.Params.evergreen) }} itemprop="dateCreated datePublished" class="dt-published published"{{ end }} datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format "2006-01-02" }}</time> by {{ partial "indieweb-author.html" -}} on his <a rel="canonical" itemprop="url" class="u-url url" href="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">Website</a>{{- with .OutputFormats.Get "gemtext" -}}{{- printf " " -}}and <a rel="syndication" class="u-syndication" href="{{replace .Permalink "/gemini" "" 1 | safeURL}}">Gemini capsule</a>{{- end -}}.
|
||||
{{- if gt (sub .Lastmod.Unix .Date.Unix) 900 -}}
|
||||
<br />
|
||||
Last updated <time itemprop="dateModified" class="dt-updated updated" datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Lastmod.Format "2006-01-02" }}</time>. <a href="{{ $logURL }}">Changelog</a>.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{- define "main" -}}
|
||||
{{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
|
||||
{{- .Scratch.Set "codeIndex" 1 -}}
|
||||
<main itemprop="hasPart" itemscope="" itemtype="https://schema.org/BlogPosting{{ if .Params.techarticle }} https://schema.org/TechArticle{{ end }}" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
|
||||
<main itemprop="mainEntity" itemscope="" itemtype="https://schema.org/BlogPosting{{ if .Params.techarticle }} https://schema.org/TechArticle{{ end }}" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
|
||||
<link itemprop="isPartOf" href="{{ .Site.Params.CanonicalBaseURL }}/" />
|
||||
{{ partial "full-article.html" . }}
|
||||
{{ partial "webmentions.html" . }}
|
||||
|
|
|
|||
|
|
@ -6,5 +6,5 @@
|
|||
src="data:image/png;base64,{{ $favicon_base64 }}" />
|
||||
{{- else -}}
|
||||
<img itemprop="image" class="u-photo photo" width="16" height="16" alt=""
|
||||
src="{{ $favicon_svg.RelPermalink }}" />
|
||||
src="{{ $favicon_svg.Permalink }}" />
|
||||
{{- end }}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
type="image/png" />
|
||||
<img{{ with .Get "class" }} class="{{ . }}"{{ end }}
|
||||
width="{{ $img_width }}" height="{{ $img_height }}"
|
||||
src="{{ $light_png.RelPermalink }}" alt='{{ .Get "alt" }}'
|
||||
src="{{ $light_png_src.Permalink }}" alt='{{ .Get "alt" }}'
|
||||
{{ with .Parent -}}
|
||||
{{ if eq .Name "transcribed-image-figure" -}}
|
||||
{{ with .Get "id" -}}
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
{{ end -}}
|
||||
{{ end -}}
|
||||
{{ if or (eq .Name "image-figure") (eq .Name "transcribed-image-figure") -}}
|
||||
itemprop="contentUrl url"
|
||||
itemprop="image contentUrl"
|
||||
{{ end -}}
|
||||
{{- end -}}
|
||||
decoding="async" />
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
<details>
|
||||
<summary>Toggle transcript</summary>
|
||||
{{ with .Parent -}}
|
||||
<section id="transcript-{{ .Get "id" }}">
|
||||
<h5>{{ .Get "type" | humanize}} transcript.</h5>
|
||||
{{- end -}}
|
||||
<div itemprop="embeddedTextCaption">
|
||||
{{ .Inner | markdownify | safeHTML }}
|
||||
{{ with .Parent -}}
|
||||
{{- $type := "image" -}}
|
||||
{{- with .Get "type" -}}
|
||||
{{- $type = . -}}
|
||||
{{- end -}}
|
||||
<summary><span id="btn-{{ .Get "id" }}">{{ $type | humanize }} <span itemprop="accessibilityFeature">transcript</span></span></summary>
|
||||
<div id="transcript-{{ .Get "id" }}" aria-labelledby="btn-{{ .Get "id" }}">
|
||||
{{- end -}}
|
||||
<div itemprop="embeddedTextCaption">
|
||||
{{ .Inner | markdownify | safeHTML }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</details>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,14 @@
|
|||
{{- $type := "image" -}}
|
||||
{{- $itemtype := "CreativeWork" -}}
|
||||
{{- with .Get "type" -}}
|
||||
{{- $type = . -}}
|
||||
{{- end -}}
|
||||
<section aria-label="{{ $type }}, caption, and transcript" itemprop="mentions" itemscope="" itemtype="https://schema.org/ImageObject" id="{{ .Get "id" }}" tabindex="-1">
|
||||
{{- with .Get "itemtype" -}}
|
||||
{{- $itemtype = . -}}
|
||||
{{- end -}}
|
||||
<section
|
||||
aria-label="{{ $type }}, caption, and transcript"
|
||||
itemprop="mentions" itemscope="" itemtype="https://schema.org/{{ $itemtype }} https://schema.org/ImageObject"
|
||||
id="{{ .Get "id" }}" tabindex="-1">
|
||||
{{ .Inner | markdownify | safeHTML }}
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in a new issue