# 無障礙清單資料庫
###### tags: `切切切`
<style>
/* .ui-content.comment-panel #doc{
max-width:60%;
} */
.ui-affix-toc{
width:300px!important;
}
.red{
color: #A94448;
padding: 0 4px;
}
.mainTitle{
color: #005bba;
}
</style>

## <b class="mainTitle">無障礙資料整理</b>
* [**無障礙2.1 資料整理**](https://hackmd.io/ls8YKdKGRUicJhUk6_cA4Q)
* [**網站無障礙規範(110.07)**](https://hackmd.io/1lZrZLcYTf6Cu4Zho4bazA)

---
## <b class="mainTitle">漢堡</b>
### 🌈 ⭐ CS1140101E 當使用者介面元件取得焦點時，使用CSS變更其呈現方式，網站放大至200%以上後，左上角出現選單按鈕(漢堡選單)，以鍵盤焦點至其上未有焦點變化，請修正。
成功準則1.3.3：知覺特徵
用來理解及操作內容的指示，不可單獨依賴元件的形狀、尺寸、視覺位置、導向、聲音等知覺特徵。
GN1130300E 針對若無文字項目識別則必須仰賴感官資訊才能理解的內容，提供文字項目識別
https://www.chy.moj.gov.tw/ 網站放大至200%以上後，左上角出現選單按鈕(漢堡選單)，以鍵盤焦點至其上，未能報讀目前為展開還是收合狀態。
指引1.4：可辨識
讓使用者能更容易地看見及聽到內容、區分前景和背景
成功準則1.4.1：色彩使用
色彩不可當做唯一能傳達資訊、提出動作、提請回應或區別視覺元件的視覺手段來使用。
CS1140101E 當使用者介面元件取得焦點時，使用CSS變更其呈現方式，網站放大至200%以上後，左上角出現選單按鈕(漢堡選單)，以鍵盤焦點至其上未有焦點變化，請修正。

#### <i class="fa fa-pencil fa-fw"></i> 修正回覆：手機版

<button type="button" class="sidebarCtrl" aria-haspopup="true"
aria-expanded="false" aria-label="開啟側欄選單">側欄選單
<span></span><span></span><span></span></button>

1. expanded="false" 按下後需改為 aria-expanded="true"
2. 漢堡選單、搜尋按鈕css需補上focus焦點變化

參考網址：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup

#### ARIA 屬性
aria-haspopup="true"：表示有子選單。
aria-expanded="true/false"：動態顯示選單展開狀態。

_body.prepend('<aside class="sidebar">
    <div class="m_area"><button type="button" class="sidebarClose">
    關閉</button></div><div class="menu_overlay"></div></aside>');

  $('header .container').prepend('
      <button type="button" class="sidebarCtrl" aria-haspopup="true" 
      aria-expanded="false" aria-label="開啟側欄選單">側欄選單</button>
      <button type="button" class="searchCtrl" aria-expanded="false" title="' + SearchTitle + '">查詢</button>');

  let menu_status = false;
  let _sidebar = $('.sidebar');
  let _search = $('.search');
  let _nav = $('.navigation');
  let _sidebarClose = $('.sidebarClose');
  let _sidebarCtrl = $('.sidebarCtrl');
  let _overlay = $('.menu_overlay');
  let _mArea = $('.m_area');

  _sidebarCtrl.append('<span></span><span></span><span></span>');
  // -------------------------------------------- 打開選單 function
  function showSidebar() {
    _sidebar.show();
    _mArea.show().addClass('open');
    _mArea.animate({ 'margin-left': 0 }, 400, 'easeOutQuint');
    _body.addClass('noscroll');
    _overlay.fadeIn();
    $('.m_search').hide();
    // search_mode = false;
    // 更新 ARIA 屬性
    _sidebarCtrl.attr('aria-expanded', 'true');
    menu_status = true;
  }
  // -------------------------------------------- 縮合選單 function
  function hideSidebar() {
    _mArea.animate({ 'margin-left': _mArea.width() * -1 + 'px' }, 500, 'easeOutQuint', function () {
      _sidebar.fadeOut(200);
      _mArea.removeClass('open');
      _mArea.hide();
    });
    _body.removeClass('noscroll');
    _overlay.fadeOut(200);
    liHasChild.children('ul').hide();
    // 更新 ARIA 屬性
    _sidebarCtrl.attr('aria-expanded', 'false');
    menu_status = false;
  }
  // -------------------------------------------- 打開選單動作
  _sidebarCtrl.off().on('click', function (e) {
    e.preventDefault();
    showSidebar();
  });
  // -------------------------------------------- overlay關閉選單
  _overlay.off().on('click', function () {
    hideSidebar();
  });
  _sidebarClose.off().on('click', function () {
    hideSidebar();
  });
  // -------------------------------------------- 鍵盤操作支援
  _sidebarCtrl.on('keydown', function (e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      if (menu_status) {
        hideSidebar();
      } else {
        showSidebar();
      }
    }

## <b class="mainTitle">選單menu</b>

### 🌈 ⭐ 語法說明
### aria-haspopup屬性指示可由設定該屬性的元素觸發的互動式彈出元素的可用性和類型。
在 ARIA 中，觸發出現時出現在其他內容之上的interactive menus互動式選單、 listboxes列表框、trees樹狀列表、grids網格和dialogs that appear對話方塊被視為「彈出視窗」。這些彈出視窗由頁面上的一個或多個互動元素觸發。交互元素將觸發的彈出視窗的可用性和類型應透過aria-haspopup狀態來標識。

參考網址：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup

### aria-expanded屬性設定在元素上，以指示控制項是否展開或折疊，以及受控元素是否顯示或隱藏

展開和折疊的小部件，包括選單、對話框和折疊面板。這些物件中的每一個都有一個互動元素來控制它們的開啟和關閉。此aria-expanded屬性應用於此可聚焦的互動式控件，用於切換物件的可見性。
參考網址：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded

### ⭐ GN1410200E - 使用者介面元件應暴露名稱與角色，允許直接設定可由使用者設定的屬性，並在變更時提供通知

指引4.1(相容性)：針對目前及未來的使用者代理與輔助科技，最大化其相容性
4.1.2 - 名稱、角色和值(檢測等級A)
GN1410200E - 使用者介面元件應暴露名稱與角色，允許直接設定可由使用者設定的屬性，並在變更時提供通知

#### 問題網址：https://www.jcp.moj.gov.tw/
#### 問題說明：
中央定位點往下的導覽選單機關簡介、統計園地、為民服務等等項目無論其子選單展開或折疊該項目的控件狀態皆無提示，請使用 aria-expanded 並正確設定符合狀態的值。
#### <i class="fa fa-pencil fa-fw"></i> 修正回覆：
ARIA 屬性
aria-haspopup="true"：表示有子選單。
aria-expanded="true/false"：動態顯示選單展開狀態。

#### html

<nav class="menu" role="navigation" aria-label="主選單">
            <ul>
              <li>
                <a href="#" aria-haspopup="true" aria-expanded="false">第一層選單</a>
                <ul>
                  <li><a href="#">第二層選單</a></li>
                  <li><a href="#">第二層選單</a></li>
                  <li><a href="#">第二層選單</a></li>
                  <li><a href="#">第二層選單</a></li>
                </ul>
              </li>
              <li><a href="http://www.google.com">第一層有連結</a></li>
              <li>
                <a href="#" aria-haspopup="true" aria-expanded="false">第一層選單</a>
                <ul>
                  <li><a href="http://www.google.com">第二層有連結</a></li>
                  <li><a href="#">第二層選單</a></li>
                  <li>
                    <a href="#" aria-haspopup="true" aria-expanded="false">第二層有子選單</a>
                    <ul>
                      <li>
                        <a href="#" aria-haspopup="true" aria-expanded="false">第三層選單有下層</a>
                        <ul>
                          <li><a href="#">第四層選單</a></li>
                          <li><a href="#">第四層選單</a></li>
                        </ul>
                      </li>
                      <li><a href="http://www.google.com">第三層選單有連結</a></li>
                      <li><a href="#">第三層選單</a></li>
                    </ul>
                  </li>
                  <li><a href="#">第二層選單</a></li>
                </ul>
              </li>
            </ul>
          </nav>

#### javaScript

//判斷是否按下
document.addEventListener("DOMContentLoaded", () => {
  // 取得所有有子選單的項目
  const menuItems = document.querySelectorAll(".menu a[aria-haspopup='true']");

  menuItems.forEach((menuItem) => {
    // 初始化 aria-expanded 屬性
    menuItem.setAttribute("aria-expanded", "false");

    // 點擊事件處理
    menuItem.addEventListener("click", (event) => {
      event.preventDefault(); // 阻止預設連結行為

      const isExpanded = menuItem.getAttribute("aria-expanded") === "true";
      // 切換 aria-expanded 屬性
      menuItem.setAttribute("aria-expanded", !isExpanded);

      // 顯示或隱藏子選單
      const submenu = menuItem.nextElementSibling;
      if (submenu && submenu.tagName === "UL") {
        submenu.style.display = isExpanded ? "none" : "block";
      }
    });

    // 鍵盤互動：按下 Enter 或 Space 鍵時展開/收起選單
    menuItem.addEventListener("keydown", (event) => {
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        menuItem.click(); // 模擬點擊事件
      }
    });
  });

  // 關閉點擊範圍外的選單
  document.addEventListener("click", (event) => {
    menuItems.forEach((menuItem) => {
      const submenu = menuItem.nextElementSibling;
      if (!menuItem.contains(event.target) && submenu && submenu.style.display === "block") {
        menuItem.setAttribute("aria-expanded", "false");
        submenu.style.display = "none";
      }
    });
  });
});

## <b class="mainTitle">手機版選單</b>
### ⭐ 問題說明：漢堡按下後需跳到第一個連結，依序由上至下，最後需跳到關閉按鈕，然後就跳到內容區第一個連結，例如h1

## <b class="mainTitle">文字大小切換</b>
### ⭐ 問題說明：使用者介面元件應暴露名稱與角色，允許直接設定可由使用者設定的屬性，並在變更時提供通知
###
執行網頁上方切換字體大小的功能按鈕後，選定的大小會變成藍色，但無論是大、中、小自級語音皆報讀「切換按鈕沒按下」，視障人士無法得知目前狀態已變更，請提供報讀軟體說明文字，讓使用者知道目前狀態，全網站相同問題請一併修正。

<div class="font-size">
   <ul>
     <li class="size-s">
       <a href="#" role="button" aria-pressed="false" title="小字級" class="">Ａ-</a>
     </li>
     <li class="size-m">
       <a href="#" role="button" aria-pressed="true" title="中字級" class="active">Ａ</a>
     </li>
     <li class="size-l">
       <a href="#" role="button" aria-pressed="false" title="大字級" class="">Ａ+</a>
    </li>
  </ul>
</div>

## <b class="mainTitle">頁籤tab</b>
### ⭐ 問題說明：以鍵盤操作，進入中央區塊「電子公佈欄」頁籤條列內容部分、「活動專區」頁籤條列內容部分、「本所影音專區」頁籤之條列內容部分語音皆未提示某某索引標籤內容頁，螢幕報讀軟體使用者無法在第一時間知道目前位於什麼頁籤，請使用相關語法，以使螢幕報讀軟體能在剛進入頁籤條列內容部分的瞬間提示某某索引標籤內容頁，全網站如有相同問題請一併修正。
=>因目前服務網公告的只有「要唸出索引標籤（role=”tab”）是否被選取」，沒有強制要求要報讀「內容頁(role=”tabpanel”)」，故此項會通知檢測人員改列建議。
若您們對報讀內容頁的方式感興趣，可參考：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role

## <b class="mainTitle">Main標籤</b>

### ⭐ 問題說明：為讓螢幕報讀軟體使用者能有多種定位至主要內容區之方式，全網站請於主要內容區起始處使用＜main＞標籤或補充role=『main』，以使螢幕報讀軟體能提示該區域為「主要內容區地標」。
=>此項需修改。
因無障礙網站需要使用主要內容區標籤，即＜main＞，而您們的網站並未使用。
而查察您們的語法，您們是有使用div class="main"語法。
故建議您們可直接將此標籤加上role=”main＂，將此div標籤角色宣告成main角色。

## <b class="mainTitle">關於sitemap</b>
### ⭐ 問題說明：此（網站導覽）頁面的快速鍵說明，僅提供IE瀏覽器的快速鍵說明。請將各瀏覽器的快捷鍵操作如IE及Chrome為Alt+快速鍵字母，FireFox為Alt+Shift+快速鍵字母等，於網站導覽(SITE MAP)頁面中詳列使用說明，俾利使用者操作瀏覽網頁。

[參考網址](https://accessibility.moda.gov.tw/Sitemap)

#### <i class="fa fa-pencil fa-fw"></i> 解決方法：

請刪除下面這段
><p>如果您使用的瀏覽器是IE，快速鍵的使用方式是<kbd>Alt</kbd> 加上所定義的字母；如果您用Firefox 瀏覽網頁，快速鍵的使用方式是 <kbd>Alt</kbd> 加 <kbd>Shift </kbd>加上所定義的字母 ：，

---

## <b class="mainTitle">關於鍵盤操作</b>

### 🌈 ⭐ GN1210101E - 確認所有功能都能透過鍵盤介面來操作
指引2.1(鍵盤可操作)：讓所有的功能都能透過鍵盤使用
2.1.1 - 鍵盤(檢測等級A)
GN1210101E - 確認所有功能都能透過鍵盤介面來操作
問題說明：使用鍵盤操作，焦點遊走至頁尾「回頁首」連結，使用者還沒按Enter執行，而是按下Shift+Tab返回前一個連結，結果焦點已自動移到頁首，為便利鍵盤及語音軟體使用者操作，請等到使用者確定按下Enter才執行功能。（透過Edge與Firefox檢測）
問題說明：使用鍵盤操作，焦點遊走至頁尾「Go Top」連結，使用者還沒按Enter執行，而是按下Shift+Tab返回前一個連結，結果焦點已自動移到頁首，為便利鍵盤及語音軟體使用者操作，請等到使用者確定按下Enter才執行功能。（透過Chrome與Firefox檢測）

問題網址：
https://hywebu00.github.io/hyui_flex/mp_template.htm
https://hywebu00.github.io/HyUI_v4/mp.html
已修正範例：
https://www.hlc.moj.gov.tw/53672/

請移除

$('.scrollToTop').keydown(function(e) {
        _body.find('a:first').focus();
        e.preventDefault();
    });

$('.scrollToTop').keydown(function(e) {
         _body.find('a.goCenter').focus();
         e.preventDefault();
    });

### ⭐ 網站放大至200%以上後，左上角出現選單按鈕，鍵盤tab鍵要可展開選單，並進入選單內容

### ⭐ 全網站，使用鍵盤操作，游標遊走至上方區塊「查詢」（放大鏡）連結圖片，按Enter鍵雖會展開編輯欄位及按鈕功能，但當游標跳離後並未收合或隱藏，亦無法使用鍵盤（如ESC鍵）關閉，且影響網頁資訊之瀏覽及操作

#### <i class="fa fa-pencil fa-fw"></i> 解決方法：

var emailStatus = false; // 假的判斷式，先設定沒有開啟
_navlist.find(".emailbtn").click(function () {
  $(this).siblings(".list_second").stop().slideToggle();
  $(this).parent("li").siblings().find(".search").slideUp();
  emailStatus = true;
});
if ((emailStatus = true)) {
  $("body").keydown(function (e) {
    if (e.keyCode == 27) {
      $(".list_second").slideUp();
      emailStatus = false;
    }
  });
}

---

## <b class="mainTitle">關於標籤 aria- 應用</b>

### ⭐ aria-label的權重與展開收闔按鈕

#### Aria-label在無障礙的權重

>aria-label在無障礙的權重（可概略理解成報讀）會高於標籤中的文字、value、title，且tab焦點模式與上下鍵瀏覽模式之報讀方式不同。

#### 「選單按鈕」如何設置展開與折疊

選單展開時，可參考：<button aria-label="導覽選單" aria-expanded="true" class="btn btn-fatfooter open"></button>
選單收闔時，可參考：<button aria-label="導覽選單" aria-expanded="false" class="btn btn-fatfooter close"></button>

:::warning
- 要用按鈕(即button、input type="button")，因此若角色非按鈕，需補上role="button"。
- 此按鈕被報讀的部分，請勿使用關鍵字（如：開啟、關閉、展開、收闔、打開、關上......等等），建議採導覽選單、下方選單、選單等等即可。
- 展開與收闔的報讀，可交由aria-expanded處理：aria-expanded="true"為展開、aria-expanded="false" 為摺疊。
- 如果真的想要在文字表現出展開與摺疊等文字，請善用aria-label的報讀上覆蓋文字效果。
:::

:::success
目前hyui可以修改方式:

只需要針對menu 第一層來看，當選單有下拉選單時，第一層要在<a>加上 role="button ，
其展開和收交由aria-expanded處理：aria-expanded="true"為展開、aria-expanded="false" 為摺疊即可。

要加上role="button ，這樣對aria-expanded="true"為展開、aria-expanded="false”才有意義

若menu第一層沒有下第二層的選項，是對外連結時，那<a>就不需要加上role="button
:::

### ⭐ aria-label=“觀看密碼”
>可見的表單控制元件均需有對應的標籤<label>組件，或有標題(title)屬性，且其內容或值均不得為空字串或空白

>表單中需要使用者輸入之input控制元件，需有對應的label標籤組件。如為無法設置標籤組件，請以title屬性或aria-*屬性提供該控制元件的標題說明，以幫助螢幕報讀軟體識別。
<input name="username" type="text" placeholder="請輸入文字">

:::warning
機器檢測，這個button，要加上 <b class="red">aria-label="觀看密碼"</b> ，才ＯＫ
:::

#### <i class="fa fa-pencil fa-fw"></i> 解決方式：

<button type="button" class="btn btn-icon"  aria-label="觀看密碼"><i class="i_hide"></i></button>

### ⭐ (機器檢測）針對多組< nav >元素需加 title或aria-label屬性提供螢幕報讀軟體辨識

#### 中文版

<nav class="navigation" aria-label="頁首功能列" >
<nav class="megamenu" aria-label="主選單">
<div class="left_block"><nav aria-label="次選單"><div class="left_title" >認識本院...
<section class="fatfooter">< div class="container">< button type="button" aria-label="導覽選單展開/收合" name="展開選單/OPEN" class="btn btn-fatfooter">< /button>
<nav aria-label="頁尾網站導覽">< ul>< li>...

#### 英文版

<nav class="navigation"aria-label="Upper block" >
<nav class="megamenu" aria-label="Main menu">
<div class="left_block"><nav aria-label="Sub menu"> <div class="left_title">認識本院</div>...
<section class="fatfooter"><div class="container">< button type="button" aria-label=" FatFooter Open/Close" name="OPEN" class="btn btn-fatfooter"></button>
<nav aria-label="Fat footer"><ul><li>...

---

## <b class="mainTitle">關於 Tab focus</b>

### ⭐ Tab 回頁首的按鈕，若未按下Enter，要先回到網址列

>2.1.1 GN1210101E 確認所有功能都能透過鍵盤介面來操作
使用tab鍵可取代滑鼠操作的功能，如此無論是鍵盤還是滑鼠的事件皆可由鍵盤來完成。

#### <i class="fa fa-pencil fa-fw"></i> 問題說明：
使用鍵盤操作，焦點遊走至頁尾「回頁首」連結，使用者還沒按Enter執行，焦點已自動移到頁首，為便利鍵盤及語音軟體使用者操作，請等到使用者確定按下Enter才執行功能。

#### <i class="fa fa-pencil fa-fw"></i> 解決方式：

$('.scrollToTop')
.off()
.on('click', function (e) {
$('html, body').stop().animate({ scrollTop: 0 }, 400, 'linear');
$('a.goCenter').focus(); //加入這行
e.preventDefault();
});

// 下面這段keydown 可先關掉

// $('.scrollToTop').keydown(function (e) {
// $('html, body').stop().animate({ scrollTop: 0 }, 400, 'linear');
// _body.find('a.goCenter').focus();
// e.preventDefault();
// });

### ⭐ `<a>`拿掉href後，按tab無法focus

#### <i class="fa fa-pencil fa-fw"></i> 問題說明：
* `<a>`在非連結的狀態下，如果是按鈕功能，要加上role=button，並且不要加href，避免閱讀器混肴，但是沒有加href，按tab就無法被focus
* 有時menu第二層選單的情形下，第一層選單沒有連結，工程師套版時拿掉href

#### <i class="fa fa-pencil fa-fw"></i> 解決方式：
:::warning
直接在`<a>`加上 <b class="red">tabindex=0;</b>
:::

* 用js判斷加上：

document.querySelectorAll("a:not(a[href])").forEach(element => {
        element.setAttribute("tabindex", "0")
    });

### ⭐ 首頁的快捷列，tab到按下Enter後，要focus到該區的第一個連結

#### <i class="fa fa-pencil fa-fw"></i> 解決方式：

<!-- 直接寫連結 -->
<div class="fixed_sidebar_group">
  <div class="sidebar_list">
    <a href="#">
      <div class="list_img"><img src="images/fixed_sidebar_icon01.svg" alt=""></div>
      <div class="list_title">新聞稿</div>
    </a>
  </div>
  <div class="sidebar_list">
    <a href="#">
      <div class="list_img"><img src="images/fixed_sidebar_icon02.svg" alt=""></div>
      <div class="list_title">業務專區</div>
    </a>
  </div>
  
  ..........

<!-- 範例 -->
$(function () {
  $('.fixed_sidebar_group .sidebar_list a').each(function (index, el) {
    $(this).bind('click', function () {
      var num = $(this).parent('.sidebar_list').index() + 1;
      //先抓每一個li的序列，index從0開始，所以要+1
      $('body,html')
        .stop(true, true)
        .animate(
          {
            scrollTop: $('.s_' + num).offset().top,
          },
          0,
          'easeOutExpo'
        );
      //移動body scrollTop，做動畫，去取對應的section序列設定為offset=0，把該section推到最頂端
      // $('.s_' + num).find('a:first').focus();//可以這樣加
      $('.s_' + num)
        .find('.firstlink')
        .focus(); //可以這樣加
      return false;
    });
  });
});

---

## <b class="mainTitle">關於燈箱</b>

### ⭐ fancybox燈箱內的`<img>`沒有alt屬性

#### <i class="fa fa-pencil fa-fw"></i> 解決方式：

// 加上這段script
<script>
  $(document).ready(function () {
    $('[data-fancybox]').fancybox({
      afterLoad: function (instance, current) {
        current.$image.attr('alt', current.opts.$orig.find('img').attr('alt'));
      },
    });
  });
</script>

[**資料來源 🌐**](https://stackoverflow.com/questions/47493849/how-to-insert-alt-tag-for-fancy-box-images-fancybox3)

### ⭐ hyui舊版燈箱內的`<img>`沒有alt屬性

#### <i class="fa fa-pencil fa-fw"></i> 問題說明：

:::danger
舊版案子無障礙被抓錯，img 需有 alt屬性
:::

#### <i class="fa fa-pencil fa-fw"></i> 解決方式：

* 需修改slick-lightbox.js

<script>
  SlickLightbox.prototype.createModalItems = function () {
    var $items, createItem, links;
    if (this.options.images) {
      links = $.map(this.options.images, function (img) {
        return '<div class="slick-lightbox-slick-item"><div class="slick-lightbox-slick-item-inner"><img class="slick-lightbox-slick-img" src=" ' + img + '" alt=""/></div></div>';
      });
    } else {
      createItem = function (_this) {
        return function (el) {
          var caption, src, alt;
          caption = _this.getElementCaption(el);
          src = _this.getElementSrc(el);
          alt = $(el).data(_this.options.caption);
          return '<div class="slick-lightbox-slick-item"><div class="slick-lightbox-slick-item-inner"><img class="slick-lightbox-slick-img" src="' + src + '" alt="' + alt + '" />' + caption + '</div></div>';
        };
      }(this);
      $items = this.filterOutSlickClones(this.$element.find(this.options.itemSelector));
      links = $.map($items, createItem);
    }
    return links;
  };
</script>

### ⭐ fancybox燈箱內的文字若要可以複製
:::warning
1. button上面增加data-touch=“false”就可以了
1. 或在內文需要複製的地方，加上data-selectable=“true”
:::

### ⭐ 在燈箱使用 tab鍵（UI 操作與無障礙問題）
by 雅瓊
- 開啟燈箱後，focus 要引導到燈箱內；
- 以 tab 鍵在燈箱中遊走時，不可以走到燈箱外；
- 關閉燈箱後，focus 回到開啟燈箱的元件上。

<iframe height="300" style="width: 100%;" scrolling="no" title="tab in lightbox" src="https://codepen.io/yachiung/embed/JjLzVEd?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yachiung/pen/JjLzVEd">
tab in lightbox</a> by yachiung (<a href="https://codepen.io/yachiung">@yachiung</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

---

## <b class="mainTitle">關於標題 h</b>

### ⭐ 非單元標題或各區塊開頭處的標題，無需設置標籤
by 淑雅
#### 範例:

<div class="text_block">
  <h2 class="title">訴訟組最新法律見解</h2>
  <h3>林彥名違反期貨交易法案言詞辯論意旨書</h3>
  <p>
    法律問題：被告以一經營行為同時未經許可擅自經營期貨經理事業及經營全權委託投資業務，依想像競合犯關係，從一重論以較重之期貨交易法第112條第5項第5款之非法經營期貨經理事業罪，在量刑時應否一併考量輕罪即證券投資信託及顧問法第107條第1款所規定之「應併科」罰金刑？亦即，刑法第55條但書「不得科以較輕罪名所定最輕本刑以下之刑」之規定，即學理上所稱想像競合「輕罪封鎖作用」（或稱輕罪釐清作用），是否應結合輕罪所定法定最輕應併科之罰金刑？
  </p>
  <a href="/16314/16462/635942/1034313/post" title="林彥名違反期貨交易法案言詞辯論意旨書" class="more">詳全文</a>
</div>

#### <i class="fa fa-pencil fa-fw"></i> 解決方式：

<!-- 將原h3請改成 -->
<div class="subtitle">...</div>

### ⭐ 首頁h2標題如沒連結，請加入tabindex="0"
by 淑雅

- 視障人士會先掃過所有h標籤，再決定要讀哪一個單元，沒連結會tab不到，建議加入tabindex="0"
- a 最重要的屬性是 href ，但要注意 ， href 並不是必要的，沒有 href的 a 的意義轉為 placeholder（佔位），也會失去預設的cursor: pointer 樣式

<a role="menuitem">輔助技術用戶將此元素視為菜單中的一個項目，而不是一個鏈接。</a>
<a aria-label="輔助技術用戶只能感知這個 aria-label 的內容，而不是鏈接文本">Link Text</a>


---
## <b class="mainTitle">關於影片</b>

### ⭐ 問題：網頁使用embed元素，或以noembed元素提供替代內容。
by 淑雅

<embed name="8B25BB23349B0BA1442FDE19F6E1C2D0" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" src="about:blank" type="application/pdf" internalid="8B25BB23349B0BA1442FDE19F6E1C2D0">

>但大多數現代瀏覽器已經停用並移除了對瀏覽器插件的支援，因此如果你希望你的網站在普通用戶的瀏覽器上能夠正常運作，依賴 <embed> 是不明智的。

><noembed>元素是一個廢除的和不標準的方式，用於向不支持<embed>，或者不支持作者希望的進入式內容的瀏覽器提供替代（或者“後備”）內容。這個元素在HTML 4.01中廢除，以支持<object>。後備內容應插入在<object>開始和結束標籤之間。

>雖然這個元素仍然舊在許多瀏覽器中有效，它已經廢除了，並且不應使用。

#### <i class="fa fa-pencil fa-fw"></i> 解決方式：
:::warning
請使用<object>來代替。
:::

<object type="application/pdf"
    data="/media/examples/In-CC0.pdf"
    width="250"
    height="200">
</object>

---
## <b class="mainTitle">關於table</b>

### ⭐ 表格內使用範疇(scope)屬性，來建立表格行列標題儲存格與資料儲存格之間的關連

>如果表格標籤存在，且其內有超過一組以上內含<th>標籤的<tr>標籤組，則<th>標籤需使用scope屬性或使用id屬性與其他<th>標籤或<td>標籤中的headers屬性建立關聯，通過檢測，否則檢測失敗。

[**資料來源 🌐**](https://accessibility.moda.gov.tw/Download/Detail/1507?Category=63)

<table>
    <tr>
        <td></td>
        <th scope="col">星期一</th>
        <th scope="col">星期二</th>
        <th scope="col">星期三</th>
        <th scope="col">星期四</th>
        <th scope="col">星期五</th>
    </tr>
    <tr>
        <th scope="row">上午</th>
        <td>休館</td>
        <td>開放</td>
        <td>開放</td>
        <td>開放</td>
        <td>開放</td>
    </tr>

---
## <b class="mainTitle">關於圖片img</b>

### ⭐ 連往相同資源的毗鄰圖片與文字，其由文字內容及替代文字產生之鏈結文字只能有一份

[**資料來源 🌐**](https://accessibility.moda.gov.tw/Download/Detail/1516?Category=63)

<!--  範例1： -->
<a href="foo.htm">
    <img src="house.gif" alt=""/>回去首頁
</a>
<!-- 範例為一個回去首頁的圖示與文字超連結，文字內容已經是「回去首頁」，所以<img>標籤中的alt屬性就不再多做設定。 -->


<!--  範例2： -->
<a href="foo.pdf" title="檔案名稱">
    <img src="pdf.gif" alt="pdf檔案"/>點我下載
</a>
<!-- 範例為一個檔案下載的圖示與文字超連結，檔案類型使用圖示表示並未描述在文字內容，所以<img>標籤中的alt屬性顯示為「pdf檔案」，並與連結文字區分 -->
    

---
## <b class="mainTitle">關於slick</b>

### ⭐ slick 輪播套件的無障礙修改
輪播的內容須有暫停鍵
[參考連結 🌐](https://hackmd.io/ydv6MD0UT-GxDPlUAOMGhA)

### ⭐ 輪播項目之索引標籤提示文字僅有數字，如：「1 of 9」。有多個索引標籤或連結之提示文字僅有英數字，請補充較詳細之提示文字，讓使用導讀軟體之使用者可以明確了解該元件之功能與用途。全網站如有相同問題請一併修正。

#### <i class="fa fa-pencil fa-fw"></i> 解決方法：

#### 1.) 思晨在slick.min.js做調整

//取caption
window.onload = function () {
  let caption = document.querySelectorAll(".caption");
  let btn = document.querySelectorAll(".hybutton");
  if (btn != null) {
    for (let w = 0; w < btn.length; w++) {
      btn[w].setAttribute("aria-label", caption[w].textContent);
    }
  }
}

#### 2.) 在各個slider 做js調整

取文字
customPaging: function(slider, i) {
                var title = $(slider.$slides[i]).find('.title').html().trim();
                return $('<button type="button" aria-label="'+title+'"/>').text(title);
            }
      
取圖片的alt    
customPaging: function(slider, i) {
             var title = $(slider.$slides[i]).find('img').attr('alt').trim();
            return $('<button type="button" aria-label="'+title+'"/>').text(title);
            }

<i class="fa fa-pencil fa-fw"></i> slick.js 修改拿掉


<i class="fa fa-pencil fa-fw"></i> slick.min.js 修改拿掉


---
## <b class="mainTitle">關於Button</b>

### ⭐ (人工檢測）屬於Button按鈕樣式，需使用<Button>標籤 或 使用role屬性(role=”button”)

:::warning
右上方區塊「搜尋」連結，請提供角色（role屬性）設定為按鈕（role=”button”），以供瀏覽器與報讀軟體等輔具辨識與報讀

建議將 `<a href="#">` 改成 <button type="button">
:::


---
## <b class="mainTitle">關於表單</b>

### ⭐ 可見的表單控制元件均需有對應的標籤組件，或有標題屬性，且其內容或值均不得為空字串或空白，請使用Label for標籤或類似機制提示資訊，並對應input ID或select ID

#### <i class="fa fa-pencil fa-fw"></i> 解決方法：
:::warning
在input 前若要加上label ，而label內的文字不要顯示時，除了font-size可設定0之外，還要加上 line-height: 1，不然會有一個小間隔， 因為被body的設定line-height: 1.45em 影響了
:::

### ⭐ (人工檢測）表單輸入框，需加<autocomplete>屬性

<font color="#ff0000">此項請工程師處理即可</font>

autocomplete屬性規定，輸入字段是否應該啟用自動完成功能

啟用 autocomplete="on"

不啟用 autocomplete="off"

懲戒法院： https://tpp.judicial.gov.tw/tw/lp-1832-031.html

> < input type="text" value="" placeholder="請輸入標題" id="Q_DMTitle" name="Q_DMTitle" <font color="#EE428B">autocomplete="off"</font> >


---

## <b class="mainTitle">關於色彩對比</b>
### 🌈 ⭐ GN2140300E 確認文字（及影像文字）與文字後面的背景間，至少有4.5:1的對比值
除非是下列各款中的例外情形，否則文字及影像文字的視覺呈現，至少要有4.5:1的對比值：
1. 大尺寸的文字及大尺寸的影像文字至少要有3:1的對比值。
2. 停用中的使用介面元件上的、純裝飾用的、任何人都看不到的文字或影像文字，或者只是另1張圖片的局部且該圖片顯然還有其他視覺內容，都毋須要求對比值。
3. 標識或商標名稱上的字樣沒有最小對比值的要求

#### <i class="fa fa-pencil fa-fw"></i> 修正回覆：利用線上網站測試顏色
https://www.whocanuse.com/
https://www.siegemedia.com/contrast-ratio

## <b class="mainTitle">關於驗證碼</b>
### 🌈⭐ GN1210100E 提供由鍵盤觸發的事件處理程式，經檢視「驗證碼」圖片執行後會更新驗證碼，以鍵盤無法焦點至其上更新，請修正。
指引2.1：鍵盤可操作
讓所有的功能都能透過鍵盤使用。
成功準則2.1.1 鍵盤
內容的所有功能都能透過鍵盤介面來操作，而且不能額外要求在限定時間內完成按鍵操作。特殊目的的網頁(例如遊戲網頁要求在特定時間內完成指定操作)不在此限。
GN1210100E 提供由鍵盤觸發的事件處理程式，經檢視「驗證碼」圖片執行後會更新驗證碼，以鍵盤無法焦點至其上更新，請修正。

<img src="images/basic/captcha.gif" alt="驗證碼" class="captcha" tabindex="0">