up

assets/javascripts/app.js

@@ -544,20 +544,28 @@
       });
       //播放驗證碼語音
       $(function () {
-        $('.ask-question')
-          .find('.controls button.fas.fa-volume-up')
-          .each(function () {
-            const $btn = $(this);
+          var pageLang = ($('html').attr('lang') || 'zh-Hant').toLowerCase();
+          var isEn = pageLang.startsWith('en');
+          var label = isEn ? 'Play Captcha Voice' : '播放驗證碼語音';
 
-            // 已經補過就不重複處理
-            if ($btn.attr('aria-label')) return;
+          $('.ask-question')
+              .find('.controls button.fas.fa-volume-up')
+              .each(function () {
+                  var $btn = $(this);
 
-            $btn.attr({
-              'aria-label': '播放驗證碼語音',
-              'aria-controls': 'captcha_audio',
-              'role': 'button'
-            });
-          });
+                  $btn.attr({
+                      'aria-label': label,
+                      'title': label,
+                      'aria-controls': 'captcha_audio',
+                      'role': 'button'
+                  });
+
+                  // ✅ 同步更新 sr-only 文字（若有）
+                  var $sr = $btn.find('.sr-only');
+                  if ($sr.length > 0) {
+                      $sr.text(label);
+                  }
+              });
       });
 
       //刪除td的id
@@ -2162,27 +2170,68 @@ $(function() {
   });
   //rucaptcha-image
   $(document).ready(function () {
-      $('.rucaptcha-image').removeAttr('onload');
-    
-      // 檢查是否已插入過
-      if (!$('#captcha_audio').length) {
-        const audioButton = $(`
-          <button 
-            title="播放驗證碼語音" 
-            type="button" 
-            onclick="document.getElementById('captcha_audio').play();" 
-            class="fas fa-volume-up" 
-            aria-label="播放驗證碼語音"
-            role="button"
-            style="font-size: 1.5em; color: #333; cursor: pointer; border: 2px solid #333; padding: 0.2em;">
-            <span class="sr-only">播放驗證碼語音</span>
-          </button>
-        `);
-    
-        const audio = $('<audio id="captcha_audio" src="/rucaptcha/?format=wav&amp;locale=zh_tw"></audio>');
-    
-        $('.rucaptcha-image').after(audioButton, audio);
+      function fixCaptchaImgA11y() {
+          setTimeout(function () {
+              // ✅ 先確認頁面上真的有驗證碼圖片，再往下執行
+              if (!$('.rucaptcha-image').length) return;
+
+              var pageLang = ($('html').attr('lang') || 'zh-Hant').toLowerCase();
+              var isEn = pageLang.startsWith('en');
+
+              var i18n = {
+                  alt:      isEn ? 'Captcha image, click to refresh' : '驗證碼圖片，點擊可更換',
+                  title:    isEn ? 'Captcha image, click to refresh' : '驗證碼圖片，點擊可更換',
+                  label:    isEn ? 'Click to refresh captcha'        : '點擊更換驗證碼',
+                  audioBtn: isEn ? 'Play captcha audio'              : '播放驗證碼語音',
+                  audioSrc: isEn ? '/rucaptcha/?format=wav&locale=en' : '/rucaptcha/?format=wav&locale=zh_tw'
+              };
+
+              var $captchaImg = $('.rucaptcha-image');
+
+              // ✅ 移除 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
@@ -3454,12 +3503,16 @@ $(document).ready(function() {
 });
 //麵包屑無障礙
 $(document).ready(function () {
+    var pageLang = ($('html').attr('lang') || 'zh-Hant').toLowerCase();
+    var isEn = pageLang.startsWith('en');
+
+    var navLabel = isEn ? 'Breadcrumb navigation' : '麵包屑導覽';
+
     $('.widget-breadcrumb .breadcrumb li:last-child a').attr('aria-current', 'page');
 
-    // 若尚未有 nav 包住，自動加上
     $('.widget-breadcrumb .breadcrumb').each(function () {
         if (!$(this).closest('nav').length) {
-            $(this).wrap('<nav aria-label="麵包屑導覽"></nav>');
+            $(this).wrap('<nav aria-label="' + navLabel + '"></nav>');
         }
     });
 });
@@ -3599,4 +3652,59 @@ $(function() {
 
     fixBannerA11yByLang();
   });
+//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/base/_global.scss

@@ -217,6 +217,6 @@ img{
 //     overflow-x: auto;
 //   }
 // }
-*[data-pp]>.editmode-ps>a, .admin-subpart-area .content>.editmode-ps>a{
-  position: !important;
-}
+input[type=checkbox]:focus {
+    outline: 0.3125em auto -webkit-focus-ring-color;
+}

assets/stylesheets/template/modules/ad_banner.scss

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

assets/stylesheets/template/modules/event_news.scss

@@ -492,7 +492,6 @@
   .i-annc__list {
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
   }
   .i-annc__title {
     font-family: $main-font;

home/index.html.erb

@@ -87,13 +87,7 @@
       </div>
 
       <div class="contentwrap">
-       <div class="marqueeken">
-                    <div class="scroll">
-                        <div class="text1">
-                            NATIONAL FORMOSA UNIVERSITY
-                        </div>
-                    </div>
-       </div>
+
           <div class="layout-content-inner container">
             <div class="column row">
               <section class="two-column col-sm-9" data-pp="39"></section>

modules/ad_banner/_ad_banner_widget2.html.erb

@@ -29,9 +29,7 @@
 
     </div>
   </div>
-    <div class="w-ad-banner__pager-2 w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}" data-list="images" data-level="0">
-    <li><button title="Slide {{slide_number}}" aria-label="Pager"><span style="display: none;">Slide {{slide_number}}</span></button></li>
-  </div>
+  <ul class="w-ba-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></ul>
   <ul class="controlplay" role="radiogroup" aria-label="播放控制選項">
     <a role="radio" aria-checked="true" href="javascript:;" class="resume-slide active" title="繼續播放" aria-label="繼續播放" aria-live="assertive">
       <i aria-hidden="true"></i>
@@ -82,3 +80,23 @@
     });
   });
 </script>
+<style type="text/css">
+  .w-ba-banner .controlplay .resume-slide.active i{
+    color: #32D9C3;
+  }
+  .w-ba-banner .controlplay .pause-slide.active i{
+    color: #ff4500;
+  }
+  .w-ba-banner .controlplay{
+    width: auto;
+  }
+  .w-ba-banner .button-mid{
+    position: absolute;
+    width: 100%;
+    height: 0;
+    top: 50%;
+  }
+  .next-button,.prev-button{
+    cursor: pointer;
+  }
+</style>

modules/member/member_index2.html.erb

@@ -8,7 +8,7 @@
             <div class="i-member-item-inner clearfix">
               <div class="i-member-pic-wrap col-sm-3">
                 <a href="{{link_to_show}}" title="{{name}}">
-				          <img class="i-member-pic img-thumbnail" src="{{image}}" title="{{name}}">
+				          <img class="i-member-pic img-thumbnail" src="{{image}}" alt="{{name}}">
                 </a>
               </div>
               <div class="i-member-profile-data-wrap col-sm-9">

modules/web_resource/_web_res_widget8.html.erb

@@ -9,11 +9,12 @@
         <img src="{{img_src}}" alt="{{img_description}}">
       </div>
       <div class="widget-content-title">
-        <a class="" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">{{title}}</a>
+        <span>{{title}}</span>
         <span data-list="statuses" data-level="1">
           <span class="label status {{status-class}}">{{status}}</span>
         </span>
       </div>
+      </a>
     </li>
   </ul>
 </div>

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>