下载 pdf - 屏幕阅读器的辅助功能
Download pdf - accessibility for screen readers
我很好奇如何为下载 PDF 的 reader 屏幕制作一个可访问的按钮。
我知道有一个选项使用 href
并向那里传递一个 URL 到 pdf 文件,甚至在锚点内传递一个 download
属性来打开下载 window.
但这不是屏幕的好方法reader。屏幕 reader 将其读取为 link
但实际上,这不是 link
因为它会触发下载 pdf 文件而不是重定向到另一个页面。因此,这可能会让依赖屏幕的视力障碍人士感到困惑 readers。
创建这样一个按钮是一种很好的无障碍方式吗?还是依靠 <a href='path-to-pdf'>...</a>
就完全够用了,不会让残障人士迷惑?
文件下载的一般答案和基础知识
link 和按钮都很好,区别不大。
在任何情况下,明确指示 link 或按钮将下载文件而不是打开页面非常重要,以避免意外。
最简单最靠谱的就是直接写文字,即“查看报告(PDF)”。
您也可以在 link 旁边放置一个 PDF 图标来表示它,但请确保使用真实图像,即 <img alt="PDF" />
而不是 CSS 东西,因为后者可能无法呈现屏幕阅读器 and/or 不要给你设置替代文本的机会(这很重要)。
如果文件很大(超过几兆字节),一个好的做法是指明文件大小,这样连接速度慢或连接受限的用户就不会卡住或不必要地烧掉他们的移动数据订阅。
如果不仅仅是几页,也最好注明页数,这样人们就可以知道它有多大,以及他们是否真的可以花时间阅读它。
示例:“查看报告(PDF,44 页,17 MB)”
请注意,同样,事先指明播客或视频的持续时间是一种很好的做法。
PDF 的其他注意事项
首先,您应该确保您的 PDF 确实可访问。遗憾的是,大多数都不是默认的。
如果您不知道如何使 PDF 易于访问,您应该很容易找到相关资源。
其次,要使可访问的 PDF 文件能够有效地无障碍阅读,必须在支持带标签的 PDF 的真实 PDF 阅读程序中打开它,例如 Adobe Reader。
问题是现在大多数浏览器都集成了 PDF 查看器。这些查看器通常不支持带标签的 PDF,因此,即使您制作了可访问的 PDF,如果在集成浏览器查看器中打开它,用户也无法访问它。
因此,您必须确保您的 link 或按钮触发有效下载或在真正的 PDF 阅读程序中打开,而不是在浏览器的集成查看器中打开。
根据 OS/browser 绕过集成查看器的几种可能性可能会或可能不会。它们必须经过测试以确保它们有效:
- 发一个header
Content-Disposition: attachment; filename="something.pdf"
- 发送不同于“application/pdf”或“text/pdf”的Content-Type,例如“application/octet-stream”伪造基本类型检测
- 使 link 不以 .pdf 结尾
- 使用
<a>
的下载属性
最可靠的是回复header。大多数浏览器不仅仅依靠文件扩展名来决定要做什么。
link 或按钮都可以。最重要的是用户知道该元素的作用 - 即它 downloads/opens 一个 PDF 文件。因此,这应该反映在元素的标签中,无论是可见的文本标签还是使用 alt
文本或 aria-label
明确描述元素用途的图标。
我同意 Quentinc 的建议,即提前告知用户文档的页数和大小 - 这是我不常看到的一个很好的细节!
PDF 的可访问性完全是另一个话题,但正如 QuentinC 所指出的,允许用户下载或查看不可访问的 PDF 并没有多大好处,因此最好确保 PDF 具有针对 JAWS/NVDA/VoiceOver/TalkBack 进行了测试以确保其可读性。
我很好奇如何为下载 PDF 的 reader 屏幕制作一个可访问的按钮。
我知道有一个选项使用 href
并向那里传递一个 URL 到 pdf 文件,甚至在锚点内传递一个 download
属性来打开下载 window.
但这不是屏幕的好方法reader。屏幕 reader 将其读取为 link
但实际上,这不是 link
因为它会触发下载 pdf 文件而不是重定向到另一个页面。因此,这可能会让依赖屏幕的视力障碍人士感到困惑 readers。
创建这样一个按钮是一种很好的无障碍方式吗?还是依靠 <a href='path-to-pdf'>...</a>
就完全够用了,不会让残障人士迷惑?
文件下载的一般答案和基础知识
link 和按钮都很好,区别不大。
在任何情况下,明确指示 link 或按钮将下载文件而不是打开页面非常重要,以避免意外。
最简单最靠谱的就是直接写文字,即“查看报告(PDF)”。
您也可以在 link 旁边放置一个 PDF 图标来表示它,但请确保使用真实图像,即 <img alt="PDF" />
而不是 CSS 东西,因为后者可能无法呈现屏幕阅读器 and/or 不要给你设置替代文本的机会(这很重要)。
如果文件很大(超过几兆字节),一个好的做法是指明文件大小,这样连接速度慢或连接受限的用户就不会卡住或不必要地烧掉他们的移动数据订阅。
如果不仅仅是几页,也最好注明页数,这样人们就可以知道它有多大,以及他们是否真的可以花时间阅读它。 示例:“查看报告(PDF,44 页,17 MB)”
请注意,同样,事先指明播客或视频的持续时间是一种很好的做法。
PDF 的其他注意事项
首先,您应该确保您的 PDF 确实可访问。遗憾的是,大多数都不是默认的。 如果您不知道如何使 PDF 易于访问,您应该很容易找到相关资源。
其次,要使可访问的 PDF 文件能够有效地无障碍阅读,必须在支持带标签的 PDF 的真实 PDF 阅读程序中打开它,例如 Adobe Reader。
问题是现在大多数浏览器都集成了 PDF 查看器。这些查看器通常不支持带标签的 PDF,因此,即使您制作了可访问的 PDF,如果在集成浏览器查看器中打开它,用户也无法访问它。
因此,您必须确保您的 link 或按钮触发有效下载或在真正的 PDF 阅读程序中打开,而不是在浏览器的集成查看器中打开。 根据 OS/browser 绕过集成查看器的几种可能性可能会或可能不会。它们必须经过测试以确保它们有效:
- 发一个header
Content-Disposition: attachment; filename="something.pdf"
- 发送不同于“application/pdf”或“text/pdf”的Content-Type,例如“application/octet-stream”伪造基本类型检测
- 使 link 不以 .pdf 结尾
- 使用
<a>
的下载属性
最可靠的是回复header。大多数浏览器不仅仅依靠文件扩展名来决定要做什么。
link 或按钮都可以。最重要的是用户知道该元素的作用 - 即它 downloads/opens 一个 PDF 文件。因此,这应该反映在元素的标签中,无论是可见的文本标签还是使用 alt
文本或 aria-label
明确描述元素用途的图标。
我同意 Quentinc 的建议,即提前告知用户文档的页数和大小 - 这是我不常看到的一个很好的细节!
PDF 的可访问性完全是另一个话题,但正如 QuentinC 所指出的,允许用户下载或查看不可访问的 PDF 并没有多大好处,因此最好确保 PDF 具有针对 JAWS/NVDA/VoiceOver/TalkBack 进行了测试以确保其可读性。