提高 Markdown 的可访问性

已发表: 2022-03-10
快速总结↬你可以在互联网上的很多地方找到 Markdown。 本文介绍了 Markdown 的不同方面以及它如何与其他技术交互。 起初，这似乎令人生畏，因为有很多内容要涵盖几个不同的主题领域，但请记住，每次调整和更新都会直接影响人们在使用网络时的生活质量。

Markdown 是一种小文本到 HTML 的转换语言。 它由 John Gruber 在 2004 年创建，目的是让在纯文本编辑器中编写格式化文本更容易。 您可以在 Internet 上的许多地方找到 Markdown，尤其是在有开发人员的地方。 两个值得注意的例子是 GitHub 上的评论和 Smashing Magazine 上帖子的源代码！

降价是如何工作的

Markdown 使用特殊的字符排列来格式化内容。 例如，您可以通过将字符、单词或短语括在方括号中来创建链接。 在右方括号之后，您可以包含一个用括号括起来的 URL，以创建链接的目标。

所以输入：

 [I am a link](https://www.smashingmagazine.com/)

将创建以下 HTML 标记：

 <a href="https://www.smashingmagazine.com/">I am a link</a>

您还可以将 HTML 与 Markdown 混合，编译时将全部归结为 HTML。 下面的例子：

 I am a sentence that includes <span class="class-name">HTML</span> and __Markdown__ formatting.

将其生成为 HTML 标记：

 <p>I am a sentence that includes <span class="class-name">HTML</span> and <strong>Markdown</strong> formatting.</p>

降价和可访问性

可访问性是一个整体问题，这意味着它会影响创建和维护数字体验的各个方面。 由于 Markdown 是一种数字工具，因此还需要注意可访问性方面的考虑。

  • 好消息：
    Markdown 生成简单的 HTML 标记，简单的 HTML 标记可以通过辅助技术轻松阅读。
  • 不太好的消息：
    Markdown 不是包罗万象的，也不是规定性的。 此外，可访问性不仅仅是辅助技术。

在确保您的 Markdown 内容可访问时，有两个大问题：

  1. Markdown 不支持某些类型的内容，以及
  2. 写作时不会有 Clippy 式的体验陪伴您，这意味着如果您执行的操作会创建无法访问的内容，您将不会收到警告。

由于这两个考虑因素，我们可以做一些事情来确保我们的 Markdown 内容尽可能地易于访问。

跳跃后更多！ 继续往下看↓

您可以做的三件最重要的事情

在使您的内容易于访问时，可能很难知道从哪里开始。 以下是您现在可以做的三件事，以产生巨大而重大的影响。

1.使用标题来概述您的内容

到目前为止，按标题导航是许多辅助技术用户用来了解他们正在查看的页面内容或视图的最流行的方法。

因此，您希望使用 Markdown 的标题格式选项（ # 、 ## 、 ### 、 #### 、 #####和###### ）来创建逻辑标题结构：

 # The title, a first-level heading Content ## A second-level heading Content ### A third-level heading Content ## Another second-level heading Content

这将创建一个易于扫描的分层轮廓：

 1. The title, a first-level heading a. A second-level heading i. A Third-level heading b. Another second-level heading

编写有效的标题级别是一门艺术，因为您需要足够的信息来传达页面的整体范围，但不要因过度描述而使某人不知所措。 例如，一份食谱可能只需要几个h2元素来划分成分、说明和背景故事，而一篇学术论文可能需要所有六个标题级别来充分传达细微差别。

能够快速扫描页面或视图上的所有标题并跳转到特定标题是一种不仅限于屏幕阅读器的技术。 我喜欢并受益于诸如标题地图之类的扩展，这些扩展可以让您利用此功能。

ALT：HeadingsMap 浏览器扩展，显示此帖子的嵌套标题树。截屏。
这是这篇文章的标题大纲。 （大预览）

2.为你的图片写下有意义的替代描述

替代描述可帮助视力低下或在关闭图像时浏览的人了解您正在使用的图像的内容。

在 Markdown 中，替代描述位于图像格式化代码的左括号和右括号之间：

 ![A sinister-looking shoebill staring at the camera.](https://live.staticflickr.com/3439/3259412053_92f822bee2_b.jpg)

替代描述应清晰简洁地描述图像的内容以及包含它的背景。 另外不要忘记添加标点符号！

某些使用 Markdown 输入的网站和 Web 应用程序也会尝试为您添加替代描述文本。 例如，GitHub 将使用您上传的文件的名称作为alt属性：

新 GitHub 问题的屏幕截图。标题为“上传图片的示例 GitHub 问题。正文是一个图像元素，其 alt 属性显示为“ScreenCapture at Wed Aug 18 15:59:24 EDT 2021”。
我不知道这张图片包含什么。 （大预览）

不幸的是，这并没有为看不到图像的人提供足够的上下文。 在这种情况下，您想要传达为什么图像足够重要以包含在内。

您通常会在 GitHub 上看到的示例包括：

  • 一个视觉错误，有些东西看起来不像它应该的样子，
  • 正在提议的一项新功能，
  • 提供反馈的带注释的屏幕截图，
  • 解释流程的图​​表和流程图，以及
  • 用于交流情感的反应 GIF。

这些图像不是装饰性的。 由于 GitHub 默认是公开的，因此您不知道谁在访问您的存储库，也不知道他们的情况。 最好主动将它们包括在内。

新 GitHub 问题的屏幕截图。标题为“上传图片的示例 GitHub 问题。 body 是一个带有 alt 属性的图像元素，其内容为“通过活动滑动抽屉导航菜单插入的工具提示”。
好多了！ （大预览）

如果您在编写替代描述时需要帮助，我会热情地推荐 W3C 的替代决策树和 Axess Lab 的替代文本终极指南。

3.使用简单的语言

简单直接的语言可以帮助每个人理解您的内容。 这包括以下人员：

  • 考虑到认知，
  • 谁不使用英语作为他们的主要语言，
  • 不熟悉你所交流的概念，
  • 压力大或一心多用且注意力有限的人，
  • 等等。

某人越容易阅读您所写的内容，他们就越容易理解和内化它。 这有助于处理各种形式的 Markdown 书面内容，无论是博客文章、Jira 票证、Notion 笔记、GitHub 评论、Trello 卡片等等。

考虑你的句子和单词长度。 此外，请考虑您的目标受众是谁，并考虑您使用的行话和成语之类的事情。

如果您在简化语言方面需要帮助，我喜欢使用的三个工具是 Hemingway、Datayze 的可读性分析器和 xkcd Simple Writer。 另一个值得一试的网站是 plainlanguage.gov。

其他注意事项

想要加倍努力？ 伟大的！ 您可以执行以下操作：

图片

除了提供替代描述之外，您还可以做一些其他事情来使您的 Markdown 插入图像可访问。

正确标记 SVG 图像

SVG 是用于图形、图标、简单插图和其他使用简单形状和清晰线条的图像的绝佳格式。

在 Markdown 中有两种渲染 SVG 的方法。 这两种方法都有您需要注意的特定事项：

1. 链接到带有.svg文件扩展名的图像

注意：我将要描述的错误已经修复，但是，在接下来的几年中，我仍然推荐以下建议。 这是由于 Safari 将浏览器更新与系统更新捆绑在一起的可疑策略，以及一些使用辅助技术的人在更新软件方面犹豫不决。

如果您将 SVG 作为图像链接，您需要使用 HTML 的img元素，而不是 Markdown 的图像格式代码 ( ![]() )。

原因是某些屏幕阅读器在尝试解析链接到 SVG 文件的img元素时会出现错误。 它不会像预期的那样将其作为图像宣布，而是将其作为一个组宣布，或者完全跳过宣布图像。 要解决此问题，请在图像元素上声明role="img" ：

 <img role="img" alt="A sylized sunflower." src="flower.svg" />

2. 使用内联 SVG 代码

将图像声明为内联 SVG 代码而不是使用img元素有几个原因。 我最常遇到的原因是支持暗模式。

与使用 img 元素非常相似，您需要包含几个属性以确保辅助技术将其解释为图像，而不是代码。 两个属性声明是role="img"和aria-labelledby ：

 <svg aria-labelledby="svg-title" fill="none" height="54" role="img" viewBox="0 0 90 54" width="90" xmlns="https://www.w3.org/2000/svg"> <title>A pelican.</title> <path class="icon-fill" d="M88.563 2.193H56.911a7.84 7.84 0 00-12.674 8.508h-.001l.01.023c.096.251.204.495.324.733l4.532 10.241-1.089 1.09-6.361-6.554a10.18 10.18 0 00-7.305-3.09H0l5.229 4.95h7.738l2.226 2.107H7.454l4.451 4.214h7.741l1.197 1.134c.355.334.713.66 1.081.973h-7.739a30.103 30.103 0 0023.019 7.076L16.891 53.91l22.724-5.263v2.454H37.08v2.81h13.518v-.076a2.734 2.734 0 00-2.734-2.734h-5.441v-3.104l2.642-.612a21.64 21.64 0 0014.91-30.555l-1.954-4.05 1.229-1.22 3.165 3.284a9.891 9.891 0 0013.036 1.066L90 5.061v-1.43c0-.794-.643-1.438-1.437-1.438zM53.859 6.591a1.147 1.147 0 110-2.294 1.147 1.147 0 010 2.294z"/></svg>

您还需要确保使用title元素（不要与title属性混淆）来描述图像，类似于img元素的alt属性。 与alt属性不同，您还需要使用aria-labelledby将title元素的id与其父svg元素相关联。

如果您想更深入地了解 SVG 的可访问性标记，我推荐 Heather Migliorisi 的 Accessible SVGs 和 Carie Fisher 的 Accessible SVGs: Perfect Patterns For Screen Reader Users。

加载动画图像暂停

动画 GIF 是您在 Markdown 内容中发现的另一种常见的东西——我发现开发人员在讨论技术主题时经常使用它们来表达他们的喜悦和沮丧。

问题是，这些动画可能会分散注意力并对试图阅读您内容的人产生不利影响。 ADHD 等认知因素在这里尤其受到影响。

好消息是您仍然可以包含动画内容！ 有几个选项：

  1. 使用picture元素，使用可以在暂停状态下加载的文件类型，例如.mp4和.webm ，或者
  2. 使用为.gif提供播放/暂停功能的解决方案，例如 Steve Faulkner 的details / summary hack 或 freezeframe.js 库。

这个小细节可以大大帮助人们摆脱困境，而不必放弃表达自己的方式。

链接

如果您在线编写内容，迟早您将不得不使用链接。 以下是一些需要注意的事项：

使用唯一的描述性链接名称

某些形式的辅助技术可以浏览页面上的链接列表，或者以与浏览标题相同的方式查看。 正因为如此，您希望您的链接能够暗示人们在访问它时会发现什么。

 Learn more about [how to easily poach an egg](https://lifehacker.com/this-is-the-chillest-easiest-way-to-poach-an-egg-1825889759).

您还需要避免模棱两可的短语，尤其是当它们重复时。 “点击这里”和“了解更多”等术语是常见的罪魁祸首。 当与周围的非链接内容的上下文分开时，这些术语没有意义。 此外，多次使用该术语会产生如下体验：

NVDA 的元素列表面板，设置为显示链接。 “点击这里”一词出现了 12 次。截屏。
NVDA 的元素列表查看器显示页面上的所有链接。 （大预览）

避免在新选项卡或窗口中打开链接

Markdown 的某些变体（例如 Kramdown）允许您编写可以在新选项卡或窗口中打开链接的代码：

 [link name](url){:target="_blank"}

这样做会带来安全风险。 此外，这种体验非常令人困惑和不受欢迎，以至于它成为了 Web 内容可访问性指南 (WCAG) 的成功标准。 让使用您的网站或网络应用程序的每个人自己选择是否要在新选项卡中打开链接要好得多。

谨慎使用跳过链接

跳过链接或“skipnav”是绕过大部分内容的一种方式。 您通常会遇到它们，以绕过网页上的徽标和主导航，从而允许某人快速跳转到主要内容。

跳过链接不仅限于此用例！ 其他两个示例可能是电子商务网站上的目录和排序/过滤控件。

跳过链接的另一个重要用途是允许某人绕过具有多个交互元素的嵌入内容：

一个箭头，展示了某人如何从跳过链接跳过嵌入内容，并降落在嵌入内容之后立即放置的跳过链接目标上。
（大预览）

这也是允许某人绕过“键盘陷阱”的一种很好的技术，这是嵌入式内容中常见的东西。

键盘陷阱是不使用鼠标或触摸板的人由于其构造方式而无法逃脱交互式组件的地方。 您通常会发现这些带有嵌入式iframe小部件。

测试键盘陷阱的好方法？ 使用Tab键！

如果没有跳过链接，使用辅助技术的人可能不得不求助于刷新页面或视图来逃避陷阱。 这不是很好，如果将电机控制问题混入其中，则尤其令人不安。 我的观点是，如果遇到这种情况，大多数人只会关闭标签，而不是努力让它发挥作用。

除了关于使用Tab键进行测试的精彩文章之外，Manuel Matuzovic 还向我们介绍了他对跳过链接的使用，以及在改进 Embedded CodePens 的键盘可访问性方面的其他改进。

小心自动生成的标题锚链接

一些 Markdown 生成器会自动添加一个锚链接来伴随您编写的每个标题。 这样您就可以在共享内容时将某人的注意力集中在页面或视图上的相关部分。

问题是这可能存在一些辅助技术问题，具体取决于此锚链接的构建方式。 如果锚链接仅包裹在 #、 或 § 等字形周围，我们会遇到两个问题：

  1. 当从其周围的上下文中删除时，链接的名称没有意义，并且
  2. 链接的名称会重复。

Amber Wilson 在她的帖子中更详细地讨论了这个问题，您的锚链接可以访问吗？ 她的帖子还详细介绍了不同的解决方案，以及它们的潜在缺点。

指示下载的存在

大多数情况下，链接会将您带到另一个页面或视图。 但是，有时目标是下载。 发生这种情况时，浏览器会：

  1. 打开与请求文件类型关联的应用程序以显示它，或
  2. 提示您将其保存到操作系统的文件系统。

这两种体验可能会很刺耳，尤其是在您看不到屏幕的情况下。 防止这种不太理想的体验的一个好方法是在链接名称中暗示存在下载。 例如，以下是链接到 PDF 时在 Markdown 中的操作方式：

 Download our [2020 Annual Report (PDF)](https://mycorp.biz/downloads/2020/annual-report.pdf).

颜色

颜色与 Markdown 本身无关，但它确实会影响很多 Markdown 生成的内容。 如果您使用的是 WordPress、Eleventy、Ghost、Jekyll、Gatsby 等博客服务，那么与颜色相关的最大问题通常是可以修改的。

使用深色模式主题

为黑暗模式提供切换允许人们选择有助于他们阅读的体验。 对一些人来说，这可能是一种审美偏好，对另一些人来说，这可能是一种避免偏头痛、眼睛疲劳和疲劳等问题的方法。

这里重要的是选择。 让打开了深色模式的人为您的网站使用浅色模式，反之亦然（并确保这样做的 UI 是可访问的）。

问题是，当一个人访问您的网站或 Web 应用程序时，您无法知道他们的需求、愿望或环境是什么，但您可以为他们提供相应的能力。

我们还要记住，Markdown 导出简单、直接的 HTML，并且很容易在 CSS 中工作。 这对于使您的暗模式主题更易于开发大有帮助。

使用具有良好颜色对比度支持的语法突出显示

Markdown 可以通过将内容包装在三个反引号 ( ``` ) 中来创建代码块。 它还可以通过将字符、单词或短语包装在单个反引号中来创建包装在code元素中的内联内容。

对于这两个示例，许多人都添加了诸如 PrismJS 之类的语法高亮库，以帮助人们理解他们提供的代码示例。

某些主题使用亮对亮或暗对暗值作为审美选择。 不幸的是，这意味着某些人可能很难或不可能看到代码。 这里的技巧是选择一个语法高亮主题，该主题使用对比度足够高的颜色值，人们可以实际看到代码的每一个字形。

确定对比度是否足够高的一种方法是使用 WebAIM 等工具并手动检查主题提供的颜色值。 如果您正在寻找更快的建议并且不介意自我推销，我会维护一个颜色对比友好的语法突出显示主题。

a11y-dark 主题的屏幕截图，它在深灰色背景上使用红色、绿色、蓝绿色和金色来突出显示示例 HTML 和 JavaScript 代码。
a11y-黑暗。 （大预览）

Markdown 不支持的内容

由于您可以在 Markdown 中使用 HTML，因此在 Markdown 中您会比其他内容更经常看到某些类型的内容。 以下是其中几个的一些注意事项。

使用title属性描述iframe内容

HTML 的title属性通常被误用于创建工具提示效果。 不幸的是，这给辅助技术用户带来了很多麻烦，并且以这种方式使用它被认为是一种反模式。

title属性的一个很好的用途是为iframe包含的内容提供简洁、有意义的描述。 此描述为辅助技术用户提供了一个线索，让他们了解如果他们导航到iframe以查看其内容会发生什么。

对于 Markdown，最常见的iframe内容形式是嵌入，例如 YouTube 视频：

 <iframe width="560" height="315" src="https://www.youtube.com/embed/SDdsD5AmKYA" title="YouTube: Accessibility is a Hydra | EJ Mason | CascadiaJS 2019." frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

就像您的链接文本一样，您还需要避免通用和重复的title内容。 YouTube 的嵌入代码默认为YouTube video player ，这不是很好。 我们可以做得更好，并将其更新到YouTube: Video title 。 如果页面或视图中嵌入了多个 YouTube 视频，这将特别有用。

至于YouTube为什么在已经知道视频标题信息的情况下这样做，则完全是另一个问题。

为视频和录制的音频提供字幕和文字记录

说到 YouTube，您要做的另一件事是确保您的视频和音频有字幕和文字记录。

字幕

字幕在说话时实时显示视频内容的文本版本，使生物学上或环境上听不到音频的人能够理解视频内容。 字幕还可以包括声音效果、音乐和其他对传达意义很重要的提示。

大多数流行的视频托管提供商都具有支持字幕的功能，包括在嵌入式上下文中显示它们。 这里的重要部分是避免字幕——手动查看自动生成的字幕以确保它们对人类有意义。

成绩单

成绩单是字幕的兄弟姐妹。 他们获取所有的口语对话、相关的音效和音乐以及其他重要细节，并将它们列在嵌入的视频或音频之外。 这样做有很多好处，包括允许某人：

  • 按照自己的节奏阅读视频和音频内容；
  • 修改内容的大小和呈现方式；
  • 将内容打印出来或转换成更容易理解的格式；
  • 更容易通过搜索引擎发现内容；
  • 更容易翻译内容。

阅读器模式

与其他 Markdown 相邻问题一样，阅读器模式可以从可访问性的角度提供很多好处。

如果您不熟悉，阅读器模式是许多浏览器提供的一项功能，可以去除除主要内容之外的所有内容。 大多数阅读器模式还提供用于调整文本大小、字体、行高、前景色和背景色、列宽的控件，甚至可以让您的设备为您大声朗读内容！

Microsoft Edge 的沉浸式阅读器模式被应用于 Smashing Magazine 帖子，Nic Chan 的辅助功能工具完整指南。截屏。
Microsoft Edge 的沉浸式阅读器。 （大预览）

您不能使用 Markdown 直接触发阅读器模式。 然而，长格式 Markdown 内容通常在模板中呈现，可以设置为使其对阅读器模式友好。

Mandy Michael 在她的帖子“为 Safari 阅读器模式和其他阅读应用程序构建网站”中教我们如何做到这一点。 只需结合语义 HTML、分段元素和少量结构化微数据，即可解锁这一强大功能。

你不必一次做所有事情

这是一篇很长的文章，涵盖了 Markdown 的不同方面以及它如何与其他技术交互。 这似乎令人生畏，因为它涵盖了几个不同主题领域的大量内容。

关于可访问性工作的事情是每一点都有帮助。 你不必在一个大的、彻底的改变中解决我在这篇文章中的所有考虑。 相反，尝试选择一件事来关注，并从那里开始构建。

知道每次调整和更新都会对使用网络时某人的生活质量产生直接影响，这是巨大的。

继续阅读 Smashing 杂志

  • CommonMark：Markdown 的正式规范
  • 构建 Node.js Express API 以将 Markdown 转换为 HTML
  • 在 Markdown 中使用 Shadow DOM 构建模式库