Wikipedia‐ノート:アクセシビリティ/2019年1月1日改訂案

アクセシビリティでは、記事を読みやすく、ブラウズしやすくするために考慮すべきことを説明します。アクセシビリティについて考慮されたページは、視覚や色覚、四肢などの障害を持つ人たちにとっても利用しやすいだけでなく、一般の健康な人にも読みやすいものになるでしょう。

近年では、パソコンのみではなく、携帯電話やタブレットなどの小型端末などを使ってウェブサイトを読むことも一般的になっています。同時に、古くからある機器やソフトウェアによってウィキペディアを閲覧している人も沢山います。文章のみで閲覧するテキストブラウザの愛好者も存在します。さらに、サーチエンジンのbotや自然言語処理のプログラムからウィキペディア上の文章が理解されうる必要もあります。ウィキペディアを見るのに使用される装置やソフトウェアの環境、例えばウェブブラウザの種類・ウィンドウの大きさ、機種依存文字・表示可能な色・装置の性能、さらには装置に限らず印刷された用紙の紙幅なども様々に異なることに注意してください。障害のあるなしに関わらず全てのウィキペディアンにとって読みやすく、編集しやすい記事を執筆できるように、以下のガイドラインを考慮してください。

記事の構造

→詳細は「Wikipedia:スタイルマニュアル」を参照

導入部

導入部では必要な要素を以下の順番で提示します。曖昧さ回避のリンク(dablinks)、削除依頼タグ、メンテナンスタグ、Infobox、画像、ナビゲーションボックス(またはナビゲーション用テンプレート)、導入文、目次、そして最初の節のヘッダ、という順番です。

以下は、ウサギ[1]の冒頭から引用した例です。上記の順番になっていることを確認してください。

{{Redirect|兎|麻雀を題材にした漫画|兎-野性の闘牌-}}
{{Redirect|うさぎ|漫画『[[美少女戦士セーラームーン]]』の登場人物|月野うさぎ}}
{{告知|提案|大幅削除と内容の厳選について}}

{{生物分類表  (一部省略)
...
|名称 = ウサギ
|画像=[[ファイル:Oryctolagus cuniculus Tasmania.jpg|250px|アナウサギ]]
|画像キャプション = '''アナウサギ''' ''Oryctolagus cuniculus''
...
}}

'''ウサギ'''（'''兎'''）は、'''ウサギ科'''に属する草食[[哺乳類]]の総称。

見出し

→詳細は「Wikipedia:スタイルマニュアル (見出し)」を参照

