Question

我在网站上工作，我想在其中添加图库。但是我有一个问题 - 画廊必须可以进入盲人等，我不知道该怎么做。

通常，在这些类型的画廊中，我会像这样做html：

            <ul>
                <li data-src="path/to/image/1.jpg"></li>
                <li data-src="path/to/image/2.jpg"></li>
                <li data-src="path/to/image/3.jpg"></li>
                <li data-src="path/to/image/4.jpg"></li>
                <li data-src="path/to/image/5.jpg"></li>
                <li data-src="path/to/image/etc.jpg"></li>
            </ul>

并使用css和jquery我会使用data-src并将其添加为li的背景（因为并非所有照片都是风，所以我会使用background-size: cover; ）。然后，当用户点击li时，会出现一个包含完整尺寸图像的弹出窗口。

这有一些问题。例如，必须使用键盘中的tab进行单击。我可以将a添加到li，但是没有href吗？那台机器会怎么想？＃34;什么时候它会看到空ul列表？另一个问题是弹出窗口。弹出窗口的html及其img标记位于页面底部，因此机器无法在点击后立即看到它。另一个问题是alt。我不会对照片进行描述（因为它们不是我上传的），所以我会将alt留空吗？

谢谢！

Answer 1

原理：

传达信息的图像必须包含文字说明。最佳做法是始终使用am <img>作为信息图像，但是，您也可以在图像周围的锚点上使用title属性。
一切都必须是键盘可操作的。没有href的锚点将无法关注选项卡，添加href="#"来解决该问题。
盲人不是唯一的键盘用户。确保您只能使用键盘控制图库。
在动态内容显示和消失时管理焦点。确保焦点转到全尺寸弹出窗口，并且“关闭”控件是键盘可操作的。关闭时，焦点应该返回打开图像的锚点。
控件应该具有正确的角色。链接用于转到不同的页面。按钮用于控制同一页面上的内容。图像周围的“锚点”就像一个按钮，因此将role="button"添加到锚点。

您必须为图像上传者添加图像的替代文字。 Facebook不是一个很好的可访问性的例子 - 这是一个糟糕的例子。请查看EasyChirp，了解如何对上传的图像进行更改。

如何建立可访问的画廊？

1 个答案: