アクセシビリティオプション

アクセシビリティ

Mermaidライブラリがより広く使用されるようになった今、コミュニティからのフィードバックに基づき、よりアクセシブルな機能の開発に着手しました。

アクセシビリティの追加により、視覚的なダイアグラムによって伝達される豊富な情報を、支援技術を使用しているユーザー（もちろん検索エンジンも）が利用できるようになります。アクセシブルなリッチインターネットアプリケーションとW3標準の詳細はこちらをご覧ください。

Mermaidは自動的にaria-roledescriptionを挿入し、ダイアグラム作成者によってダイアグラムテキストに提供されている場合は、アクセシブルなタイトルと説明を挿入します。

aria-roledescription

SVG HTML要素のaria-roledescriptionは、ダイアグラムの種類のキーに設定されます。（これは、ダイアグラムテキストでダイアグラムに使用されているキーワードとは多少異なる場合があります。）

たとえば、状態図のダイアグラムの種類のキーは"stateDiagram"です。ここに、自動的に挿入されたaria-roledescriptionが"stateDiagram"に設定されているSVGタグのHTMLの一部を示します。（分かりやすくするために、一部のSVG属性とSVGの内容は省略されています。）

html

<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の内容は省略されています。）

html

<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** *キーワード*、コロン（:）、そしてタイトルの文字列値を続けて指定します。文字列値は行末で終了します。（1行のみ可能です。）

例: accTitle: これは1行のタイトルです

accTitleとaccDescrの使用例で、これがダイアグラムでどのように使用され、生成されるHTMLがどうなるかを確認してください。

アクセシブルな説明

アクセシブルな説明は、1行（1行のみ）または複数行にすることができます。

**1行のアクセシブルな説明**は、**accDescr** *キーワード*、コロン（:）、そして説明の文字列値を続けて指定します。

例: accDescr: これは1行の説明です。

**複数行のアクセシブルな説明**は、*accDescrキーワードの後にコロン（:）がなく*、波括弧（{}）で囲まれています。

例

markdown

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の使用例

アクセシブルなタイトル「大きな決断」と1行のアクセシブルな説明「ボブズ・バーガーズの大きな決断を下すプロセス」を持つフローチャート

SVG要素に対して生成されるHTMLを次に示します。（分かりやすくするために、一部のSVG属性とSVGの内容は省略されています。）

html

<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>

アクセシブルなタイトル「ボブズ・バーガーズの大きな決断を下す」と複数行のアクセシブルな説明「非常に、非常に大きな決断を下すために使用される公式ボブズ・バーガーズの企業プロセス。これは実際には非常に単純な流れです。大きな決断を特定し、その後大きな決断を下します。」を持つフローチャート

SVG要素に対して生成されるHTMLを次に示します。（分かりやすくするために、一部のSVG属性とSVGの内容は省略されています。）

html

<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>

アクセシビリティオプション