diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 02e2a0a..5769c2b 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -730,64 +730,96 @@ } }); //img無障礙 -$(function() { - /** - * 圖片無障礙 AA 級補強 (人工檢測優化版) - * 1. 處理裝飾性圖片:清空 alt 並移除 title。 - * 2. 解決資訊冗餘:若 alt 與 title 內容相同,移除 title,避免重複朗讀。 - * 3. 自動補強缺失 alt:從父層 title 或鄰近標題文字擷取。 - */ - function fixImageAccessibility() { - $('img').each(function() { - var $img = $(this); - var currentAlt = ($img.attr('alt') || '').trim(); - var currentTitle = ($img.attr('title') || '').trim(); + $(function() { + /** + * 圖片無障礙 AA 級補強 (人工檢測優化版) + * 1. 處理裝飾性圖片:清空 alt 並移除 title。 + * 2. 解決資訊冗餘:若 alt 與 title 內容相同,移除 title,避免重複朗讀。 + * 3. 自動補強缺失 alt:從父層 title 或鄰近標題文字擷取。 + */ + function fixImageAccessibility() { + $('img').each(function() { + var $img = $(this); + var currentAlt = ($img.attr('alt') || '').trim(); + var currentTitle = ($img.attr('title') || '').trim(); - // --- 1. 處理「裝飾性圖片」標註 (最高優先權) --- - if (currentAlt === "裝飾圖片" || currentTitle === "裝飾圖片") { - $img.attr('alt', ''); - $img.removeAttr('title'); - return; // 跳過此圖 + // --- 1. 處理「裝飾性圖片」標註 (最高優先權) --- + if (currentAlt === "裝飾圖片" || currentTitle === "裝飾圖片") { + $img.attr('alt', ''); + $img.removeAttr('title'); + return; // 跳過此圖 + } + + // --- 2. 解決【alt 與 title 相同】的問題 (人工檢測重點) --- + // 只要兩者內容一致且不為空,就移除 title,保留 alt + if (currentAlt !== '' && currentAlt === currentTitle) { + $img.removeAttr('title'); + // 重新更新變數值供後續邏輯使用 + currentTitle = ''; + } + + // --- 3. 處理「缺失 alt」或「空的 alt」補強邏輯 --- + if (currentAlt === '') { + let finalAlt = ""; + + // A. 嘗試從父層 (如 ) 的 title 抓取描述 + var parentTitle = $img.parent().attr('title'); + + // B. 嘗試抓取同區域內的標題文字 + var nearbyTitle = $img.closest('a').find('h1, h2, h3, h4, h5, h6').first().text().trim(); + + if (parentTitle && parentTitle.trim() !== '') { + finalAlt = parentTitle.trim(); + } else if (nearbyTitle !== '') { + finalAlt = nearbyTitle; + } + + // 寫入最終 alt 結果 + // 如果 finalAlt 仍為空,則設為 "" (符合 AA 規範,視為裝飾圖) + $img.attr('alt', finalAlt); + + // --- 4. 二次清理:補強後的 alt 如果又跟原本的 title 一樣,則移除 title --- + if (currentTitle !== '' && currentTitle === finalAlt) { + $img.removeAttr('title'); + } + } + }); } - // --- 2. 解決【alt 與 title 相同】的問題 (人工檢測重點) --- - // 只要兩者內容一致且不為空,就移除 title,保留 alt - if (currentAlt !== '' && currentAlt === currentTitle) { - $img.removeAttr('title'); - // 重新更新變數值供後續邏輯使用 - currentTitle = ''; - } - - // --- 3. 處理「缺失 alt」或「空的 alt」補強邏輯 --- - if (currentAlt === '') { - let finalAlt = ""; - - // A. 嘗試從父層 (如 ) 的 title 抓取描述 - var parentTitle = $img.parent().attr('title'); - - // B. 嘗試抓取同區域內的標題文字 - var nearbyTitle = $img.closest('a').find('h1, h2, h3, h4, h5, h6').first().text().trim(); - - if (parentTitle && parentTitle.trim() !== '') { - finalAlt = parentTitle.trim(); - } else if (nearbyTitle !== '') { - finalAlt = nearbyTitle; - } - - // 寫入最終 alt 結果 - // 如果 finalAlt 仍為空,則設為 "" (符合 AA 規範,視為裝飾圖) - $img.attr('alt', finalAlt); - - // --- 4. 二次清理:補強後的 alt 如果又跟原本的 title 一樣,則移除 title --- - if (currentTitle !== '' && currentTitle === finalAlt) { - $img.removeAttr('title'); - } - } + // 延遲執行確保圖片與動態內容已渲染 + setTimeout(fixImageAccessibility, 500); }); - } +function removeEmptyTitles() { + // 定義所有需要檢查的 class + const targetClasses = [ + '.w-annc__widget-title', + '.widget-title', + '.show-title', + '.event-annc-title', + '.annc-title', + '.sitemenu-title', + '.widget-link__widget-title' + ]; - // 延遲執行確保圖片與動態內容已渲染 - setTimeout(fixImageAccessibility, 500); + // 將陣列轉換為 jQuery 選擇器字串 + const selector = targetClasses.join(', '); + + $(selector).each(function() { + // 使用 $.trim 移除空格、換行符號 + // 然後檢查裡面是否完全沒有文字 + const textContent = $.trim($(this).text()); + + if (textContent === "") { + // 如果沒有文字,則將整個元素刪除 + $(this).remove(); + console.log('已移除空標題元素:', this.className); + } + }); +} + +// 執行 function +$(document).ready(function() { + removeEmptyTitles(); }); $(".w-annc__img-wrap a").each(function () { var $this = $(this);