見出しを読んだだけで節（セクション）の内容が分かるように、見出しを付けるべきです[2]。強調(''')を見出しとして使ったり、逆に見出しを強調として使わないでください[3]。

節の構造

導入部の説明にもあったように、それぞれの節はある決まった構造を持ちます。

<!-- 正しいマークアップ -->
== Foo bars ==
{{main|Foo bar}}
{{cleanup-section}}

[[ファイル:...|Typical Foo bar]]

'''foo bar''' は...

また、画像は関係した節の中に配置してください（節のヘッダや他記事へのリンク、タグなどの後です）。ヘッダの前には置かないでください。

解像度

ウィキペディアの記事は、スマートフォンのように小さな画面や、低い解像度しかないディスプレイでも見られるようにすべきです。一般ユーザに影響を与えることなくサポートできる最低の解像度は1024×768と考えられます（年々大型化しています[4]）。すべての記事はこの解像度で、水平方向のスクロールなしに読めなければなりません。1024×768の解像度では、画面の両側に画像や表が複数並んだ記事の閲覧には問題が生じることがあります。低い解像度しかない装置でも、段落を縦に引き伸ばしたり画像を違う位置へ移動させたりする機能を持つものもありますが、記事両側の同じ場所へ同時に画像や移動できるコンテンツを追加するときには注意してください。同様に、大きな表や画像も問題を引き起します。水平方向へのスクロールが避けられない場合もありますが、その時にも表を横へ広げるよりは、下へ伸ばして構築し直せないか考えてみてください。

文章

1. 誤字・脱字には注意してください。視覚障碍者向けのスクリーンリーダーなどがうまく働かない可能性もあります。また、誤字・脱字のある文章は健常者にも読みにくいものです。
2. 打ち消し線（これは例です。）を使って、記事中の議論のある記述を修正しないこと。"<!--"と"-->"によるコメントアウトを使うか、完全に除去してしまってください。普通、スクリーンリーダーは文章の強調（イタリックや太字、下線など）を無視します。そのため打消し線の引かれた文章も、他の文と同じく読み上げられてしまいます。（ウィキペディアの方針や削除の議論に参加する編集者はこれに気をつけてください。抹消線のある文章はそうした議論においてよく用いられています）
3. 日本語やラテン文字に無い文字は、カタカナ表記するか翻字してください。Unicodeをサポートしていないスクリーンリーダーは、これらの文字を読みあげられないことがあります。（英語圏における記述：Unicodeに対応していないスクリーンリーダーでは、ISO/IEC 8859-1(Laten-1)以外の文字はクエスチョンマークとして読み上げるでしょう。最も普及したスクリーンリーダーのJAWSの最新版でも、Unicode文字を読むのは非常に難しいです。）また、♥（ハートマーク）のような読めない文字を使わず、その代わりに代替テキストつきの画像を使用してください。このようなシンボルの一部には{{Dagger}}のように代替テキストつきの画像を表示させるテンプレートが存在する。Category:画像挿入テンプレートを参照してください。
4. ツールチップなど、情報を得るためにマウスの動きなどの物理的な動作を必要とする技術を使わないこと。なお、略語の元となった語を示す{{Abbr}}は例外的に許可されます。
5. スクリーンリーダーを用いた編集では、1行ごとに編集するのが普通なので、どうしても必要な場合を除いてウィキペディアのソースに改行を入れないこと。

外国語

日本語以外の語句には、{{lang}}テンプレートを用いてください[5]。

{{lang|fr|Assemblée nationale}} （国民議会）

は、

Assemblée nationale （国民議会）

と表示されます。

リンク

1. リンクしすぎないこと。多くのスクリーンリーダーには、リンクのみを抽出して読み上げる場合があります。
2. リンクには内容に沿った説明を付けること。特に外部へのリンクの場合は注意。（ここをクリックやここ あるいは「もっと読む」といったリンクを避けること。）[6]
3. できる限り少ないコードを使うこと。編集画面での文章が読みやすくなります。(たとえば、"[[日本]]的"で済むところを"[[日本|日本的]]"としないこと)
4. 記号やユニコード文字をアイコンとして使わないこと。代替テキスト付きの画像のアイコンを使うべきです。例えば、"→"（「右」を意味する記号）のような記号はスクリーンリーダーが読まないことがあります。

色

→「Wikipedia:色の使用」を参照

赤緑色覚異常が視認性にどう影響するかを示しているスクリーンショット

色はウィキペディアの記事ではテンプレートと表で最もよく使われています。使用できる色についてはウェブカラーをご覧ください。

記事に色を使用する場合には、以下のようにアクセシビリティに留意しなければなりません。

• 色が重要な情報を伝達する唯一の方法にならないようにしてください[7]。たとえば、「表中の赤字部分は○○」といった方法を取ってはいけません[8]。そういった場合は、斜体や太字を併用する、脚注を付ける、その「○○」を併記する、あるいは記号（※印や三角など）で表現する、などの方法を取るべきです。色だけで情報を表現しようとすると、盲目の利用者や、モノクロ印刷やモノクロ画面でウィキペディアを閲覧する読者にはその情報が伝わりません。
• ウィキペディアの読者には部分的もしくは完全な色覚異常を持つ人も多くいます（日本人男性には特に多く、軽度のものを含めると20人に1人が該当します）。ウィキペディアで用いられる色の組み合わせ（インフォボックス、ナビゲーションボックス、グラフなど）には適切なコントラストを確保するようにしてください。色の選択にカラースキームジェネレータを用い、色覚異常をシミュレートするツール（vischeck.comもしくはcolorfilter.wickline.orgなど）で結果を確認しましょう。
• リンクの色をデフォルトから（特に赤へと）変更することは混乱を招くので避けるべきです。
• 普通のテキストと青リンクのテキストの両方について、背景色とのコントラストに留意し、できるだけ衝突を避けてください（赤い背景に青い文字など）。
• 色を過度に使用している記事には、{{色の使用}}テンプレートを記事の冒頭に貼付してください。次のように表示されます。

• World Wide Web Consortiumの草案アルゴリズムを使用しているColour Contrast Analyserや、専用のFirefoxアドオンを用いて、色盲を含む視覚障害のある人に適切な色のコントラストになっているかをテストできます。

ブロック要素

箇条書き

→詳細は「Help:箇条書き」を参照

リストに1行以上の改行を入れないでください。もしリストが1行以上離れてしまうと、HTMLのリストタグはそこで終わってしまい、改行の前と後が別のリストとして解釈されます[9]。

表

→詳細は「Help:表の作り方」を参照

スクリーンリーダーや他のウェブブラウザは、表に含まれるデータをユーザが見やすい（あるいは聴きやすい）ように、一部のHTMLのテーブルタグを特別な方法で使うことがあります。

単にレイアウトのためだけに表を使うことは避けてください。

段組み

閲覧環境に依らずに列数を固定した段組みは、横幅の狭い環境（スマートフォンなど）において可読性が損なわれる場合があるため、推奨されません。それぞれの閲覧環境に合わせられるよう、代わりに列幅を指定するなどしてください。

画像

→詳細は「Wikipedia:スタイルマニュアル § 画像」、および「Wikipedia:画像の代替テキスト」を参照

1. 画像には代替テキストを付けることが推奨されます。代替テキストは、盲目のユーザやサーチエンジンのボットに対して、または画像が表示されないとき、画像の代わりとなる文章です[10]。ただし、装飾用の画像には空の代替テキスト（空を指定することは何も指定しないこととは違います）を指定しましょう[11]。
2. 画像にはキャプションを付けるべきです。Help:画像の表示も参照。画像のキャプションは、なるべく画像の意味を正確に説明し、単独で読んでも意味が理解できる文にするべきです。
3. 可能ならば、画像を見られないユーザにも理解できるように、全ての図表やグラフにはテキストによる内容の説明を付けるべきです[12]。
4. 本文中に加えるのが適切ではない、画像の詳細な説明は画像の説明ページに移動させるべきです。
5. 画像は関係する節内に置くべきです。これはモバイル用のサイトでの表示と、スクリーンリーダーが画像の代替テキストとキャプションを読み上げるタイミングに影響するからです。
6. 可能ならば、デフォルトのユーザ設定を上書きするほどに画像しないでください。文字を大きく表示するよう設定している閲覧者も居ます。大きな画像のサムネイルは、文字を表示するスペースを奪ってしまうかもしれません。

動画と音声

→詳細は「Help:音声・動画の作成と利用」を参照

記事の理解を助けるために、動画や音声が使われることがあります。この場合も、画像や色に関する注意と同様に、動画や音声が情報を得る唯一の手段とならないように注意してください。

アニメーション画像

アニメーション画像のアクセシビリティを保証するためには下記のどれかを行う必要があります。

• 5秒内に収まるようにする[13][14]
• 開始、一時停止、停止のメカニズムを配備する[13][15]。

これは5秒以上のアニメーション画像が動画ファイルに変換の上で使用されるべきことを意味します（変換の仕方についてはconverting animated GIFs to Theora OGGをご参照ください）。

なお、発作を引き起こす恐れがあるため、1秒内に3回を超える閃光が出ないようにしてください[16]。

動画と音声

動画と音声にはキャプションをつけることが推奨されます（やり方についてはcommons:Commons:Video#Subtitles and closed captioningをご参照ください）[17]。

耳の不自由な方にはクローズドキャプションを使う必要がありますが[18]、これは現時点では機能が整っておらず2012年にPhabricatorで要望が出されたままです。そのため、クローズドキャプションは現時点ではウィキペディア外でしか利用できません。

スタイルとマークアップについて

一般的には、HTMLタグよりウィキテキストのマークアップを用いたほうが良いとされています。特に、<i>（イタリック）や<b>（太字）を文章の整形に使わないでください。それらの代わりに''や'''、または論理的なスタイルタグ（<em>、<code>や<strong>など）を使いましょう。もちろんこれには例外もあります。<u></u>は、たとえばクリックできないリンクの例を作るなどの利用方法があるかもしれません。<font>タグは記事に使わないほうが良いでしょう。そのかわりに、意味の違いを強調するためには、論理的なスタイルタグを使ってください。

HTMLタグを使用する場合でも、HTML5で廃止または非推奨化されたタグ、MediaWikiで使えないタグ[19]はできるだけ避けてください[20]。

スタイルシートやJavaScriptの制限された利用者への配慮

ウィキペディアの記事は、CSSやJavaScriptを部分的にしかサポートしていない機器からもアクセスできるべきです。しかしそれと同時に、CSSやJavaScriptをサポートした最新のブラウザと、機能の制限されたブラウザで同じ体裁を整えようとするならば、多くのユーザにとって有用な機能を制限せざるを得ない、という事実も知っておくべきです。CSSやJavaScriptを使えない環境で、コンテンツが見えなくなったり、崩れてしまうような機能は使ってはなりません。これにはウィキペディア英語版のWikipedia:HiddenStructureのような機能によってテーブルの中身を隠す方法[21]や、また、ダイナミック・ナビゲーション・ボックスの畳み込みなどJavaScriptを使用できなければ内容が分からないような実装も含まれるかもしれません。しかし互換性を考慮するあまり一般的なユーザが不便を感じることのないように、機能に制約のあるブラウザへの考慮は「最低限読める」ということが確かなレベルで良いです。

これらの配慮に慣れておくために、大きな変更を起こす可能性のある編集の前には、JavaScriptやCSSを無効にしてテストすべきです。Mozilla Firefoxでは、WebDeveloperという拡張を用いれば簡単にテストできます。その他のブラウザでも設定で無効にできます。また、インラインCSSは、いくつかのブラウザ、メディア、XHTMLのバージョンによってはサポートされていないことに少し注意してください。

キーボード・ショートカット

→詳細は「Help:キーボード・ショートカット」を参照

ウィキペディアにはキーボード・ショートカットが提供されています[22]。これらは無効にできます。

関連項目

• Wikipedia:ディスレクシアの読者
• Web Accessibility Initiative
• アクセシビリティ、コンピュータアクセシビリティ

脚注

1. 「ウサギ」2009年10月28日 (水) 20:25(UTC)の版
2. Web Content Accessibility Guidelines (WCAG) 2.0 2.4.6項より。
3. たとえばモバイル版のウィキペディアでは、見出しごとに文章が折り畳まれて表示されます。読者が見出しを見ただけで、記事を読むべきか判断できるべきです。
4. • 2012年にはより大きな画面サイズが主流となり 1024×768 も少数派になっています：Nielsen, Jakob (2012年5月7日). “大型化するコンピュータ画面”. U-site. 2016年12月28日閲覧。
   • 2006年には800×600サイズも考慮していました：Nielsen, Jakob (2006年7月31日). “画面解像度とページレイアウト”. U-site. 2016年12月28日閲覧。
   • スマートフォンでも2017年初頭にiPhone 6のサイズ4.7インチが主流となりましたが、iPhone 5のサイズ4インチはまだ多く使われています：Owen, Malcolm (2017年2月27日). “Original iPhone, 3G, 3GS still in active use, 2016 web traffic report reveals” (英語). apple insider. 2017年9月1日閲覧。
5. Web Content Accessibility Guidelines (WCAG) 2.0 3.1.1と3.1.2項より。
6. F14: 達成基準 1.3.3 の失敗例 － 形状又は位置のみでコンテンツを特定している
7. 色の使用 - 達成基準 1.4.1 を理解する
8. F13: 達成基準 1.4.1 の失敗例 － 画像の色の違いで伝られる情報が含まれないテキストによる代替を持っている
9. 1つのリストであると正しく解釈されることは情報及び関係性 - 達成基準 1.3.1 を理解するに必要です。
10. H37: img 要素の alt 属性を使用する
11. H67: 支援技術が無視すべき画像に対して、img 要素の alt テキストを空にして、title 属性を付与しない
12. G92: 非テキストコンテンツに対して、それと同じ目的を果たし、かつ同じ情報を示す長い説明を提供する
13. ^ Web Content Accessibility Guidelines (WCAG) 2.0 2.2.2項より。
14. “Setting animated gif images to stop blinking after n cycles (within 5 seconds)” (英語). Techniques for WCAG 2.0. W3C. 1 January 2011閲覧。
15. “Allowing the content to be paused and restarted from where it was paused”. Techniques for WCAG 2.0. W3C. 1 January 2011閲覧。
16. Web Content Accessibility Guidelines (WCAG) 2.0 2.3.1項より。
17. Web Content Accessibility Guidelines (WCAG) 2.0 1.2.2項より。
18. Web Content Accessibility Guidelines (WCAG) 2.0 1.2.3と1.2.4項より。
19. 詳しくはm:Help:HTML in wikitextをご参照ください。
20. H88: 仕様に準じて HTML を使用する
21. この機能は英語版では2006年以降使われていません。現在はHiddenStructureが使われている箇所を簡単に見つけられるよう中身を隠さず、代わりにライム色で強調表示します。ウィキペディア日本語版では導入されていません。
22. G90: キーボードがトリガーとなるイベントハンドラを提供する及びWeb Content Accessibility Guidelines (WCAG) 2.0 2.1.1項を参照。