From e236b4bf65759937b89c32469d62cf6dcb114a76 Mon Sep 17 00:00:00 2001 From: Ricardo Date: Sat, 7 Mar 2026 18:58:08 +0100 Subject: [PATCH] a11y: comprehensive WCAG 2.1 Level AA accessibility audit - Add skip-to-main-content link and main content ID target - Add prefers-reduced-motion media queries for all animations - Enhance visible focus indicators (2px offset, high-contrast ring) - Replace ~160 text-surface-500 instances with text-surface-600/dark:text-surface-400 for 4.5:1+ contrast ratio compliance - Add aria-hidden="true" to ~30+ decorative SVG icons across sidebars/widgets - Convert facepile containers from div to semantic ul/li with role="list" - Add aria-label to icon-only buttons (share, sort controls) - Add sr-only labels to form inputs (webmention, search) - Add aria-live="polite" to dynamically loaded webmentions - Add aria-label with relative+absolute date to time-difference component - Add keyboard handlers (Enter/Space) to custom interactive elements - Add aria-label to nav landmarks (table of contents) - Fix modal focus trap and dialog accessibility - Fix lightbox keyboard navigation and screen reader announcements Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88 --- _includes/components/blog-sidebar.njk | 47 ++++---- _includes/components/comments.njk | 12 ++- _includes/components/cv-builder.njk | 4 +- _includes/components/empty-collection.njk | 2 +- _includes/components/fediverse-modal.njk | 15 +-- .../components/funkwhale-stats-content.njk | 12 +-- _includes/components/h-card.njk | 16 +-- _includes/components/homepage-sidebar.njk | 13 +-- _includes/components/post-navigation.njk | 12 +-- _includes/components/reply-context.njk | 16 +-- _includes/components/sections/ai-usage.njk | 10 +- .../components/sections/cv-education.njk | 8 +- .../components/sections/cv-experience.njk | 2 +- .../components/sections/cv-languages.njk | 2 +- .../sections/cv-projects-personal.njk | 4 +- .../components/sections/cv-projects-work.njk | 4 +- _includes/components/sections/cv-projects.njk | 4 +- .../components/sections/featured-posts.njk | 24 ++--- .../components/sections/recent-posts.njk | 24 ++--- _includes/components/sidebar.njk | 39 +++---- _includes/components/webmentions.njk | 94 ++++++++-------- _includes/components/widgets/ai-usage.njk | 14 +-- .../widgets/author-card-compact.njk | 8 +- _includes/components/widgets/blogroll.njk | 4 +- .../components/widgets/fediverse-follow.njk | 2 +- _includes/components/widgets/feedland.njk | 12 ++- _includes/components/widgets/funkwhale.njk | 4 +- _includes/components/widgets/github-repos.njk | 44 ++++---- .../components/widgets/post-navigation.njk | 4 +- .../components/widgets/recent-posts-blog.njk | 10 +- _includes/components/widgets/recent-posts.njk | 12 +-- _includes/components/widgets/share.njk | 6 +- .../components/widgets/social-activity.njk | 18 ++-- _includes/components/widgets/subscribe.njk | 4 +- _includes/components/widgets/toc.njk | 2 +- _includes/components/widgets/webmentions.njk | 8 +- _includes/layouts/base.njk | 102 +++++++++--------- _includes/layouts/home.njk | 2 +- _includes/layouts/page.njk | 16 +-- _includes/layouts/post.njk | 9 +- articles.njk | 4 +- blog.njk | 18 ++-- blogroll.njk | 46 ++++---- bookmarks.njk | 6 +- categories.njk | 2 +- changelog.njk | 14 +-- css/critical.css | 13 +++ css/lite-yt-embed.css | 5 +- css/prism-theme.css | 4 +- css/tailwind.css | 15 ++- cv.njk | 4 +- digest-index.njk | 8 +- digest.njk | 14 +-- eleventy.config.js | 2 +- featured.njk | 14 +-- funkwhale.njk | 36 ++++--- github.njk | 10 +- graph.njk | 2 +- interactions.njk | 34 +++--- js/lightbox.js | 21 ++++ js/time-difference.js | 5 +- js/webmentions.js | 17 ++- lib/unfurl-shortcode.js | 4 +- likes.njk | 6 +- listening.njk | 34 +++--- news.njk | 33 +++--- notes.njk | 6 +- photos.njk | 4 +- podroll.njk | 30 +++--- readlater.njk | 20 ++-- replies.njk | 8 +- reposts.njk | 6 +- search.njk | 9 +- slashes.njk | 4 +- starred.njk | 24 +++-- webmention-debug.njk | 6 +- youtube.njk | 10 +- 77 files changed, 638 insertions(+), 505 deletions(-) diff --git a/_includes/components/blog-sidebar.njk b/_includes/components/blog-sidebar.njk index 262aa0f..4fd71c1 100644 --- a/_includes/components/blog-sidebar.njk +++ b/_includes/components/blog-sidebar.njk @@ -46,23 +46,23 @@ {% elif widget.type == "fediverse-follow" %} {% set widgetIcon = "user-plus" %}{% set widgetIconClass = "w-5 h-5 text-[#a730b8]" %}{% set widgetBorder = "border-l-[3px] border-l-[#a730b8]" %} {% elif widget.type == "author-card" or widget.type == "author-card-compact" %} - {% set widgetIcon = "user" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %} + {% set widgetIcon = "user" %}{% set widgetIconClass = "w-5 h-5 text-surface-600 dark:text-surface-400" %}{% set widgetBorder = "" %} {% elif widget.type == "recent-posts" %} - {% set widgetIcon = "list" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %} + {% set widgetIcon = "list" %}{% set widgetIconClass = "w-5 h-5 text-surface-600 dark:text-surface-400" %}{% set widgetBorder = "" %} {% elif widget.type == "categories" or widget.type == "post-categories" %} - {% set widgetIcon = "tag" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %} + {% set widgetIcon = "tag" %}{% set widgetIconClass = "w-5 h-5 text-surface-600 dark:text-surface-400" %}{% set widgetBorder = "" %} {% elif widget.type == "recent-comments" %} - {% set widgetIcon = "chat" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %} + {% set widgetIcon = "chat" %}{% set widgetIconClass = "w-5 h-5 text-surface-600 dark:text-surface-400" %}{% set widgetBorder = "" %} {% elif widget.type == "search" %} - {% set widgetIcon = "search" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %} + {% set widgetIcon = "search" %}{% set widgetIconClass = "w-5 h-5 text-surface-600 dark:text-surface-400" %}{% set widgetBorder = "" %} {% elif widget.type == "webmentions" %} - {% set widgetIcon = "share" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %} + {% set widgetIcon = "share" %}{% set widgetIconClass = "w-5 h-5 text-surface-600 dark:text-surface-400" %}{% set widgetBorder = "" %} {% elif widget.type == "ai-usage" %} {% set widgetIcon = "zap" %}{% set widgetIconClass = "w-5 h-5 text-amber-500" %}{% set widgetBorder = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %} {% elif widget.type == "toc" %} - {% set widgetIcon = "list" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %} + {% set widgetIcon = "list" %}{% set widgetIconClass = "w-5 h-5 text-surface-600 dark:text-surface-400" %}{% set widgetBorder = "" %} {% elif widget.type == "share" %} - {% set widgetIcon = "share" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %} + {% set widgetIcon = "share" %}{% set widgetIconClass = "w-5 h-5 text-surface-600 dark:text-surface-400" %}{% set widgetBorder = "" %} {% else %} {% set widgetIcon = "" %}{% set widgetIconClass = "" %}{% set widgetBorder = "" %} {% endif %} @@ -89,6 +89,7 @@ class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" + aria-hidden="true" > @@ -169,8 +170,8 @@
{% include "components/widgets/author-card-compact.njk" %} @@ -183,8 +184,8 @@
{% include "components/widgets/toc.njk" %} @@ -197,8 +198,8 @@
{% include "components/widgets/post-categories.njk" %} @@ -211,8 +212,8 @@
{% include "components/widgets/recent-posts-blog.njk" %} @@ -225,8 +226,8 @@
{% include "components/widgets/webmentions.njk" %} @@ -239,8 +240,8 @@
{% include "components/widgets/share.njk" %} @@ -254,7 +255,7 @@
{% include "components/widgets/subscribe.njk" %} @@ -267,8 +268,8 @@
{% include "components/widgets/recent-comments.njk" %} diff --git a/_includes/components/comments.njk b/_includes/components/comments.njk index d339185..dacd261 100644 --- a/_includes/components/comments.njk +++ b/_includes/components/comments.njk @@ -21,6 +21,7 @@
{# Status messages #}
-
- +
diff --git a/_includes/components/cv-builder.njk b/_includes/components/cv-builder.njk index 8e62d2d..55c3b52 100644 --- a/_includes/components/cv-builder.njk +++ b/_includes/components/cv-builder.njk @@ -74,7 +74,7 @@ {% endif %} {# Contact details — location, organization, website, email, PGP #} {% if cvLocality or cvCountry or cvOrg or cvUrl or cvEmail or cvKeyUrl %} -
+
{% if cvLocality or cvCountry %} {% if cvLocality %}{{ cvLocality }}{% endif %}{% if cvLocality and cvCountry %}, {% endif %}{% if cvCountry %}{{ cvCountry }}{% endif %} {% endif %} @@ -160,7 +160,7 @@ {# Last Updated #} {% if cv.lastUpdated %} -

+

Last updated:

{% endif %} diff --git a/_includes/components/empty-collection.njk b/_includes/components/empty-collection.njk index 8198853..e0e8995 100644 --- a/_includes/components/empty-collection.njk +++ b/_includes/components/empty-collection.njk @@ -12,7 +12,7 @@

No {{ title | lower }} yet

-

+

This is where your {{ title | lower }} will appear once you start creating content.

{% if typeInfo %} diff --git a/_includes/components/fediverse-modal.njk b/_includes/components/fediverse-modal.njk index 34489ef..8923af3 100644 --- a/_includes/components/fediverse-modal.njk +++ b/_includes/components/fediverse-modal.njk @@ -14,6 +14,7 @@ @click="showModal = false">
{# Panel #} diff --git a/_includes/components/widgets/github-repos.njk b/_includes/components/widgets/github-repos.njk index 18739cc..5dd550c 100644 --- a/_includes/components/widgets/github-repos.njk +++ b/_includes/components/widgets/github-repos.njk @@ -9,31 +9,39 @@ {# Tab buttons — order: Commits, Repos, Featured, PRs #} -
+
@@ -99,7 +99,7 @@ {{ post.templateContent | striptags | truncate(50) or "Note" }} -
diff --git a/_includes/components/widgets/share.njk b/_includes/components/widgets/share.njk index 472f6b3..2ab5684 100644 --- a/_includes/components/widgets/share.njk +++ b/_includes/components/widgets/share.njk @@ -8,7 +8,8 @@ target="_blank" rel="noopener" class="flex-1 inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-[#0085ff]/10 text-[#0085ff] hover:bg-[#0085ff]/20 transition-colors text-sm font-medium" - title="Share on Bluesky"> + title="Share on Bluesky" + aria-label="Share on Bluesky"> @@ -17,7 +18,8 @@ + title="Share on the Fediverse (Shift+click to change instance)" + aria-label="Share on the Fediverse"> diff --git a/_includes/components/widgets/social-activity.njk b/_includes/components/widgets/social-activity.njk index d410324..d2b16c9 100644 --- a/_includes/components/widgets/social-activity.njk +++ b/_includes/components/widgets/social-activity.njk @@ -5,11 +5,13 @@

Social Activity

{# Tab buttons #} -
+
{% if blueskyFeed and blueskyFeed.length %} @@ -52,14 +52,14 @@ replied to mentioned bookmarked - +
{# Empty #} -

No webmentions received yet.

+

No webmentions received yet.

{# Error #}

diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index 45c2d6c..79b6616 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -135,18 +135,19 @@ } })(); +
{{ site.name }} {# Mobile menu button #} -
+
All Posts {% for pt in enabledPostTypes %} {{ pt.label }} @@ -241,13 +242,13 @@
{# Pages section #}
- -
+
{% if blogrollStatus and blogrollStatus.source == "indiekit" %}Blogroll{% endif %} {% if podrollStatus and podrollStatus.source == "indiekit" %}Podroll{% endif %} {% if newsActivity and newsActivity.source == "indiekit" %}News{% endif %} @@ -267,11 +268,11 @@
-
+
{# Skeleton loader — shown until Tailwind stylesheet loads #}