up

assets/javascripts/app.js

@@ -3574,8 +3574,8 @@ $(function() {
   //   }
   // });
 
-  //banner英文
+//banner英文
-  $(function() {
+$(function() {
   function fixBannerA11yByLang() {
     setTimeout(function() {
       var pageLang = ($('html').attr('lang') || 'zh-Hant').toLowerCase();
@@ -3594,64 +3594,79 @@ $(function() {
       $('.w-ba-banner').each(function() {
         var $banner = $(this);
 
-                // ✅ 播放控制選項 radiogroup label
         $banner.find('.controlplay').attr('aria-label', i18n.playControls);
 
-                // ✅ 繼續播放按鈕
         $banner.find('.resume-slide').attr({
           'aria-label': i18n.resume,
           'title': i18n.resume
         });
         $banner.find('.resume-slide p').text(i18n.resume);
 
-                // ✅ 暫停播放按鈕
         $banner.find('.pause-slide').attr({
           'aria-label': i18n.pause,
           'title': i18n.pause
         });
         $banner.find('.pause-slide p').text(i18n.pause);
 
-                // ✅ 上一張按鈕
         $banner.find('.prev-button').attr('aria-label', i18n.prev);
-
-                // ✅ 下一張按鈕
         $banner.find('.next-button').attr('aria-label', i18n.next);
 
-                // ✅ Pager 按鈕
         var $slides = $banner.find('.w-ba-banner__slide');
         $banner.find('.banner-pager button').each(function(index) {
           var slideTitle = $slides.eq(index).data('cycle-title') || '';
           var ariaLabel = isEn
             ? i18n.slide + ' ' + (index + 1) + (slideTitle ? ' ' + slideTitle : '')
             : i18n.slide + (index + 1) + i18n.slideUnit + (slideTitle ? ' ' + slideTitle : '');
-                    $(this).attr({
+          $(this).attr({ 'aria-label': ariaLabel, 'title': ariaLabel });
-                        'aria-label': ariaLabel,
-                        'title': ariaLabel
-                    });
         });
       });
 
-            // ✅ Cycle2 初始化後也重新處理 Pager（因為 pager 是動態產生的）
+      // ✅ Cycle2 初始化後重新處理 Pager + 切換後播報當前圖片資訊
-            $('.w-ba-banner .cycle-slideshow').on('cycle-post-initialize cycle-after', function() {
+      $('.w-ba-banner .cycle-slideshow').on('cycle-post-initialize cycle-after', function(event) {
-                var $banner = $(this).closest('.w-ba-banner');
+        var $slideshow = $(this);
+        var $banner    = $slideshow.closest('.w-ba-banner');
         var $slides    = $banner.find('.w-ba-banner__slide');
+
+        // 更新 Pager aria-label
         $banner.find('.banner-pager button').each(function(index) {
           var slideTitle = $slides.eq(index).data('cycle-title') || '';
           var ariaLabel = isEn
             ? i18n.slide + ' ' + (index + 1) + (slideTitle ? ' ' + slideTitle : '')
             : i18n.slide + (index + 1) + i18n.slideUnit + (slideTitle ? ' ' + slideTitle : '');
-                    $(this).attr({
+          $(this).attr({ 'aria-label': ariaLabel, 'title': ariaLabel });
-                        'aria-label': ariaLabel,
-                        'title': ariaLabel
-                    });
         });
+
+        // ✅ 問題1：cycle-after 時用 live region 播報當前圖片資訊
+        if (event.type === 'cycle-after') {
+          var opts = $slideshow.data('cycle.opts');
+          if (opts) {
+            var currentIndex = opts.currSlide;
+            var $currentSlide = $slides.eq(currentIndex);
+            var currentTitle  = $currentSlide.data('cycle-title') || '';
+            var currentAlt    = $currentSlide.find('img').attr('alt') || '';
+            var announceText  = isEn
+              ? 'Slide ' + (currentIndex + 1) + ' of ' + $slides.length + (currentTitle ? ': ' + currentTitle : (currentAlt ? ': ' + currentAlt : ''))
+              : '第 ' + (currentIndex + 1) + ' 張，共 ' + $slides.length + ' 張' + (currentTitle ? '：' + currentTitle : (currentAlt ? '：' + currentAlt : ''));
+
+            var $announcer = $banner.find('.banner-announcer');
+            if ($announcer.length === 0) {
+              $announcer = $('<div class="banner-announcer" aria-live="polite" aria-atomic="true" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"></div>');
+              $banner.append($announcer);
+            }
+            $announcer.text('');
+            setTimeout(function() {
+              $announcer.text(announceText);
+            }, 100);
+          }
+        }
       });
 
     }, 800);
   }
 
   fixBannerA11yByLang();
-  });
+});
+
 //bannercontrolplay
 $(function() {
   function fixBannerPlayPauseA11y() {
@@ -3667,11 +3682,10 @@ $(function() {
       $('.w-ba-banner').each(function() {
         var $banner     = $(this);
         var $controlplay = $banner.find('.controlplay');
+        var $slideshow  = $banner.find('.cycle-slideshow');
 
-                // ✅ 把 radiogroup 改為一般容器
         $controlplay.removeAttr('role aria-label');
 
-                // ✅ 繼續播放按鈕
         var $resume = $banner.find('.resume-slide');
         $resume
           .attr('role', 'button')
@@ -3680,7 +3694,6 @@ $(function() {
           .attr('title', i18n.resume)
           .removeAttr('aria-checked aria-live');
 
-                // ✅ 暫停播放按鈕
         var $pause = $banner.find('.pause-slide');
         $pause
           .attr('role', 'button')
@@ -3689,7 +3702,6 @@ $(function() {
           .attr('title', i18n.pause)
           .removeAttr('aria-checked aria-live');
 
-                // ✅ 點擊後同步 aria-pressed
         $resume.off('click.bannerA11y').on('click.bannerA11y', function() {
           $resume.attr('aria-pressed', 'true');
           $pause.attr('aria-pressed', 'false');
@@ -3699,6 +3711,30 @@ $(function() {
           $pause.attr('aria-pressed', 'true');
           $resume.attr('aria-pressed', 'false');
         });
+
+        // ✅ 問題2：focus 時動態讀出當前播放狀態
+        $resume.off('focus.bannerStatus').on('focus.bannerStatus', function() {
+          var isPlaying = !$slideshow.hasClass('cycle-paused');
+          var statusText = isEn
+            ? 'Play button. Current status: ' + (isPlaying ? 'Playing' : 'Paused')
+            : '繼續播放按鈕。目前狀態：' + (isPlaying ? '播放中' : '已暫停');
+          $(this).attr('aria-label', statusText);
+        });
+        $resume.off('blur.bannerStatus').on('blur.bannerStatus', function() {
+          $(this).attr('aria-label', i18n.resume);
+        });
+
+        $pause.off('focus.bannerStatus').on('focus.bannerStatus', function() {
+          var isPlaying = !$slideshow.hasClass('cycle-paused');
+          var statusText = isEn
+            ? 'Pause button. Current status: ' + (isPlaying ? 'Playing' : 'Paused')
+            : '暫停播放按鈕。目前狀態：' + (isPlaying ? '播放中' : '已暫停');
+          $(this).attr('aria-label', statusText);
+        });
+        $pause.off('blur.bannerStatus').on('blur.bannerStatus', function() {
+          $(this).attr('aria-label', i18n.pause);
+        });
+
       });
 
     }, 800);
@@ -3706,5 +3742,84 @@ $(function() {
 
   fixBannerPlayPauseA11y();
 });
+//banner進入自動暫停
+$(function() {
+  function fixBannerFocusPauseA11y() {
+    setTimeout(function() {
+      $('.w-ba-banner').each(function() {
+        var $banner    = $(this);
+        var $slideshow = $banner.find('.cycle-slideshow');
+        var $pauseBtn  = $banner.find('.pause-slide');
+        var $resumeBtn = $banner.find('.resume-slide');
+
+        var manuallyPaused = false;
+
+        // ✅ 焦點進入輪播區域時自動暫停
+        $banner.on('focusin', function() {
+          $slideshow.cycle('pause');
+          $pauseBtn.addClass('active').attr('aria-checked', 'true');
+          $resumeBtn.removeClass('active').attr('aria-checked', 'false');
+        });
+
+        // ✅ 若使用者手動按下暫停，焦點離開後不自動恢復
+        $pauseBtn.on('click', function() {
+          manuallyPaused = true;
+        });
+
+        $resumeBtn.on('click', function() {
+          manuallyPaused = false;
+        });
+
+        // ✅ 覆寫 focusout 加入 manuallyPaused 判斷
+        $banner.off('focusout').on('focusout', function() {
+          setTimeout(function() {
+            if (!$banner.find(':focus').length && !manuallyPaused) {
+              $slideshow.cycle('resume');
+              $resumeBtn.addClass('active').attr('aria-checked', 'true');
+              $pauseBtn.removeClass('active').attr('aria-checked', 'false');
+            }
+          }, 150);
+        });
+
+      });
+    }, 800);
+  }
+
+  fixBannerFocusPauseA11y();
+});
+//banner pager 按下狀態
+$(function() {
+  function fixBannerPagerPressedA11y() {
+    setTimeout(function() {
+      function syncPagerPressed($banner) {
+        $banner.find('.banner-pager button').each(function() {
+          var $btn = $(this);
+          $btn.attr('aria-pressed', $btn.hasClass('active-slide') ? 'true' : 'false');
+        });
+      }
+
+      // 初始狀態（頁面載入當下預設顯示的那張圖）
+      $('.w-ba-banner').each(function() {
+        syncPagerPressed($(this));
+      });
+
+      // Cycle2 初始化完成、以及每次切換投影片後，同步 aria-pressed
+      $('.w-ba-banner .cycle-slideshow').on('cycle-post-initialize cycle-after', function() {
+        syncPagerPressed($(this).closest('.w-ba-banner'));
+      });
+
+      // 直接點擊 pager 按鈕時，class 切換與 cycle-after 觸發之間可能有極短延遲，
+      // 這裡多補一次同步，確保狀態不會滯後
+      $(document).on('click', '.banner-pager button', function() {
+        var $banner = $(this).closest('.w-ba-banner');
+        setTimeout(function() {
+          syncPagerPressed($banner);
+        }, 50);
+      });
+    }, 800);
+  }
+
+  fixBannerPagerPressedA11y();
+});
 
 }(jQuery, window));

assets/stylesheets/template/layout/content.scss

@@ -1,6 +1,9 @@
 @charset "utf-8";
 
 @import "../initial";
+.accessibility_mode a:focus{
+      outline: 0.3125em auto $theme-color-second !important;
+}
 .line-it-button{
   .label{
     color: #333!important;

modules/ad_banner/_ad_banner_widget1.html.erb

@@ -65,7 +65,22 @@
   })
   $('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
     $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
-  })
+  });
+      /* 修正點：處理 Pager 無障礙朗讀文字 */
+  $('.cycle-slideshow').on('cycle-post-initialize', function(event, optionHash) {
+    var $container = $(this).closest('.w-ba-banner');
+    var $slides = $(this).find('.w-ba-banner__slide');
+    var $pagerButtons = $container.find(".banner-pager button");
+
+    $pagerButtons.each(function(index) {
+      var slideTitle = $slides.eq(index).data('cycle-title') || "";
+      var ariaLabel = "第 " + (index + 1) + " 張投影片 " + slideTitle;
+      $(this).attr({
+        "aria-label": ariaLabel,
+        "title": ariaLabel
+      });
+    });
+  });
 </script>
 <style type="text/css">
   .w-ba-banner .controlplay .resume-slide.active i{