up

assets/javascripts/app.js

@@ -2127,28 +2127,68 @@ $(document).ready(function () {
 
   //rucaptcha-image
   $(document).ready(function () {
-      // >>> 修正：先確認頁面上真的有驗證碼圖片，再往下執行，避免沒有驗證碼的頁面也發出多餘的 wav 請求
+      function fixCaptchaImgA11y() {
-      if ($('.rucaptcha-image').length) {
+          setTimeout(function () {
-        $('.rucaptcha-image').removeAttr('onload');
+              // ✅ 先確認頁面上真的有驗證碼圖片，再往下執行
-        // 檢查是否已插入過
+              if (!$('.rucaptcha-image').length) return;
-        if (!$('#captcha_audio').length) {
+
-          const audioButton = $(`
+              var pageLang = ($('html').attr('lang') || 'zh-Hant').toLowerCase();
-            <button
+              var isEn = pageLang.startsWith('en');
-              title="播放驗證碼語音"
+
-              type="button"
+              var i18n = {
-              onclick="document.getElementById('captcha_audio').play();"
+                  alt:      isEn ? 'Captcha image, click to refresh' : '驗證碼圖片，點擊可更換',
-              class="fas fa-volume-up"
+                  title:    isEn ? 'Captcha image, click to refresh' : '驗證碼圖片，點擊可更換',
-              aria-label="播放驗證碼語音"
+                  label:    isEn ? 'Click to refresh captcha'        : '點擊更換驗證碼',
-              role="button"
+                  audioBtn: isEn ? 'Play captcha audio'              : '播放驗證碼語音',
-              style="font-size: 1.5em; color: #333; cursor: pointer; border: 2px solid #333; padding: 0.2em;">
+                  audioSrc: isEn ? '/rucaptcha/?format=wav&locale=en' : '/rucaptcha/?format=wav&locale=zh_tw'
-              <span class="sr-only">播放驗證碼語音</span>
+              };
-            </button>
+
-          `);
+              var $captchaImg = $('.rucaptcha-image');
-          const audio = $('<audio id="captcha_audio" src="/rucaptcha/?format=wav&amp;locale=zh_tw"></audio>');
+
-          $('.rucaptcha-image').after(audioButton, audio);
+              // ✅ 移除 onload
-        }
+              $captchaImg.removeAttr('onload');
+
+              // ✅ 補上有意義的 alt、role、tabindex、title
+              $captchaImg.attr({
+                  'alt':        i18n.alt,
+                  'title':      i18n.title,
+                  'role':       'button',
+                  'tabindex':   '0',
+                  'aria-label': i18n.label
+              });
+
+              // ✅ Enter / Space 觸發更換驗證碼
+              $captchaImg.off('keydown.captchaA11y').on('keydown.captchaA11y', function (e) {
+                  if (e.which === 13 || e.which === 32) {
+                      e.preventDefault();
+                      $(this).trigger('click');
+                  }
+              });
+
+              // ✅ 插入語音按鈕和 audio（若還沒插入過）
+              if (!$('#captcha_audio').length) {
+                  var $audioButton = $(
+                      '<button ' +
+                          'title="' + i18n.audioBtn + '" ' +
+                          'type="button" ' +
+                          'onclick="document.getElementById(\'captcha_audio\').play();" ' +
+                          'class="fas fa-volume-up" ' +
+                          'aria-label="' + i18n.audioBtn + '" ' +
+                          'role="button" ' +
+                          'style="font-size: 1.5em; color: #333; cursor: pointer; border: 2px solid #333; padding: 0.2em;">' +
+                          '<span class="sr-only">' + i18n.audioBtn + '</span>' +
+                      '</button>'
+                  );
+
+                  var $audio = $('<audio id="captcha_audio" src="' + i18n.audioSrc + '"></audio>');
+
+                  $captchaImg.after($audioButton, $audio);
+              }
+
+          }, 500);
       }
-      // <<< 修正結束
+
+      fixCaptchaImgA11y();
   });
 
 //萬用表格searchbtn2
@@ -3517,4 +3557,59 @@ $(function() {
     fixLabelForMismatch();
 });
   
+//bannercontrolplay
+$(function() {
+    function fixBannerPlayPauseA11y() {
+        setTimeout(function() {
+            var pageLang = ($('html').attr('lang') || 'zh-Hant').toLowerCase();
+            var isEn = pageLang.startsWith('en');
+
+            var i18n = {
+                resume: isEn ? 'Play' : '繼續播放',
+                pause:  isEn ? 'Pause' : '暫停播放'
+            };
+
+            $('.w-ba-banner').each(function() {
+                var $banner = $(this);
+                var $controlplay = $banner.find('.controlplay');
+
+                // ✅ 把 radiogroup 改為一般容器
+                $controlplay.removeAttr('role aria-label');
+
+                // ✅ 繼續播放按鈕
+                var $resume = $banner.find('.resume-slide');
+                $resume
+                    .attr('role', 'button')
+                    .attr('aria-pressed', $resume.hasClass('active') ? 'true' : 'false')
+                    .attr('aria-label', i18n.resume)
+                    .attr('title', i18n.resume)
+                    .removeAttr('aria-checked aria-live');
+
+                // ✅ 暫停播放按鈕
+                var $pause = $banner.find('.pause-slide');
+                $pause
+                    .attr('role', 'button')
+                    .attr('aria-pressed', $pause.hasClass('active') ? 'true' : 'false')
+                    .attr('aria-label', i18n.pause)
+                    .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');
+                });
+
+                $pause.off('click.bannerA11y').on('click.bannerA11y', function() {
+                    $pause.attr('aria-pressed', 'true');
+                    $resume.attr('aria-pressed', 'false');
+                });
+            });
+
+        }, 800);
+    }
+
+    fixBannerPlayPauseA11y();
+});
+
 }(jQuery, window));

