From 90f36f8221f404745de574a054abdb0b665680fd Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Tue, 21 Dec 2021 13:22:45 +1100 Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20Improve=20contrast=20and?= =?UTF-8?q?=20other=20accessibility=20issues?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 5 ++ assets/css/compiled/main.css | 69 +++++++++++++----------- assets/css/main.css | 14 ++--- exampleSite/content/samples/markdown.md | 18 +++---- layouts/_default/single.html | 4 +- layouts/partials/article-link.html | 2 +- layouts/partials/article-pagination.html | 4 +- layouts/partials/author-links.html | 2 +- layouts/partials/author.html | 12 +++-- layouts/partials/breadcrumbs.html | 2 +- layouts/partials/footer.html | 10 ++-- layouts/partials/header.html | 2 +- layouts/partials/home/profile.html | 2 +- layouts/partials/sharing-links.html | 1 + layouts/shortcodes/lead.html | 2 +- tailwind.config.js | 10 ++-- 16 files changed, 88 insertions(+), 71 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f351a7e8..58bacf38 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,9 +14,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ### Changed +- Adjusted contrast of some items to improve accessibility - Upgrade to Chart.js v3.6.2 - Upgrade to Mermaid v8.13.6 +### Fixed + +- Missing ARIA descriptions and alt tags on some images and links + ## [1.5.3] - 2021-11-18 ### Changed diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index ce5aae6c..bf057dee 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -727,7 +727,7 @@ video { } .prose h1 { - color: var(--color-neutral-800); + color: var(--color-neutral-900); font-weight: 800; font-size: 2.25em; margin-top: 0; @@ -1700,11 +1700,11 @@ body a, body button { .chroma .c { font-style: italic; - color: var(--color-neutral-400); + color: var(--color-neutral-500); } .dark .chroma .c { - color: var(--color-neutral-500); + color: var(--color-neutral-400); } /* CommentHashbang */ @@ -1712,66 +1712,66 @@ body a, body button { .chroma .ch { font-weight: 600; font-style: italic; - color: var(--color-neutral-400); + color: var(--color-neutral-500); } .dark .chroma .ch { - color: var(--color-neutral-500); + color: var(--color-neutral-400); } /* CommentMultiline */ .chroma .cm { font-style: italic; - color: var(--color-neutral-400); + color: var(--color-neutral-500); } .dark .chroma .cm { - color: var(--color-neutral-500); + color: var(--color-neutral-400); } /* CommentSingle */ .chroma .c1 { font-style: italic; - color: var(--color-neutral-400); + color: var(--color-neutral-500); } .dark .chroma .c1 { - color: var(--color-neutral-500); + color: var(--color-neutral-400); } /* CommentSpecial */ .chroma .cs { font-style: italic; - color: var(--color-neutral-400); + color: var(--color-neutral-500); } .dark .chroma .cs { - color: var(--color-neutral-500); + color: var(--color-neutral-400); } /* CommentPreproc */ .chroma .cp { font-style: italic; - color: var(--color-neutral-400); + color: var(--color-neutral-500); } .dark .chroma .cp { - color: var(--color-neutral-500); + color: var(--color-neutral-400); } /* CommentPreprocFile */ .chroma .cpf { font-style: italic; - color: var(--color-neutral-400); + color: var(--color-neutral-500); } .dark .chroma .cpf { - color: var(--color-neutral-500); + color: var(--color-neutral-400); } /* Generic */ @@ -2356,20 +2356,20 @@ body a, body button { color: var(--color-neutral-700); } -.text-neutral-800 { - color: var(--color-neutral-800); +.text-neutral-500 { + color: var(--color-neutral-500); } .text-primary-500 { color: var(--color-primary-500); } -.text-primary-700 { - color: var(--color-primary-700); +.text-neutral-800 { + color: var(--color-neutral-800); } -.text-neutral-300 { - color: var(--color-neutral-300); +.text-primary-700 { + color: var(--color-primary-700); } .text-primary-400 { @@ -2412,14 +2412,14 @@ body a, body button { color: var(--color-primary-700); } -.hover\:text-primary-400:hover { - color: var(--color-primary-400); -} - .hover\:text-primary-500:hover { color: var(--color-primary-500); } +.hover\:text-primary-400:hover { + color: var(--color-primary-400); +} + .hover\:text-neutral:hover { color: var(--color-neutral); } @@ -2433,9 +2433,9 @@ body a, body button { text-decoration-color: var(--color-neutral-300); } -.hover\:underline-primary-300:hover { - -webkit-text-decoration-color: var(--color-primary-300); - text-decoration-color: var(--color-primary-300); +.hover\:underline-primary-400:hover { + -webkit-text-decoration-color: var(--color-primary-400); + text-decoration-color: var(--color-primary-400); } .hover\:underline-primary-500:hover { @@ -2452,7 +2452,7 @@ body a, body button { } .dark .dark\:prose-light { - color: var(--color-neutral-400); + color: var(--color-neutral-300); } .dark .dark\:prose-light a { @@ -2492,15 +2492,15 @@ body a, body button { } .dark .dark\:prose-light h2 { - color: var(--color-neutral); + color: var(--color-neutral-50); } .dark .dark\:prose-light h3 { - color: var(--color-neutral); + color: var(--color-neutral-50); } .dark .dark\:prose-light h4 { - color: var(--color-neutral); + color: var(--color-neutral-50); } .dark .dark\:prose-light figure figcaption { @@ -2658,6 +2658,11 @@ body a, body button { padding-bottom: 2.5rem; } + .sm\:text-lg { + font-size: 1.125rem; + line-height: 1.75rem; + } + .sm\:last\:mr-0:last-child { margin-right: 0px; } diff --git a/assets/css/main.css b/assets/css/main.css index aa53939f..4694b18b 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -302,31 +302,31 @@ body button { } /* Comment */ .chroma .c { - @apply italic text-neutral-400 dark:text-neutral-500; + @apply italic text-neutral-500 dark:text-neutral-400; } /* CommentHashbang */ .chroma .ch { - @apply italic font-semibold text-neutral-400 dark:text-neutral-500; + @apply italic font-semibold text-neutral-500 dark:text-neutral-400; } /* CommentMultiline */ .chroma .cm { - @apply italic text-neutral-400 dark:text-neutral-500; + @apply italic text-neutral-500 dark:text-neutral-400; } /* CommentSingle */ .chroma .c1 { - @apply italic text-neutral-400 dark:text-neutral-500; + @apply italic text-neutral-500 dark:text-neutral-400; } /* CommentSpecial */ .chroma .cs { - @apply italic text-neutral-400 dark:text-neutral-500; + @apply italic text-neutral-500 dark:text-neutral-400; } /* CommentPreproc */ .chroma .cp { - @apply italic text-neutral-400 dark:text-neutral-500; + @apply italic text-neutral-500 dark:text-neutral-400; } /* CommentPreprocFile */ .chroma .cpf { - @apply italic text-neutral-400 dark:text-neutral-500; + @apply italic text-neutral-500 dark:text-neutral-400; } /* Generic */ .chroma .g { diff --git a/exampleSite/content/samples/markdown.md b/exampleSite/content/samples/markdown.md index a163f0f4..c870d277 100755 --- a/exampleSite/content/samples/markdown.md +++ b/exampleSite/content/samples/markdown.md @@ -35,12 +35,12 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations. -#### Blockquote without attribution +### Blockquote without attribution > Tiam, ad mint andaepu dandae nostion secatur sequo quae. > **Note** that you can use _Markdown syntax_ within a blockquote. -#### Blockquote with attribution +### Blockquote with attribution > Don't communicate by sharing memory, share memory by communicating.
> — Rob Pike[^1] @@ -56,7 +56,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou | Bob | 27 | | Alice | 23 | -#### Inline Markdown within tables +### Inline Markdown within tables | Italics | Bold | Code | | --------- | -------- | ------ | @@ -64,7 +64,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou ## Code Blocks -#### Code block with backticks +### Code block with backticks ```html @@ -79,7 +79,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou ``` -#### Code block indented with four spaces +### Code block indented with four spaces @@ -92,7 +92,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou -#### Code block with Hugo's internal highlight shortcode +### Code block with Hugo's internal highlight shortcode {{< highlight html >}} @@ -110,19 +110,19 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou ## List Types -#### Ordered List +### Ordered List 1. First item 2. Second item 3. Third item -#### Unordered List +### Unordered List - List item - Another item - And another item -#### Nested list +### Nested list - Fruit - Apple diff --git a/layouts/_default/single.html b/layouts/_default/single.html index ebda4b5b..b6a2cbf2 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -4,10 +4,10 @@ {{ if .Site.Params.article.showBreadcrumbs | default false }} {{ partial "breadcrumbs.html" . }} {{ end }} -

