不只聽過一次中小企業問說「要另外請一個人來維護網頁嗎?」
維護網站最基本的技能就是美感,以及各種數位資訊的知識、工具的操作。
還有數位內容的產出,例如無中生有變出行銷方案、文案發想、商品/人像攝影、影片拍攝/剪輯/後製?理解所有單位要放的內容?
甚至排解伺服器運作問題?在長官跟外包廠商中間當夾心餅?
長官出一張嘴最簡單了嘛。反正基層實作人員就是該死。

維護網頁已經不簡單了,要維護一個符合台灣政府無障礙網頁規範的網站,要求的東西就更多了!
本文概略講解流程,跟記錄一些常見的檢測規範要點。

一、什麼是無障礙網路空間標章?

有用過公家機關、公共景點設施的網站,底下通常都看過這幾顆無障礙什麼的東西,政府為保障身心障礙者使用網路,獲得資訊的權益,依據許多法條,要求各級政府機關機構與學校(以下簡稱各機關)設置之資訊服務網站,應提供身心障礙者容易使用環境。

「行政院研考會 網站無障礙空間標章 1.0 版」以前都是行政院研考會在管。由於標章是有期限的,理論上2019/9以後不該再看到網站上有長這樣子的標章。

行政院研考會103年1月22日改組後,歸國家通訊傳播委員會(NCC)管理,NCC 委請中華民國資訊軟體協會,參酌全球資訊網協會(W3C)發布之「網頁內容可及性規範2.0版(WCAG 2.0)」研擬「無障礙網頁開發規範2.0版」,標章圖案也長得不一樣,。

後來又變成歸數位發展部來管了,文末最下面有補充 FreeGO 軟體可能會碰到的錯誤訊息跟新增的審查項目。

二、先了解盲人/聽障/肢體障礙,要怎麼瀏覽、操作網頁?

網頁上放了許多精美的圖片、文字都做在圖片上精心編排的海報或DM,或是網頁內文白底配淺灰字,很有設計感?那對於視力有問題的使用者可以正常閱讀嗎?各種內容動來動去、華而不實的惱人效果,複雜到爆的多層選單、滑鼠移過才會出現的內容,對於肢體不便的使用者可以正常操作嗎?

障礙者瀏覽網頁通常有三種輔具方式:
1. 螢幕報讀輔具(Screen Reader):視力不良的人要怎麼閱讀網頁上的內容?透過報讀軟體 NVDA、導盲滑鼠等,可以將電子設備焦點所在處(螢幕焦點、游標與滑鼠指標、手指點)的文字,透過文字轉語音引擎報讀(唸)出來。
2. 觸摸顯示器(Braille display):以點字的特殊電子設備呈現內文,供視力不良的人摸讀。
3. 搖桿輔具或鍵盤:對於肢體有障礙,無法精準操作、點擊滑鼠的使用者,使用這類輔具,用簡易的點擊進行操作。

例如英國傳奇物理學大師霍金,是怎麼打字的?當然不是用查克拉、念力、咒力、機械鎧之類的,是用眼球運動與專用的輔具來控制的。(Intel將開放為霍金量身打造之科技輔具平台)

其實跟 SEO 一樣,許多檢測項目,要多用機器和網頁原始碼的角度來思考,例如在圖片上塞很多字,爬蟲無法索引,報讀軟體也讀不出來的。

三、標章等級越高,檢測項目越多

大家在瀏覽公家機關網頁,肯定有發現選單或各區塊上有一些平常不會看到的東西:
– 奇怪的冒號點點::
– 網站導覽連結(網站地圖)放在非常明顯的位置
– 滑鼠移到每一個連結上都會有大大的框

在一般身體健全的使用者眼中,許多奇異、多餘,又落後的東西,都是為了讓網站通過規範獲得考核,或是為了方便障礙者所製作的。

