我很高兴有互联网和开发人员社区

rahul5

本文我们将研究如何设置一个可扩展且可访问的画廊，并在此过程中提供一些提示和技巧。让我们开始吧！
使用一个用例是显示图像画廊，但画廊本身可能并不那么令人兴奋。例如，我们可以在不影响网格的情况下添加点击效果来放大图像，让它更有趣一点。当然，为了不排除任何人享受此功能，我们也应该让它易于使用。

在本文中，我将解释如何构建一个可访问的可扩展画廊，并提供一些提示和技巧。最终结果如下所示：

首先，我们要设构。当然，我们总是可以通过多种方式来实现，但让我们使用包含在按钮中的图像列表。

要找到列数，我们应该遍历每个图块并比较每个元素的顶部位置旦顶部位置发生变化，该项目就会出现在新行中，这将为我们提供项目数。

使用键盘浏览网站的用户应该能够使用画廊。使用 key 时，默认情况下会浏览 whatsapp 手机号码列表 列表Tab。Enter默认情况下，通过在项目获得焦点时按下键来模拟点击。为了增强默认行为，我们应该添加对Esc和箭头键的支持。

一旦我们展开该项目，按下Esc应将其恢复为标准尺寸。我们可以通过检查按键的代码来做到这一点。箭头键也一样，但作用不同。当按下箭头键时，我们想要获取上一个或下一个兄弟元素，然后模拟对该元素的点击。


除了可访问性部分，我在构建这个演示时没有遇到任何问题。一开始我不确定该做什么以及使用哪些 aria 属性。即使在弄清楚要使用哪些属性之后，我也不能 100% 确定它是正确的。所以第一步是用键盘测试一切。那是容易的部分。然后我使用 用程序（因为我使用的是 Mac）来测试它如何为视障人士工作。对我来说听起来不错。



然而，即使经过所有测试，我仍然不能  确定。所以我决定寻求帮助。我是面向设计师和开发人员的 Slack 社区一员，我在那里发布了一个问题。

我们都可以在这里寻求帮助、从专业人士那里得到答案并一起解决问题。对于可访问性等敏感问题尤其如此。

可访问性很难，而且很容易出错。少即是多——至少在我看来是这样。