@surea11y/core 1.6.0 → 1.8.0

package/src/checks/manual/mouse-only-event-handlers-manual.js

@@ -20,9 +20,14 @@
  *   event equivalents), or `onfocus`/`onblur` (the standard substitute
  *   for hover-triggered behavior: focus/blur are the keyboard-
  *   navigable analog to mouseover/mouseout, per WCAG technique G90).
- *   Otherwise the element's mouse-driven behavior (a hover tooltip, a
- *   custom dropdown, a drag interaction) has no way to be triggered by a
- *   keyboard-only user.
+ *   A handler is reachable only if keyboard events can reach it:
+ *   `onfocus`/`onblur` when the element itself can take focus, and a key
+ *   handler when the element or one of its descendants can (key events
+ *   bubble, focus events do not). Otherwise the element's mouse-driven
+ *   behavior (a hover tooltip, a custom dropdown, a drag interaction) has
+ *   no way to be triggered by a keyboard-only user, and it is flagged with
+ *   a reason saying whether the keyboard handlers are missing or cannot
+ *   run.
  * @implementation-notes
  * - Authored as `type: 'manual'` (cantTell-capped, never fail), not
  *   `automatic`: this can only see inline `on*="..."` HTML attributes.
@@ -93,6 +98,35 @@ function runInPage(ctx) {
     return (v == null ? '' : String(v)).trim();
   }
 
+  const FOCUS_ATTRS = ['onfocus', 'onblur'];
+  const FOCUSABLE_CANDIDATES =
+    'a[href], area[href], button, input, select, textarea, summary, iframe, [tabindex], [contenteditable]';
+
+  function canTakeFocus(el) {
+    if (!helpers.getFocusableInfo) return true;
+    try {
+      const info = helpers.getFocusableInfo(el, ctx);
+      return !!(info && info.focusable);
+    } catch {
+      return true;
+    }
+  }
+
+  // Focus and blur fire only on the element that takes focus. Key events are
+  // dispatched to the focused element and bubble, so a key handler also runs
+  // for a focusable descendant.
+  function keyboardCanReach(el, keyboardAttrs) {
+    if (canTakeFocus(el)) return true;
+    if (keyboardAttrs.every((a) => FOCUS_ATTRS.indexOf(a) !== -1)) return false;
+    let descendants;
+    try {
+      descendants = Array.from(el.querySelectorAll(FOCUSABLE_CANDIDATES));
+    } catch {
+      return true;
+    }
+    return descendants.some((d) => canTakeFocus(d));
+  }
+
   const selector = MOUSE_ONLY_ATTRS.map((a) => `[${a}]`).join(', ');
   const nodes = helpers.queryAllSmart
     ? helpers.queryAllSmart(selector)
