This commit is contained in:
ken 2026-08-06 14:17:49 +08:00
parent 0ec89e42ab
commit 1a64f7c8e5
1 changed files with 29 additions and 7 deletions

View File

@ -11,7 +11,7 @@
data-cycle-timeout="{{timeout}}" data-cycle-timeout="{{timeout}}"
data-cycle-fx="{{ad_fx}}" data-cycle-fx="{{ad_fx}}"
data-pager=".banner_caption_{{subpart-id}}" data-pager=".banner_caption_{{subpart-id}}"
data-cycle-pager-template="<li role='tab' tabindex='0' aria-selected='false' aria-label='{{title}}'><img src='{{src}}' alt='' aria-hidden='true'></li>" data-cycle-pager-template="<li role='tab' tabindex='0' aria-selected='false'><img src='{{src}}' alt='' aria-hidden='true'></li>"
data-pager-active-class="active-slide" data-pager-active-class="active-slide"
data-cycle-youtube="true" data-cycle-youtube="true"
data-cycle-youtube-autostart="false" data-cycle-youtube-autostart="false"
@ -559,16 +559,38 @@ function fixBannerPagerA11y($pager) {
// 外層補 tablist role // 外層補 tablist role
$pager.attr('role', 'tablist').attr('aria-label', '輪播影片選擇'); $pager.attr('role', 'tablist').attr('aria-label', '輪播影片選擇');
// 取得對應 banner 的所有 slide
var $banner = $pager.closest('.w-ad-banner');
var $slides = $banner.find('.w-ad-banner__slide');
// 每個 li 補 role/tabindex/aria-label/aria-selected // 每個 li 補 role/tabindex/aria-label/aria-selected
$pager.find('li').each(function(i) { $pager.find('li').each(function(i) {
var $li = $(this); var $li = $(this);
// 取得影片標題:優先用 template 已帶入的 aria-label其次用 img alt最後 fallback 第N張 // 從對應 slide 取得標題
var existingLabel = ($li.attr('aria-label') || '').trim(); // 優先順序data-title > overlay caption 文字 > iframe title > 第N張影片
var imgAlt = ($li.find('img').attr('alt') || '').trim(); var $slide = $slides.eq(i);
var label = (existingLabel && existingLabel !== '第' + (i + 1) + '張') var slideTitle = '';
? existingLabel
: (imgAlt ? imgAlt : '第' + (i + 1) + '張影片'); // 1. 嘗試從 slide 的 data-title 取得
slideTitle = ($slide.attr('data-title') || '').trim();
// 2. 嘗試從 overlay caption 文字取得
if (!slideTitle) {
slideTitle = ($slide.find('.w-ad-banner__caption_text').text() || '').trim();
}
// 3. 嘗試從 iframe title 取得
if (!slideTitle) {
slideTitle = ($slide.find('iframe').attr('title') || '').trim();
// 排除無意義的 iframe title
if (slideTitle.toLowerCase() === 'youtube' || slideTitle.toLowerCase() === 'video') {
slideTitle = '';
}
}
// 4. fallback
var label = slideTitle || ('第' + (i + 1) + '張影片');
$li $li
.attr('role', 'tab') .attr('role', 'tab')