速度滿分！高速環境下的網頁無障礙！為 Lighthouse 放煙火！

挑戰網頁無障礙的極致！

「前端和標記都有頂尖高手，MA 工具的 UI 也做過，無障礙應該綽綽有餘吧！」抱持這般天真的想法，Liberogic 的網頁無障礙專案就此展開……實際上卻是一場艱苦奮戰的序幕。因為立下了完全符合 WCAG 2.2 的高遠目標，我們經歷了長年的學習會與永無止境的討論……老實說，我們深刻體會到自己當初實在是太小看這件事了。

回想數年前專案初期的無障礙學習會。
「WCAG 與 JIS X 8341-3:2016 有什麼不同？」
「WCAG 2.0 和 JIS X 8341-3:2016 是一樣的！」
就這樣從基礎的問答開始，我們踏上了漫長的道路。
「這個達成基準是這樣理解對嗎？」
「不，那是另一個基準喔。」
經過無止盡的討論與修正，我們終於建立起能夠以WCAG 2.2 符合等級 AA為目標的體制。

重新打造自家網站！

「我們的網站，跟我們的業務好像不太搭吧？」
就這一句話，展開了自家網站的改版。
「既然要做，就無障礙、SEO 全力以赴！」
這般的野心，讓本來就很忙的優秀團隊成員們（大概）欣然投入，這點自不待言。

「這個顏色的對比度不合格！」
「咦，從設計角度來看明明很好……」
「能不能在規範範圍內調整？」
諸如此類，我們在設計與無障礙之間反覆摸索。
在標記實作上，則是一項一項冷靜地完成那份如鬼般嚴苛的測試檢查清單。

終於完成！
雖然比原定計畫大幅延遲，但我們確實感受到了技術上的進step與手上的實際成果。

Lighthouse 拿下 100 分！PageSpeed Insights 也獲得高度評價！

這個用 Astro + microCMS + Cloudflare 打造的官網，在 Lighthouse 拿到高分本來就在預料之中。無障礙方面當然也是滿分！Lighthouse 的無障礙檢測採用了可靠的 axe-core，因此對 WCAG 合規的努力會直接反映在分數上。

在效能方面，因為圖片很多、動態效果也不少，一開始成績多少有些停滯。但我們不斷進行扎實的調校：最佳化網頁字體的載入方式、重新檢視圖片的壓縮率與格式、調整資源的載入優先順序。經過這些反覆努力，終於迎來了那一刻！

＼ 100 分！ ／

桌機版 Lighthouse 的所有項目都拿到滿分！而且，傳聞是真的。「哦哦！Lighthouse 全部拿到 100 分的話，Google 會施放慶祝的煙火嗎？」

「真的假的！？之前的網站只能勉強維持在 80 到 90 分左右耶。雖然多少有 Astro 的功勞，但這也太厲害了！」

同樣由 Google 提供的網站效能測量工具 PageSpeed Insights，也理所當然地拿到了 100 分。

不過 PageSpeed Insights 沒有特別的慶祝效果（煙火）。因為接連出現「這邊 99、那邊 100」之類的情況，所以希望 Google 能加上一些可喜可賀的慶祝特效。🎇

順帶一提，Lighthouse 和 PageSpeed Insights 的分數，會因為測試當下的網路環境、伺服器狀態、瀏覽器狀況等而有所波動，因此即使曾達到 100 分，也未必能每次都維持，這點需要留意。

行動版要達到效能 100 分是不可能的任務嗎？…大概是這種感覺。（↑當時沒有截圖，所以是最近重新擷取的畫面）

真正的終點，在分數之外。

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

我認為，我們並非一味追求分數，而是徹底為所有實際使用網站的人進行設計，這樣的成果才帶來了最高的評價。「100 分」只是中途的一個節點。真正的目標，是打造一個每個人都能舒適使用的網站！！

目前為了確認工作上的可行性，我們正在實作各種實驗性功能，Lighthouse 的分數也比當時有所下降。我天真地一直喊著「為什麼呀？為什麼呀～？」，但對大家來說，工作上的可行性確認顯然比我的任性更重要，這一點自不待言。

就這樣，我們永不止息的探索仍將繼續下去。