+

{{ .Title | emojify }}

-
+
{{ partial "article-meta.html" (dict "context" . "scope" "single") }}
diff --git a/layouts/partials/article-link.html b/layouts/partials/article-link.html index 2f6dfba4..7fc87859 100644 --- a/layouts/partials/article-link.html +++ b/layouts/partials/article-link.html @@ -30,7 +30,7 @@ {{ partial "extend-article-link.html" . }} {{ end }} -
+
{{ partial "article-meta.html" . }}
{{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }} diff --git a/layouts/partials/article-pagination.html b/layouts/partials/article-pagination.html index d6af75d4..f4b323a5 100644 --- a/layouts/partials/article-pagination.html +++ b/layouts/partials/article-pagination.html @@ -11,7 +11,7 @@ {{ .NextInSection.Title | emojify }} - + {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }} {{ partial "meta/date.html" .NextInSection }} {{ end }} @@ -27,7 +27,7 @@ {{ .PrevInSection.Title | emojify }} - + {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }} {{ partial "meta/date.html" .PrevInSection }} {{ end }} diff --git a/layouts/partials/author-links.html b/layouts/partials/author-links.html index 229ccec8..f6831cf6 100644 --- a/layouts/partials/author-links.html +++ b/layouts/partials/author-links.html @@ -6,7 +6,7 @@ class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href="{{ $url }}" target="_blank" - alt="{{ $name | title }}" + aria-label="{{ $name | title }}" rel="me noopener noreferrer" >{{ partial "icon.html" $name }} diff --git a/layouts/partials/author.html b/layouts/partials/author.html index 5f073d86..6811058a 100644 --- a/layouts/partials/author.html +++ b/layouts/partials/author.html @@ -1,11 +1,17 @@ {{ if .Params.showAuthor | default (.Site.Params.article.showAuthor | default true) }}
{{ with .Site.Author.image }} - + Author {{ end }}
{{ with .Site.Author.name | markdownify | emojify }} -
+
{{ i18n "author.byline_title" | markdownify | emojify }}
@@ -15,7 +21,7 @@ {{ with .Site.Author.bio | markdownify | emojify }}
{{ . }}
{{ end }} - {{ partialCached "author-links.html" . }} +
{{ partialCached "author-links.html" . }}
{{ end }} diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html index a844464a..aca03d5d 100644 --- a/layouts/partials/breadcrumbs.html +++ b/layouts/partials/breadcrumbs.html @@ -1,4 +1,4 @@ -
    +
      {{ template "crumb" (dict "p1" . "p2" .) }}
    {{ define "crumb" }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 33c773ab..68148bea 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,7 +1,7 @@