Topics

掌握網站無障礙設計！

「我們需要S級的前端和標記，甚至還要處理MA工具的UI，所以無障礙訪問應該是小菜一碟！」 Liberogic的Web無障礙項目就是這樣天真的想法，但實際上，這是一場激烈戰鬥的開始。設定完全符合WCAG 2.2標準的高目標，引發了多年的學習和無休止的討論……坦白說，我意識到我們對待這個目標有多麼輕率。

我記得幾年前計畫開始時舉行過一次無障礙研究會議。
“WCAG 和 JIS X 8341-3:2016 有什麼區別？”
“WCAG2.0和JIS X 8341-3:2016是一樣的！”
這是一段漫長的旅程，從這樣一次基本的交流開始。
對於成功標準的這種理解正確嗎？
“不，這是這裡的標準。”
經過無數次的討論與修改，我們終於WCAG2.2 一致性等級 AA這創建了一個使我們能夠實現這一目標的系統。

重新設計您的網站！

“我的網站不適合我的業務？”
我們公司網站的更新就是從那一句話開始的。
“如果我要這麼做，我最好還是專注於可訪問性和 SEO！”
不用說，我們優秀的員工當時可能很忙，但他們很樂意接受這個挑戰。

“這個顏色的對比度太差了！”
“嗯，這是一個不錯的設計…”
“就不能在規則範圍內做出調整嗎？”
我們繼續進行實驗，平衡設計和可訪問性。
在批改期間，我冷靜地完成了令人畏懼的測試項目清單。

終於完成了！
儘管遠遠落後於計劃，但我們認為技術進步是進步的確切標誌。

在 Lighthouse 上取得了滿分！在 PageSpeed Insights 上也獲得了高分！

我們的網站由 Astro + microCMS + Cloudflare 構建，在 Lighthouse 上獲得了高分。當然，網站的可訪問性也非常出色！Lighthouse 可訪問性測試利用了值得信賴的 axe-core因此，遵守 WCAG 的努力可以得到公平直接的評估。

至於性能，我們運行了很多圖像和各種其他東西，所以一開始我們有點掙扎，但經過一些努力和微調，例如優化網絡字體的加載方式、審查圖像壓縮率和格式、調整資源加載優先級，我們終於看到了它起作用的時刻！

＼ 100點！ ／

我在電腦版 Lighthouse 的所有測試項目中都獲得了滿分！傳言果然是真的。 「哦！如果我在 Lighthouse 中拿到滿分，谷歌會放煙火慶祝！”

「真的嗎？！在之前的網站上，我幾乎拿不到 80-90 分！我確信 Astro 在這方面功不可沒，但這個網站真的太棒了！”

Google 提供的另一個網站效能衡量工具 PageSpeed Insights 也獲得了 100 分的成績。

不過，PageSpeed Insights 沒有任何特效（例如煙火效果）。因為我之前看過一連串的結果，像是這裡 99，那裡 100，所以我希望谷歌能添加一些慶祝效果。 🎇

順便一提，Lighthouse 和 PageSpeed Insights 的分數會根據測量時的網路環境、伺服器狀態、瀏覽器狀態等而有所不同。即使你獲得了 100 分，也要小心，因為你可能無法一直保持這個分數。

手機上不可能拿到100分嗎？ ……是這樣的。 （↑當時沒截圖，所以最近才截圖的。）

真正的目標超越分數

“但從用戶的角度來看，這不是自然的結果嗎？”

我們並非追求高分，而是專注於為所有實際使用者設計網站，這才獲得了最高評分。 100分只是一個里程碑。我們真正的目標是打造一個讓每個人都能輕鬆使用的網站！

目前，我們正在實施各種實驗性功能，以確認業務的可行性，而我們的Lighthouse評分也比之前有所波動。我天真地不停地喊著“為什麼，為什麼？”，但毋庸置疑，確認業務的可行性對每個人來說都比我的私心更重要。

因此，我們將繼續不懈地探索。