無障礙網頁規範

十二月 15, 2018 分類 accessibility

本文閱讀次數:次

以下是網站無障礙規範 2.0 的內容

我把 AA 級的規範盡量拿出來，如果要達到 AAA 級，仍需到網站無障礙規範 2.0參考

1. (替代文字)為任何非文字的內容提供相等意義的替代文字，使這些內容能依人們的需求，轉變成大字版、點字、語音、符號或簡化過的語言等不同型態

像是圖片要提替代文字(alt)

2. (時序媒體)針對時序媒體提供替代內容

必須提供字幕或者是替代性的音訊或視訊
AAA 級須提供手語翻譯

3. (可調適)建立能以不同方式（例如簡化的版面）呈現，而仍不會喪失資訊或結構的內容

呈現的內容要能以程式化判讀，或有對應的文字
不能單以元件的形狀、尺寸、視覺位置、導向、聲音等知覺特徵來理解或操作
當內容的順序會影響閱讀，要以程式化的方式，判斷正確的閱讀方式

4. (可辨識)：讓使用者能更容易地看見及聽到內容、區分前景和背景

色彩不能是單一提供資訊的視覺手段，可能要註解顏色所代表的特性
三秒以上的音訊須提供操作，結束、暫停，調整音量…
字體有提供放大縮小的功能，要能放大到 200%

5. (鍵盤可操作)：讓所有的功能都能透過鍵盤使用

內容的功能可以用鍵盤做操作，且沒有時限，特殊目的的網頁不在此限
如果可以改變焦點，那就需要有辦法離開焦點;如果離開焦點需要用普通的方向鍵、TAB鍵，則須告知使用者操作

6. (充足時間)：提供使用者充分的時間來閱讀及使用內容

當在允許使用者可以延長時限的時候，必須提供以下一種方法
- 使用者在遇上時間限制之前就能關閉
- 使用者在遇上時間限制之前就能調整，至少是預設的10倍以上
- 計時截止之前先警告使用者，並保留至少20秒的時間，讓使用者用簡單的動作（例如「按空白鍵」）來延長時限，且使用者至少能延長時限10次以上。
當會移動、閃動、捲動或自動更新的資訊，以下都必須達到
- 對於任何會移動、閃動或捲動，且為(1)會自動開始、(2)維持超過5秒鐘、(3)與其他內容平行呈現的資訊來說，除非這種移動、閃動或捲動乃是活動的1部分且不可或缺，否則就要有個機制來讓使用者可以暫停、中止或加以隱藏。
- 對於任何會自動更新，且為(1)會自動開始、(2)與其他內容平行呈現的資訊來說，除非這種自動更新是內容的1部分且不可或缺，否則就要有個機制來讓使用者可以暫停、中止或加以隱藏，或能控制更新的頻率。

7. (防痙攣)：不要用任何已知會引發痙攣的方式來設計內容

網頁上不可含有任何一個元件，其在任何1秒鐘之內，會閃爍超過3次且超出一般閃爍及紅閃爍閾值

8. (可導覽)：提供協助使用者導覽、尋找內容及判斷所在的方法

最主要的兩個功能，告訴使用者他們身處何處，讓使用者能到其他地方

可以跳過多頁重複出現的內容區塊
需要有標題來描述主旨或目的
每一個連結的目的，須提供使用者知道

9. (可讀性)：讓文字內容可讀並可理解

縮寫須提供展開全文或意義
不常見的用法的字詞、片語或俗諺，可以有機制提供其定義
字詞的發音不能以前後文判斷，需提供方法指名其發音

10. (可預期性)：讓網頁以可預期的方式來呈現及運作

在一組網頁中，具有相同功能性的元件，就要有一致的識別
當任何元件獲得焦點時，並不會使前後脈絡產生改變
除非使用者做出了變更，否則在一組網頁中，反覆出現的導覽機制每次都要有相同的相對順序

11. (輸入協助)：幫助使用者避開及更正錯誤

如果會自動偵測輸入的錯誤，則指明出錯的項目並以文字向使用者描述
當內容需要使用者輸入時，提供標籤或指引
於會造成法律義務或讓使用者發生財務交易的網頁來說，如果要從資料存放系統修改或刪除使用者可控制的資料、或要送出使用者測試回應時，下列各款需做到一項：
- 送出的結果可反悔。
- 由使用者所輸入的資料會先檢查有無輸入錯誤，並提供使用者更正的機會。
- 完成資料送出前，有個機制來讓使用者回顧、確認及更正資訊

12. (相容性)針對目前及未來的使用者代理與輔助科技，最大化其相容性

對於用標記語言(Ex:HTML)來實作的內容來說，除非經規格所容許，否則組件要有完整的開始與結束標籤、按規格巢狀編排、不得有重複的屬性，且任何ID都要獨一無二
對於所有的使用者介面元件（包括但不限於表單組件、鏈結及由腳本所產生的組件）來說，其名稱及角色要能用程式化的方法判定；其能由使用者所設定的狀態、屬性、值，則要能用程式化的方式設定；而使用者代理，包括輔助科技，則要有這些項目變更的通知。

作者的圖片

kwei

挑戰每天的自己，比昨天更前進一點

