mermaid

Name: mermaid
Author: mgifford

github.com/mgiffordデザイン・UI57133 回インストール6 週間前に更新

リポジトリ

mermaid について

Mermaid を使うプロジェクトで、図の作成・生成・レビューに用いるアクセシビリティスキルです。メタデータ、描画結果、公開環境を扱い、複雑な図には視認できる構造化代替を求めます。

主な機能

01図のタイトルと説明メタデータの作成
02Mermaid のバージョンと描画結果の確認
03複雑な図の構造化代替の用意
04SVG と埋め込み方式のレビュー
05コントラストとテーマの確認
06ノード、関係、読み順の改善

活用シーン

01Mermaid 図のアクセシビリティレビュー
02フローチャートに手順や判断表を追加
03公開プラットフォームでの描画結果の検証
04ダークテーマのコントラスト確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mgifford/accessibility-skills --skill mermaid

インストール後、Claude Code で/mermaidを入力して読み込まれたか確認します。

同梱ファイルSYNC.md

詳細

Mermaid 図のアクセシビリティスキル

正規のソース：mgifford/ACCESSIBILITY.md 内の examples/MERMAID_ACCESSIBILITY_BEST_PRACTICES.md このスキルはそのファイルに基づいています。迷った場合は、例を正としてください。

Mermaid 図を作成、生成、またはレビューする際は、以下のルールを適用してください。 プロジェクトで Mermaid 図を使用している場合にのみ、このスキルを読み込んでください。

基本原則

Mermaid コンテンツのアクセシビリティは、4 つの層に依存します。（1）図のソースとそのアクセシビリティメタデータ、（2）正確な Mermaid レンダラーと設定、（3）生成された SVG／ラスター出力、（4）公開プラットフォームがその出力を埋め込み、公開する方法です。レンダリングされたノードや関係性に有用な意味があると証明されない限り、生成された Mermaid 図は非テキストコンテンツです。ソースやエディターのプレビューだけでなく、公開後の最終出力をテストしてください。

作成を始める前に、そもそも図が必要かどうかを判断してください。見出し、短いリスト、表、または数文であれば、情報をより明確に伝えられる場合があります。関係性、順序、分岐、階層、タイミング、または空間的なグループ化によって理解が大きく向上する場合、Mermaid が役立ちます。

深刻度の尺度（このスキル）

レベル	意味
重大	図が重要な情報を伝えているにもかかわらず、アクセシブルなタイトルや代替情報がない。またはメタデータの構文が誤っているため、気付かれずに無視される
深刻	タイトルはあるが、複雑な図に説明がない。コントラストに問題がある
中程度	複雑な種類の図に、視覚的に確認できる構造化された代替情報がない。名前付きエッジに文脈がない
軽微	ID が重複している。レンダラーのバージョンが確認されていない

重大：正しい `accTitle`／`accDescr` 構文を使う — `%%` を付けない

%% は Mermaid のコメント接頭辞です。 %%accTitle … または %%accDescr … と記述した行はコメントとして扱われ、気付かれずに無視されます。その結果、機能しているように見えても、アクセシビリティメタデータはまったく生成されません。

# WRONG — these are Mermaid comments and do nothing
%%accTitle This is ignored as a comment
%%accDescr This is also ignored as a comment

正しい構文では、コメント接頭辞を付けずに accTitle: と accDescr: を直接使います。

flowchart TD
    accTitle: Account recovery decision flow
    A[Submit email address] --> B{Account found?}
    B -->|Yes| C[Send recovery link]
    B -->|No| D[Show recovery help]

1 行の説明にはコロンを使います。

flowchart LR
    accTitle: Publishing workflow
    accDescr: Content moves from drafting through accessibility review to publication.
    A[Draft] --> B[Accessibility review] --> C[Publish]

複数行の説明では、accDescr の後にコロンを付けず、波括弧を使います。

flowchart TD
    accTitle: Account recovery decision flow
    accDescr {
      A user submits an email address. If an account is found, the system sends
      a recovery link and confirms that it was sent. If no account is found,
      the system shows recovery help and offers a support contact.
    }
    A[Submit email address] --> B{Account found?}
    B -->|Yes| C[Send recovery link]
    B -->|No| D[Show recovery help]

