新北市立淡水國民中學

3/6(五)無障礙網頁規範─待修正項目：

1. 指引1.1(替代文字)：為任何非文字的內容提供相等意義的替代文字，使這些內容能依人們的需求，轉變成大字版、點字、語音、符號或簡化過的語言等不同型態
   1.1.1 - 非文字內容(檢測等級A)
   HM1110100E - 圖片需要加上有意義、可代替圖片在文件上下文中的功能及內容的替代文字
   問題網址：https://www.tsjh.ntpc.edu.tw/p/426-1000-4.php?Lang=zh-tw#start-C (chrome)
   問題說明：中央區塊圖片只使用photo做為說明，報讀軟體使用者無法理解圖片內容，請提供有意義的替代文字說明。
   >>>>已一一添加圖片文字說明
2. HM1110101E - 僅在一組緊連圖片中的其中一個項目使用替代文字，描述該組圖片的所有項目
   問題網址：https://www.tsjh.ntpc.edu.tw/p/426-1000-1.php?Lang=zh-tw (chrome)
   問題說明：中央區塊走過從前‧飲水思源 ＞ 35周年校慶系列圖片僅需在第一張圖片提供詳細的說明包含張數資訊，第二張圖片說明請留空即可，且也無需使用ficaption標籤。
   >>>>因本校一般視力之師生亦未完全知道圖片內之校警或建築位置，故保留ficaption內文字說明，或考慮將ficaption改為div標籤。
3. HM1110103E - 圖片無法以替代文字清晰表達時，利用長描述提供更詳盡的說明網頁網址，利用整個說明網頁的篇幅來詳盡描述，最後並要能連結回原本的圖片
   問題網址：https://www.tsjh.ntpc.edu.tw/p/426-1000-4.php?Lang=zh-tw#start-C (chrome)
   問題說明：中央區塊圖片內含資訊內容，請於圖片下方提供詳細的說明。
   >>>>如第一項說明回覆
4. 指引1.3(可調適)：建立能以不同方式(例如簡化的版面)呈現，而仍不會喪失資訊或結構的內容
   1.3.1 - 資訊與關連性(檢測等級A)
   HM1130104E - 適當使用巢狀標頭呈現文件結構
   問題網址：https://www.tsjh.ntpc.edu.tw/p/426-1000-26.php?Lang=zh-tw#start-C (chrome)
   問題說明：中央區塊校歌歌辭應與前面的音樂同一層級，請將其修改為三級標題。
   >>>>已依上述說明將h2修改為h3標籤
5. HM1130107E - 使用表格標記來呈現表格資訊
   問題網址：https://www.tsjh.ntpc.edu.tw/p/426-1000-11.php?Lang=zh-tw (chrome)輔導處、幼兒園、進修部、人事室、會計室頁籤
   問題說明：中央區塊表格的行列標題未使用＜th＞標籤，報讀軟體讀取表格時無法結合標題與資料內容，請於行列標題使用＜th＞標籤。
   >>>>已依上述說明將頁面中的表格標題列改為th標籤
6. 指引2.4(可導覽)：提供協助使用者導覽、尋找內容及判斷所在的方法
   2.4.2 - 網頁標題(檢測等級A)
   HM1240200E - 提供網頁的描述性標題
   問題網址：https://www.tsjh.ntpc.edu.tw/p/403-1000-23.php?Lang=zh-tw#start-C (chrome)
   問題說明：網站有大量可翻頁的內容，為了讓使用者得知所在的頁數，請於網站標題提供相關資訊，例如「頭版公告-第二夜」全網站有相同問題請修正。
   >>>>已經利用JS語法將頁碼加到頁籤標題及h2標題之中
7. 2.4.3 - 焦點順序(檢測等級A)
   GN1240300E - 按照內容的序列及關連性來安排互動元件的放置順序
   問題網址：https://www.tsjh.ntpc.edu.tw/app/home.php?Lang=zh-tw (chrome)
   問題說明：左方區塊暫停輪播按鈕，需放置於輪播組件的啟始處，即遊走到輪播組件時，第一個可被焦點到的元件。
   >>>>已將上述輪播按鈕由FB底部移動至頂部成為第一個可被焦點到的元件
8. 2.4.4 - 鏈結目的(脈絡)(檢測等級A)
   HM1240402E - 合併相同資源的毗鄰圖片與文字鏈結
   問題網址：https://www.tsjh.ntpc.edu.tw/app/home.php?Lang=zh-tw (chrome)
   問題說明：機關logo，圖片與文字分開超連結，鍵盤使用者在游走時會聽到兩次相同連結，請將圖片連結與文字連結合併為一個即可。
   >>>>處理中...
   <a href="/" title="回首頁" tabindex="-1" data-title="專為窄小螢幕提供">
   <img class="preview invisible" alt="新北市立淡水國民中學" src="/var/file/0/1000/img/5/banner-right-2.png" width="100%" loading="lazy">
   <img class="full loaded" alt="新北市立淡水國民中學" src="/var/file/0/1000/img/5/banner-right-hq4.png" width="100%" onload="this.classList.add('loaded');this.previousElementSibling.classList.add('invisible');" loading="lazy">
   </a>
   
   <a href="/" title="回首頁" aria-hidden="true" tabindex="-1" data-title="專為窄小螢幕提供">
   </a>
   利用【aria-hidden="true"】使螢幕閱讀器「無視」第二個a元素及其所有子元素。
    
