Clement in a Nutshell

左圖上句的 apostrophe 走樣，相信不少中文 Windows + IE6 的用家都見過¹，覺得很醜對吧。然而亦有不少網頁編寫人員，當遇見這個情況時，十之八九是把那個 apostrophe (’) 更改為 single quote (')²，快快解決問題外，心中還暗忖那死人 MS Word 的 smart quote function，好把我鍵入的 single quote 轉為 apostrophe，待我 copy and paste 到網頁後，他媽的 IE6 卻把它當全型字顯示，微軟你玩我咩！

不過我想說明，這個問題，算不上是微軟的錯，不是 IE6 的 bug，也不是 Word 「玩嘢」。事實是它們之間有點不協調；簡單點說，就是 IE6 不知道你這個 apostrophe (’) 是中文還是英文，所以會根據 Locale 設定，把它當成中文標點符號，以全型方式顯示出來。

其實只要花一點小功夫，我們就可以指定整個網頁，或某一個 element 所使用的語言。HTML 中可使用 lang 屬性 (XHTML 則用 xml:lang)，以表示 element 中的內容是以甚麼語言撰寫，只要標示正確，瀏覽器就懂得怎樣處理。就如上圖下面的句子，在加上 lang 屬性後，IE6 就懂得把 apostrophe 以英文的字型顯示出來 (可真接用 IE6 觀看這個示範)。　

看，多簡單吧？不過很多人都忽略了。這個實例，又可以引伸為 Semantic Markup 的一個好處。

延伸閱讀：
多語環境中的網頁親和力
Best Practice 5: Choosing between lang and xml:lang

1. 其實不一定是中文 Windows，實際影響的是 Windows 的 Locale setting [↩]
2. 用 single quote 當 apostrophe，在仍是 ASCII 主導的時代，這做法無可厚非，但現在 Unicode 盛行，何不用回較正確的 apostrophe？本文標題是哇眾一點，只希望大家對這個 issue 有個 full picture，不要再斬腳趾避沙蟲。 [↩]

所以呢，播了種就會有收成，有時還來得比預期快。

因為寫 blog，認識了一些香港以外的網頁標準高手，眼界擴闊了不少。亦因為早幾日發了點窂騷（又發窂騷了），終於得到了回應。

寫那篇文章時，同時亦寄了一封介紹信給工作上的伙伴，推介一下 @media 給政府，希望多多參與或支持。原本心裡是打定輸數，預計信件大多會石沉大海。不過，今天就收到線人報料，信件是收到點成效的說。政府資訊科技總監辦公室會全數贊助屬下 Analyst/Programmer grade 或以上員工參與此次研討會，附合資格者請於三月一日報名，詳情請向上司查詢。

我自己已掏錢登記了，希望到時可以認識多些網外或其他地方對網頁標準有興趣的人，免得給人覺得我只懂在網上瞎嗟嘆。

從 HappyDesigner 得知，雲集 WaSP 的 Molly、Jeremy Keith 和 CSS Zen Garden 的 Dave Shea 等 Web Standards 界猛人的 @media 首次蒞臨亞洲，將會於5月31日在香港舉行為期兩日的研討會。

老實說看到 @media 會選擇在香港舉行這個網頁設計界中的盛事，真的很意外。因為正如 Jacky 所說，香港絶對是 Web Standards 的荒蕪地，知的人少，懂的人更少。自從上年無病呻吟的發過點窂騷後，我不斷向別人說及 Web Standards 的重要性與好處，可惜反應一如既往的差。有點技術背景的還好，一般 user 更難說過明白，像極對牛彈琴。我承認我不懂更有效地說服別人採納 Web Standards，往往說得太 geek 只會給人覺得是 standardista不設實際。另外 CSS 排版等技術的 learning curve 過高，不易掌握也是一個難題，個人經驗見過有人運用 CSS-based layout，也因而弄得四不像，徒添繁鎖的頁碼，是為知其言而不知其所言，為做而做。

@media 選擇在港舉行，雖有說想提高一下香港等相對落後的地方對當代網頁設計的認知，但我怕他們會失望而回，始終香港人只會做 follower，要香港企業或香港政府有遠見地承擔責任去推行 Web Standards，根本是天荒夜譚，相信他們連想去暸解 Web Standards 為何物的基本動力也没有。我想是次研討會香港的參與者會少之又少，可能一個也沒有*。我不期望一些私人機構會突然關注 Web Standards 發展，但希望政府至少可以推廣一下，藉著是次活動令更多香港機構去暸解何謂 Web Standards。

*我很想去，但票價 US$645 兼要請兩日假，成本很高。或者考慮網上籌款吧。

Update 23/2/2007:
經過一夜考慮，我應該會去。（這篇原本昨夜已發佈，但不知為突然變成 private post.）

延申閱讀：@media 07 在香港

我想很多人把網頁改為 XHTML 1.1 或 XHTML 1.0 strict doctype 時都會遇到一個問題：就是 hyperlink 不能再用 target 指定開啟新視窗，w3c 更指出你要是堅持用 target 的話就要使用 XHTML 1.0 transitional。

但我們在建立符合標準的網頁時，不能使用 “新視窗” 這種說法很缺說服力，尤其大多數人會堅持外部連結應要用 “新視窗” 來演示，故我們必須找個兩存其美的方法，既能符合網頁標準，亦能保持開啟新視窗這個操作模式。

其實我們可以利用 hyperlink 的 rel attribute，先把外部連結的 relationship 定義為 “external”，再透過 JavaScript 的 DOM ，把 rel=”external” 的連結加上開啟新視窗的 event，就能達成外部連結用 “新視窗” 開啟這個目的，又能保持網頁的 Semantic Markup。

明白原理其實就可以寫 code：

function externalLinks() {
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName("a");
	for (var i=0; i < anchors.length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external")
			if (anchor.addEventListener)
				anchor.addEventListener("click", newWindow, false);
			else if (window.attachEvent)
				anchor.attachEvent("onclick", newWindow);
			else
				anchor.onclick = newWindow;
		}
}
function newWindow(e) {
	if (!e) var e = window.event;
	var a = e.target ? e.target : e.srcElement;
	var newwin = window.open(a.href);
	// prevent default action of the link
	if (newwin && e.preventDefault) e.preventDefault();
	// if the new window cannot open, use the original window to load the page
	return !newwin;
}
if (window.addEventListener)
	window.addEventListener("load", externalLinks, false);
else if (window.attachEvent)
	window.attachEvent("onload", externalLinks);
else
	window.onload = externalLinks;

下載原始檔

參考資料：

• New-Window Links in a Standards-Compliant World
• Standards-based Replacement for target="_blank" in External Links

範例：
例如我想別人在看到這個耗資逾億的政府新網站連結時不會再看不到我的 cheap blog，我現在就可以用新視窗開啟了。

因工作關係與幾位同事到訪香港盲人輔導會，了解視障人仕如何瀏覽網站，過程當中加深了我對 web accessibility 的看法。

當日到訪，主要想了解多些視障人仕的輔助工具及其運作。據知香港的視障人仕主要使用螢幕閱讀軟件、螢幕放大軟件及點字顯示器輔助來使用電腦。香港盲人輔導會所具備的軟件有 JAWS 及 ZoomText，也有點字顯示器。JAWS 是螢幕閱讀軟件，ZoomText 是螢幕放大軟件，點字顯示器則是一個把螢幕文字轉為點字的硬件（可參考數碼21的網站），視障人仕會因應需要使用這幾種輔助工具來使用電腦，亦會瀏覽網站。

當日與幾位視障人仕交談過，也看過他們使用以上輔助工具的情況，才發現他們使用電腦並沒有相像中困難，開幾個視窗，同時瀏覽幾個網站也應付自如，而且速度不比一般人慢。當然，大前題是與我們見面的朋友都有接受過使用電腦的訓練，才可以如常人般使用電腦。

先說說 JAWS 的使用情況。當日所見，JAWS 已發展得相當不錯，閱讀中文或一般網站也沒問題，亦可配合一些 hot keys，方便瀏覽網頁的不同部份。JAWS 基本上已可輔助用家正確瀏覽一般的網站，只要網站設計不是太複雜，不會帶來太多障礙，反而據當日的朋友所說，有兩點於 Web Development 的角度看是頗有趣的：一）不要使用 accesskeys ，二）不妨使用 table 把不同的內容分開。

第一點是理解的，因為 accesskeys 有可能會與 JAWS 本身的軟件衝突，而且每個網站設計的 accesskeys 盡是不同，設計者得先要告訴用家此網站的 accesskeys，用家也得要記著不同網站的 accesskeys，結果反而多此一舉，accesskeys 豪不 accessible，更會帶來麻煩。

而聽到第二點時是有一點意外，因為由一個 web accessibility 的對象告訴我使用一個 well-known inaccessible 的方法去做網站，確實有點吊詭。追問下才知原來某些螢幕閱讀軟件因太多網站使用 table-based layout，已發展到可以選擇跳過不同的 table cell，方便用家瀏覽網站。對我來說，這個建議與網站設計主流的方向 ── table-less layout 肯定有別。因 table-based layout 一向為人詬病就是螢幕閱讀軟件不能有效閱讀網站；但原來實情是，只要適當的使用 table，是可以幫助螢幕閱讀軟件的用家瀏覽網站。當然，過於複雜的 nested table layout ，仍然不應使用，大量的 table cell 也要花很多時間才能逐一跳過，依舊會影響螢幕閱讀軟件閱讀網站的便利性。

除了網頁設計，在編寫文章內容時亦應照顧螢幕閱讀軟件的用家，主要是編寫鏈結的文字及圖片的替代文字 (alt-text) 時，要考慮這些文字被螢幕閱讀軟件讀出時的情況，盡量避免混餚。我在另一篇文章也寫過，因為大部份螢幕閱讀軟件用家也會使用 “Links list” 這個功能，鏈結的文字越具描述性就越能幫助他們了解鏈結的作用。而圖片的替代文字也有類似情況，據當日的朋友所建議，若果有些鏈結圖片有特定作用，在編寫替代文字時可以寫多一點，凸顯這個圖片鏈結與一般的鏈結的不同。他舉的例子是一個 tab navigation，用作把不同瀏覽者分類，圖片的設計是幾個較大及顯眼的 tab，他就建議可以在每個 tab 的替代文字前加上 “分類：”，以茲識別。

至於另一款輔助軟件 ZoomText ，會把螢幕放大好幾倍，兼作一些類似 anti-aliasing 的處理，令文字及圖片的邊沿不會因放大而出「狗牙」。但放大的文字圖片不會很美觀，實際模樣可參此網頁，當日看見的是版本 8.1，效果就如網頁所示左方的圖，文字邊沿會有些少凹凸不平。如果網頁有一些設計不善的細小圖示，邊沿亦會因放大後連接起來，有可能只會呈現一個密封的圖示，令這類輔助軟件的用家不明所以。

其實要照顧視障人仕的網頁設計還有很多考慮，我不在此詳述，只想指出一些當日所見的情況，希望和大家分享。網頁設計師應謹記，一些我們看來微不足道的問題，其實在視障人仕眼中可能影響很大，只要多加留意，小許的改善就可建立一個更具親和力的網站。不過想強調網站設計要顧及視障人仕只是 web accessibility 的其中一環，始終親和力是一個大課題，不是一個一次性的習作，應視之為一個長期的改善。

總括而言，這次到訪經驗是很有趣，只可惜見面時間太短，不能因應每個疑問都追問下去。若是能多了解 JAWS 的實際運作，相信會有更大幫助。

延伸閱讀：
Accesskeys: Unlocking Hidden Navigation
Using Accesskeys – Is it worth it?
Writing Effective ALT Text For Images
Tips for Making Accessible Web Page

後話：這次到訪另外也引申有一些值得探討的地方，究竟 W3C 所訂立的標準，有幾多是切合用家／市場需要呢？對於不切合市場情況的標準，應堅持使用嗎？再一個例子就是 CSS 的 handheld media type，訂了標準，可惜甚少流動瀏覽器支援；原因就像雞與蛋的問題，甚少網站設計會有 handheld specificed style sheet，於是就甚少瀏覽器會支援這個標準。對於如何看待這類標準，如何取捨，留待大家探討。