輔助功能選項
輔助功能
現在 Mermaid 函式庫的使用範圍更廣泛，我們已開始根據社群的回饋，著手開發更多輔助功能。
新增輔助功能表示，使用輔助技術的人（當然也包括搜尋引擎）可以存取視覺圖表所傳達的豐富資訊。 深入了解可存取的豐富網際網路應用程式和 W3 標準。
Mermaid 會自動插入 aria-roledescription，如果圖表作者在圖表文字中提供，則會插入 可存取的標題和描述。
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 元素中加入 <title> 和 <desc> 元素，並在 SVG 標籤中加入 aria-labelledby 和 aria-describedby 屬性。
以下是產生的 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 制定重大決策」和多行可存取的描述「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>