Add accessilbilty check and fixes
This commit is contained in:
parent
6c626450e7
commit
18d9cc15e7
16 changed files with 206 additions and 29 deletions
30
layouts/_markup/render-image.html
Normal file
30
layouts/_markup/render-image.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
{{- /*
|
||||
Content images. The Markdown title ("") is the photo credit; it is shown
|
||||
as a caption instead of a tooltip, so that it is available on touch devices and to screen readers.
|
||||
An image on its own line becomes a figure; images sharing a paragraph get an inline credit.
|
||||
*/ -}}
|
||||
{{- $src := .Destination -}}
|
||||
{{- $width := 0 -}}
|
||||
{{- $height := 0 -}}
|
||||
{{- with or (.PageInner.Resources.Get (strings.TrimPrefix "./" .Destination)) (resources.Get .Destination) -}}
|
||||
{{- $src = .RelPermalink -}}
|
||||
{{- if and (eq .ResourceType "image") (ne .MediaType.SubType "svg") -}}
|
||||
{{- $width = .Width -}}
|
||||
{{- $height = .Height -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- /* A title that only repeats the alt text is not a credit. */ -}}
|
||||
{{- $credit := cond (eq .Title .PlainText) "" .Title -}}
|
||||
{{- $img := printf `<img src="%s" alt="%s"%s>` (htmlEscape $src) (htmlEscape .PlainText) (cond (gt $width 0) (printf ` width="%d" height="%d"` $width $height) "") -}}
|
||||
{{- if .IsBlock -}}
|
||||
<figure class="content-image">
|
||||
{{ $img | safeHTML }}
|
||||
{{- with $credit }}
|
||||
<figcaption class="content-image__credit">{{ . }}</figcaption>
|
||||
{{- end }}
|
||||
</figure>
|
||||
{{- else if $credit -}}
|
||||
<span class="content-image">{{ $img | safeHTML }}<span class="content-image__credit">{{ $credit }}</span></span>
|
||||
{{- else -}}
|
||||
{{ $img | safeHTML }}
|
||||
{{- end -}}
|
||||
|
|
@ -1,21 +1,25 @@
|
|||
{{- /* Language badge for a tour. Params: code ("de", "en" or "deen"), class (optional; without it the badge is styled as an inline superscript). */ -}}
|
||||
{{- /* Language badge for a tour. Params: code ("de", "en" or "deen"), class (optional; without it the badge is styled as an inline superscript).
|
||||
The visible label ("DE/EN") is hidden from screen readers, which read a short text instead; the full sentence is a tooltip. */ -}}
|
||||
{{- $code := .code | lower -}}
|
||||
{{- $validCodes := slice "de" "en" "deen" -}}
|
||||
{{- if not (in $validCodes $code) -}}
|
||||
<span style="color: red; font-weight: bold;">Warning: Invalid or missing language code '{{ $code }}'. Use 'de', 'en', or 'deen'.</span>
|
||||
{{- else -}}
|
||||
{{- $label := cond (eq $code "de") "DE" (cond (eq $code "en") "EN" (cond (eq $code "deen") "DE/EN" "")) -}}
|
||||
{{- $de := eq site.Language.Name "de" -}}
|
||||
{{- $label := cond (eq $code "de") "DE" (cond (eq $code "en") "EN" "DE/EN") -}}
|
||||
{{- $title := "" -}}
|
||||
{{- $spoken := "" -}}
|
||||
{{- if eq $code "deen" -}}
|
||||
{{- $title = cond (eq site.Language.Name "de") "Diese Tour wird zweisprachig stattfinden (Deutsch und Englisch)" "This tour will be bilingual (German and English)" -}}
|
||||
{{- $title = cond $de "Diese Tour wird zweisprachig stattfinden (Deutsch und Englisch)" "This tour will be bilingual (German and English)" -}}
|
||||
{{- $spoken = cond $de "Sprache: Deutsch und Englisch" "Language: German and English" -}}
|
||||
{{- else if eq $code "de" -}}
|
||||
{{- $title = cond (eq site.Language.Name "de") "Diese Tour wird auf Deutsch stattfinden" "This tour will be held in German" -}}
|
||||
{{- $title = cond $de "Diese Tour wird auf Deutsch stattfinden" "This tour will be held in German" -}}
|
||||
{{- $spoken = cond $de "Sprache: Deutsch" "Language: German" -}}
|
||||
{{- else if eq $code "en" -}}
|
||||
{{- $title = cond (eq site.Language.Name "de") "Diese Tour wird auf Englisch stattfinden" "This tour will be held in English" -}}
|
||||
{{- end -}}
|
||||
{{- with .class -}}
|
||||
<abbr class="{{ . }}" title="{{ $title }}">{{ $label }}</abbr>
|
||||
{{- else -}}
|
||||
<abbr style="font-size: .65em; vertical-align: super;" title="{{ $title }}">{{ $label }}</abbr>
|
||||
{{- $title = cond $de "Diese Tour wird auf Englisch stattfinden" "This tour will be held in English" -}}
|
||||
{{- $spoken = cond $de "Sprache: Englisch" "Language: English" -}}
|
||||
{{- end -}}
|
||||
{{- $style := "font-size: .65em; vertical-align: super;" -}}
|
||||
{{- with .class }}{{ $style = "" }}{{ end -}}
|
||||
<span{{ with .class }} class="{{ . }}"{{ end }}{{ with $style }} style="{{ . | safeCSS }}"{{ end }} title="{{ $title }}"><span aria-hidden="true">{{ $label }}</span><span class="visually-hidden">{{ $spoken }}</span></span>
|
||||
{{- end -}}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<iframe style="width: 100%; height: 300px; border: 0;" allowfullscreen allow="geolocation" src="//umap.openstreetmap.fr/en/map/39c3-hackertours_1329184?scaleControl=true&miniMap=false&scrollWheelZoom=true&zoomControl=true&editMode=disabled&moreControl=true&searchControl=false&tilelayersControl=false&embedControl=false&datalayersControl=false&onLoadPanel=none&captionBar=false&captionMenus=true&datalayers=bdd7ff4a-820c-4d08-acd6-a4e1f457b09a%2C82c00520-3aac-454b-96c1-f84d76734b59%2C0b4c18d6-f604-40b0-a322-05b69635ba5c%2Cde42bd8b-d6e8-4bc0-9a2d-2b0168c693c1%2C3bb4795a-1e46-4755-b729-17aeb462498c%2C3a5870ba-4539-4f58-adc9-d0b86b82b4f1%2Cf9d4edf5-c7ac-4e8a-bb39-816312075660%2C3e12b58e-cf69-458d-86ff-6c3d7df79365%2C706815ab-ff61-4840-bc05-cae55242648f%2C6ebae518-b9c0-4900-8f52-085690afa3e7%2C8324f966-450f-4dcf-bec7-e893a3716b42&captionControl=false&locateControl=false&measureControl=false&printControl=null&homeControl=false"></iframe>
|
||||
<iframe title="{{ i18n "map_39c3_title" }}" style="width: 100%; height: 300px; border: 0;" allowfullscreen allow="geolocation" src="//umap.openstreetmap.fr/en/map/39c3-hackertours_1329184?scaleControl=true&miniMap=false&scrollWheelZoom=true&zoomControl=true&editMode=disabled&moreControl=true&searchControl=false&tilelayersControl=false&embedControl=false&datalayersControl=false&onLoadPanel=none&captionBar=false&captionMenus=true&datalayers=bdd7ff4a-820c-4d08-acd6-a4e1f457b09a%2C82c00520-3aac-454b-96c1-f84d76734b59%2C0b4c18d6-f604-40b0-a322-05b69635ba5c%2Cde42bd8b-d6e8-4bc0-9a2d-2b0168c693c1%2C3bb4795a-1e46-4755-b729-17aeb462498c%2C3a5870ba-4539-4f58-adc9-d0b86b82b4f1%2Cf9d4edf5-c7ac-4e8a-bb39-816312075660%2C3e12b58e-cf69-458d-86ff-6c3d7df79365%2C706815ab-ff61-4840-bc05-cae55242648f%2C6ebae518-b9c0-4900-8f52-085690afa3e7%2C8324f966-450f-4dcf-bec7-e893a3716b42&captionControl=false&locateControl=false&measureControl=false&printControl=null&homeControl=false"></iframe>
|
||||
|
|
@ -17,15 +17,16 @@
|
|||
</head>
|
||||
|
||||
<body class="{{ if .IsPage }}single-page{{ else }}list-page{{ end }}{{ if .IsHome }} front{{ end }}{{ with .Section }} section-page--{{ . | urlize }}{{ end }}{{ with $.Param "bodyclass" }} {{ . }}{{ end }}">
|
||||
<a class="skip-link visually-hidden" href="#main-content">{{ i18n "skip_to_content" }}</a>
|
||||
<div class="page layout__page{{ if $.Param "sidebar" }} layout__sidebar-second{{ end }}">
|
||||
<header class="header layout__header">
|
||||
{{ if $.Param "logo" | default true -}}
|
||||
<a href="{{ site.Home.RelPermalink }}" title="Home" rel="home" class="header__logo">
|
||||
<img src="{{ with $.Param "logopath" }}{{ . | relURL }}{{ else }}{{ "images/logo.png" | relURL }}{{ end }}"{{ with $.Param "logowidth" }} width="{{ . }}"{{ end }}{{ with $.Param "logoheight" }} height="{{ . }}"{{ end }} alt="Home" class="header__logo-image">
|
||||
<a href="{{ site.Home.RelPermalink }}" rel="home" class="header__logo">
|
||||
<img src="{{ with $.Param "logopath" }}{{ . | relURL }}{{ else }}{{ "images/logo.png" | relURL }}{{ end }}"{{ with $.Param "logowidth" }} width="{{ . }}"{{ end }}{{ with $.Param "logoheight" }} height="{{ . }}"{{ end }} alt="{{ i18n "logo_alt" }}" class="header__logo-image">
|
||||
</a>
|
||||
{{ end -}}
|
||||
<div class="header__intro">
|
||||
<div class="header__intro_headline"><a href="{{ site.Home.RelPermalink }}" title="Home" class="header__site-link" rel="home"><span>{{ site.Title }}</span></a></div>
|
||||
<div class="header__intro_headline"><a href="{{ site.Home.RelPermalink }}" class="header__site-link" rel="home"><span>{{ site.Title }}</span></a></div>
|
||||
<div class="header__intro_text">{{ .Param "intro" }}</div>
|
||||
</div>
|
||||
<div class="region header__region">
|
||||
|
|
@ -37,6 +38,7 @@
|
|||
{{ if not ($.Param "menuinheader") }}{{ partial "menu.html" . }}{{ end -}}
|
||||
{{ if $.Param "mobilemenu" }}{{ partial "mobilemenu.html" . }}{{ end -}}
|
||||
|
||||
<div id="main-content" tabindex="-1"></div>
|
||||
{{ block "main" . }}{{ end }}
|
||||
|
||||
{{ if $.Param "sidebar" }}{{ partial "sidebar.html" . }}{{ end -}}
|
||||
|
|
|
|||
|
|
@ -17,15 +17,16 @@
|
|||
</head>
|
||||
|
||||
<body class="{{ if .IsPage }}single-page{{ else }}list-page{{ end }}{{ if .IsHome }} front{{ end }}{{ with .Section }} section-page--{{ . | urlize }}{{ end }}{{ with $.Param "bodyclass" }} {{ . }}{{ end }}">
|
||||
<a class="skip-link visually-hidden" href="#main-content">{{ i18n "skip_to_content" }}</a>
|
||||
<div class="page layout__page{{ if $.Param "sidebar" }} layout__sidebar-second{{ end }}">
|
||||
<header class="header layout__header">
|
||||
{{ if $.Param "logo" | default true -}}
|
||||
<a href="{{ site.Home.RelPermalink }}" title="Home" rel="home" class="header__logo">
|
||||
<img src="{{ with $.Param "logopath" }}{{ . | relURL }}{{ else }}{{ "images/logo.png" | relURL }}{{ end }}"{{ with $.Param "logowidth" }} width="{{ . }}"{{ end }}{{ with $.Param "logoheight" }} height="{{ . }}"{{ end }} alt="Home" class="header__logo-image">
|
||||
<a href="{{ site.Home.RelPermalink }}" rel="home" class="header__logo">
|
||||
<img src="{{ with $.Param "logopath" }}{{ . | relURL }}{{ else }}{{ "images/logo.png" | relURL }}{{ end }}"{{ with $.Param "logowidth" }} width="{{ . }}"{{ end }}{{ with $.Param "logoheight" }} height="{{ . }}"{{ end }} alt="{{ i18n "logo_alt" }}" class="header__logo-image">
|
||||
</a>
|
||||
{{ end -}}
|
||||
<div class="header__intro">
|
||||
<div class="header__intro_headline">{{ .Param "headline" }}</div>
|
||||
<h1 class="header__intro_headline">{{ .Param "headline" }}</h1>
|
||||
{{ if .Param "intro" }}
|
||||
<div class="header__intro_text">{{ .Param "intro" }}</div>
|
||||
{{ end }}
|
||||
|
|
@ -39,6 +40,7 @@
|
|||
{{ if not ($.Param "menuinheader") }}{{ partial "menu.html" . }}{{ end -}}
|
||||
{{ if $.Param "mobilemenu" }}{{ partial "mobilemenu.html" . }}{{ end -}}
|
||||
|
||||
<div id="main-content" tabindex="-1"></div>
|
||||
{{ block "main" . }}{{ end }}
|
||||
|
||||
{{ if $.Param "sidebar" }}{{ partial "sidebar.html" . }}{{ end -}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue