# 近期常見無障礙人工檢測問題
###### 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>

### ⭐ 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();
    });

## <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">

## <b class="mainTitle">Main標籤</b>
### ⭐ GN1410200E - 使用者介面元件應暴露名稱與角色，允許直接設定可由使用者設定的屬性，並在變更時提供通知
指引4.1(相容性)：針對目前及未來的使用者代理與輔助科技，最大化其相容性
4.1.2 - 名稱、角色和值(檢測等級A)
GN1410200E - 使用者介面元件應暴露名稱與角色，允許直接設定可由使用者設定的屬性，並在變更時提供通知
#### 問題網址：https://www.ttb.moj.gov.tw/
#### 問題說明：
為讓螢幕報讀軟體使用者能有多種定位至主要內容區之方式，全網站請於主要內容區起始處使用
＜main＞標籤或補充role=『main』，以使螢幕報讀軟體能提示該區域為「主要內容區地標」。

<main id="aC" class="main">...</main>

<div id="aC" class="main" role="main">...</div>

## <b class="mainTitle">文字大小切換</b>
### ⭐ GN1410200E - 使用者介面元件應暴露名稱與角色，允許直接設定可由使用者設定的屬性，並在變更時提供通知
指引4.1(相容性)：針對目前及未來的使用者代理與輔助科技，最大化其相容性
4.1.2 - 名稱、角色和值(檢測等級A)
GN1410200E - 使用者介面元件應暴露名稱與角色，允許直接設定可由使用者設定的屬性，並在變更時提供通知
#### 問題網址：https://www.ptd.moj.gov.tw/282978/282982/
問題說明：執行網頁上方切換字體大小的功能按鈕後，選定的大小會變成藍色，但無論是大、中、小自級語音皆報讀「切換按鈕沒按下」，視障人士無法得知目前狀態已變更，請提供報讀軟體說明文字，讓使用者知道目前狀態，全網站相同問題請一併修正。
#### <i class="fa fa-pencil fa-fw"></i> 修正回覆：文字大小未動作時aria-pressed="false"，已按下請判斷成aria-pressed="true"

#### html

<div class="font_size">
  <span id="fontSizeLabel">字型大小：</span>
  <ul aria-labelledby="fontSizeLabel">
      <li><a href="#" role="button" class="small" aria-pressed="false">小</a></li>
      <li><a href="#" role="button" class="medium active" aria-pressed="true">中</a></li>
      <li><a href="#" role="button" class="large" aria-pressed="false">大</a></li>
  </ul>
</div>

#### javascript

document.addEventListener('DOMContentLoaded', () => {
  const fontSizeLinks = document.querySelectorAll('.font_size a');

  fontSizeLinks.forEach((link) => {
    link.addEventListener('click', (event) => {
      event.preventDefault();

      // 移除所有按鈕的 active 類別和 aria-pressed=true
      fontSizeLinks.forEach((l) => {
        l.classList.remove('active');
        l.setAttribute('aria-pressed', 'false');
      });

      // 為當前按鈕添加 active 類別和 aria-pressed=true
      link.classList.add('active');
      link.setAttribute('aria-pressed', 'true');

      // 根據按鈕類別更新頁面字型大小
      if (link.classList.contains('small')) {
        document.body.style.fontSize = '0.875em';
      } else if (link.classList.contains('medium')) {
        document.body.style.fontSize = '1em';
      } else if (link.classList.contains('large')) {
        document.body.style.fontSize = '1.125em';
      }
    });
  });
});

#### 語法說明

### aria-pressed屬性指示切換按鈕的目前「按下」狀態。
新增aria-pressed 具有角色的元素button會將按鈕變成切換按鈕。此aria-pressed屬性僅與切換按鈕相關。它代表按鈕當前的“按下”狀態。
該值為“三態”，表示該值可以設定為true、false、mixed、 或undefined值。aria-pressed，與大多數三態值類型一樣，預設值為undefined。
切換按鈕需要完整的按下和釋放週期才能更改其值。按下並釋放一次，將值變更為true。如果再次按下並釋放，該值將變回false。

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

## <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焦點變化

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();
      }
    }

#### 語法說明
### 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

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