Markdown（マークダウン）は、記号を使って見出し、リスト、リンクなどの文書構造を表し、HTMLなどへ変換できる軽量なマークアップ言語です。
ブログ記事、技術文書、READMEファイルなどを簡潔に書けますが、記法を使うだけで内容が読みやすくなるとは限りません。
見出しの順序、画像の説明、リンクの文言などを整え、変換後の表示も確認する必要があります。
Markdownとウェブアクセシビリティの関係
ウェブアクセシビリティとは、障害の有無や利用環境にかかわらず、より多くの人がウェブ上の情報を理解し、利用できるようにする考え方です。
Markdownは文書構造を簡潔に示せるため、アクセシブルなコンテンツ作りに役立ちます。
ただし、読者が実際に利用するのはMarkdownの原稿ではなく、変換後のHTMLや画面です。
そのため、原稿の構造と変換後の結果を続けて確認することが大切です。
Markdownの基本記法
まず、よく使う記法と用途を対応づけて覚えると、文書の構造を保ちやすくなります。
| 用途 | Markdownの例 | 書くときの要点 |
|---|---|---|
| 見出し | ## 見出し2 |
内容の階層に合わせて使う |
| 太字 | **強調する語** |
強調したい語を囲む |
| 斜体 | *補足する語* |
必要な箇所だけに使う |
| 順序なしリスト | - 項目 |
順番を問わない項目を並べる |
| 順序付きリスト | 1. 手順 |
手順や優先順位を示す |
| リンク | [リンクテキスト](URL) |
リンク先が分かる文言にする |
| 画像 |  |
画像の内容や役割を文章で示す |
| インラインコード | `コード` |
短いコードやコマンドを示す |
| 引用 | > 引用文 |
引用する文章に使う |
見出し
見出しは、先頭に置く#の数で階層を表します。
# 文書のタイトル
## 大きな区分
### 区分内の小見出し#の次に###を置くような飛ばし方を避け、内容の親子関係に沿って順番に使います。
WordPressの投稿タイトルがH1として表示される構成では、本文をH2に当たる##から始めると、ページ全体の階層を保てます。
強調とリスト
太字は**または__、斜体は*または_で対象の語を囲みます。
**確認が必要です**
*補足情報です*リストは、順番を問わない項目にはハイフンやアスタリスク、手順には数字とピリオドを使います。
- 対象ページを確認する
- 問題を記録する
1. MarkdownをHTMLへ変換する
2. 変換後のページを確認するリンク
リンクテキストには、「こちら」ではなく、リンク先で確認できる内容を書きます。
[株式会社 greeden](https://corp.greeden.me/)この例では、株式会社 greedenの案内ページへ移動することをリンクテキストから判断できます。
リンク先の内容を具体的に示すと、読者は移動前に必要な情報かどうかを判断しやすくなります。
画像
意味のある画像には、画像が伝えている内容や役割を代替テキストとして記述します。
代替テキストは、画像を見られない場合に内容を補う文章です。
ファイル名だけではなく、本文との関係が伝わる表現を選びます。
書き分けを詳しく確認したい場合は、画像と代替テキストの書き方も参考にできます。
コードと引用
短いコードはバッククォート一つで囲み、複数行のコードはバッククォート三つで囲みます。
`コード例`
```text
複数行のコード例
```引用は、行頭に>を置いて本文と区別します。
> これは引用文です。表
表の記法を使える環境では、パイプとハイフンで見出し行とデータ行を分けます。
| 商品名 | 価格 | 在庫状況 |
| --- | --- | --- |
| 商品A | ¥1,000 | 在庫あり |
| 商品B | ¥2,000 | 在庫なし |列見出しを明確にし、複雑な情報を一つの表へ詰め込みすぎないようにします。
アクセシビリティを意識した書き方
見出しで内容の順序を示す
見出しは文字を大きくする装飾ではなく、文書の区分と階層を示すために使います。
スクリーンリーダーは、画面上の文字や文書構造を音声などで伝える支援技術です。
見出しが順序よく並んでいれば、読者はページの構成を把握しやすくなります。
仕組みを詳しく知りたい場合は、スクリーンリーダーの基本と実装ポイントを確認してください。
色だけで意味を伝えない
「赤字の部分を修正してください」だけでは、色を見分けにくい読者や読み上げを利用する読者に修正箇所が伝わりません。
色に加えて、対象と必要な作業を文章で明示します。
修正箇所：見出し3の前に見出し2を追加してください。
該当箇所は赤字でも示しています。この書き方なら、色を確認できない場合でも必要な作業を判断できます。
簡潔な構造を保つ
長い段落を分け、同じ種類の情報はリストへ整理すると、必要な箇所を探しやすくなります。
表は比較に向いていますが、単純な列挙で足りる内容まで表にする必要はありません。
HTML変換後の確認項目
Markdownの原稿が整っていても、変換後のHTMLで意図した構造になるとは限らないため、公開前に結果を確認します。
- ページ内の見出しがH1、H2、H3の順序で並んでいるか
- 画像の代替テキストが内容や役割を伝えているか
- リンクテキストだけを読んでも移動先を判断できるか
- 色だけに頼らず、文章でも意味を伝えているか
- リストや表が複雑になりすぎていないか
原文で挙げたWAVEやLighthouseなどを使う場合も、何を確認したいのかを決めてから結果を見直します。
関連する選択肢は、ウェブアクセシビリティのチェックツールでも確認できます。
Markdownが役立つ場面
- ウェブ開発者やライター：HTMLを直接書かずに、構造のある原稿を作成できます。
- 技術文書の作成者：ソフトウェアの説明や製品マニュアルを、一定の記法で整理できます。
- 幅広い読者へ情報を届けたい組織や個人：見出し、リンク、画像の説明を原稿段階から見直せます。
アクセシブルなMarkdownを書く要点
Markdownでは、見出しの階層、具体的なリンクテキスト、画像の代替テキスト、色に依存しない説明を原稿の段階で整えます。
そのうえでHTML変換後のページを確認し、意図した構造と説明が読者へ届く状態に仕上げます。
ウェブアクセシビリティ対応に関するサービスを検討している場合は、UUU ウェブアクセシビリティで機能や導入方法を確認できます。