Changeset d18c60e in Klonkt for src/services

Timestamp:

07/01/2026 06:55:46 PM (2 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

0688b5f

Parents:

43273c9

Message:

feat(fediverse): alt text for images (accessibility → AS2 attachment name)

Media federated to the fediverse now carries a description (AS2 name on the
attachment), which Mastodon shows and screen readers read. The cover gets an alt
field in the editor; inline images keep their own <img alt="…">. Also used as the
cover's on-site alt.

• src/config/database.js — posts.cover_alt column.
• src/services/ActivityPubService.js — buildNote carries alt per media URL (cover_alt + inline <img alt>) and emits it as the attachment name (and on the image fallback).
• src/routes/posts.js — capture/store cover_alt on create/save and pass it to the federation hooks.
• src/services/Scheduler.js — carry cover_alt when a scheduled post goes live.
• src/views/pages/post-edit.ejs — "Alt text (description)" field under the cover URL.
• src/views/pages/post.ejs — the on-page cover <img> uses cover_alt.
• src/services/i18n.js — pedit.f_cover_alt + pedit.cover_alt_placeholder (nl/en/de).
• test/media-alt.test.js — cover alt, inline alt, and no-alt = no name.
• CHANGELOG(.nl/.de).md — "Alt text for images" under Unreleased.

Co-Authored-By: Claude <noreply@…>

Location:

src/services

Files:

• ActivityPubService.js (modified) (3 diffs)
• Scheduler.js (modified) (2 diffs)
• i18n.js (modified) (3 diffs)

src/services/ActivityPubService.js

@@ -262 +262 @@
   // An animated cover federates as the muted loop MP4 (→ a Video attachment): animated WebP is
   // unreliable on Mastodon and its iOS apps; the MP4 plays everywhere. Else the still cover image.
-  if (post.cover_video_url && !noImages) urls.push(abs(post.cover_video_url));
-  else if (post.cover_image_url && !noImages) urls.push(abs(post.cover_image_url));
+  // Each entry carries the media URL + its alt text (federated as the AS2 attachment `name`, for a11y).
+  if (post.cover_video_url && !noImages) urls.push({ url: abs(post.cover_video_url), name: post.cover_alt || '' });
+  else if (post.cover_image_url && !noImages) urls.push({ url: abs(post.cover_image_url), name: post.cover_alt || '' });
   let body = post.content || '';
   // Only federate inline images we can actually serve: absolute http(s) URLs, or our own
   // /media/ uploads. A relative path we don't host (e.g. a stale /images/... ref) would 404
-  // and show up as a black tile in Mastodon's attachment grid.
-  if (!noImages) for (const m of body.matchAll(/<img\b[^>]*\bsrc="([^"]+)"[^>]*>/gi)) {
-    const src = m[1];
-    if (/^https?:\/\//i.test(src) || src.startsWith('/media/')) urls.push(abs(src));
+  // and show up as a black tile in Mastodon's attachment grid. Carry the <img alt="…"> through
+  // as the attachment description.
+  if (!noImages) for (const m of body.matchAll(/<img\b[^>]*>/gi)) {
+    const tag = m[0];
+    const src = (tag.match(/\bsrc="([^"]+)"/i) || [])[1];
+    if (!src || !(/^https?:\/\//i.test(src) || src.startsWith('/media/'))) continue;
+    const alt = (tag.match(/\balt="([^"]*)"/i) || [])[1] || '';
+    urls.push({ url: abs(src), name: alt });
   }
   body = body.replace(/<img\b[^>]*>/gi, '');
@@ -345 +350 @@
   }
   const seen = new Set();
-  const attachment = urls.filter(Boolean)
-    .filter((u) => { if (seen.has(u)) return false; seen.add(u); return true; })
-    .map((u) => { const mt = mediaType(u); // specific AS2 subtype (Image/Audio/Video) over generic Document
+  const attachment = urls.filter((x) => x && x.url)
+    .filter((x) => { if (seen.has(x.url)) return false; seen.add(x.url); return true; })
+    .map((x) => { const mt = mediaType(x.url); // specific AS2 subtype (Image/Audio/Video) over generic Document
       const ty = /^image\//i.test(mt) ? 'Image' : /^video\//i.test(mt) ? 'Video' : /^audio\//i.test(mt) ? 'Audio' : 'Document';
-      return { type: ty, mediaType: mt, url: u }; });
+      const a = { type: ty, mediaType: mt, url: x.url };
+      if (x.name) a.name = String(x.name).slice(0, 1500); // alt text / description (AS2 `name`)
+      return a; });
   for (const a of openAudio) attachment.push(a); // fedi_open tracks → native Audio players
 
@@ -385 +392 @@
   if (post.cover_image_url && noImages) {
     const cov = abs(post.cover_image_url);
-    if (cov) note.image = { type: 'Image', mediaType: mediaType(cov), url: cov };
+    if (cov) { note.image = { type: 'Image', mediaType: mediaType(cov), url: cov }; if (post.cover_alt) note.image.name = String(post.cover_alt).slice(0, 1500); }
   }
   // Experiment (mirrors PeerTube / schema.org `embedUrl`): point at the GATED player page

src/services/Scheduler.js

@@ -15 +15 @@
   try {
     const due = db.prepare(`
-      SELECT p.id, p.site_id, p.slug, p.title, p.content, p.cover_image_url, p.cover_video_url, p.fan_only, p.nsfw, p.content_warning, p.poll_json,
+      SELECT p.id, p.site_id, p.slug, p.title, p.content, p.cover_image_url, p.cover_video_url, p.cover_alt, p.fan_only, p.nsfw, p.content_warning, p.poll_json,
              p.published_at, p.publish_at, p.created_at, u.username
       FROM posts p JOIN users u ON u.id = p.author_id
@@ -38 +38 @@
           ActivityPubService.deliverCreate(site, {
             id: p.id, slug: p.slug, title: p.title || p.slug,
-            content: p.content, cover_image_url: p.cover_image_url || null, cover_video_url: p.cover_video_url || null,
+            content: p.content, cover_image_url: p.cover_image_url || null, cover_video_url: p.cover_video_url || null, cover_alt: p.cover_alt,
             published_at: p.published_at || p.publish_at, created_at: p.created_at, fan_only: p.fan_only, nsfw: p.nsfw, content_warning: p.content_warning, poll_json: p.poll_json,
           }).catch(() => { /* best-effort */ });

src/services/i18n.js

@@ -637 +637 @@
     'pedit.f_cover_url': 'Cover URL',
     'pedit.cover_url_placeholder': '/media/…  of https://…  (of upload met de knop)',
+    'pedit.f_cover_alt': 'Alt-tekst (beschrijving)',
+    'pedit.cover_alt_placeholder': 'Beschrijf de afbeelding voor schermlezers',
     'pedit.cover_upload_btn': 'Upload nieuwe cover',
     'pedit.s_content': 'Content',
@@ -1555 +1557 @@
     'pedit.f_cover_url': 'Cover URL',
     'pedit.cover_url_placeholder': '/media/…  or https://…  (or upload with the button)',
+    'pedit.f_cover_alt': 'Alt text (description)',
+    'pedit.cover_alt_placeholder': 'Describe the image for screen readers',
     'pedit.cover_upload_btn': 'Upload new cover',
     'pedit.s_content': 'Content',
@@ -2473 +2477 @@
     'pedit.f_cover_url': 'Titelbild-URL',
     'pedit.cover_url_placeholder': '/media/…  oder https://…  (oder per Schaltfläche hochladen)',
+    'pedit.f_cover_alt': 'Alt-Text (Beschreibung)',
+    'pedit.cover_alt_placeholder': 'Beschreibe das Bild für Screenreader',
     'pedit.cover_upload_btn': 'Neues Titelbild hochladen',
     'pedit.s_content': 'Inhalt',