Dec 17 2006

晨光

視障人仕要使用螢幕閱讀器,大多使用 JAWS ,但 JAWS 價值不菲,不是很多人負擔得起,可幸香港有位很偉大的視障人仕夏士雄先生,獨力編寫一套三語螢幕閱讀軟件晨光,供人免費下載使用。夏士雄先生曾於政府任職行政主任,於二零零四年參加第二階段自願退休計劃退休,目的是希望投放更多時間發展晨光軟件,這點很值得令人尊敬。

不過,縱有免費的螢幕閱讀軟件,但若果網站不夠 accessible,仍然會為視障人仕帶來不便。其實編寫網頁時只要注意一點,在加插圖片或制作 Flash 時加入文字描述,JAWS 及晨光等螢幕閱讀軟件都能把文字讀出來。亦可以加入一些專為螢幕閱讀軟件而設的 hidden text ,令螢幕閱讀軟件用家更清楚明白網頁的結構及內容。

正確試範:GovHK香港政府一站通
錯誤試範:2006優秀網站選舉

CT


Dec 1 2006

jQuery 筆記

jQuery自稱 “New Wave Javascript”,半點也不假。讀 jQuery 的 tutorials15 Days of jQuery 就和初看 Ruby on Rails 時的感覺一樣:「這才是 Programming 嘛!」,用過 jQuery 就很自然對其他 JS lib 不感興趣。

RoR 很少地方技援,也沒時間建 server 練習,但 JQuery 不同,有個 Firefox + Firebug 就可以寫,很方便。不過這不能保證你寫的 code 能在 IE run (!),先陣子把以前用 Prototypescript.aculo.us 寫的陽春 Ajax Gallery 改為 jQuery,也花了不少時間為 IE debug 或改寫 workaround,特此記下兩則以作日後參考:

.ajaxstop() IE Bug: jQuery 1.0.4 將會有 bug fixed,等不及可以到 SVN 自行更新。
IE image cache not fire .load() : 這個嚴格來說不是 jQuery 的錯,是 IE 的問題。 Workaround 是 pass 個 random query string 給 image.src() 去避免 IE cache。CT


Sep 13 2006

New Window in XHTML 1.1

我想很多人把網頁改為 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;

下載原始檔

參考資料:


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


Jul 19 2006

到訪香港盲人輔導會

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

當日到訪,主要想了解多些視障人仕的輔助工具及其運作。據知香港的視障人仕主要使用螢幕閱讀軟件、螢幕放大軟件及點字顯示器輔助來使用電腦。香港盲人輔導會所具備的軟件有 JAWSZoomText,也有點字顯示器。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,於是就甚少瀏覽器會支援這個標準。對於如何看待這類標準,如何取捨,留待大家探討。CT


May 18 2006

整合 WordPress 與 ZenPhoto

因為網友 marlboro 在整合 WordPress 與 ZenPhoto 時遇上困難,所以我就分享我整合 WordPressZenPhoto 時的一點技巧。這個其實我早前已經想寫,但太懶散又擱置了。不過既然有需求,就公開給大家參考。 Continue readingCT