事情是這樣的,因為很臨時的被指派要進行某個專案的網站無障礙認證的修改,在沒有無障礙網頁製作的經驗與沒有任何可靠的人能請教的情況下,靠著chatGPT的幫助,跌跌撞撞的通過了機器檢測。
然而,比機器檢測更困難的人工檢測毫不意外被退件了。
在人工檢測中有一項我覺得雖然不難,但是很花時間(很煩)的項目就是「中央區塊各項內含資訊內容的圖片請依圖片內容提供詳細說明,若超過150個英文字元或75個中文字元,請另提供文字詳細描述。讓視障瀏覽者也可以瞭解圖片內容訊息,全網站如有相同問題請一併修正。」
簡單來說就是圖片字太多了,要好好地加上圖片的說明才能讓視障瀏覽者順利了解圖片內的資訊。
由於被指出需要修正的圖片內容都是文字表格,而且每個表格都至少10排以上,一個一個手刻html真的太慢了,所以嘗試了以下兩個方式,提升圖片轉換html表格的速度。
方法一:用線上圖片轉word工具(需有OCR功能)
步驟:
1.使用線上轉換工具
- onlineconvertbox:內容正確性高。需註冊,有限制轉換次數(一天似乎只有兩次)
- 誠華OCR:內容正確性算高,但不知道為什麼轉換幾次後正確度會下降。不須註冊,沒有轉換次數限制,可免費轉換10MB內的檔案。
2.複製表格內容,貼到wordtohtml.net,轉換成html碼※參考來源1。
3.使用HTML Washer,清理程式碼中不必要的標籤及style,讓程式碼呈現最簡單的狀態※參考來源1。
4.請chatGPT協助整理,讓程式碼符合無障礙規範。
5.最後檢查程式碼內容,確認格式及文字(非常重要)與原始圖片相符後上傳。
如果是內容很多的表格圖片的話,建議可以先用onlineconvertbox轉換看看,會節省蠻多時間。
方法二:用Google雲端硬碟提取圖片檔中的文字※參考來源2
步驟:
1.將圖片上傳到Google雲端硬碟。
2.在雲端硬碟中點選要轉換的圖片後按右鍵,選擇開啟工具▶Google文件。
3.Google文建會自動辨識圖片內的文字,並顯示在文件內。
4.複製文字內容後,請chatGPT幫忙整理成符合無障礙規範的html表格。
5.檢查內容與格式後,確認與原圖相符後上傳。
結論
基本上這兩種方式的最後都是透過chatGPT轉換成符合規範的html程式碼,只是以方法一來說,基本上在請chatGPT轉換時,表格的結構比較不會跑版,但就是錯字有可能會比較多,需要細心的多檢查幾次。而方法二的話,因為只有純文字,沒有任何表格格式,所以在請chatGPT轉換時,或許需要指定基礎的程式碼版型才比較不容易跑版。不過用Google文件辨識出來的文字錯字較少,在檢查的時候比較節省時間。
其實一開始是嘗試直接把圖片丟給chatGPT請他生成,但可能因為是使用免費版的關係,當圖片是內容較多的表格時,就難以生成完整的內容,而且也有上傳圖片附件的限制。因此才找到這兩種轉換的方式,快速生成表格。