javascript - 如何建立无障碍画廊？

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 可以吗？当机器看到空的 ul 列表时，它会“思考”什么？另一个问题是弹出窗口。弹窗的html和它位于页面底部的img标签，所以机器不会在点击后立即看到它。另一个问题是 alt。照片不会有描述(因为它们不是我上传的)，所以我将 alt 留空？

谢谢!

Answer 1

原则:

1. 传达信息的图片必须有文字说明。最佳做法是始终使用 am <img>但是，对于信息性图像，您还可以在图像周围的 anchor 上使用标题属性。
2. 一切都必须可以键盘操作。没有 href 的 anchor 将不会成为标签焦点，添加 href="#"解决这个问题。
3. 盲人并不是唯一的键盘使用者。确保您只能使用键盘控制图库。
4. 在动态内容出现和消失时管理焦点。确保焦点进入全尺寸弹出窗口并且“关闭”控件可通过键盘操作。关闭时，焦点应返回到打开图像的 anchor 。
5. 控件应具有正确的作用。链接用于转到不同的页面。按钮用于控制同一页面上的内容。图片周围的“ anchor ”就像一个按钮，所以添加 role="button"到 anchor 。

您必须为图片上传者提供一种为图片添加替代文本的方法。 Facebook 不是可访问性的好例子——它是一个坏例子。看EasyChirp一个很好的例子，说明如何对上传的图像进行替代。