Mermaid では、100 文字のタイトル制限や 500 文字の説明制限は一律に定められていません。ページ上で図を区別できる最短のタイトルを付け、画像の説明として役立つよう簡潔にまとめてください。詳しい手順は accDescr に詰め込まず、表示される構造化 HTML に移してください。

%%a11y-node や %%a11y-edge のようなディレクティブを作らないでください。これらは標準の Mermaid 構文ではありません。プロジェクト固有のプリプロセッサーで実装されていない限りコメントであり、Mermaid の機能として記載してはいけません。

構文の対応状況や図の種類による違いを把握するため、プロジェクトで使用している正確な Mermaid バージョンでソースを解析してレンダリングしてください。accTitle／accDescr の対応状況は、バージョンや図の種類によって異なります。

役立つタイトルと説明を書く

タイトル： 主題を特定し、ページ上のほかの図と区別できるようにします。役立つ場合にのみ図の種類を含め、ファイル名、内部 ID、一般的なラベル（「図」など）は避けます。例：「アカウント復旧の判断フロー」、「決済サービスのリクエストシーケンス」、「注文の状態と許可される遷移」。

説明： 目的、開始時点の状況、主要な要素／参加者、重要な順序／階層／関係性、重要な判断／例外／結果、完全な代替情報の場所を説明します。色や形を列挙するだけの説明（「青い長方形から緑のひし形へ矢印が伸びる」は外観の説明であり、意味の説明ではありません）は避けてください。また、すべてのノードラベルを長い 1 文にまとめないでください。読み進めにくく、構造も失われます。

視覚的に確認できるタイトル／説明も用意してください。 ページの見出しや図のキャプションは、AT 利用者に限らず、すべての人に役立ちます。

<figure aria-labelledby="recovery-flow-heading">
  <h2 id="recovery-flow-heading">Account recovery flow</h2>
  <pre class="mermaid">
flowchart TD
    accTitle: Account recovery decision flow
    accDescr: A recovery request either sends a link or offers additional help.
    A[Submit email address] --&gt; B{Account found?}
  </pre>
  <figcaption><a href="#recovery-flow-description">Read the account recovery steps</a>.</figcaption>
</figure>

（> へのエスケープが必要なのは、Mermaid のソースを HTML に直接埋め込む場合だけです。Markdown の Mermaid フェンスでは不要です。）

重大：複雑な図には、視覚的に確認できる構造化された代替手段を用意する

accDescr は SVG の説明を作成しますが、ナビゲーション可能な文書構造は作成しません。複雑な図には、見出し、リスト、表、リンクを含む、視覚的に確認できる HTML が必要です。

Mermaid の図の種類	有用な構造化された代替手段
フローチャート／決定木	順序付きの手順＋入れ子のリスト、または決定表（条件 → 結果）
シーケンス図	参加者のリスト＋時系列のメッセージ表
ステート図	状態の定義＋遷移表（トリガー、遷移元、遷移先、結果）
クラス図	クラスの定義、プロパティ、メソッド、継承、関係表
エンティティ関係図	エンティティの定義、キー、属性、多重度、関係表
ガント／タイムライン	日付、期間、担当者、ステータス、依存関係を含むタスク／イベント表
円グラフ／XY／象限／レーダー／サンキー	結果の概要＋単位を含む基礎データ表
マインドマップ／ツリー	適切に入れ子になった見出しまたはリストの階層
アーキテクチャ／C4／ブロック図	コンポーネント一覧、責務、境界、関係表
Git グラフ	時系列のブランチ／マージ／リリース履歴
ユーザージャーニー	順序付けられた段階、目標、行動、感情、障壁、機会

<section id="recovery-flow-description" aria-labelledby="recovery-flow-description-heading">
  <h3 id="recovery-flow-description-heading">Account recovery steps</h3>
  <ol>
    <li>The user submits an email address.</li>
    <li>The system checks for an account:
      <ul>
        <li>If found, send a recovery link and confirm it was sent.</li>
        <li>If not found, show recovery help and offer support.</li>
      </ul>
    </li>
  </ol>
</section>

