update
This commit is contained in:
parent
caf1cea2ba
commit
1fb55c96ab
|
|
@ -1204,6 +1204,47 @@ $(function() {
|
|||
fixAccessibilityAll();
|
||||
}, 800);
|
||||
});
|
||||
// 修正漢堡選單按鈕無障礙
|
||||
$(function() {
|
||||
function fixNavbarToggleA11y() {
|
||||
var isEn = $('html').attr('lang') === 'en';
|
||||
var label = isEn ? '開啟或關閉導覽選單' : '開啟或關閉導覽選單';
|
||||
|
||||
$('.navbar-toggle').each(function() {
|
||||
var $btn = $(this);
|
||||
|
||||
// 修正 title
|
||||
$btn.attr('title', label);
|
||||
|
||||
// 修正 sr-only 文字(原本是 "Toggle navigation")
|
||||
var $sr = $btn.find('.sr-only');
|
||||
if ($sr.length) {
|
||||
$sr.text(label);
|
||||
} else {
|
||||
$btn.prepend('<span class="sr-only">' + label + '</span>');
|
||||
}
|
||||
|
||||
// 補上 aria-label
|
||||
$btn.attr('aria-label', label);
|
||||
|
||||
// 補上 aria-expanded(依據目前是否展開)
|
||||
if (!$btn.attr('aria-expanded')) {
|
||||
var isExpanded = !$btn.hasClass('collapsed');
|
||||
$btn.attr('aria-expanded', isExpanded ? 'true' : 'false');
|
||||
}
|
||||
|
||||
// 點擊時同步更新 aria-expanded
|
||||
$btn.off('click.navA11y').on('click.navA11y', function() {
|
||||
setTimeout(function() {
|
||||
var isExpanded = !$('.navbar-toggle').hasClass('collapsed');
|
||||
$('.navbar-toggle').attr('aria-expanded', isExpanded ? 'true' : 'false');
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
setTimeout(fixNavbarToggleA11y, 500);
|
||||
});
|
||||
|
||||
|
||||
$(function() {
|
||||
|
|
@ -3308,7 +3349,6 @@ setTimeout(function() {
|
|||
|
||||
if (href) {
|
||||
$tr.css('cursor', 'pointer')
|
||||
.attr('tabindex', '0')
|
||||
.attr('role', 'link')
|
||||
.attr('aria-label', $tr.find('a').first().text().trim() + ' ' + title);
|
||||
|
||||
|
|
@ -3422,4 +3462,85 @@ $(document).ready(function () {
|
|||
setTimeout(fixVoicePlayerA11y, 500);
|
||||
});
|
||||
|
||||
$(function() {
|
||||
function fixSearchBtnNewWindowA11y() {
|
||||
setTimeout(function() {
|
||||
// ✅ 找所有 target="_blank" 的搜尋 form 裡的送出按鈕
|
||||
$('form[target="_blank"] .btn-search').each(function() {
|
||||
var $btn = $(this);
|
||||
|
||||
$btn.attr('aria-label', '全站搜尋 在新視窗開啟');
|
||||
$btn.attr('title', '全站搜尋 在新視窗開啟');
|
||||
|
||||
// ✅ 更新 sr-only 文字
|
||||
var $sr = $btn.find('.sr-only');
|
||||
if ($sr.length > 0) {
|
||||
$sr.text('全站搜尋 在新視窗開啟');
|
||||
} else {
|
||||
$btn.append('<span class="sr-only">全站搜尋 在新視窗開啟</span>');
|
||||
}
|
||||
});
|
||||
|
||||
// ✅ 同步修正搜尋 input 的 title
|
||||
$('form[target="_blank"] .input-search').each(function() {
|
||||
$(this).attr('title', '全站搜尋');
|
||||
});
|
||||
|
||||
}, 500);
|
||||
}
|
||||
|
||||
fixSearchBtnNewWindowA11y();
|
||||
});
|
||||
$(function() {
|
||||
function fixVoicePlayerA11y() {
|
||||
setTimeout(function() {
|
||||
$('a.voice-player').each(function() {
|
||||
var $a = $(this);
|
||||
|
||||
// ✅ 補上 role="button"
|
||||
$a.attr('role', 'button');
|
||||
|
||||
// ✅ 補上 tabindex 確保可被 Tab 聚焦
|
||||
if (!$a.attr('tabindex')) {
|
||||
$a.attr('tabindex', '0');
|
||||
}
|
||||
|
||||
// ✅ 補上 aria-pressed 初始狀態(未播放)
|
||||
$a.attr('aria-pressed', 'false');
|
||||
|
||||
// ✅ Enter / Space 觸發點擊
|
||||
$a.off('keydown.voiceA11y').on('keydown.voiceA11y', function(e) {
|
||||
if (e.which === 13 || e.which === 32) {
|
||||
e.preventDefault();
|
||||
$(this).trigger('click');
|
||||
}
|
||||
});
|
||||
|
||||
// ✅ 點擊時切換 aria-pressed 和圖示狀態
|
||||
$a.off('click.voiceA11y').on('click.voiceA11y', function() {
|
||||
var $btn = $(this);
|
||||
var $icon = $btn.find('i.fa');
|
||||
var isPlaying = $icon.hasClass('fa-pause');
|
||||
|
||||
if (isPlaying) {
|
||||
$icon.removeClass('fa-pause').addClass('fa-play');
|
||||
$btn.attr('aria-pressed', 'false');
|
||||
} else {
|
||||
// ✅ 其他播放中的按鈕先重置
|
||||
$('a.voice-player').not($btn).each(function() {
|
||||
$(this).find('i.fa').removeClass('fa-pause').addClass('fa-play');
|
||||
$(this).attr('aria-pressed', 'false');
|
||||
});
|
||||
$icon.removeClass('fa-play').addClass('fa-pause');
|
||||
$btn.attr('aria-pressed', 'true');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
}, 500);
|
||||
}
|
||||
|
||||
fixVoicePlayerA11y();
|
||||
});
|
||||
|
||||
}(jQuery, window));
|
||||
|
|
|
|||
|
|
@ -17,6 +17,6 @@
|
|||
z-index: 1050;
|
||||
|
||||
&:hover {
|
||||
background:$theme-color-second;
|
||||
background:#ff6300;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -252,6 +252,9 @@ ul.button-mid{
|
|||
.ba-banner-widget-0 {
|
||||
height: 75vh !important;
|
||||
z-index: 0;
|
||||
.ad-overlay{
|
||||
display: none;
|
||||
}
|
||||
.w-ba-banner__wrap{
|
||||
height: 75vh !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@
|
|||
@extend .unity-title;
|
||||
}
|
||||
.link { background-color: #1368d4 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.txt { background-color: #3a8a40 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.txt { background-color: #2a7e31 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.xlsx { background-color: #9e3050 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.pdf { background-color: #2a7d36 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.docx { background-color: #5e46a0 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
|
|
@ -158,7 +158,7 @@
|
|||
.jpg { background-color: #8f3333 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.zip { background-color: #8a6400 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.rar { background-color: #9e5000 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.xls { background-color: #3a8a40 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.xls { background-color: #2a7e31 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.odt { background-color: #767676 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th{
|
||||
// border-top: 0.0625em solid #ddd;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
data-cycle-title="{{title}}"
|
||||
data-cycle-desc="{{context}}"
|
||||
data-overlay-template="<h3>{{title}}</h3>{{desc}}"
|
||||
data-target="{{target}}"
|
||||
data-bs-target="{{target}}"
|
||||
>
|
||||
<a href="{{link}}" target="{{target}}" title="{{alt_title}}">
|
||||
<img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
|
||||
|
|
@ -27,16 +27,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<ul class="w-ba-banner__pager-3 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>
|
||||
<p style="display: none;"><%= I18n.t("ad_banner.resume") %></p>
|
||||
</a>
|
||||
|
||||
<a role="radio" aria-checked="false" href="javascript:;" class="pause-slide" title="暫停播放" aria-label="暫停播放" aria-live="assertive">
|
||||
<i aria-hidden="true"></i>
|
||||
<p style="display: none;"><%= I18n.t("ad_banner.pause") %></p>
|
||||
</a>
|
||||
<ul class="button-mid">
|
||||
<i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
|
||||
<i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
|
||||
</ul>
|
||||
<ul class="button-mid">
|
||||
<button class="prev-button" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" aria-label="Pager"></button>
|
||||
|
|
@ -67,5 +60,20 @@
|
|||
})
|
||||
$('.prev-button').off('click').on('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>
|
||||
|
|
|
|||
|
|
@ -18,8 +18,7 @@
|
|||
<div class="panel-body">
|
||||
<ul class="i-archive-files-list" data-list="files" data-level="2">
|
||||
<li>
|
||||
<a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
|
||||
<span class="label label-primary {{file-type}}">{{file-type}}</span>
|
||||
<a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}<span class="label label-primary {{file-type}}">{{file-type}}</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="i-member-item-inner clearfix">
|
||||
<div class="i-member-pic-wrap col-sm-4 col-xs-4">
|
||||
<a href="{{link_to_show}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" alt="{{name}}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="i-member-profile-data-wrap col-sm-8 col-xs-8">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="i-member-item-inner clearfix">
|
||||
<div class="i-member-pic-wrap">
|
||||
<a href="{{link_to_show}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" alt="{{name}}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="i-member-profile-data-wrap">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="i-member-item-inner clearfix">
|
||||
<div class="i-member-pic-wrap">
|
||||
<a href="{{link_to_show}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" alt="{{name}}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="i-member-profile-data-wrap">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<div class="i-member-item-inner clearfix">
|
||||
<div class="i-member-pic-wrap">
|
||||
<a href="{{link_to_show}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" alt="{{name}}">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<table class="table table-striped universal-table-show">
|
||||
<tbody data-level="0" data-list="entry">
|
||||
<tr>
|
||||
<td class="col-md-2 table-title">{{title}}</td>
|
||||
<th class="col-md-2 table-title">{{title}}</th>
|
||||
<td>{{text}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<li class="widget-content">
|
||||
<div class="link-img-wrap{{display_image}}">
|
||||
<a href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}">
|
||||
</a>
|
||||
</div>
|
||||
<a href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">{{title}}</a>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<li class="widget-content">
|
||||
<div class="link-img-wrap{{display_image}}">
|
||||
<a href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}">
|
||||
</a>
|
||||
</div>
|
||||
<a href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">{{title}}</a>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<ul class="list-unstyled" data-level="0" data-list="web_link">
|
||||
<li class="widget-content">
|
||||
<div class="link-img-wrap{{display_image}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}">
|
||||
</div>
|
||||
<a href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">{{title}}</a>
|
||||
<span data-list="statuses" data-level="1">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<li class="widget-content widget-content-horizontal col-sm-3">
|
||||
<a href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
||||
<div class="link-img-wrap{{display_image}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}">
|
||||
</div>
|
||||
<div class="widget-content-title">
|
||||
<span class="" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">{{title}}</span>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<li class="widget-content widget-content-horizontal ">
|
||||
<a href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
||||
<div class="link-img-wrap{{display_image}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}">
|
||||
</div>
|
||||
</a>
|
||||
<div class="widget-content-title">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<li class="widget-content widget-content-horizontal col-sm-6">
|
||||
<a href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
||||
<div class="link-img-wrap{{display_image}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<div class="hex-border">
|
||||
<a href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
||||
<div class="link-img-wrap{{display_image}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}">
|
||||
</div>
|
||||
<a class="widget-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}" onclick="{{onclick}}">{{title}}</a>
|
||||
<span data-list="statuses" data-level="1">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<li class="index-content">
|
||||
<a class="index-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
||||
<div class="link-img-wrap{{display_image}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}">
|
||||
</div>
|
||||
<h4>
|
||||
{{title}}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<li class="index-content col-md-4 col-sm-4">
|
||||
<a class="index-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
||||
<div class="link-img-wrap{{display_image}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}">
|
||||
</div>
|
||||
<h4>
|
||||
<span class="link-title">
|
||||
|
|
|
|||
Loading…
Reference in New Issue