ken
/
nfu-it-new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

'js'

This commit is contained in:
ken 2026-04-10 18:51:53 +08:00
parent 27f1981422
commit 2d9352f79f
1 changed files with 85 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
assets/javascripts/app.js
View File

@ -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. 嘗試從父層 (如 <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. 嘗試從父層 (如 <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);