辅助功能选项
可访问性
随着Mermaid库的广泛使用，我们根据社区的反馈，开始致力于开发更多易于访问的功能。
增加可访问性意味着通过视觉图表传达的丰富信息可以提供给使用辅助技术的人（当然也包括搜索引擎）。阅读更多关于可访问的富互联网应用和W3标准的信息。
Mermaid 将自动插入 aria-roledescription，如果图表作者在图表文本中提供了，还会插入 accessible title and description。
aria-roledescription
SVG HTML元素的aria-roledescription被设置为图表类型键。（请注意，这可能与图表文本中用于图表的关键字略有不同。）
例如：状态图的图表类型键是 "stateDiagram"。这里（部分）显示了SVG标签的HTML，其中自动插入的aria-roledescription设置为 "stateDiagram"。（请注意，为了清晰起见，省略了一些SVG属性和SVG内容）：
<svg
aria-roledescription="stateDiagram"
class="statediagram"
xmlns="http://www.w3.org/2000/svg"
width="100%"
id="mermaid-1668720491568"
></svg>可访问的标题和描述
所有图表/图表类型都支持可访问的标题和描述。我们尝试为所有图表保持相同的关键词和格式，以便于理解和维护。
可访问的标题和描述将在SVG元素内添加
这是生成的HTML，显示SVG元素由可访问标题（id = chart-title-mermaid-1668725057758）标记，并由可访问描述（id = chart-desc-mermaid-1668725057758）描述；以及可访问标题元素（文本 = "这是可访问标题"）和可访问描述元素（文本 = "这是一个可访问描述"）。
（请注意，为了清晰起见，省略了一些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: 这是一个单行标题
请参阅accTitle和accDescr使用示例，了解如何在图表中使用此功能以及生成的HTML。
可访问的描述
可访问的描述可以是一行（单行）或多行。
单行可访问描述通过accDescr 关键字指定，后跟冒号（:），然后是描述字符串值。
例如: accDescr: 这是一个单行描述。
一个多行可访问描述 在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>