辅助功能选项
辅助功能
现在，随着 Mermaid 库的广泛使用，我们已经开始根据社区的反馈，努力实现更多辅助功能。
添加辅助功能意味着，视觉图表传达的丰富信息可以被使用辅助技术的用户（当然也包括搜索引擎）访问。了解更多关于可访问的富互联网应用程序和 W3 标准。
Mermaid 将自动插入 aria-roledescription，以及图表作者在图表文本中提供的 可访问标题和描述。
aria-roledescription
SVG HTML 元素的 aria-roledescription 设置为图表类型键。（请注意，这可能与图表文本中使用的图表关键字略有不同。）
例如：状态图的图表类型键为“stateDiagram”。这里（部分）显示了自动插入的设置为“stateDiagram”的 aria-roledescription 的 SVG 标签的 HTML。（请注意，为了清晰起见，省略了一些 SVG 属性和 SVG 内容）：
<svg
aria-roledescription="stateDiagram"
class="statediagram"
xmlns="http://www.w3.org/2000/svg"
width="100%"
id="mermaid-1668720491568"
></svg>可访问标题和描述
所有图表/图表类型都支持可访问的标题和描述。我们尝试为所有图表保持相同的关键字和格式，以便于理解和维护。
可访问的标题和描述将在 SVG 元素中添加<title> 和 <desc> 元素，以及 SVG 标签中的 aria-labelledby 和 aria-describedby 属性。
以下是生成的 HTML，显示 SVG 元素由可访问的标题（id = chart-title-mermaid-1668725057758）标记，并由可访问的描述（id = chart-desc-mermaid-1668725057758）描述；以及可访问的标题元素（文本 = “This is the accessible title”）和可访问的描述元素（文本 = “This is an accessible description”）。
（请注意，为了清晰起见，省略了一些 SVG 属性和 SVG 内容。）
<svg
aria-labelledby="chart-title-mermaid-1668725057758"
aria-describedby="chart-desc-mermaid-1668725057758"
xmlns="http://www.w3.org/2000/svg"
width="100%"
id="mermaid-1668725057758"
>
<title id="chart-title-mermaid-1668725057758">This is the accessible title</title>
<desc id="chart-desc-mermaid-1668725057758">This is an accessible description</desc>
</svg>语法的详细信息如下。
可访问的标题
可访问的标题 使用 accTitle 关键字 指定，后面跟着一个冒号 (:) 以及标题的字符串值。字符串值以行尾结束。（它只能是一行。）
例如：accTitle: This is a single line title
请参阅 accTitle 和 accDescr 的使用示例，了解如何在图表中使用它以及生成的 HTML。
可访问的描述
可访问的描述可以是一行（一行）或多行。
单行可访问的描述 使用 accDescr 关键字 指定，后面跟着一个冒号 (:)，然后是描述的字符串值。
例如：accDescr: This is a single line description.
多行可访问的描述 在 accDescr 关键字后没有冒号 (:)，并用花括号 ({}) 括起来。
例如
accDescr {
This is a multiple line accessible description.
It does not have a colon and is surrounded by curly brackets.
}请参阅 accTitle 和 accDescr 的使用示例，了解如何在图表中使用它以及生成的 HTML。
accTitle 和 accDescr 的使用示例
- 具有可访问标题“重大决定”和单行可访问描述“Bob's Burgers 制定重大决定的流程”的流程图
以下是为 SVG 元素生成的 HTML：（请注意，为了清晰起见，省略了一些 SVG 属性和 SVG 内容）：
<svg
aria-labelledby="chart-title-mermaid_382ee221"
aria-describedby="chart-desc-mermaid_382ee221"
aria-roledescription="flowchart-v2"
xmlns="http://www.w3.org/2000/svg"
width="100%"
id="mermaid_382ee221"
>
<title id="chart-title-mermaid_382ee221">Big decisions</title>
<desc id="chart-desc-mermaid_382ee221">Bob's Burgers process for making big decisions</desc>
</svg>- 具有可访问标题“Bob's Burger's Making Big Decisions”和多行可访问描述“Bob's Burgers 公司的官方流程，用于制定非常非常重大的决定。这实际上是一个非常简单的流程：确定重大决定，然后做出重大决定。”的流程图
以下是为 SVG 元素生成的 HTML：（请注意，为了清晰起见，省略了一些 SVG 属性和 SVG 内容）：
<svg
aria-labelledby="chart-title-mermaid_382ee221"
aria-describedby="chart-desc-mermaid_382ee221"
aria-roledescription="flowchart-v2"
xmlns="http://www.w3.org/2000/svg"
width="100%"
id="mermaid_382ee221"
>
<title id="chart-title-mermaid_382ee221">Big decisions</title>
<desc id="chart-desc-mermaid_382ee221">
The official Bob's Burgers corporate processes that are used for making very, very big
decisions. This is actually a very simple flow: identify the big decision and then make the big
decision.
</desc>
</svg>