9. HM1240404E - 針對脈絡中的鏈結，用標題屬性來補充鏈結文字
   問題網址：https://www.tsjh.ntpc.edu.tw/p/426-1000-6.php?Lang=zh-tw#start-C (chrome)
   問題說明：中央區塊提供下載的pdf檔案未提供檔案格式資訊，請修正。
   >>>>此為本校行事曆下載頁面，僅依照指示添加 PDF檔案格式提示資訊
10. 2.4.5 - 多種方式(檢測等級AA)
    GN1240500E - 提供網站導覽、導覽工具或機制、搜尋功能、網頁清單鏈結等功能，協助使用者尋找內容
    問題網址：https://www.tsjh.ntpc.edu.tw/p/17-1000.php#start-C (chrome)
    問題說明：網站的快速鍵說明需同時提供firefox之操作方式，當前只提供chrome之操作方式，請修正。
    >>>>依指示修正無障礙聲明(添加FireFox快速鍵)
11. 指引4.1(相容性)：針對目前及未來的使用者代理與輔助科技，最大化其相容性
    4.1.2 - 名稱、角色和值(檢測等級A)
    GN1410200E - 使用者介面元件應暴露名稱與角色，允許直接設定可由使用者設定的屬性，並在變更時提供通知
    問題網址：https://www.tsjh.ntpc.edu.tw/ (chrome)
    問題說明：
    1. (1) 用來控制音效按鈕無法提示按鈕當前狀態，建議可以將文字說明靜音，狀態部份則使用aria-pressed屬性，按下時使用aria-pressed=”true”的屬性與值，沒按下時則使用aria-pressed”false”的屬性與值。
    2. (2) 用來選擇深淺色主題，核取方塊功能實際為按鈕，請更改語法，並於標籤中使用aria-press屬性，按下時使用aria-press=”true”的屬性與值，沒按下則使用aria-press=”false”的屬性與值，文字說明請改為切換為深色模式。

       音效按鈕：
       從「只有按鈕名稱」改成「有名稱、也有目前開關狀態」

       主題切換：
       從「checkbox 外觀模擬切換」改成「真正具有 button 語意的切換按鈕」

12. 問題網址：https://www.tsjh.ntpc.edu.tw/app/home.php?Lang=zh-tw (chrome)
    問題說明：
    1. (1) 上方區塊用來翻譯語言的連結，功能實際為按鈕，請用role屬性將連結改為按鈕。
    2. (2) 用來翻譯語言的按鈕，無法提示選單狀態，建議於標籤中使用aria-expanded屬性，展開時使用aria-expanded=”true”的屬性與值，收何時則使用aria-expanded=”false”的屬性與值。
    3. (3) 翻譯語言選單，展開後，裡面的各項連結，功能實際為按鈕，請用role屬性改為按鈕。
       >>>>上述三樣皆已經如指示完成修正。
    4. (4) 網站主選單從認識本校到較學員地，點擊後並沒有前往新頁面，請勿於標題屬性提示原頁面開啟，以免誤導使用者。
    5. (5) 左方區塊政公告、淡中閱來悅愛讀、教育局授權軟體、數位工具應用、學校場地開放借用選單按鈕點擊後並未前往其他頁面，因此標題屬性請勿提供原頁面開啟，以免誤導使用者。
    6. (6) 網站主選單親師生平台選單按，點擊後並未前往新頁面，也沒有開啟新視窗，因此標題屬性請勿提供另開新視窗，以免誤導使用者。
       >>>>因此選項為下拉式選單的第一層標題，故移除超連結，單純作為第一層選單標題使用
       >>>>已依指示移除多餘且有誤導性的title屬性
    7. (7) 左方區塊學校行政二級標題前面，上一個、下一個連結，功能實際為按鈕，請抈ROLE屬性將連結改為按鈕。
    8. (8) 執行上一個、下一個按鈕，報讀軟體未報讀選取的輪播項目，執行後，報讀軟體必須能報讀選取的輪播圖片，請修正。
       >>>>加入【role=button】以及【執行上一個、下一個按鈕後，focus在輪播項目上】
    9. (9) 本網站為中文語系，右方區塊用來控制輪播狀態的按鈕，文字說明請用中文。
       >>>>似乎是指YouTube區塊
       (1)play改為中文【播放】
       (2)按完上一個或下一個後，focus在切換的內容上。(評估是否需要)
13. 問題網址：https://www.tsjh.ntpc.edu.tw/p/406-1000-9134,r23.php?Lang=zh-tw#start-C (chrome)
    問題說明：
    1. (1) 中央區塊設定語速連結，功能實際為按鈕，請用role屬性將連結改為按鈕。
    2. (2) 設定語速按鈕 具有選單功能，報讀軟體無法提示展開與收合，請於標籤中使用aria-expanded屬性，展開時使用aria-expanded=”true”的屬性與值，收合時則使用aria-expanded=”false”的屬性與值。
       >>>>
       原「設定語速」由功能性連結改為 button 元件，符合按鈕語意。
       為展開/收合功能補上 aria-expanded，展開時為 true、收合時為 false。
       補上 aria-controls，關聯至語速調整控制元件。