assets/stylesheets/template/modules/ad_banner.scss

@@ -35,6 +35,7 @@ ul.button-mid{
     width: 100%;
     height: 0;
     top: 50%;
+    z-index: 201;
 }
 .banner-pager .active-slide button{
   background: $theme-color-second!important;
@@ -44,6 +45,7 @@ ul.button-mid{
     width: 100%;
     height: 0;
     top: 50%;
+    z-index: 201;
 }
 .next-button, .prev-button {
     cursor: pointer;

modules/ad_banner/_ad_banner_widget2.html.erb

@@ -47,20 +47,23 @@
   </ul>
 </div>
 <script>
-	var flag = 1;
+  $('[data-subpart-id="{{subpart-id}}"] .pause-slide').click(function(){
-	$('.pause-slide').click(function(){
+    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
-		$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
+    $(this).addClass('active')
-	});
+    $(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active')
-	$('.resume-slide').click(function(){
+  });
-		$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
+  $('[data-subpart-id="{{subpart-id}}"] .resume-slide').click(function(){
-	});
+    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
-	$('.next-button').off('click').on('click',function(){
+    $(this).addClass('active')
-		$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
+    $(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active')
+  });
+  $('[data-subpart-id="{{subpart-id}}"] .next-button').click(function(){
+    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
 
-	})
+  })
-	$('.prev-button').off('click').on('click',function(){
+  $('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
-		$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
+    $(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');

modules/announcement/_annc_widget15.html.erb

@@ -26,7 +26,7 @@
     data-cycle-slides=".w-annc__item" >
     <li class="w-annc__item " >
     <div class="w-annc__img-wrap bullseye" style="position:relative">
-	<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
+	<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" >
       <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
       <div class="transitionfade"></div>
     </a>

modules/announcement/_annc_widget4.html.erb

@@ -8,7 +8,7 @@
   <ul class="w-annc__list  row" data-level="0" data-list="announcements">
     <li class="w-annc__item  col-md-4">
       <div class="w-annc__img-wrap bullseye" style="position:relative">
-	  <a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
+	  <a href="{{link_to_show}}" aria-label="前往{{widget-title}}">
         <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
         <div class="transitionfade"></div>
       </a>

modules/web_resource/web_res_index1.html.erb

@@ -4,7 +4,7 @@
   </h3>
   <ul class="list-unstyled" data-list="web_link" data-level="0">
     <li class="index-content">
-      <a class="index-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
+      <a class="" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
         <div class="link-img-wrap{{display_image}}">
           <img src="{{img_src}}" alt="{{img_description}}">
         </div>

modules/web_resource/web_res_index2.html.erb

@@ -4,7 +4,7 @@
   </h3>
   <ul class="list-unstyled" data-list="web_link" data-level="0">
     <li class="index-content col-md-4 col-sm-4">
-      <a class="index-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
+      <a class="" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
         <div class="link-img-wrap{{display_image}}">
           <img src="{{img_src}}" alt="{{img_description}}">
         </div>