CCU_Student

Taiwan

沒有找到文章

AlphaVSOpacity

Sep 9, 2019

opacity 跟 background 差別

opacity 子元素都會受影響，也會變成透明
background-color 子元素就不會影響

example

opacity

Test

<style>
.bg{
background: url("/images/alphaBG.png");
width: 800px;
height:600px;
background-position:center;
color:black;
font-size:8rem;
opacity:.6;
}
.bg-txt{
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
</style>
<div class='bg'>
    <div class='bg-txt'>
        Test
    </div>
</div>

上面的範例連文字都會有透明

backgroud

Test

<style>
.bg{
background: url("/images/alphaBG.png");
width: 800px;
height:600px;
background-position:center;
color:black;
font-size:8rem;
}
.bg-txt{
width:100%;
height:100%;
background: rgba(255,255,255,.3);
display:flex;
justify-content:center;
align-items:center;
}
</style>
<div class='bg'>
    <div class='bg-txt'>
        Test
    </div>
</div>

文字不會透明了，只有背竟有透明一點

參考資料

CSS Opacity VS Alpha | Opacity 跟 Alpha的差異 | 調整透明度 CSS實現背景圖片透明，文字不透明效果

Fetch POST 傳遞資料

Jul 7, 2019

最近剛好在使用 fetch 代替 ajax ，剛好遇到了一些小問題，所以寫下來提醒一下自己

fetch 是一個新的 API 可以讓我們可以去做 AJAX ，而且用起來更直觀

當要使用 fetch 來做 POST 我們可以用以下的寫法:

fetch(URL,{
    method:'POST',
    method: 'cors'  // 用來作為 跨域請求用的
})

這樣就可以使用 fetch 發出 POST 的請求，當我們要附上資料時，可以用 FormData 這一個 class 來帶上我們的資料

const fd = new FormData([可以直接指定 dom 元素是 form 的])

const fd = FormData();
fd.append('key',value);

可以用以上兩種方法來給 FormData 資料

最後只需要把 FormData 帶入 fetch 中的欄位，就可以成功帶上資料了

fetch(URL,{
    method:'POST',
    method: 'cors',  // 用來作為 跨域請求用的
    body: fd
})

這邊不需要去指定 Content-Type ，因為 fetch 會幫我們帶上適當的屬性

建立 moodle 工作環境

Apr 4, 2019

環境要求 os ubuntu 18.04.1 apache mysql php moodle 3.x 安裝教學用來建立 server 用的 apache 更新套件 sudo apt update 安裝apache sudo apt install apache2 讓 apache 可以通過防火牆之前，先看一下 sudo ufw app list 現在讓 apache 可以通

建立 CAS server

Apr 4, 2019

環境要求 jdk-11 apache-maven-3.5.2 apache-tomcat-9.0.17 install openjdk sudo add-apt-repository ppa:openjdk-r/ppa sudo apt update sudo apt install openjdk-11-jdk java -version #看一下版本跟有無安裝成功 install tomcat Create Tomcat User sudo groupadd tomcat #創建一個 tomcat 群組 sudo useradd -s /bin/false -g tomcat -d /opt/tomcat tomcat #創建一個較 tomcat 的使用者

PHP session 換頁找不到了

Mar 3, 2019

最近重新架 PHP 的環境，在使用 session 的時候發現了問題，當我在這個網頁設定了 session 後，當我跳轉到另一個網頁後，發現 session 不見了!!!!

我確認了一下我有沒有開啟 session(session_start()) ，也確認了我是在同一個網域底下，結果是我在其中一個關鍵的 php 檔案沒有開啟…

於是我上網找了一下有沒有可以避免的方法，發現是 session.auto_start ，它可以自動幫我們開啟 session ，這樣就不會有時忘了開了，可以在 php_info() 中找找看，如下圖，如果確認沒有開後，可以到 php.ini 裡去改掉他

session.auto_start=1 這樣應該就可以了

Box Model

Jan 1, 2019

在 HTML 裡的每個元素都有一個 box-model，而 box-model 是用來表達一個元件的呈現方式，在 CSS 裡可以用 box-sizing 這個屬性去設定，以下是他可以設定的值 content-box –> 預設的模

無障礙網頁規範

Dec 12, 2018

以下是網站無障礙規範 2.0 的內容我把 AA 級的規範盡量拿出來，如果要達到 AAA 級，仍需到網站無障礙規範 2.0參考 1. (替代文字)為任何非文字的內容提供相等

Alias

Nov 11, 2018

alias 可以用來自己定義指令，讓自己更方便用法: alias 新指令的名稱=‘指令名稱’ 如果不想要每次登入都打一遍，可以在家目錄底下的

與virtual box共用資料夾

Nov 11, 2018

如何跟 Virtual Box 共用資料夾 step 1 先創建一個資料夾，名字隨便，這個是要拿來做共用的資料夾 step 2 開啟共用權限右鍵資料夾點選內容在點選第二個的共用點選共用新

製作評分星星的方法

Aug 8, 2018

製作評分星星的方法最近剛好在想要如何做評分星星的效果，所以就來做一下了 ps 如果有跑版把 .text li 裡的 width 條一下應該就可以了成品 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ .test{ height: