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评分也比之前有所波动。我天真地不停地喊着“为什么，为什么？”，但毋庸置疑，确认业务的可行性对每个人来说都比我的私心更重要。

因此，我们将继续不懈地探索。