不只聽過一次中小企業問說「要另外請一個人來維護網頁嗎?」
維護網站最基本的技能就是美感,以及各種數位資訊的知識、工具的操作。
還有數位內容的產出,例如無中生有變出行銷方案、文案發想、商品/人像攝影、影片拍攝/剪輯/後製?理解所有單位要放的內容?
甚至排解伺服器運作問題?在長官跟外包廠商中間當夾心餅?
長官出一張嘴最簡單了嘛。反正基層實作人員就是該死。
維護網頁已經不簡單了,要維護一個符合台灣政府無障礙網頁規範的網站,要求的東西就更多了!
本文概略講解流程,跟記錄一些常見的檢測規範要點。
有用過公家機關、公共景點設施的網站,底下通常都看過這幾顆無障礙什麼的東西,政府為保障身心障礙者使用網路,獲得資訊的權益,依據許多法條,要求各級政府機關機構與學校(以下簡稱各機關)設置之資訊服務網站,應提供身心障礙者容易使用環境。
「行政院研考會 網站無障礙空間標章 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 通通沒用到,機器檢測會失敗。
避免使用者可能需要購買最新版的微軟 Office 軟體,才能好好打開網頁上的附件檔案,甚至無法使用語音報讀輔具瀏覽附件內容。
白話翻譯:
– 網頁內如有附件下載,不要放 docx, dox, xlsx, xls 之類的微軟 Office 專屬格式。
– 應優先採用開放文件格式例如ODF, ODT, ODS, ODP, PDF, TXT
– 提供下載的PDF檔案其內容未保留文字屬性,例如想用偷吃步,把圖片圖表藏在附件,但人工檢測時會被列缺失「要用文字詳細敘述檔案內的圖表數據、照片內容。」
實作問題:
– 資料上稿人員不懂這項規則,照樣 docx 檔案直接放上去。
– 檔案使用微軟文書軟體製作,而且是前人傳承的檔案,但存成其他格式後,反而跑版了?算誰的?
– 網頁上提供 PDF 格式的下載連結,但是超蓮結文字卻寫 word 下載,或是超蓮結圖示使用 word 的檔案圖示,人工檢測時會被列缺失「請修正為正確的檔案格式說明」
為了讓視力或聽力有問題的使用者,也能得知影片內容。
客戶提供的影片沒字幕的話,得把影片內容的逐字稿打在網頁上。檢測等級越高,要提供的東西越多。(如時間軸、手語字幕)
實作問題:影片靠北長,內容語音含糊不清
XH1120201 頁框組件及內嵌式頁框組件需有標題屬性,且其值不得為空字串或空白否則輔具不知道這塊頁框組件的內容為何,所以網頁內的 iframe 或 frameset 原始碼內要加 title 標題屬性。
實作問題:
– 資料上稿人員哪知道 youtube 嵌入碼還要自己調整 HTML?
– 一些社群分享外掛/網站追蹤工具/第三方網站插件,需要嵌入 iframe /或是會在網頁內產生動態 iframe,可能導致違規,但是第三方產生的 iframe 又很難規範
否則輔具不知道這塊組件內容為何,所以網頁內的 object 物件(通常是 ... 繼續閱讀⇢