代替手段との同期を保ってください — 可能であれば、レビュー済みの同じデータモデルから図とその代替手段を生成してください。別々に管理する場合は、同じ変更に両方を含め、ノード／値／エッジを比較し、コンテンツレビューの担当者を割り当ててください。生の Mermaid ソースだけを代替手段として公開しないでください — 開発者には役立つ場合がありますが、すべてのユーザーにとって同等の説明にはなりません。

重大：Mermaid が生成する SVG を理解する（異なるパターンを手作業で作成しない）

現在の Mermaid のドキュメントによると、レンダラーは図の種類に基づいて aria-roledescription を自動的に追加します。また、accTitle／accDescr が指定されている場合は、タイトルを参照する aria-labelledby と、説明を参照する aria-describedby を備えた <title>／<desc> 要素を生成します。両方を 1 つの aria-labelledby にまとめるのではなく、それぞれ別に指定します。

<svg aria-labelledby="generated-title-id"
     aria-describedby="generated-description-id"
     aria-roledescription="flowchart-v2"
     id="generated-diagram-id">
  <title id="generated-title-id">Account recovery decision flow</title>
  <desc id="generated-description-id">A recovery request either sends a link or offers additional help.</desc>
</svg>

テスト済みの理由がない限り、両方を 1 つの aria-labelledby 値に書き換えないでください — ラベルは画像を特定し、説明は追加情報を提供します。これらは別個の関係です。正確な ID／クラス／属性は Mermaid のバージョンによって変わる場合があります。生成された ID をソースにコピーしたり、文書化されていない内部クラス名に依存したりしないでください。

ノードごとのセマンティクスは自動ではありません。 accTitle／accDescr は図全体を説明するものであり、すべてのノード／エッジ／矢印を有用でアクセシブルなオブジェクトにするわけではありません。生成された SVG グループに role="list"／role="listitem" を自動的に追加しないでください — 視覚的なレイアウトが必ずしもリストとは限らず、DOM の順序が読み上げ順と一致するとは限りません。また、リストのセマンティクスでは分岐、多重度、グラフの関係を表現できません。ユーザーが個々の項目を確認する必要がある場合は、目的に特化したインタラクティブなコンポーネントを構築してテストしてください。複雑なウィジェットの基盤として、生成された SVG の内部構造を使うのは脆弱です。

ID は、最終的な HTML ドキュメント内で一意である必要があります（互いに無関係なページ間で一意にする必要はありません）。生成された ID は Mermaid に管理させてください。複数のインライン図が同じページにある場合は重複を確認し、スナップショットテストを安定させるには deterministicIds 設定を使用してください。サニタイズ／エクスポート後も、参照されているすべての ID を維持してください。

重要：埋め込みモードとエクスポートモードではルールが変わります

モード	責任
ページ内で生成されるインライン SVG	生成されたタイトル／説明／ARIA 参照、言語、スタイル、一意の ID を保持する
`<img>` を介した外部 SVG	HTML の `alt` を指定する — SVG 内部のタイトル／説明が公開されると想定しない
ラスター PNG/JPEG	HTML の `alt` ＋ HTML 内の長く構造化された代替テキスト
`<object>`／iframe	埋め込み要素に有用なアクセシブルネームを付ける。開始時／終了時をテストする。外部 HTML の代替を用意する
CSS 背景画像	装飾のみに使用するか、情報を通常の HTML で提供する
PDF／オフィス文書へのエクスポート	文書タグ、代替テキスト、読み上げ順序 — SVG メタデータでは代用できない
Markdown プラットフォームのレンダラー	プラットフォーム固有の Mermaid バージョン、サニタイザー、テーマ、出力をテストする

<figure>
  <img src="account-recovery-flow.svg"
       alt="Account recovery either sends a reset link or provides additional support."
       width="960" height="540">
  <figcaption><a href="#recovery-flow-description">Read the complete account recovery steps</a>.</figcaption>
</figure>

ソース SVG に <title>／<desc> が含まれているという理由だけで、HTML の alt を空にしないでください。

図の内容を明確にする

