4/22/2007

W3C Xhtml 驗證問題經驗分享

近日將公司執行的一個專案網頁送W3C的Xhtml檢測工具做驗證, 並將顯示的錯誤一一修正, 直到全部通過檢測為止. 修改的錯誤包括:

1. <form>標籤應該有action值, 例如: <form action=”searchresult.htm”>.
2. 如果在表單使用<legend>, 外圍就應該有相對應的<fieldset>包覆.
3. <option selected>下拉選項</option>應該改成<option selected=”selected”>下拉選項</option>
4. <form>要在<table>外面, 不能包在<table>裡面.
5. <span> 裡面不應該包覆<div>, <span>通常只用來改變字型/顏色/大小/靠左靠右等細微外觀, 不能像<div>一樣當成區塊使用.
6. 多媒體檔案(如swf, mov, wmv) 的code無法通過驗證.

1~4 修改的多半是tag標籤順序以及一定要有屬性值設定的細節問題, 在Dreamweaver 8版本按照次序由程式自動產生的文件多半是正確的, 只要注意順序即可, 但如果像我ㄧ樣習慣手動加tag就容易產生這類的錯誤.

5 的錯誤一開始誤認為是不應該用<div>包覆連結文字, 應該加上如<p>或<li>等tag, 後來發現只要將<div>拉出<span>外面就可以了. 用<div>包覆文字雖然無法辨識語義(不知道這段文字屬於標題<h>, 段落<p>, 還是<li>條列項目), 卻是Xhtml驗證工具允許的.

至於6 的錯誤就很麻煩了, Dreamweaver產生的多媒體物件(如swf, mov, wmv) 的code通通無法通過驗證. 在W3C的標準定義中, 影音檔或Flash檔等物件應該都用<object>這個tag, 但是Dreamweaver用的卻是不在標準中的<embed>; 而Flash的swf檔雖然是<object>, 但是裡面的classid值和<embed>仍然無法通過驗證, 於是在Google找尋解答.

A List Apart有ㄧ篇 Bye Bye Embed 介紹如何通過W3C驗證的解法, 分別詳列如下: (原文是用絕對路徑寫, 這裏改用相對路徑, <p>的說明文字則是政府無障礙網頁規範的要求 )

MediaPlayer的wmv檔

<!-- 請輸入 width 和 height 值 否則 Firefox 無法顯示 -->
<object type="video/x-ms-wmv" data="images/test.wmv" width="172" height="160">
<param name="src" value="images/test.wmv" />
<param name="autostart" value="false" />
<param name="controller" value="true" />
<param name="qtsrcdontusebrowser" value="true" />
<param name="enablejavascript" value="true" />
<p>請輸入多媒體內容說明文字, 以符合無障礙第一優先等級規範</p>
</object>


FlashPlayer的swf檔

<!-- 請輸入 width 和 height 值 否則 Firefox 無法顯示 -->
<object type="application/x-shockwave-flash" data="images/title.swf" width="172" height="160" id="VideoPlayback">
<param name="movie" value="images/title.swf? docId=8755581808731033658" />
<param name="allowScriptAcess" value="sameDomain" />
<param name="quality" value="best" />
<param name="bgcolor" value="#FFFFFF" />
<param name="scale" value="noScale" />
<param name="salign" value="TL" />
<param name="FlashVars" value="playerMode=embedded" />
<p>請輸入多媒體內容說明文字, 以符合無障礙第一優先等級規範</p>
</object>

QuickTime的mov檔

<!-- 請輸入 width 和 height 值 否則 IE, Firefox 無法顯示 -->
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="172" height="160">
<param name="src" value="images/sample.mov" />
<param name="controller" value="true" />
<param name="autoplay" value="true" />
<!--[if !IE]>-->
<object type="video/quicktime" data="images/sample.mov" width="172" height="160">
<param name="autoplay" value="true" />
<param name="controller" value="true" />
</object>
<!--<![endif]-->

<p>請輸入多媒體內容說明文字, 以符合無障礙第一優先等級規範</p>
</object>

QuickTime的mov檔寫法比較特殊, 上方有classid的寫法IE不支援, 所以下方用IE特有的”條件式註解( [if !IE] )” 再寫ㄧ組給IE瀏覽器專用.

* 以上的寬度高度最好以原尺寸顯示, 否則在Firefox會有無法顯示或者裁切的情況發生.


原以為仰賴Dreamweaver通過W3C驗證不會太難, 但還是有死角存在, 這過錯不全是Deamweaver, 有很大原因是IE或其他瀏覽器的支援程度仍然不足的關係.

The Web Standards Project 看過一篇 Dreamweaver Task Force 文章, 在2001年 Web Standards Project這組織就成立" The WaSP Dreamweaver Task Force"小組, 任務是協助Dreamweaver朝Web Standard目標改善他們的應用軟體, 讓程式產生的文件符合標準需求, 也讓大部分的預設項目改用符合標準和使用性 (Accessibility) 的選項. 可以感覺出MX版本開始朝這個方向走, 但還不夠完整; Dreamweaver 8的版本看起來除了影音檔, 都支援了; 不知道最近剛出來的CS3版是否解決這個問題. (ps. 來自Amos測試結果是CS3版和8的版本相同, 並未解決這個驗證問題 )

除了Adobe, 這個組織也有ㄧ個Microsoft Task Force小組在Micorsoft要完成相同的任務, 所以The Web Standards Project是很積極在推動Web標準, 不是嘴上說說而已. 這組織最近還很無情的批評Adobe’s Spry Framework for AJAX (還在Beta版階段, 這裡曾經介紹過 Adobe Max 2006 課程範例 -- 如何以Spry與Dreamweaver開發AJAX )是違反Web標準的應用程式, 呼籲大家要勇於指正Adobe的錯誤.

Adobe和Microsoft這兩家公司會這樣”備受重視”大概是怕他們有可能成為製造網頁”亂象”的根源, 必須儘早介入導正才行!

4 則留言:

randylien 提到...

寫的很棒喔!謝謝你的分享^^

Jane 提到...

謝謝藍滴的鼓勵,也歡迎有各種意見的回饋呦!

Arno 提到...

您好!
您的文章真的讓我受益良多..
只是我在網頁中放置WMV檔
即使設置了width和height
在Firefox中依然讀不到影片耶@@"

Jane 提到...

我猜是否是檔名的問題, 檔名與路徑必須為英文,不可為中文或有空格.

例如 html/images/test.wmv 是正確的,
如果 html file/圖片/測試.wmv 在irefox會無法顯示.