破億級100分！高速環境中的網頁無障礙！Lighthouse 綻放煙火！

精通網頁無障礙！

「我們有S級的前端和標記，還在做行銷自動化工具的UI，所以無障礙還不簡單！」抱著這樣天真想法開始的Liberogic網頁無障礙專案……實際上卻開啟了一場激烈的戰役。因為立下了WCAG 2.2完全符合這麼高的目標，多年來舉辦了無數場學習會和沒完沒了的討論。說實話，我們深刻體會到自己之前對這項工作估計不足。

回想起數年前專案初期的無障礙學習會。
「WCAG和JIS X 8341-3:2016的區別是什麼？」
「WCAG 2.0和JIS X 8341-3:2016是一樣的！」
從這樣初級的對話開始，踏上了漫長的征程。
「這個達成標準的理解方式沒問題吧？」
「不，那是另一個標準啦」
反覆進行無止盡的討論和修正，終於朝WCAG 2.2符合等級AA的體制邁進了。

重新打造公司網站！

「我們的網站和商業定位不符啊？」
從這句話開始了公司網站的改版。
「既然要做，就拚無障礙和SEO全力以赴吧！」
面對這樣的期待，忙碌中的優秀員工們（大概）欣然著手處理是毫無疑問的。

「這個顏色的對比度不符規範！」
「啊～設計上看起來滿好的耶…」
「能在規則範圍內調整嗎？」
諸如此類，在設計與無障礙之間來回摸索。
在標記方面，則是淡然地逐項清除嚴酷的測試檢查清單。

終於完成！
雖然比原定計畫大幅延期，但我們確實感受到了技術進化的堅實成果。

在 Lighthouse 中達到 100 分！在 PageSpeed Insights 中也獲得高評價！

由 Astro + microCMS + Cloudflare 製成的本公司網站在 Lighthouse 中獲得高分本是預期之內。無障礙檢查當然毫無問題！Lighthouse 的無障礙檢查採用可靠的 axe-core ，因此 WCAG 合規的實施情況會相當直接地得到評估。

至於效能方面，由於頁面中圖片眾多且多處動畫，起初進展有些緩慢，但我們通過最佳化 Web 字型的載入方式、檢查圖片壓縮率和格式、調整資源載入優先度等紮實的調校工作後，那個時刻終於降臨了！

＼ 100 分！ ／

PC 版 Lighthouse 的所有項目都滿分！而且那個傳聞是真的。「哦呦！在 Lighthouse 中達到全部 100 分時，Google 會放煙火來祝賀呢！」

「真的假的！？前一個網站最多才 80～90 分？雖然也得益於 Astro，但這真的很厲害！」

同樣由 Google 提供的網站效能測量工具 PageSpeed Insights 也順理成章地記錄了 100 分。

只不過 PageSpeed Insights 沒有特別的演出效果（煙火）。由於這邊是 99 分那邊是 100 分的情況時有發生，我們希望 Google 能添加一些祝賀性的特殊演出。🎇

順帶一提，Lighthouse 和 PageSpeed Insights 的分數會因為執行測量時的網路環境、伺服器狀態、瀏覽器狀況等因素而波動，所以即使達到了 100 分，也無法保證始終維持該分數，請注意。

在行動版上取得滿分 100 分真的是不可能的任務呢……就是這種感覺。（↑當時沒有截圖，所以是最近才截的）

真正的目標在分數之外

「不過，從使用者的角度來看，這不是理所當然的結果嗎……？」

我認為，與其追求分數，不如徹底貫徹為所有實際使用網站的人設計的理念，最終才能獲得最高的評價。「滿分 100」只是個過程。真正的目標是創造一個對所有人都舒適易用的網站！！

目前為了確認業務的可行性，我們實施了各種實驗性功能，所以 Lighthouse 的分數比當時有所下降。我天真地一直在重複「為什麼、為什麼～？」，但對大家來說，業務的可行性確認當然比我的任性更重要。

就這樣，我們永不停歇的探索之旅還在繼續。