ノード／参加者： 内部 ID ではなく、人が読めるラベルを使います。一般的でない略語は展開します。ラベルは簡潔でありながら意味が伝わるものにします。見た目が似ているノードには、テキストで区別できるラベルを付けます。判断、処理、データベース、外部システムを形状だけで区別しないでください。

エッジ／関係： 結果がそれ以外では明確でない分岐には、「はい」／「いいえ」のような一般的な表現ではなく、「承認済み」／「修正が必要」のようなラベルを付けます。代替テキストでも方向と始点→終点の意味を保持します。線のスタイルや位置に依存するラベルのない関係を説明します。状態や関係の種類を、コネクターの色だけで表さないでください。

読み上げ順序／レイアウト： 内容と言語に合った方向を選びます。線の交差を減らします。近接していることだけで関係があるように見えるレイアウトは避けます。視覚的な配置は、プログラムによる読み上げ順序ではありません。意図した順序／階層を説明と構造化された代替テキストで明示してください。

中程度：色とコントラスト

WCAG 2.2 の比率を適用します。通常のテキストは 4.5:1 以上、大きなテキストは 3:1 以上です（CSS ピクセルで 18 ピクセルであることだけを大きなテキストのしきい値とせず、WCAG の実際の定義を確認してください）。意味のあるノード／境界／コネクター／状態を理解するために必要な視覚情報は 3:1 以上です（WCAG 1.4.11）。ラベルやアウトラインによって情報が保持される場合、すべての装飾的な塗りつぶしに、隣接するすべての塗りつぶしとの 3:1 のコントラストが必要なわけではありません。WCAG 2.2 への適合には WCAG 2.x のコントラストを使用します。APCA／WCAG 3 の取り組みは動向を注視する研究であり、代替のテストではありません。

ステータス、所有者、参加者グループ、クリティカルパス、選択状態を表す際は、色に加えて、直接ラベル、線のスタイル、パターン、テキストによる代替を備えたアイコン、境界線の処理、または構造化された代替テキスト内の値を組み合わせてください。

実際のテーマをテストしてください — 不安定な内部セレクターで個々の要素をスタイル設定するのではなく、テーマ設定を一元化します。対応するすべてのライト表示とダーク表示、および実際の背景色／コンテナー色の中で、テキスト／塗りつぶし／境界線／コネクター線／矢印の先端／ラベル／フォーカス／データマークをテストします。強制カラー表示モードをテストし、SVG のスタイルが失われても構造化された代替テキストが使える状態に保ちます。Mermaid の dark テーマを選択したり、prefers-color-scheme ルールを追加したりすれば、自動的にアクセシブルなダークモードになるとは考えないでください — Mermaid の更新後はテーマを再確認してください。

レスポンシブレイアウト、ズーム、リフロー

エクスポートする SVG には有用な viewBox を含めます。200%／400% のズーム時に図が切れないようにします。役立つ場合は、ユーザーが拡大表示を開いたり SVG をダウンロードしたりできるようにします。表示されるタイトル／要約／代替テキスト／コントロールをリフロー可能に保ちます。長いラベルや翻訳をテストします。ブラウザーのズームを無効にしないでください。複雑な図そのものには WCAG 1.4.10 の二次元レイアウトの例外が適用されることがありますが、周囲のタイトル、説明、コントロール、構造化された代替テキストは、引き続きリフローが必要です。

重要：キーボード操作とインタラクティブな図

静的な図に tabindex="0" は必要ありません — キーボードフォーカスは、装飾的な SVG グループではなく、リンク／ボタン／コントロールに移動するようにします。図を視覚的にスクロールできる場合は、キーボードユーザーが閉じ込められることなく、そのコンテナーにフォーカスしてスクロールできるようにし、2D スクロールに依存しない構造化された代替手段も用意してください。

重要なリンクやアクションにたどり着く唯一の手段を図の中に置かないでください — 近くに、視認できる HTML のリンク／コントロールを用意してください。Mermaid のリンク／クリックアクションを有効にする場合は、各リンクにキーボードで移動できること、アクセシブルネームから目的を理解できること、フォーカスが視認でき、隠されていないこと、ポインター操作とキーボード操作で同じ結果が得られること、アクセシブルネームに表示ラベルが含まれること、ターゲットサイズとホバー／フォーカス時のコンテンツが該当する基準を満たすこと、すべてのアクションに同等の HTML 経路があることを確認してください。フォーカスできない生成済み SVG グループでボタンを模倣しないでください。

