跳到主要內容

【隨手記】降低你的網站門檻

Bloglines的Accessibility Improvement公告

這篇文章的內容很長,有興趣的人要花點時間和眼力閱讀。

昨天收到了一封關於無障礙空間推廣的信件,之後使用Bloglines時看到了上面的畫面,加上很巧的去年接觸了製做無障礙網頁空間的網站,相較於去年,今年相關單位開始積極的推廣起來,看著這些東西,心裡其實有些感慨。

大學時修了一門打字課補足畢業學分,任課師除了教課外,當時好像也在淡江大學盲生資源中心裡服務,也有可能是因為她身體較虛弱,種種原因使她在最後一堂課的時候,談到了關於盲用電腦和一些人生態度。我很喜歡這位老師,儘管很多學弟妹不知道什麼原因嫌她上課嘮叨,從她的課裡仍然學到了一些東西,雖然當時純粹是因為學分數不足去修課,但在這門課裡接觸的東西,居然在日後變成吃飯的工具之一。

記得在E61時大哥曾經說過一句話,他說:「做一件事情時,要想一想做了這件事能幫助多少人。」這句話拿來用在這裡其實很適合。無障礙空間網站推廣的主要目的就是希望能夠幫助視覺有障礙的網路使用者們能順利的使用一個網站,設計人員的每一個動作都會影響到輔助器具的閱讀。不過很多人對於「視覺有障礙」的定義很狹礙,通常都會問一句話就是:「盲人怎麼用電腦?」但實際上,「視覺有障礙」的定義並不是在於「看不到」,還包括了弱視、色盲這些視覺不若一般所謂齊全的視覺,但是,就算是盲人,他們也有專用的輔助器具幫助他們上網取得資訊,尤其是在這個什麼資訊都丟到網路的時代,他們也必須要使用網路。

當他們暢遊網路世界的工具都齊全了,卻有個大門檻擋在門口-網站的親和力不足。舉個最簡單的例子好了,在逛某些網站時會覺得整體網站美崙美奐,可是字型總是在10pt,甚至更小(在某些部落格裡都會看到),怎麼樣都讓人看不清楚,或是字的顏色和背景色相近,也就是為了求視覺上的美感而忽略了內容的重要性,這種情況連一般人看了都痛苦,更何況是視覺障礙的網路使用者?

去年政府機關開始推廣無障礙空間網站,希望從政府機關網站開始做起,讓視覺障礙的朋友們也能夠順利的在公部門的網站上取得資訊,發文給各部門要求進行改善,去年台灣推廣這個活動在世界排名前面,於是今年更是努力推廣。這其實是一個很好的用意,但對網頁設計人員與程式設計人員而言多半要吃點苦頭,除了要學習如何在製作過程中讓網站能符合九十條檢測碼之外,還要在美感與實用性這中間取得平衡點。

在視覺設計上,很多單位都喜歡在網頁上加上flash動畫、javascript、絢麗的配色,用意在於讓網站看起來更為活潑,可以一掃公部門給人死氣沉沉的感覺,不過,這樣的做法對於某些輔助器具是無法發生效用的。在程式設計上,有些線上申請表單或是以動態顯示統計數據的資料會無法通過檢測,但如果少了這些噱頭,這個網站好像就沒什麼內容,不止是設計端有這種想法,連這些機關的網站都擔心自己家網站沒有內容反而會太單調。

所以說,在做一個網站時,要了解使用者對自己網站有興趣的內容是什麼,至少能避免掉「單調」的窘況,而且,不是設計者高興怎麼用CSS、配色、用表格去呈現一個網站的視覺。冠冕堂皇些,就是在設計時要能以視覺障礙者能順暢使用網站為目的,並能呈現活潑生動的畫面;現實的說法,就是以通過檢測為目的,網站不要讓一般人看了都覺得醜。

在這篇文章裡我不想說製作的心得,因為一定會有一些雜音出現,且這項技術還在發展中,難免會碰到設計與檢測規範上的衝突,我能不在意這樣的衝突,但我不想在公開場合談論客戶,一來他們不是完全了解整個製作狀況(也不完全需要),二來我又要抱怨消費習慣、觀念與市場有問題。

