Lab27 Making images accessible

安裝 KompoZer  

在開啟其中的 kompozer.exe 應用程式 

使用應用程式 開啟 指定的網頁 http://bloggercamp.blogspot.com/2007/01/2007.html
 
(網頁已存在桌面上，以供應用程式開啟)

對於圖片點右鍵→Image and Link Propertiesn→點選Alternate tex並在框框中描述圖片的內容

存好更改過的網頁，在使用火狐開啟，點選Text Equivalents→Show Text Equivalents

就可以看到盲人使用電腦讀聲器所讀到的文字

 

Lab23 Making web pages accessible

發現google的錯誤

修改其錯誤方式
存取 google的首頁在桌面上
再用 Edit with Notepad++ 開啟此檔案
 並修正程式碼

1.其中一個fail 缺少 title
在 <ifarme>中 加入 title

 

2.刪除所有的 <center>

3.搜尋<b> </b> 改成  <h3> </h3> (h1~h6都可以)

4.找尋<body     在其中加入 lang="en"

5.找尋<input     在其中加入 lang="en"

6.點選最後一個warm 會出現下圖，在程式碼中把Link Test中的字改成8個字數即可解決

 

最後解決這些fail

Lab24 Firefox Accessibility Extension

安裝  Firefox Accessibility Extension  的附加元件


並工具列上按下Reports→ Accessibility Issues


http://www.cwb.gov.tw/V7/index.htm 中央氣象局

 http://www.cbc.gov.tw/mp1.html  中央銀行

 http://www.nhi.gov.tw/ 中央健保局

Lab22 More on HTML

製作方法請參見Lab 21HTML
進入

HTML Tables
製作出表格

HTML Lists
製作出列表

Lab26 使用HTML 4 和HTML 5的影音播放

測試以下HTML 4 和HTML 5的影音播放功能

• HTML4 Video
• HTML5 Video

比較兩者有何差異。
此題目及文章來自於 中原大學的張耀仁教授的部落格網站

紅色框框代表兩者程式碼的不同
HTML5 Video具有HTML4 Video 更多電腦可撥放影片的功能，使得瀏覽器本身可直接撥放影片，不需要像 HTML4 Video 電腦必須支援Flash才能夠撥放影片。

HTML4 Video

HTML5 Video

Lab25 模擬色盲的效果

進入  VisCheck   點選 Run Images

選擇

Select the type of color vision to simulate: Deuteranope (a form of red/green color deficit) Protanope (another form of red/green color deficit) Tritanope (a blue/yellow deficit- very rare)
在瀏覽照片 便可看到以下結果

Lab21 HTML

點選  Introduction to HTML 存下 其中的程式碼
將程式碼貼上記事本
記事本的檔名存成 myfile.html
在修改其程式碼
點開 檔案後 即可看見修改成果

點選   http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic 修改其程式碼
再點 Edit and Check Me  即可看見修改成果

 

1.HTML Basic 

2.HTML Elements 

3.HTML Headings 

4.HTML Paragraphs 

5.HTML Images 

依照上面的方式 再做一次

1

2

3

4

5