content-design

Name: content-design
Author: mgifford

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

リポジトリ

content-design について

ウェブコンテンツを執筆・編集・確認する人向けのアクセシビリティガイドです。代替テキスト、明確なリンク、論理的な見出し、平易な表現と構成で、情報を理解しやすくします。

主な機能

01情報画像に適切な代替テキストを用意
02文脈なしでも分かるリンクテキスト
03論理的な見出し階層の構築
04平易な言葉と読みやすい構成
05フォーム、テーブル、認知面の確認

活用シーン

01公開前のウェブコンテンツの確認
02曖昧なリンクや複雑な説明の書き換え
03見出し、段落、情報順序の設計

インストール

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

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

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

同梱ファイルSYNC.md

詳細

コンテンツデザインのアクセシビリティスキル

正式な参照元：mgifford/ACCESSIBILITY.md の examples/CONTENT_DESIGN_ACCESSIBILITY_BEST_PRACTICES.md このスキルはそのファイルに基づいています。判断に迷った場合は、例を正式な指針としてください。

ウェブコンテンツの作成、編集、レビューでは、これらのルールを適用してください。

基本方針

コンテンツデザインとアクセシビリティは切り離せません。技術的にはアクセシブルでも、内容が分かりにくかったり、構成が不適切だったりするページは、依然として障壁になります。できるだけ幅広いユーザーを想定してコンテンツを設計しましょう。分かりやすく書き、論理的に構成し、ユーザーが必要とする順序で情報を提示してください。

重大度の基準（このスキル）

レベル	意味
Critical	ある障害のあるユーザーグループにとって、コンテンツが完全にアクセス不能、または理解不能である
Serious	大きな障壁があり、回避策を求めるのは妥当ではない
Moderate	不便が生じるが、負担が大きすぎない回避策がある
Minor	ベストプラクティスからの逸脱で、影響はわずかである

Critical：画像には適切なテキスト代替を設定する

意味のある画像に alt 属性がない、または alt="" が指定されている場合は Critical です。視覚障害のあるユーザーは情報を得られません。装飾画像に説明的な alt を指定する場合は Moderate です。余計な情報が加わりますが、情報へのアクセスを妨げるものではありません。

情報を伝える画像には、見た目だけでなく目的を伝える、有意義な代替テキストを必ず設定してください
装飾画像には alt=""（空文字列）を設定してください（属性は必ず記述する必要があります）
情報を伝える手段を画像だけに頼らないでください。視覚的なコンテンツには説明テキストを添えてください
グラフや図表には、テキストによる概要またはアクセシブルなデータテーブルを添えてください（skills/charts-graphs/SKILL.md を参照）
図に関する個別のガイダンスは、skills/svg/SKILL.md を参照してください

Serious：リンクテキストはすべて、文脈なしでも意味が分かるようにする

「ここをクリック」「続きを読む」「詳細を見る」は Serious です。スクリーンリーダーのユーザーはリンクをたどるときにリンクテキストを周囲の文脈なしで聞くためです。


<a href="/report">Read more</a>


<a href="/report">2024 Accessibility Annual Report</a>

ドキュメントへのリンクには、ファイル形式とサイズを記載してください。

<a href="/report.pdf">2024 Annual Report (PDF, 2.3 MB)</a>

リンクが新しいタブで開く場合は、ユーザーに警告してください。

<a href="/report" target="_blank">
  Annual Report
  <span class="visually-hidden">(opens in new tab)</span>
</a>

用語は一貫して使ってください。ある箇所で「アクセシビリティ声明」と呼ぶ概念を、別の箇所で「a11y 開示」と呼ばないでください。

Serious：見出しの階層を論理的にする

見出しレベルのスキップは Moderate です。<h1> がない場合や、視覚的な装飾だけを目的に見出しを使う場合は Serious です。スクリーンリーダーのユーザーはページ内を移動するために見出しを頼りにしています。

ページごとに <h1> を1つだけ使い、ページの主な目的を示してください
論理的な階層にしてください：h1 → h2 → h3（レベルを飛ばさないでください）
見出しは内容を具体的に表し、ほかと重複しないものにしてください。「はじめに」や「概要」だけの見出しは避けてください
見出しは質問ではなく、説明文または明確なトピック名にしてください（FAQ形式が適切な場合を除く）
ナビゲーションのラベル、ボタンのテキスト、フォームのラベルは、文脈なしでも内容が分かるよう、具体的で曖昧さのない表現にしてください

Moderate：平易な言葉

複雑すぎる言葉遣いは Moderate です。認知障害のあるユーザーや読み書きの習熟度が低いユーザーに実際の障壁をもたらしますが、コンテンツ自体は技術的には存在しています。