無障礙網頁標章的檢測條例非常多,標章等級有A、AA、AAA三種等級,在 無障礙網頁開發規範2.0概念與應用v2 ,可以先了解概念。
就像要考國考背一堆條文,A級只是對於障礙者基本的需求,但到了AAA級,則是要改善內容的可及性。例如網頁有放影片,要為所有在同步媒體中預先錄製的音訊內容提供手語翻譯。網頁文字及影像文字的視覺呈現,背景圖與文字要有7:1以上的明顯對比值。
甚至連文案都不能亂給,要針對不常見的字詞,列舉詞彙、提供定義(EV3090300),還要有機制來指明縮寫字展開後的全文或意義(EV3090400)。

不了解網頁無障礙標章規範的視覺設計師,非常容易做出把所有檢測項目的問題都犯一遍、被人幹爆的版面。
不了解網頁無障礙標章規範的前端、後端程式人員,非常容易做出輔具跟人工檢測沒法用的網頁。
不了解網頁無障礙標章規範的內容上稿人員,非常容易讓整個網站無標章審查前功盡棄,就是你 PO 上去的資料又不合規範!
不了解網頁無障礙標章規範的機關辦事人員、長官,非常容易提出、給出完全不合網頁無障礙標章規範的…設計需求或資料呈現需求。

四、標章申請作業流程概述

1.軟體檢測,下載最新版本的 FreeGO 軟體進行檢測 (為了跑 FreeGO 跟測 IE,一定要弄個 Windows 作業系統)
2.至無障礙空間網,線上申請帳號(政府機關網站的標章申請人資料,都要是該單位的人,不可以用網頁設計公司的人名或email)
3.填寫一大串的線上問答題、上傳 FreeGO 軟體檢測成功的檔案,然後將網站送審無障礙標章的「人工檢測」,送審是免費的。
4.等待審核機關人工檢測結果
檢測結果:
– 檢測不符合:退回申請單位,改善後從步驟一開始重跑
– 限期改善:5個工作日內修正,並於系統上回覆,否則從步驟一開始重跑
– 抽檢符合:給予申請單位標章連結路徑,並且所有人可在標章申請網查詢到此網站/該單位的標章資訊。

4.拿到標章
半年後,將不定期抽測。
三年後,標章過期(自核發起三年有效),重新送審。

(流程可能隨時會有更新,以無障礙網路空間服務網實際辦理的為主)

五、上稿人員常犯錯的常見無障礙網頁檢測項目

以下是一些個人經驗,避免做的時候又忘記。條例或法規可能隨時會有更新,以無障礙網路空間服務網實際的為主。

有些條例明明沒做到,人工檢測時也沒被挑出來?或是明明前幾次人工檢測時沒被列缺失,後來才又被提出來?
目前推測人工檢測的作業流程是從申請的網址點進去開始看,累積缺失到達一定的量,就列限期改善或退件,所以並不是全部看完才一次把要改的列出來,這批改完了,下次送審又會碰到其他缺失。
畢竟是人工審查,什麼事都有可能發生,反正該死的執行人員就是要修到能拿到標章為止。

審查結果「檢測不符合」跟「限期改善」差在哪?我覺得是英明的審查人員,覺得你在5天內是否能把問題修完而定。

以下敘述一些上稿時常見的相關規範,還有對應的條文編號:

XH1030100 網頁中的標頭組件必須要按照正確的巢狀層次結構來配置

稍微有點SEO概念的都知道這個 Heading tag 很重要,沒寫好會造成此網頁的主題與內文架構不明。但公家機關有時候就是要「有」就好了,哪有時間人力做這麼多?不管,反正就是要拿到標章嘛。

白話翻譯:
– 網頁裡沒有半個內容使用 H1, H2, H3, H4, H5, H6 的 HTML 標籤,機器檢測會失敗。
– 網頁沒有H1,人工檢測時會被列缺失。
– 同一頁面的H1放超過一個,人工檢測時會被列缺失。
– 跳過H2,直接用H3之類的,人工檢測時會被列缺失。