ノードの選択、分岐の展開、フィルタリング、詳細の確認など、インタラクティブな探索を実現する場合は、生成された静的 SVG の外部にアクセシブルな操作モデルを構築するか、テスト済みのコンポーネントを使用してください。Mermaid ソースと ARIA 属性だけでは、アクセシブルなグラフナビゲーションウィジェットにはなりません。

動きとアニメーション

装飾目的のアニメーションは避けてください。ホストやプラグインによってアニメーション／自動更新／移動するパスが追加される場合は、WCAG 2.2.2 が適用される箇所に一時停止／停止／非表示のコントロールを設け、prefers-reduced-motion を尊重し、WCAG の閾値を超える点滅を避け、動きだけを変更の指標として使用せず、最終状態をテキストで確認できるようにしてください。正確なバージョン／統合環境をテストせずに、Mermaid のアニメーションについてアクセシビリティに関する主張をしないでください。

重要：安全で安定したレンダリング

信頼できない図のソースがマークアップを挿入できると、アクセシビリティとセキュリティの両方が損なわれる可能性があります。レビュー済みのユースケースで別のモードが必要な場合を除き、Mermaid の securityLevel: 'strict' をデフォルトのままにしてください。不可欠なリンクを追加するためだけにセキュリティレベルを下げないでください（リンクは代わりに HTML に記述してください）。ユーザーが提供する Mermaid のソースは信頼できない入力として扱い、サポートされているサニタイズ機能と制限の厳しい CSP を使用してください。依存関係を自分で管理する場合は、プロジェクトのロックファイルで Mermaid／レンダラーの依存関係を固定してください。プラットフォームが管理するレンダリングでは、確認したバージョン、日付、確認方法、テスト済みの機能を記録してください。本番環境の依存関係を、バージョンを固定していない @latest URL から読み込まないでください。レンダリングの失敗を防ぐため、ソースのサイズと複雑さを制限してください。レンダリングエラーは、機密情報を漏らさず、アクセシブルなテキストとして表示してください。

自分で管理するレンダラーとプラットフォームが管理するレンダラー：

モデル	バージョンの根拠	責任
自分で管理	パッケージマニフェスト、ロックファイル、コンテナのダイジェスト	バージョンを固定し、更新をレビューし、出力をテストし、ロールバック手段を確保する
プラットフォームが管理（GitHub.com、Pages、Enterprise）	バージョンの確認、日付付きの記録	確認した内容を記録し、必要な機能をテストし、代替手段を用意し、プラットフォームの変更後に再確認する
事前レンダリング済みの静的エクスポート	エクスポートジョブが記録したバージョン	ソースと代替コンテンツをエクスポートとともに保持し、最終的な埋め込み先の環境でテストする

GitHub.com の Markdown、GitHub Enterprise Server、GitHub Pages、ローカルプレビュー、エクスポート済みファイルは、それぞれ別個のレンダリング環境です。ある環境で正常にレンダリングされたからといって、別の環境でもサポートされていると推測しないでください。GitHub Pages は、GitHub.com の Mermaid レンダラーを自動的に引き継ぎません。そこで Mermaid がレンダリングされるかどうか、またその方法は、Jekyll のテーマ／プラグイン／ビルドパイプラインによって決まります。

info ダイアグラムを使って、ホストされているバージョンを確認します。

info

これはリアルタイムの診断情報であり、バージョンが固定された依存関係ではありません。コミットなしで変更される可能性があり、表示されている環境のレンダラーについてのみ報告します。唯一のアクセシブルな記録としてではなく、日付付きのプレーンテキストの記録として保存してください。例：Last manually observed on GitHub.com: Mermaid x.y.z on YYYY-MM-DD.

バージョン番号だけでなく、環境ごとに機能を確認してください。必要なダイアグラムの種類が解析・レンダリングされること、accTitle／accDescr によって期待どおりのタイトル／説明／ARIA の関連付けが生成されること、ホストのサニタイザーが必要なセマンティクスを保持すること、ライト／ダーク／強制カラーモードでも理解できること、1 ページに複数のダイアグラムを配置しても ID が競合しないこと、レンダリングが失敗した場合も構造化された代替コンテンツを利用できることを確認してください。