よく使われる言葉、短い文、能動態を使ってください
一般の読者向けには、読解レベルを米国の8年生相当以下にしてください
読者に必要な場合を除き、専門用語、初出時の頭字語、内部でしか通じない用語を避けてください
技術用語は文中で説明し、略語は初出時に正式名称を記載してください
重要な情報を先に示してください。最も重要な点を最初に書きます
二人称の「あなた」を使い、読者に直接語りかけてください
二重否定や条件の重ね合わせを避けてください。「必要な項目をすべて入力して先に進んでください」のように書き、「必要な項目をすべて入力できていない場合にのみ先へ進めないわけではありません」のような表現は避けてください
長く抽象的な言葉より、短く具体的な言葉を優先してください（「利用する」ではなく「使う」など）
公開前に可読性チェッカーを実行してください。一般の読者向けには、フレッシュ・キンケイド読解レベルで8年生相当以下を目標にしてください

中程度：テーブル

真に表形式のデータにのみ使用します。レイアウトには使用しません（レイアウト用のテーブルに role="presentation" がない場合は重大です）
<caption> または見出しで、テーブルの内容を説明します
見出しセルには <th scope="col"> または <th scope="row"> を指定します
テーブルはシンプルに保ち、必要な場合を除いてセルを結合しません
複雑なテーブルには、テキストによる要約を用意します

シンプルなテーブルで scope がない場合は中程度ですが、複数の見出し行がある複雑なテーブルで指定がない場合は深刻です。（コードレベルのテーブル要件については、skills/tables/SKILL.md も読み込んでください。）

中程度：ページとコンテンツの構成

3つ以上の並列項目には、（密度の高い文章に埋め込まず）リストを使用します
段落は簡潔にし、最大3～5文にします。1つの段落では1つの考えを扱います
逆ピラミッド型に構成し、最も重要な内容を先頭に置きます
十分な余白を設けます

中程度：フォーム — 記述要件

フォーム内ではなく、フォームの前に入力方法を説明します
項目には、システムでの保存方法ではなく、ユーザーが入力する内容をラベルとして付けます
通常とは異なる形式の入力には、形式の例を示します：Date: DD/MM/YYYY
エラーメッセージには、問題と解決方法を記載します。システムエラーコードは避けます

（コードレベルのフォーム要件については、skills/forms/SKILL.md も読み込んでください。）

中程度：認知アクセシビリティ

複雑な内容には、要約、重要なポイント、「知っておくべきこと」などのセクションを追加します
長い手順は番号付きのステップに分けます
抽象的な概念の説明には、例やたとえを使います
可能な限り、時間に追われるような内容の提示を避けます
以前のセクションの内容を覚えていなくても理解できるよう、十分な背景情報を提供します

軽微：文章スタイルの詳細

受動態より能動態を優先します：「フォームがデータを保存します」ではなく「フォームがあなたのデータを保存します」
可能な限り現在形を使います
性別にとらわれない、包摂的な表現を一貫して使います
用語を統一します。サイト全体で概念ごとに1つの用語を使い、コンテンツスタイルガイドを作成して、一貫した語り口やトーンを適用します
ページごとに固有で説明的な <title> 要素を設定します
定期的にコンテンツを見直し、古くなった情報、誤解を招く情報、矛盾する情報を削除します

軽微：多様な読者に向けたコンテンツ

認知、学習、言語の違いを持つ人を含む、幅広い読者を想定します
実現可能な場合は、複数の形式でコンテンツを提供します（例：書面によるガイドと併せて動画の要約を用意する）
翻訳版ややさしい読み方のバージョンが適切かどうかを検討します
翻訳しにくい慣用句、比喩、文化に特有の表現は避けます

テストとレビュー

内容を声に出して読み、明確で自然な流れになっているか確認します
公開前に、そのトピックに詳しくない人にレビューしてもらいます
キーボードだけでページを移動できることをテストし、見出しが構造を伝えていることを確認します
スクリーンリーダーで、コンテンツを順番に読んだときに意味が通じることを確認します
すべてのリンクが説明的で、機能することを確認します
重要なページの読みやすさを評価し、経時的に記録します

完了の定義チェックリスト

主なWCAG基準

1.1.1 非テキストコンテンツ（A）— 意味のある画像に alt がない場合は重大
1.3.1 情報と関係性（A）
2.4.4 リンクの目的（コンテキスト内）（AA）— リンクが曖昧な場合は深刻
2.4.6 見出しとラベル（AA）
2.4.2 ページタイトル（A）
3.1.5 読解レベル（AAA — 一般読者向けの目標）

参考資料

基準の見通し： WCAG 3.0 は現在策定中です。コンテンツデザインの要件が大幅に変更される見込みはありません。最新情報：https://www.w3.org/TR/wcag-3.0/

Markdown 対応

ログインしてコメント

基本情報

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

問題を報告