實作問題:
– 資料上稿人員不懂網頁原始碼,也沒有 Heading tag 的概念,也不知道這規定是幹嘛的?
– 資料上稿人員覺得 H1~H6 是用來設定字型大小用的,亂用標題標籤,而造成人工檢測失敗。
– 資料上稿人員從 Word 直接把內容貼到網頁編輯區域,遇到段落標題只有把字加大加粗體,H1, H2, H3, H4, H5, H6 通通沒用到,機器檢測會失敗。

EV1100202 提供下載檔案格式不可為需依賴特定文書商用軟體即能開啟之檔案

避免使用者可能需要購買最新版的微軟 Office 軟體,才能好好打開網頁上的附件檔案,甚至無法使用語音報讀輔具瀏覽附件內容。

白話翻譯:
– 網頁內如有附件下載,不要放 docx, dox, xlsx, xls 之類的微軟 Office 專屬格式。
– 應優先採用開放文件格式例如ODF, ODT, ODS, ODP, PDF, TXT
– 提供下載的PDF檔案其內容未保留文字屬性,例如想用偷吃步,把圖片圖表藏在附件,但人工檢測時會被列缺失「要用文字詳細敘述檔案內的圖表數據、照片內容。」

實作問題:
– 資料上稿人員不懂這項規則,照樣 docx 檔案直接放上去。
– 檔案使用微軟文書軟體製作,而且是前人傳承的檔案,但存成其他格式後,反而跑版了?算誰的?
– 網頁上提供 PDF 格式的下載連結,但是超蓮結文字卻寫 word 下載,或是超蓮結圖示使用 word 的檔案圖示,人工檢測時會被列缺失「請修正為正確的檔案格式說明」

EV1020101 提供預先錄製之純視訊內容的時序媒體替代內容

為了讓視力或聽力有問題的使用者,也能得知影片內容。
客戶提供的影片沒字幕的話,得把影片內容的逐字稿打在網頁上。檢測等級越高,要提供的東西越多。(如時間軸、手語字幕)

實作問題:影片靠北長,內容語音含糊不清

XH1120201 頁框組件及內嵌式頁框組件需有標題屬性,且其值不得為空字串或空白

否則輔具不知道這塊頁框組件的內容為何,所以網頁內的 iframe 或 frameset 原始碼內要加 title 標題屬性。

實作問題:
– 資料上稿人員哪知道 youtube 嵌入碼還要自己調整 HTML?
– 一些社群分享外掛/網站追蹤工具/第三方網站插件,需要嵌入 iframe /或是會在網頁內產生動態 iframe,可能導致違規,但是第三方產生的 iframe 又很難規範

EV1010301 提供物件的文字替代內容與非文字替代內容,且要能完整表達該物件的意義與功能