作成とレビューのワークフロー

作成前： ダイアグラムによって理解が実質的に向上するかを判断し、目的／対象読者／不可欠な関係性／代替形式を特定し、対象のレンダラーがそのダイアグラムの種類とアクセシビリティ構文をサポートしていることを確認します。

作成中： 有効な accTitle:／accDescr: 行を追加し（%% 接頭辞は付けません）、わかりやすいラベルを使い、視覚的な複雑さを適切な範囲に保ち、色だけ／形だけで意味を表さないようにします。ソースとともに構造化された代替コンテンツを作成し、不可欠なリンク／コントロールは HTML に記述します。

公開前： バージョンを固定した本番環境のバージョンでレンダリングします（または、プラットフォームが管理するバージョンを記録して機能を確認します）。生成された SVG と、最終的なアクセシビリティツリーを確認します。構造化された代替コンテンツがダイアグラムと一致していることを検証し、サポートされるすべてのテーマ／ズーム／ビューポート／エクスポートをテストします。エディターのプレビューだけでなく、実際のホスト環境でテストします。レビュアー／バージョン／日付／制限事項を記録します。

AI が生成したダイアグラム： 草案として扱ってください。すべてのノード／エッジ／値／関係性をソース資料と照合し、汎用的なアクセシビリティ説明を書き直し、構造化された代替コンテンツが最終的なダイアグラムと一致していることを確認し、でっち上げられた Mermaid ディレクティブは却下してください。見た目どおりにレンダリングされたことだけを根拠に、アクセシビリティ／セキュリティ／適合性を推測しないでください。

リンティングと自動検証

ソースのチェック： ソースがターゲットのレンダラーで正確に解析されること。 accTitle: が存在し、コメントアウトされていないこと（つまり、%% が先頭に付いていないこと）。 accDescr: または accDescr { ... } が存在し、コメントアウトされていないこと。値が空でないこと。禁止されているカスタムディレクティブが実際の構文と誤認されないこと。複雑な図が、目に見える構造化された代替情報を参照していること。任意の一律な文字数制限を適用しないこと。

レンダリング出力のチェック： 生成された <title>／<desc> が存在すること。aria-labelledby がタイトルを参照していること。aria-describedby が説明を参照していること。最終ページで ID が一意であること。サニタイズや最適化によって、参照先の要素が削除されていないこと。意図しないフォーカス可能な子孫要素がないこと。インタラクティブ要素に名前／ロール／状態／キーボード操作／視認可能なフォーカスがあること。レンダリングエラーがテキストとして提示されること。

コントラストのチェックでは、サポートされているすべてのテーマにおいて、実際にレンダリングされた組み合わせ（テキストと実効背景、境界線、コネクター線、フォーカス状態）が必要です。「モノクロ」はコントラストテストを省略する理由にはなりません。

自動化では、説明が同等であるか、読み上げ順序に意味があるか、図が理解しやすいかは判断できません。手動での確認とユーザーレビューが必要です。

テスト

内容／同等の目的： 図が答えるべき質問を明確にする。重要な関係／分岐／値をすべて特定する。視覚的な図を使って回答し、次にタイトル／説明／構造化された代替情報だけを使って回答する。得られる情報と結論を比較し、両方の表現を一緒に修正する
キーボード： 静的な SVG が不要な Tab 停止位置になっていないことを確認する。図内のすべてのリンク／コントロール／ポップアップを操作する。視認可能なフォーカスと論理的な順序を確認する。スクロール可能な図にトラップされずに出入りできることを確認する。すべての操作に同等の HTML 経由の方法があることを確認する
スクリーンリーダー： 計算されたアクセシブルネーム／説明を確認する。最終的なホストで図が画像／グラフィック／ドキュメントのどれとして公開されるかを確認する。見出し／リスト／表を使って構造化された代替情報を読み上げる。重複した読み上げや過剰な読み上げがないことを確認する
視覚／ロービジョン： 標準サイズと大きな文字。200%／400% のズーム。幅の狭いビューポート／画面の向き。すべてのライト／ダーク表示。強制カラーモード。ラベル／ノード／線／矢印の先端／凡例が見える状態を維持することを確認する。長い翻訳が重ならないことを確認する
エクスポート／プラットフォーム： 元の Markdown／ソースのプレビューと、サニタイズ／最適化後の本番ページの両方をテストする。テストした各レンダラーがバージョン固定かプラットフォーム管理かを記録する。インライン SVG、外部 SVG、ラスター形式の各バリエーションをテストする。印刷／PDF をテストする。JavaScript を利用できない場合、またはレンダリングに失敗した場合をテストする。1 ページに複数の図を配置して ID の重複を確認する。Mermaid／プラグイン／テーマ／ホストの更新後に再テストする