@@ -114,13 +148,40 @@ function runInPage(ctx) {
 
     applicableCount += 1;
 
-    const hasKeyboardEquiv = KEYBOARD_EQUIV_ATTRS.some((a) => trim(el.getAttribute(a)));
-    if (hasKeyboardEquiv) continue;
+    const presentKeyboardAttrs = KEYBOARD_EQUIV_ATTRS.filter((a) => trim(el.getAttribute(a)));
+    if (presentKeyboardAttrs.length && keyboardCanReach(el, presentKeyboardAttrs)) continue;
+    const unreachable = presentKeyboardAttrs.length > 0;
 
     const eligInfo = helpers.getEligibilityInfo
       ? helpers.getEligibilityInfo(el, ctx, { targetSet: 'acc' })
       : null;
 
+    if (unreachable) {
+      occurrences.push(
+        helpers.reportOccurrence(el, {
+          summary: `This element has ${presentMouseAttrs.join(', ')} and ${presentKeyboardAttrs.join(', ')}, but it cannot take keyboard focus, so the keyboard handlers never run.`,
+          hint: 'Make the element focusable (use a native control, or add tabindex="0"), or move the handlers to a focusable element, so this functionality is also reachable by keyboard.',
+          i18n: {
+            summaryKey: 'mouseOnlyEventHandlers_summary_cantTell_notFocusable',
+            hintKey: 'mouseOnlyEventHandlers_hint_cantTell_notFocusable',
+            params: {
+              attrs: presentMouseAttrs.join(', '),
+              keyboardAttrs: presentKeyboardAttrs.join(', ')
+            }
+          },
+          data: {
+            details: {
+              reasonCode: 'MOUSE_ONLY_HANDLER_KEYBOARD_EQUIVALENT_NOT_FOCUSABLE',
+              mouseAttrs: presentMouseAttrs,
+              keyboardAttrs: presentKeyboardAttrs
+            },
+            visibilityFilter: eligInfo || { targetSet: 'acc', accEligible: null, reasons: [] }
+          }
+        })
+      );
+      continue;
+    }
+
     occurrences.push(
       helpers.reportOccurrence(el, {
         summary: `This element has ${presentMouseAttrs.join(', ')} but no keyboard-reachable equivalent handler.`,

package/src/checks/manual/no-autoplay-audio-manual.js

@@ -5,11 +5,16 @@
 /**
  * @check no-autoplay-audio
  * @atomic true
- * @summary Autoplaying, unmuted <audio>/<video> should provide a pause/stop or volume-control mechanism
+ * @summary Sound that plays automatically should have a pause/stop or volume-control mechanism
  * @standard WCAG 2.2
  * @sc 1.4.2
  * @applicability
  *   Any <audio autoplay> or <video autoplay> element that is not `muted`.
+ *   Also any <bgsound>, and any <embed> or <object> that loads sound or
+ *   video, or a plugin (Flash) that may play it: its `type` is audio/*,
+ *   video/* or a plugin type, or its `src`/`data` ends in a sound or video
+ *   file extension. An <embed> or <object> with `autostart` or `autoplay`
+ *   set to false (attribute or <param>) is left out.
  * @expectation
  *   SC 1.4.2 only applies when audio plays automatically for MORE than 3
  *   seconds; clip duration is not knowable from static markup (jsdom does
@@ -27,13 +32,22 @@
  * - Elements with `muted` present are not flagged: muted playback is not
  *   audible, so the SC's condition ("plays automatically... audio")
  *   does not apply.
+ * - <embed>, <object> and <bgsound> have no `controls` or `muted` to
+ *   read, so each one found is asked about. <bgsound> is obsolete
+ *   and current browsers ignore it, but it still plays in older ones.
+ * - Sound started by a script cannot be detected.
  * - Custom (JS-built) controls that don't use the native `controls`
  *   attribute cannot be detected statically. That's a documented limitation,
  *   same class as `iframe-focusable-content`'s `contentDocument` gap.
  * - Not gated on `isAccTreeEligible`: unlike most rules, a `display:none`
  *   or `aria-hidden` audio/video element still plays audible sound in a
  *   real browser, so visual/AT-tree eligibility is not a relevant filter
- *   here.
+ *   here. For the same reason the rule does not use queryAllSmart, whose
+ *   hidden-content filter would drop such elements: an <audio> without
+ *   `controls` is always one, since browsers hide it with their own
+ *   stylesheet (`display: none`). It queries the DOM directly (and open
+ *   shadow roots, unless includeShadowDom is false), honouring only the
+ *   scan scope and excludeSelectors.
  */
 
 const id = 'no-autoplay-audio';
@@ -41,7 +55,7 @@ const id = 'no-autoplay-audio';
 const meta = {
   title: 'Autoplaying audio should provide a pause/stop or volume-control mechanism',
   description:
-    'Flags <audio>/<video> elements that autoplay unmuted with no native controls attribute, for manual review against the 3-second exemption in WCAG 1.4.2.',
+    'Flags <audio>/<video> elements that autoplay unmuted with no native controls attribute, and <embed>, <object> or <bgsound> elements that may play sound, for manual review against the 3-second exemption in WCAG 1.4.2.',
   i18n: {
     titleKey: 'noAutoplayAudio_title',
     descriptionKey: 'noAutoplayAudio_description'
@@ -68,9 +82,18 @@ const meta = {
 function runInPage(ctx) {
   const { helpers, rule } = ctx;
 
-  const nodes = helpers.queryAllSmart
-    ? helpers.queryAllSmart('audio[autoplay], video[autoplay]')
-    : helpers.queryAll('audio[autoplay], video[autoplay]');
+  // Every match in scope, hidden or not (see @implementation-notes).
+  function queryAllUnfiltered(sel) {
+    const engineOptions = ctx.engineOptions || {};
+    const deep =
+      engineOptions.includeShadowDom !== false && typeof helpers.queryAllDeep === 'function';
+    const list = Array.from((deep ? helpers.queryAllDeep(sel) : helpers.queryAll(sel)) || []);
+    return typeof helpers.isExcluded === 'function'
+      ? list.filter((el) => !helpers.isExcluded(el))
+      : list;
+  }
+
+  const nodes = queryAllUnfiltered('audio[autoplay], video[autoplay]');
 
   const occurrences = [];
   let applicableCount = 0;
@@ -110,6 +133,70 @@ function runInPage(ctx) {
     }
   }
 
+  // <embed>, <object> and <bgsound>: no controls or muted attribute to read.
+  const MEDIA_EXT =
+    /\.(mp3|wav|wave|ogg|oga|opus|m4a|aac|flac|wma|mid|midi|mp4|m4v|webm|ogv|mov|avi|wmv|mpg|mpeg|swf)(?:[?#]|$)/i;
+  const PLUGIN_TYPES = /^(application\/x-shockwave-flash|application\/futuresplash)$/i;
+
+  function attr(el, name) {
+    return String(el.getAttribute(name) || '').trim();
+  }
+
+  function mayPlaySound(el, urlAttr) {
+    const type = attr(el, 'type').toLowerCase().split(';')[0].trim();
+    if (type) return /^(audio|video)\//.test(type) || PLUGIN_TYPES.test(type);
+    return MEDIA_EXT.test(attr(el, urlAttr));
+  }
+
+  function startsDisabled(el) {
+    const isOff = (v) => /^(false|0|no)$/i.test(String(v || '').trim());
+    if (isOff(el.getAttribute('autostart')) || isOff(el.getAttribute('autoplay'))) return true;
+    return Array.from(el.children || []).some((c) => {
+      if ((c.tagName || '').toLowerCase() !== 'param') return false;
+      const name = attr(c, 'name').toLowerCase();
+      return (
+        (name === 'autostart' || name === 'autoplay' || name === 'play') &&
+        isOff(c.getAttribute('value'))
+      );
+    });
+  }
+
+  // The fallback inside an <object> already asked about is the same sound.
+  const askedObjects = [];
+
+  for (const el of queryAllUnfiltered('embed, object, bgsound')) {
+    if (!el || !el.getAttribute) continue;
+    if (askedObjects.some((o) => o !== el && o.contains(el))) continue;
+    const tag = (el.tagName || '').toLowerCase();
+    if (tag === 'embed' && !mayPlaySound(el, 'src')) continue;
+    if (tag === 'object' && !mayPlaySound(el, 'data')) continue;
+    if (tag !== 'bgsound' && startsDisabled(el)) continue;
+
+    applicableCount += 1;
+    if (tag === 'object') askedObjects.push(el);
+
+    const baseOccurrence = {
+      selector: helpers.buildSelector ? helpers.buildSelector(el) : 'html',
+      html: helpers.getOuterHtmlSnippet ? helpers.getOuterHtmlSnippet(el) : el.outerHTML || '',
+      summary: 'This element may play sound as soon as the page loads.',
+      hint: 'Check whether it plays sound on its own. If the sound lasts more than 3 seconds, users need a way to pause or stop it, or to change its volume without changing the system volume.',
+      i18n: {
+        summaryKey: 'noAutoplayAudio_summary_cantTell_embedded',
+        hintKey: 'noAutoplayAudio_hint_cantTell_embedded',
+        params: { element: tag }
+      },
+      data: {
+        details: { reasonCode: 'EMBEDDED_SOUND_SOURCE', mediaTag: tag }
+      }
+    };
+
+    if (helpers && typeof helpers.reportOccurrence === 'function') {
+      occurrences.push(helpers.reportOccurrence(el, baseOccurrence));
+    } else {
+      occurrences.push(baseOccurrence);
+    }
+  }
+
   if (applicableCount === 0) {
     return { ruleId: rule.ruleId, outcome: 'notApplicable', severity: 'minor', occurrences: [] };
   }

package/src/checks/manual/p-as-heading-manual.js

@@ -5,14 +5,15 @@
 /**
  * @check p-as-heading
  * @atomic true
- * @summary A <p> styled to look like a heading should probably be a real heading
+ * @summary Text styled to look like a heading should probably be a real heading
  * @standard WCAG 2.2
  * @sc 1.3.1
  * @applicability
- *   `<p>` elements with short (<=120 char), non-empty trimmed text
- *   content that is entirely bold (the `<p>`'s own computed
- *   `font-weight` >= 700, OR its entire text is wrapped in a single
- *   `<strong>`/`<b>` child) and rendered at >=18px.
+ *   `<p>` elements, and `<div>` elements that hold only text and inline
+ *   markup, with short (<=120 char), non-empty trimmed text in which every
+ *   piece of text is bold (computed `font-weight` >= 700, however it got
+ *   there: on the element itself, a `<strong>`/`<b>` or a styled `<span>`)
+ *   and rendered at >=18px.
  * @expectation
  *   Text styled to visually read as a heading (bold, larger-than-body
  *   size, short) should be marked up with a real heading element
@@ -30,14 +31,22 @@
  *   surrounding text (unlike `link-in-text-block`); it's simpler on
  *   purpose, since "looks like a heading" is closer to an absolute
  *   judgment than a relative-contrast one.
+ * - Weight and size are read from the element that holds each piece of
+ *   text, so `<p><span style="font-weight:bold">` counts and a `<p>` with
+ *   one normal-weight word does not.
+ * - A `<div>` is only considered when it has no block, list, table, form
+ *   control or image inside it, so only the innermost block is asked
+ *   about. A `<div>` with a role, and text inside a heading, button,
+ *   label, legend, caption, table header or `<summary>`, are left out:
+ *   that text already has a role of its own.
  */
 
 const id = 'p-as-heading';
 
 const meta = {
-  title: 'A <p> styled to look like a heading should probably be a real heading',
+  title: 'Text styled to look like a heading should probably be a real heading',
   description:
-    'Flags short <p> elements whose entire text is bold and rendered at >=18px, for manual review of whether a real heading element should be used instead.',
+    'Flags short <p> and <div> elements whose text is all bold and rendered at >=18px, for manual review of whether a real heading element should be used instead.',
   i18n: {
     titleKey: 'pAsHeading_title',
     descriptionKey: 'pAsHeading_description'
@@ -93,65 +102,101 @@ function runInPage(ctx) {
     return Number.isFinite(n) && n >= 700;
   }
 
-  function isEntirelyBold(p, text) {
-    const cs = safeComputedStyle(p);
-    if (isBoldWeight(cs)) return true;
-
-    // A single <strong>/<b> child that wraps the whole text also counts.
-    const children = Array.from(p.children || []);
-    const boldWrap = children.find((c) => {
-      const tag = (c.tagName || '').toLowerCase();
-      return tag === 'strong' || tag === 'b';
-    });
-    if (boldWrap && children.length === 1) {
-      const wrapText = trim(boldWrap.textContent || '');
-      if (wrapText && wrapText === text) return true;
+  // Elements whose text already has a role of its own.
+  const OWN_ROLE_ANCESTORS =
+    'h1, h2, h3, h4, h5, h6, [role="heading"], button, [role="button"], label, legend, caption, th, [role="columnheader"], [role="rowheader"], summary';
+
+  // Anything but text and inline markup makes a <div> a container, not a
+  // passage of text.
+  const NOT_INLINE =
+    'address, article, aside, blockquote, details, dialog, div, dl, fieldset, figure, figcaption, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, li, main, nav, ol, p, pre, section, table, ul, img, svg, picture, video, audio, canvas, iframe, object, embed, input, select, textarea, button';
+
+  function textPieces(el) {
+    const pieces = [];
+    const doc = el.ownerDocument;
+    const walker = doc.createTreeWalker(el, 4 /* NodeFilter.SHOW_TEXT */);
+    let node = walker.nextNode();
+    while (node) {
+      if (trim(node.nodeValue) && node.parentElement) pieces.push(node.parentElement);
+      node = walker.nextNode();
     }
-    return false;
+    return pieces;
   }
 
-  function getFontSizePx(p) {
-    const cs = safeComputedStyle(p);
-    if (!cs) return 0;
-    const px = Number.parseFloat(cs.fontSize);
-    return Number.isFinite(px) ? px : 0;
+  // Every piece of text is bold, and the smallest is the size reported.
+  function boldSize(el) {
+    let minPx = Infinity;
+    for (const holder of textPieces(el)) {
+      const cs = safeComputedStyle(holder);
+      if (!isBoldWeight(cs)) return 0;
+      const px = Number.parseFloat(cs.fontSize);
+      if (!Number.isFinite(px)) return 0;
+      minPx = Math.min(minPx, px);
+    }
+    return Number.isFinite(minPx) ? minPx : 0;
+  }
+
+  function isCandidate(el) {
+    const tag = (el.tagName || '').toLowerCase();
+    if (el.closest && el.closest(OWN_ROLE_ANCESTORS)) return false;
+    if (tag === 'p') return true;
+    if (tag !== 'div') return false;
+    if (trim(el.getAttribute('role'))) return false;
+    return !el.querySelector(NOT_INLINE);
   }
 
-  const nodes = helpers.queryAllSmart ? helpers.queryAllSmart('p') : helpers.queryAll('p');
+  const nodes = helpers.queryAllSmart
+    ? helpers.queryAllSmart('p, div')
+    : helpers.queryAll('p, div');
 
   const occurrences = [];
   let applicableCount = 0;
 
   for (const el of nodes) {
     if (!el || !el.getAttribute) continue;
+    if (!isCandidate(el)) continue;
 
     const text = trim(el.textContent || '');
     if (!text || text.length > MAX_HEADING_LIKE_CHARS) continue;
 
     applicableCount += 1;
 
-    if (!isEntirelyBold(el, text)) continue;
-
-    const fontSizePx = getFontSizePx(el);
+    const fontSizePx = boldSize(el);
     if (fontSizePx < MIN_FONT_SIZE_PX) continue;
 
+    const isParagraph = (el.tagName || '').toLowerCase() === 'p';
     const stableSelector = helpers.buildSelector ? helpers.buildSelector(el) : 'html';
     const html = helpers.getOuterHtmlSnippet ? helpers.getOuterHtmlSnippet(el) : el.outerHTML || '';
 
-    const baseOccurrence = {
-      selector: stableSelector,
-      html,
-      summary: 'This paragraph is entirely bold and rendered at a heading-like size.',
-      hint: 'If this text introduces a new section, use a real heading element (<h1>-<h6> or role="heading") instead of styling a paragraph to look like one.',
-      i18n: {
-        summaryKey: 'pAsHeading_summary_cantTell',
-        hintKey: 'pAsHeading_hint_cantTell',
-        params: { fontSizePx: String(fontSizePx) }
-      },
-      data: {
-        details: { reasonCode: 'BOLD_LARGE_PARAGRAPH', fontSizePx }
-      }
-    };
+    const baseOccurrence = isParagraph
+      ? {
+          selector: stableSelector,
+          html,
+          summary: 'This paragraph is entirely bold and rendered at a heading-like size.',
+          hint: 'If this text introduces a new section, use a real heading element (<h1>-<h6> or role="heading") instead of styling a paragraph to look like one.',
+          i18n: {
+            summaryKey: 'pAsHeading_summary_cantTell',
+            hintKey: 'pAsHeading_hint_cantTell',
+            params: { fontSizePx: String(fontSizePx) }
+          },
+          data: {
+            details: { reasonCode: 'BOLD_LARGE_PARAGRAPH', fontSizePx }
+          }
+        }
+      : {
+          selector: stableSelector,
+          html,
+          summary: 'This block of text is entirely bold and rendered at a heading-like size.',
+          hint: 'If this text introduces a new section, use a real heading element (<h1>-<h6> or role="heading") instead of styling a <div> to look like one.',
+          i18n: {
+            summaryKey: 'pAsHeading_summary_cantTell_div',
+            hintKey: 'pAsHeading_hint_cantTell_div',
+            params: { fontSizePx: String(fontSizePx) }
+          },
+          data: {
+            details: { reasonCode: 'BOLD_LARGE_DIV', fontSizePx }
+          }
+        };
 
     if (helpers && typeof helpers.reportOccurrence === 'function') {
       occurrences.push(helpers.reportOccurrence(el, baseOccurrence));

package/src/checks/manual/page-title-patterns-manual.js

@@ -10,7 +10,9 @@
  * @sc 2.4.2
  * @applicability
  *   Applies to a run over a whole document whose <title> resolves to
- *   non-empty text; a missing or empty title is page-title-present's
+ *   non-empty text. The title element is the first HTML <title> anywhere in
+ *   the document, as for document.title, so one the parser left in <body>
+ *   counts; a missing or empty title is page-title-present's
  *   failure, not a pattern to review. A run narrowed by contextSelector or
  *   by engineOptions.fragment is notApplicable, as is a title matching none
  *   of the patterns below.
@@ -78,7 +80,24 @@ function runInPage(ctx) {
   const occurrences = [];
   let applicableCount = 1;
 
-  const titleEl = document.querySelector('head > title');
+  // The document's title element, found as page-title-present finds it: the
+  // first HTML-namespace <title> anywhere in the document, since a <title>
+  // the parser leaves in <body> is still what document.title reads. An inline
+  // <svg><title> is not the page title.
+  const HTML_NS = 'http://www.w3.org/1999/xhtml';
+  let titleEl = null;
+  for (const t of Array.from(document.getElementsByTagName('title'))) {
+    if (!t.namespaceURI || t.namespaceURI === HTML_NS) {
+      titleEl = t;
+      break;
+    }
+  }
+  // Kept as the stable selector for the usual place; a <title> elsewhere gets
+  // the selector the engine builds for the node.
+  const titleSelector =
+    titleEl && titleEl.parentElement && titleEl.parentElement.localName === 'head'
+      ? 'head > title'
+      : undefined;
   const rawTitle = document.title || '';
   const titleText = rawTitle.replace(/\s+/g, ' ').trim();
   const titleLc = titleText.toLowerCase();
@@ -176,7 +195,7 @@ function runInPage(ctx) {
             };
 
         const occBase = {
-          selector: 'head > title',
+          selector: titleSelector,
           html: '',
           summary:
             'The set of page titles may not be descriptive enough to distinguish pages by topic or purpose.',
@@ -244,18 +263,68 @@ function runInPage(ctx) {
     return { ruleId: rule.ruleId, outcome: 'notApplicable', severity: 'minor', occurrences: [] };
   }
 
-  const GENERIC_TITLES = new Set(['home', 'homepage', 'welcome', 'untitled', 'page', 'document']);
+  const GENERIC_TITLES = {
+    en: new Set(['home', 'homepage', 'welcome', 'untitled', 'page', 'document']),
+    de: new Set(['startseite', 'willkommen', 'unbenannt', 'ohne titel', 'seite', 'dokument']),
+    es: new Set([
+      'inicio',
+      'página de inicio',
+      'bienvenido',
+      'bienvenida',
+      'sin título',
+      'página',
+      'documento'
+    ]),
+    fr: new Set(['accueil', "page d'accueil", 'bienvenue', 'sans titre', 'page', 'document']),
+    ja: new Set(['ホーム', 'トップページ', 'トップ', 'ようこそ', '無題', 'ページ', 'ドキュメント'])
+  };
+
+  // The page-specific half of "Brand | Home" in languages other than
+  // English. English keeps its word-boundary patterns below.
+  const TEMPLATE_TOKENS = {
+    de: ['startseite', 'willkommen'],
+    es: ['inicio', 'página de inicio', 'bienvenido', 'bienvenida'],
+    fr: ['accueil', "page d'accueil", 'bienvenue'],
+    ja: ['ホーム', 'トップページ', 'トップ', 'ようこそ']
+  };
+
+  const htmlEl = document.documentElement;
+  const pageLang =
+    htmlEl && htmlEl.getAttribute && htmlEl.getAttribute('lang')
+      ? htmlEl.getAttribute('lang').trim().split('-')[0].toLowerCase()
+      : '';
+  const titleNorm = titleLc.normalize('NFKC').replace(/[\u2018\u2019]/g, "'");
+
+  // Chinese, Japanese and Korean characters each carry roughly a word, so
+  // they count double: 「お問い合わせ」 is a full title in six characters.
+  function effectiveLength(s) {
+    let n = 0;
+    for (const ch of s)
+      n += /[\u3040-\u30ff\u3400-\u9fff\uac00-\ud7af\uf900-\ufaff]/.test(ch) ? 2 : 1;
+    return n;
+  }
 
   // Conservative signals:
   // - very short title (likely non-descriptive)
   // - title is one of a small set of generic titles
-  const isVeryShort = titleText.length > 0 && titleText.length < 8;
-  const isGeneric = GENERIC_TITLES.has(titleLc);
+  const isVeryShort = titleText.length > 0 && effectiveLength(titleText) < 8;
+  const isGeneric =
+    GENERIC_TITLES.en.has(titleNorm) ||
+    !!(pageLang && GENERIC_TITLES[pageLang] && GENERIC_TITLES[pageLang].has(titleNorm));
+
+  function isLocalTemplate(title) {
+    const tokens = TEMPLATE_TOKENS[pageLang];
+    if (!tokens) return false;
+    const parts = title.split(/\s*(?:\||-|—|:)\s*/).filter(Boolean);
+    if (parts.length < 2) return false;
+    return tokens.includes(parts[0]) || tokens.includes(parts[parts.length - 1]);
+  }
 
   // Template-like: "Brand | Home" or "Home - Brand" where the page-specific part is a generic token.
   const templateLike =
     /\b(home|homepage|welcome)\b\s*(\||-|—|:)\s*.+/i.test(titleText) ||
-    /.+\s*(\||-|—|:)\s*\b(home|homepage|welcome)\b/i.test(titleText);
+    /.+\s*(\||-|—|:)\s*\b(home|homepage|welcome)\b/i.test(titleText) ||
+    isLocalTemplate(titleNorm);
 
   if (isGeneric || isVeryShort || templateLike) {
     const reasonCode = isGeneric
@@ -271,7 +340,7 @@ function runInPage(ctx) {
           ? 'pageTitlePatterns_summary_cantTell_veryShort'
           : 'pageTitlePatterns_summary_cantTell_templateLike';
     const occBase = {
-      selector: 'head > title',
+      selector: titleSelector,
       html: '',
       summary:
         'The page title may not be descriptive enough to identify the page topic or purpose.',