否則輔具不知道這塊組件內容為何,所以網頁內的 object 物件(通常是 ... 繼續閱讀⇢

搬來新的部落格大概已經一個多禮拜了,這禮拜又再加了一個 SSL 認證上去。

先不討論中華民國大陸淪陷區跟北韓,Google 瀏覽器在全球擁有超過 50% 的市占率,這個瀏覽器版本 56 起發佈了一個功能,就是如果網站有 https,會顯示大大的”安全”,就像我的部落格,和主域名那個用途不明的單頁這樣子:

然後如果網站有讓人輸入密碼的地方,卻沒有 HTTPS,網址列就會顯示大大的「不安全。」

然後 Firefox 的網站版本 52 起也增加了類似的功能,就是在沒有 HTTPS 的網站輸入密碼時,會顯示讓人驚恐萬分的文字。

以前沒有 HTTPS 的網站,只是在不起眼的地方少了個小鎖頭,現在 Firefox 跟 Google Chrome 這樣搞,連一堆不太會用電腦的人都打來問這是怎麼回事。

又可以增加業績量,非常好。

網站多了 HTTPS (SSL 認證),除了有大大的綠色鎖頭(有人以為那個圖案是購物袋),還有哪些好處呢?
1. Google 官方在 2014 年 8 月宣布 SSL 是搜尋引擎排名指標之一。(HTTPS as a ranking signal)
2. 避免網頁內容被 ISP 或來路不明的 WiFi 等網路中間設備或有心人士加料 (中間人攻擊)
3. 如果網頁上有一些地理相關的功能,例如想要顯示與使用者最近的房地產物件、分店、銷售地點,就要調用 HTML5 Geolocation API 讓瀏覽器跟使用者要現在位置,但是在 Google 瀏覽器版本 50 以上,Geolocation API 跟一些小東西必須要有 HTTPS 才能用。
Geolocation API Removed from Unsecured Origins in Chrome 50
Deprecating Powerful Features on Insecure Origins
4. 想用 PWA 相關技術,讓網站可以一鍵加到手機主螢幕,推播通知,網頁也是要有 SSL 認證。
5. 想用一些”臉書粉絲專頁工具箱”之類的應用程式,把網站嵌在電腦版 Facebook 粉絲專頁的一個分頁裡面,也必須要有 SSL,不然會因為 mixed content 被瀏覽器擋掉,無法顯示。
6. 網頁底下會掛個動態證書,顯示網站是真的隸屬某企業,而不是釣魚網站。
至於釣魚網站做一個假證書畫面,我相信應該還是會有人上當。
7. 如果是購物網站,可以讓消費者感覺比較安心,好像不會被盜。
8. 至於等到親身碰過有 SSL 的網站還是被入侵,讓消費者接到詐騙電話,就知道網路安全絕對不是花幾四五位數的幾毛錢買個護身符掛上去那麼簡單。
9. 有些高階的 SSL 認證期限延展的作業流程要跑很久,認證中心還要打電話去企業內進行驗證,所以外包廠商可以藉機提早詢問企業是否能續約並付款。
10. 免費的 SSL 很多在舊的作業系統(如WinXP) 與舊的瀏覽器上面無法顯示,或是有問題,可以藉此過濾掉環境太低階的使用者。
11. 遠振的 SSL 認證每年最低只要 $1050 起,還沒有什麼獨立 IP 再加收幾千這件事。

如果是在台灣,想幫網站辦一個 SSL 認證,但是有以下需求的時候:
– 業主一定要看到中文的廠商資料。
– 出問題時可以拿起電話狗幹客服。
– 要拿到發票。
– 主機或程式環境比較特別,無法用廉價方案解決。
– 功能細項表格要很長,感覺花錢花得很有價值。
– 要有一些看起來更讓人放心的東西,例如網頁底下要有個證書可以點開來看,或是網址前面會顯示公司名稱

(範例如https://www.enoteca.co.jp/,不過我想還是顯示”安全”兩個字,一般使用者比較會崇拜你。)

那就得找 SSL 的合法認證機構,每年牌價大概是這樣子:

(資料來源是 寰宇數位認證中心 – 國內各家產品比較表
這個費用通常還不包含網頁程式要微調避免 mixed content 的問題,主機設定、在伺服器上安裝 SSL 證書……的各種服務費。

如果你是像我一樣的廉價勞工,那就可以用免費的 SSL 認證 自己 DIY,去找網站的這套程式、主機環境,要用什麼方法設定。
像本文最上圖那兩個實作 SSL 的網站,
一個是裝 WP Encrypt,產生出 Let’s Encrypt 的證照之後,再改一下 wp-config.php 就好了啦。
另一個是把 DNS 指向到 CloudFlare 的 NameServer,Free Plan 就會自動有基本的 SSL 跟、DDos 保護跟有點慢的 CDN 了呦!

當然別人的網站我是不敢這樣搞啦,
這是風險問題,才不要省幾萬塊然後累死自己。

如果你真的不信,用了所謂免費的 SSL,然後接到使用者抱怨說網站連不上,通常是…他還在用 Windows XP。

至於免費的跟要錢的,拿去測試工具跑出來的畫面也不一樣。

文章最後再強調一下,資訊安全議題我也不是專家,但根據經驗,絕對不是「買張護身符」掛上去就沒事了。

... 繼續閱讀⇢

Google Analytics (GA) 分析可以做的神蹟,大家或多或少都有聽過。
但在瞬息萬變的商業市場,GA 的實用高嗎? GA 是完美的嗎?

你可能有聽過以下對話:
客戶/老闆/業務 : 「Google 分析可以看到我們網站的 XXX 數據嗎?」
網頁公司/行銷公司/工程師 :
「沒有喔,Google 分析沒有這功能」
「沒有喔,這要另外設定才看得到。」
「沒有喔,這個要另外寫追蹤碼才看得到。」
「我們沒有在分析這個。(白話翻譯:公司裡沒有人會做,或是有做也不跟你講。)」
「行銷公司不是收了你幾十萬嗎? 叫他們做。(把問題推給行銷公司)」
「這購物車程式很爛,很多地方沒有獨立網址,報表會不準。(把問題推給網頁公司)」
「因為使用者用了…所以 GA 裡面看不到。」
「怎麼會沒有呢? 一定是因為使用者…」
「統計工具一定會有誤差,通常是因為使用者…」

本文介紹網路文章不會講,推廣介紹 Google Analytics 的人通常也不會講的東西…就是 Google Analytics 做不到的事,或是誤解 GA 辦得到,但其實沒有的功能。本文僅針對網頁版的 Google 分析追蹤功能作探討,至於 App 版或 Flash 版的 GA 不在本文討論範圍內。


上面有一個資料,如果看不到資料請點此連結

內容摘要:
Google 分析是在分析什麼?
簡單來說,經由時間,與各種維度與指標的搭配,
調出想看的數據,或是評估花費成效,或是發掘未知的需求。
Google 分析的原理(analytics.js)

Google 網頁分析做不到的事:

一、要額外花功夫才能得到數據
1.必須另外寫 GA 事件追蹤,用資料收集 API,把資料傳給 GA,才能在 GA 檢視資料:
– 頁面滾動距離
– 輪播圖點擊切換
– 訂購單下載行為
– 外部出站連結
– Youtube 播放
– 消費金額電子商務追蹤
– 跨網域
– 社群分享按鈕點擊
– 族繁不及備載…

2.要在 GA 設定後才看得到:
– 站內搜尋分類與關鍵字追蹤
– 客層興趣報表(年齡、性別、職業別…)
– Google搜尋來源訪客使用的關鍵字
– 電子商務設定
– 目標設定
– 首頁網址設定

3.站內搜尋追蹤
4.轉換率追蹤: 先定義何謂轉換率?
如何用量測工具正確實做網站功能改版? « Blog.XDite.net
5.購物轉換率追蹤
6.會員註冊追蹤

二、看不到搜尋引擎的來源關鍵字 – 加密搜尋
1.加密搜尋 : 更改為HTTPS,而且不再傳遞 HTTP referer 中的關鍵字
Google – 2011 年10 月起 (link)
Yahoo – 2014 年 4 月跟進。
百度 – 2015 年 6 月開始實施。(link)

2.Google 加密搜尋的漏網之魚
3.硬是要看訪客來源關鍵字呢? 請使用 Google Search Console 與 Bing webmaster tool。
4.付費的搜尋來源關鍵字?

三、GA未提供以下功能
– 無法直接看到使用者 IP。
– 沒有訪客獨立個人資訊頁面或「誰來我家」功能。
– 沒有直接永久刪除報表內某筆錯誤資料或記錄的功能。只有透過區隔或一些篩選工具,「不顯示」某些資料。
– 沒有動作熱像圖。
– 沒有即時通知功能,只有通知前一兩天狀況的快訊功能。
– 沒有主機傳輸量統計。
– 不喜歡 GA 的圖表配色,想自訂顏色? 得先學會用 Excel,或是 GA 的 API。
– 競網分析比較。
– 預測未來、提出建議。
– 電子商務 API 功能的限制。
– 報表顯示在地化城市名稱。

有些功能也許未來會提供,有機會的話會再回來更新。

update:... 繼續閱讀⇢