よくある失敗

失敗	修正方法
`%%accTitle` または `%%accDescr` と記述する	`%%` のコメント接頭辞を付けずに、`accTitle:` と `accDescr:` を使用します
任意の100文字／500文字の制限を設ける	簡潔で役立つメタデータを記述し、詳細は見える構造で示します
正常にレンダリングされたことをアクセシビリティの証明とみなす	最終的なSVG、アクセシビリティツリー、ホスト、代替情報を確認します
複雑な図の説明を `<desc>` だけに頼る	見出し、リスト、表、または文章を見える形で提示します
Mermaidのソースを唯一の代替情報としてそのまま表示する	平易な言葉で、目的に適した表現を用意します
生成されたSVGのグループすべてにリストのセマンティクスを追加する	図全体を一つのまとまりとして扱うか、テスト済みの専用インターフェースを構築します
説明に対する `aria-describedby` を `aria-labelledby` に置き換える	ラベルと説明の関係をそれぞれ分けて維持します
タイムスタンプやランダム文字列からタイトルIDを生成する	IDの管理はMermaidに任せ、安定性が必要な場合は `deterministicIds` を使用します
`xmlns` を汎用的なアクセシビリティ属性として扱う	シリアライズされたスタンドアロンSVGには必要ですが、インラインSVGのメタデータ全般に必要なわけではありません
`%%a11y-node`／`%%a11y-edge` の構文を独自に作る	サポートされているMermaidの構文、または文書化された実際の前処理拡張を使用します
大きな文字の基準をCSSの18ピクセルとする	WCAGの実際の大きな文字の定義を適用します
暗色のMermaidテーマならダークモードの要件を満たすと考える	サポートするすべての表示環境で、実際の色をテストします
静的な図をキーボードフォーカス可能にする	静的な図形はTab順序から除外します
バージョンを固定していない `@latest` 依存関係からMermaidを読み込む	本番用レンダラーのバージョンを固定し、確認します
プラットフォーム管理のレンダラーはバージョンが固定されていると説明する	確認できたバージョン、日付、確認方法、テスト済み機能を記録します
GitHub PagesがGitHub.comと同じMermaidバージョンを使うと考える	Pagesのテーマ／プラグイン／ビルドパイプラインが提供するレンダラーを特定します
必要もないのに `securityLevel: 'loose'` を使用する	厳格なセキュリティのデフォルトを維持し、不可欠なインタラクションはHTMLに配置します

完了条件チェックリスト

主要なWCAG基準

1.1.1 非テキストコンテンツ（A）— タイトル／代替情報がない場合は重大
1.3.1 情報および関係性（A）
1.4.1 色の使用（A）
1.4.3 コントラスト（最低限）（AA）
1.4.10 リフロー（AA）
1.4.11 非テキストのコントラスト（AA）
2.1.1 キーボード（A）
2.4.7 フォーカスの可視化（AA）
4.1.2 名前、役割、値（A）
4.1.3 ステータスメッセージ（AA）

参考資料

規格の動向： これらのルールは WCAG 2.2 AA を対象としています。動向を確認してください：https://www.w3.org/TR/wcag-3.0/

Markdown 対応

ログインしてコメント

基本情報

作者: mgifford
リポジトリ: mgifford/accessibility-skills
カテゴリ: デザイン・UI
インストール数: 133
GitHub スター: 57

問題を報告