比較想要表達的,是也許每個人能藉由一點小小的動作來讓整個網路的使用環境更和藹可親,其實有很多活動或是部落客的文章裡都有提到,而提到這個就不能忽略Jedi在網站親和力的努力。最簡單的動作只有四個:連結HTML說明圖

  1. 字型與版面配色:如果有人讀過老貓學出版部落格裡的「傳統編輯對部落格新手的寫作建議:一個呼籲」與「白底黑字 VS. 黑底白字」就能了解到版面與基本字型配色對網路使用的重要性,也許你可以讓網站的配色對比明顯些、字型大一點、行矩高一些、字型顏色統一,這樣任何一個網路使用者在瀏覽網站時眼睛也不會那麼吃力,而且也會喜歡多留在你的網站裡。
  2. 為連結加上名稱:我不知道某些限制編輯HTML的網站能不能這麼做,但以我自己來說,如果以最近的幾篇文章來說,儘量會在連結裡面的語法加上「title=”連結位置”」,如果有另開視窗,也會加註在title裡,像是「另開視窗到XX頁面」。
  3. 為圖片加上替代名稱:同樣也是編輯在HTML裡,一般人會這麼寫:「img src=圖片位置”」,那請在之後加上「alt=”圖片名稱”」,如果你願意也可以加上「title=”圖片名稱”」或是提供說明連結,這樣可以讓輔助器具閱讀。我個人也覺得做到第二點和第三點這麼做還可以提升你的網站搜尋排名,這個誘因夠大了吧!但也不要抓狂的使用它,也不要當搜尋垃圾,這兩天抓到一些搜尋垃圾,再把他們公佈出來好了。
  4. 避免使用flash、applet、script、gif動畫,不然請提供相對的文字說明:不使用這些技術其實很難辦到,因為這些東西雖然不是必要,但適當使用卻能增加網站的互動性與活潑性。不過之前在讀e-project vol.1時,裡面有個問題大抵上是受訪者(設計師)如果對網路世界有決定性之類的權力,受訪者會怎麼做?對方回答要把flash這個玩意趕出網路世界。哈!以目前濫用的情況來看,我完全贊成。最近有項活動叫做「自動播放撲滅委員會」其實是抵制網路影音播放濫用導致網路使用不順暢的情況,也算是一種增加網站親和力的方式。如果要增加或留住你的讀者,就不要老是放個路障擋在中間。

以上這四點其實是最容易辦到的,也是對於不常編輯HTML的部落客來說,只是在平常編輯文件的動作中增加了幾個小動作,至於一些字型格式、表單、表格的編寫,如果不是太過複雜就還好,有些還真的是很麻煩,我在製作某些單位提供的表格時有種在算矩陣的錯覺。這篇文章並不是寫給專業人士看的,不過如果有興趣,可以看看文章中的連結或是參考以下網站取得進一步的資訊:

至於這個部落格有沒有通過檢測呢?在寫這篇文章的同時我也做了一下檢測,連最基本的第一優先檢測都過不了,畢竟不是自己的主機,而且我接觸的時間太晚了,要一項一項改有點難,我只能一點一點改囉!謝謝各位花時間閱讀這篇文章,可以把滑鼠游標移到連結上稍等一下,就能了解加上title的效果了。

Technorati Tags:, ,

留言

  1. 身為弱視者,
    覺得妳寫得很棒!

    希望網站製作者別再
    顧著追求表面的炫麗。
    企盼大家把網頁易於閱讀改成第一優先。

    但是,
    我所常接觸的某個大單位似乎
    也沒做到網路無障礙....

    回覆刪除
  2. Hello~
    沒想到妳是弱視者啊!
    很多公家單位也在頭痛吧!這種東西多少也需要時間,其實他們都想做到第三優先,不過,預算有限吧!我想。
    只能靠大家努力的去推廣,辛苦妳囉!

    回覆刪除

張貼留言

請勿匿名留言,待審核後才會出現。

這個網誌中的熱門文章

暫時搬到 Medium

網址:https://medium.com/@yinchuchen/
Blogger 用了這麼多年,中間也試著使用 Wordpress。不過最近許多文章到改到 Medium 去了。除了功能更簡潔外,它的分享機制比 Blogger 更好,不用花時間在版型、字距、字型大小等 CSS 設定上,而簡潔的版面也更能專心的長篇大論。
目前 www.yingchu.tw 的網址還是設在 Blogger,但之後可能會付費至 Medium 去。

新加坡 Smart Nation 初探

在陸續的聽了一些關於新加坡 Smart Nation 相關計畫的介紹(研討會、網路新聞)及資料收集後,看看台灣目前的作法,寫下一點點心得。

先自一些線上調查來看,聯合國2014年對193個成員國所做的的電子化政府評比中,新加坡的電子化政務(EGDI)是在前三名,電子參與(EPI)也是前十名;世界經濟論壇今年初所完成的全球資訊科技報告(Global Information Technology 2015)中也提到新加坡的網路就緒指數(Network Readiness Index)在所調查的143個經濟體中排名第一。這些評比成果都顯示新加坡在電子政務上、基礎建設上都相當完善。

新加坡的 Smart Nation 很明確的定義出 Smart Nation 是要解決問題,對象是「人」。他們找出了要解決的問題:人口老化、教育、交通、資源的問題,針對這些問題擬定了要解決的作法,例如為了解決日後人口老化所衍生的健康照護問題,他們建造智慧住宅,對住戶的生活習慣收集資訊、分析日常行為,如果有一些行為是反常的,可能就會進一步的通知或實地查訪。對於某些人來說可能會覺得隱私被侵犯,但這是最有可能解決獨居老人發生意外而無人及時救援的方案之一。

觀察創業中朋友們的10個特質

在台灣有不少創業聯誼社群,除了台灣本地官方、民間的各種社群外,也有來自其他國家的創業聯誼社群。在這裡所談的創業聯誼社群,可能是一群有興趣自己開創事業或是正在開創事業的人,透過實際面對面接觸或是利用方便的網路交流機制的團體。活動的型式可能是藉由一個或多個創業者站在台上分享自己的創業經驗,或是透過團體之間的實際互動,會後再透過社群的分享,以延續成員之間的熱度

上星期第一次參與了創業者的聯誼活動,生活裡有些朋友經歷創業的前段,或是已是市場先行者,所以站在局外人的角度來分享我自這些創業中的朋友們所學習到的事,又或說是我所觀察到他們的共同特質: