無障礙網頁對障礙者的影響 財團法人愛盲基金會 馮俊揚.

Presentation on theme: "無障礙網頁對障礙者的影響 財團法人愛盲基金會 馮俊揚."— Presentation transcript:

1 無障礙網頁對障礙者的影響 財團法人愛盲基金會 馮俊揚

2 誰需要無障礙網頁? ‧一般人（網站導覽、跨平台的使用者） ‧小孩（顏色、字體太小） ‧老人（視覺干擾） ‧視障者（替代文字能正確呈現）
‧聽障者（多媒體文字說明） ‧肢障者（要能使用鍵盤操作） ‧腦性麻痺（不可以只使用滑鼠操作）

3 視障輔具介紹-螢幕放大軟體

4 視障輔具介紹- windows作業系統內建放大鏡

5 視障輔具介紹-螢幕閱讀

6 視障輔具介紹-智慧型裝置上網

7 點字如何拼出來?

8 方便障礙者使用的網頁應具備哪些條件 ‧保持段落短 ‧網站風格一致 ‧選擇統一的佈局 ‧使用框架時，對齊方式要一致 ‧提供快速導引的定位點
‧圖片應加上簡短清楚的替代文字說明 ‧避免設置背景音樂，除非可以讓使用者選擇開關 ‧文字後背景避免有圖片

9 從有障礙到無障礙-首頁

10 從有障礙到無障礙-首頁語法比較 首頁1 <img src="top_logo.gif" alt="Red dot with a white letter 'C' that symbolizes a moon crescent as well as the sun. This logo is followed by a black banner that says 'CITYLIGHTS' which is the name of this online portal. Finally, the slogan of the portal, 'your access to the city', follows in a turquoise green handwriting style and with a slight slant across the top banner." ... > 網站標誌是白色的字母C在紅色的圓底上，象徵著月亮新月和太陽。這個標誌旁邊是一個黑色的字“萬家燈火”，這是網站的名字，最右邊是網站的標語，“您訪問的城市”，松石綠的手寫風格，並有輕微傾斜。 img src="../../img/after/toplogo.png" alt="Citylights: your access to the city.">

11 從有障礙到無障礙-表格語法比較 首頁6 直接用圖片來做項目符號， 子彈頭是多餘的訊息 <img src="list_bullets.gif" alt="bullet" ... > 用正確的語法來顯示列表 <ul class="elsewhere"><li><a href="../../offsite.html">Killer Bees</a></li><li><a href="../../offsite.html">Onions</a></li></ul> 使用CSS樣式表將單調的項目符號換成子彈頭的圖片 li a {background: url(../img/after/list_bullets.png) no-repeat top left; .... }

12 從有障礙到無障礙-新聞

13 從有障礙到無障礙-新聞頁語法比較 新聞頁 標題沒有用正確標題語法
<font size="5" color="#FFFFFF"><P class=headline>Heat wave linked to temperatures</P></font> <h2 id="story1">Heat wave linked to temperatures</h2

14 從有障礙到無障礙-表格

15 從有障礙到無障礙-表格語法比較 <table ...> <tr> <td><b>ADULT</b></td> <td><b>FS</b></td> <td><b>RS</b></td> <td><b>DC</b></td> <td><b>ST</b></td> </tr> <tr> <td><b>Thelonius Mank - reincarnate</b></td> <td><b>$20.90</b></td> <td><b>$20.90</b></td> <td><b>$20.90</b></td> <td><b>$20.90</b></td> </tr> <table width="100%" ... summary="Ticket prices for each concert are indicated by seat allocation; there are separate sets of ticket prices for concessions and groups of 5 or more people"> ... <caption class="head">Ticket prices for the Frank Zappa and Theolonius Mank concerts</caption> ... <th id="c1">Adult</th> <th id="c2"><div>Front Seats</div></th> ... <th id="c6" headers="c1" abbr="Mank">Thelonius Mank - reincarnate</th> <td headers="c1 c2 c6">$20.90</td>

16 從有障礙到無障礙-驗證碼 有障礙 無障礙

17 網路安全顏色顯示在黑色時幾個對比度 216個測試顏色 通過3:1色彩 通過4.5:1顏色 通過7:1色彩

18 網路安全顏色顯示在白色時幾個對比度 216個測試顏色 通過3:1色彩 通過4.5:1顏色 通過7:1色彩

19 白色為底色對比範例 3:1的例子 :1的例子 :1的例子

20 白色字與不同底色對比範例 3:1的例子 :1的例子 :1的例子

21 黑色為底色對比範例 3:1的例子 :1的例子 :1的例子

22 黑色字與不同底色對比範例 3:1的例子 :1的例子 :1的例子

23 資料來源 ‘全球資訊網協會（World Wide Web Consortium，W3C）http://www.w3.org
台灣鐵路管理局 PChome Online 網路家庭 NVACCESS

24 謝謝聆賞！！