Wikipedia:アクセシビリティ
 | この文書はウィキペディア日本語版の方針やガイドラインとして提案中です。内容に関してノートページで議論を行っています。 |
アクセシビリティでは、記事を読みやすく、ブラウズしやすくするために考慮すべきことを説明します。
障害を持つ人たちへの配慮の必要性と、スマートフォンの普及など閲覧環境の多様化への対応について概説します。障害のあるなしに関わらず全てのウィキペディアンにとって読みやすく、編集しやすい記事を執筆できるように、以下のガイドラインを考慮してください。
基本的な考え方
[編集]ウェブアクセシビリティ
[編集]ウェブコンテンツにおけるアクセシビリティ（利用しやすさ）を「ウェブアクセシビリティ」といいます。
- 視覚、聴覚などの知覚障害や、学習障害をもつ人にとっても読みやすい
- 高齢者や四肢に障害がある人にとっても操作しやすい
- こうした配慮は健常者にとっても利用しやすいものになります
- スクリーンリーダーなど、障害者向けの補助ソフトウェアが意図通り機能する
- プログラムが情報を正しく解釈できるようにすることは、検索サイトのためのクローラの挙動にも有用です
これらを実現するため、国際機関W3CがWCAGというガイドラインを提唱しています。現在は2008年策定のWCAG 2.0が示されています[注 1]。
- 詳細はWCAG 2.0日本語版を参照してください。
Wikipedia:アクセシビリティでは、WCAG 2.0を参考にしながら、Wikipediaの記事が多くの人にとって利用しやすいものにするための様々な配慮を紹介します。
多様化する利用環境への配慮
[編集]近年では、パソコンのみではなく、携帯電話やタブレットなどの小型端末などを使ってウェブサイトを読むことも一般的になっています。同時に、古くからある機器やソフトウェアによってウィキペディアを閲覧している人も沢山います。文章のみで閲覧するテキストブラウザの愛好者も存在します。さらに、検索エンジンのbotや自然言語処理のプログラムからウィキペディア上の文章が理解されうる必要もあります。
ウィキペディアを見るのに使用される装置やソフトウェアの環境、例えばウェブブラウザの種類・ウィンドウの大きさ、機種依存文字・表示可能な色・装置の性能、さらには装置に限らず印刷された用紙の紙幅なども様々に異なることに注意してください。
記事の構造
[編集]導入部
[編集]導入部では必要な要素を以下の順番で提示します。曖昧さ回避のリンク(dablinks)、削除依頼タグ、メンテナンスタグ、Infobox、画像、ナビゲーションボックス(またはナビゲーション用テンプレート)、導入文、目次、そして最初の節のヘッダ、という順番です。
以下は、ウサギ[1]の冒頭から引用した例です。上記の順番になっていることを確認してください。
{{Redirect|兎|麻雀を題材にした漫画|兎-野性の闘牌-}}
{{Redirect|うさぎ|漫画『[[美少女戦士セーラームーン]]』の登場人物|月野うさぎ}}
{{告知|提案|大幅削除と内容の厳選について}}
{{生物分類表 (一部省略)
...
|名称 = ウサギ
|画像=[[ファイル:Oryctolagus cuniculus Tasmania.jpg|250px|アナウサギ]]
|画像キャプション = '''アナウサギ''' ''Oryctolagus cuniculus''
...
}}
'''ウサギ'''（'''兎'''）は、'''ウサギ科'''に属する草食[[哺乳類]]の総称。
見出し
[編集]見出しを読んだだけで節（セクション）の内容が分かるように、見出しを付けるべきです[2]。強調(''')を見出しとして使ったり、逆に見出しを強調として使わないでください[注 2]。
節の構造
[編集]導入部の説明にもあったように、それぞれの節はある決まった構造を持ちます。
<!-- 正しいマークアップ -->
== Foo bars ==
{{Main|Foo bar}}
{{Cleanup-section}}
[[ファイル:...|Typical Foo bar]]
'''foo bar''' は...
また、画像は関係した節の中に配置してください（節のヘッダや他記事へのリンク、タグなどの後です）。ヘッダの前には置かないでください。
解像度
[編集]ウィキペディアの記事は、スマートフォンのように小さな画面や、低い解像度しかないディスプレイでも見られるようにすべきです。一般ユーザに影響を与えることなくサポートできる最低の解像度は1024×768と考えられます（年々大型化しています[注 3][注 4][注 5]）。すべての記事はこの解像度で、水平方向のスクロールなしに読めなければなりません。1024×768の解像度では、画面の両側に画像や表が複数並んだ記事の閲覧には問題が生じることがあります。低い解像度しかない装置でも、段落を縦に引き伸ばしたり画像を違う位置へ移動させたりする機能を持つものもありますが、記事両側の同じ場所へ同時に画像や移動できるコンテンツを追加するときには注意してください。同様に、大きな表や画像も問題を引き起します。水平方向へのスクロールが避けられない場合もありますが、その時にも表を横へ広げるよりは、下へ伸ばして構築し直せないか考えてみてください。
文章
[編集]ここでは、主にスクリーンリーダーなどの閲覧環境に配慮した文章のスタイルについて解説します。
誤字脱字に注意
[編集]誤字・脱字には注意してください。スクリーンリーダーなどがうまく働かない可能性もあります。また、誤字・脱字のある文章は誰にとっても読みにくいものです。
約物や符号に関する注意点
[編集]見た目がよく似ている約物・符号は区別してください。表示ではほとんど変わらなくても、スクリーンリーダーでは全く違う文字として読み上げられます。
（解説） - 以下の記号は、見た目は非常によく似ていますが、異なる意味を持っています。
これらを取り違えたり誤用すると、スクリーンリーダーなどが意図通りに機能しない可能性があります。
詳しくは各記事を参照してください。
外国語
[編集]日本語以外の語句には、{{Lang}}テンプレートを用いてください[6]。
（例）{{Lang|fr|Assemblée nationale}} （国民議会）は、「Assemblée nationale （国民議会）」と表示されます。
詳しい使用方法は{{Lang}}を参照してください。
（解説） - 単に「nationale」と書いた場合、スクリーンリーダーはこれを何語（どの言語）の単語であるか認識できず、誤った発音で読み上げてしまうかもしれません。
翻字
[編集]日本語やラテン文字に無い文字は、カタカナ表記するか翻字してください（詳しくは{{ラテン翻字}}を参照）。
また、♥（ハートマーク）のような読めない文字を使わず、その代わりに代替テキストつきの画像を使用してください（このようなシンボルの一部には{{Dagger}}のように代替テキストつきの画像を表示させるテンプレートが用意されています。詳しくはCategory:画像挿入テンプレートを参照）。
（解説） - Unicodeをサポートしていないスクリーンリーダーは、これらの文字を読みあげられないことがあります。
打ち消し線
[編集]記事（標準名前空間）などでは、打ち消し線（取り消し線）を使用しないでください。
- （例）
これは例です。- こうした表記はしないでください。
ノートページなどの議論ページでは、自身の発言を後で修正する場合など、打ち消し線を用いても構いません。専用のテンプレート（{{Del}}・{{Ins}}・{{Delins}}）もあります。詳しくはWP:REDACTやHelp:ページの編集#取り消し線・下線を参照してください。
なお、打ち消し線を使用するには、主に下記の3つの方法がありますが、(1)(2)はいかなる場合も禁止です。
（解説） - (1)の<s>タグや(2)の<strike>タグは古い形式の削除タグです。HTML4が導入された1997年に「非推奨」、HTML5が導入された2014年に「廃止」されています。
- <s>タグや<strike>タグの使用は、検索エンジンやスクリーンリーダーでは意図通りに機能しない可能性があります。スクリーンリーダーはこの方法で打ち消し線を引いた場所もそのまま他の文と同じく読み上げてしまうかもしれません。
- (3)の<del>タグ・<ins>タグは、HTML5で推奨されています。検索エンジンやスクリーンリーダーでも意図通りに解釈されるでしょう。
- スクリーンリーダーを使う編集者は、議論に参加するとき、insタグやdelタグなどの意味を無視して普通の文章と同様に読み上げないよう、適切に要素の意味を読み取るようにスクリーンリーダーを設定してください。
改行
[編集]スクリーンリーダーを用いた編集では、1行ごとに編集するのが普通です。どうしても必要な場合を除いてウィキペディアのソースに改行を入れないでください。
ツールチップ
[編集]ツールチップなど、情報を得るためにマウスの動きなどの物理的な動作を必要とする技術を使わないでください。なお、略語の元となった語を示す{{Abbr}}は例外的に許可されます。
リンク
[編集]- リンクしすぎないこと。多くのスクリーンリーダーには、リンクのみを抽出して読み上げる場合があります。
- リンクには内容に沿った説明を付けること。特に外部へのリンクの場合は注意（ここをクリックやここ あるいは「もっと読む」といったリンクを避けること）[7]。
- できる限り少ないコードを使うこと。編集画面での文章が読みやすくなります（たとえば、"[[日本]]的"で済むところを"[[日本|日本的]]"としないこと）。
- 記号やユニコード文字をアイコンとして使わないこと。代替テキスト付きの画像のアイコンを使うべきです。例えば、"→"（「右」を意味する記号）のような記号はスクリーンリーダーが読まないことがあります。
色
[編集]
色はウィキペディアの記事ではテンプレートと表で最もよく使われています。使用できる色についてはウェブカラーをご覧ください。
記事に色を使用する場合には、以下のようにアクセシビリティに留意しなければなりません。
- 色が重要な情報を伝達する唯一の方法にならないようにしてください[8]。たとえば、「表中の赤字部分は○○」といった方法を取ってはいけません[9]。そういった場合は、斜体や太字を併用する、脚注を付ける、その「○○」を併記する、あるいは記号（※印や三角など）で表現する、などの方法を取るべきです。色だけで情報を表現しようとすると、盲目の利用者や（点字ディスプレイや読み上げ機能→スクリーンリーダー）、モノクロ印刷やモノクロ画面でウィキペディアを閲覧する読者にはその情報が伝わりません。
- ウィキペディアの読者には部分的もしくは完全な色覚異常（色覚特性）を持つ人も多くいます（日本人男性には特に多く、軽度のものを含めると20人に1人が該当します）。ウィキペディアで用いられる色の組み合わせ（インフォボックス、ナビゲーションボックス、グラフなど）には適切なコントラストを確保するようにしてください。色の選択にカラースキームジェネレータを用い、色覚異常をシミュレートするツール（vischeck.comもしくはColorblind Web Page Filterなど）で結果を確認しましょう。
- リンクの色をデフォルトから（特に赤へと）変更することは混乱を招くので避けるべきです。
- 普通のテキストと青リンクのテキストの両方について、背景色とのコントラストに留意し、できるだけ衝突を避けてください（赤い背景に青い文字など）。
- 色を過度に使用している記事には、{{色の使用}}テンプレートを記事の冒頭に貼付してください。次のように表示されます。
 | この記事は色を過度に使用しています。 |
- 以下のように表示される{{色}}テンプレートもあります。
- World Wide Web Consortiumの草案アルゴリズムを使用しているColour Contrast Analyserや、専用のFirefoxアドオンを用いて、色盲を含む視覚障害のある人に適切な色のコントラストになっているかをテストできます。
ブロック要素
[編集]箇条書き
[編集]リストに1行以上の改行を入れないでください。もしリストが1行以上離れてしまうと、HTMLのリストタグはそこで終わってしまい、改行の前と後が別のリストとして解釈されます[注 6]。
表
[編集]スクリーンリーダーや他のウェブブラウザは、表に含まれるデータをユーザが見やすい（あるいは聴きやすい）ように、一部のHTMLのテーブルタグを特別な方法で使うことがあります。
単にレイアウトのためだけに表を使うことは避けてください。
段組み
[編集]閲覧環境に依らずに列数を固定した段組みは、横幅の狭い環境（スマートフォンなど）において可読性が損なわれる場合があるため、推奨されません。それぞれの閲覧環境に合わせられるよう、代わりに列幅を指定するなどしてください。
画像
[編集]- 画像には代替テキストを付けることが推奨されます。代替テキストは、盲目のユーザや検索エンジンのクローラに対して、または画像が表示されないとき、画像の代わりとなる文章です[10]。ただし、装飾用の画像には空の代替テキスト（空を指定することは何も指定しないこととは違います）を指定しましょう[11]。
- 画像にはキャプションを付けるべきです。Help:画像の表示も参照。画像のキャプションは、なるべく画像の意味を正確に説明し、単独で読んでも意味が理解できる文にするべきです。
- 可能ならば、画像を見られないユーザにも理解できるように、全ての図表やグラフにはテキストによる内容の説明を付けるべきです[12]。
- 本文中に加えるのが適切ではない、画像の詳細な説明は画像の説明ページに移動させるべきです。
- 画像は関係する節内に置くべきです。これはモバイル用のサイトでの表示と、スクリーンリーダーが画像の代替テキストとキャプションを読み上げるタイミングに影響するからです。
- 可能ならば、デフォルトのユーザ設定を上書きするほど大きな画像にしないでください。文字を大きく表示するよう設定している閲覧者も居ます。大きな画像のサムネイルは、文字を表示するスペースを奪ってしまうかもしれません。
動画と音声
[編集]記事の理解を助けるために、動画や音声が使われることがあります。この場合も、画像や色に関する注意と同様に、動画や音声が情報を得る唯一の手段とならないように注意してください。
アニメーション画像
[編集]アニメーション画像のアクセシビリティを保証するためには下記のどれかを行う必要があります。
これは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>など）を使いましょう。もちろんこれには例外もあります。たとえば、<font>タグは記事に使わないほうが良いでしょう。そのかわりに、意味の違いを強調するためには、論理的なスタイルタグを使ってください。
HTMLタグを使用する場合でも、HTML5で廃止または非推奨化されたタグ、MediaWikiで使えないタグ[注 7]はできるだけ避けてください[19]。
スタイルシートやJavaScriptの制限された利用者への配慮
[編集]ウィキペディアの記事は、CSSやJavaScriptを部分的にしかサポートしていない機器からもアクセスできるべきです。しかしそれと同時に、CSSやJavaScriptをサポートした最新のブラウザと、機能の制限されたブラウザで同じ体裁を整えようとするならば、多くのユーザにとって有用な機能を制限せざるを得ない、という事実も知っておくべきです。CSSやJavaScriptを使えない環境で、コンテンツが見えなくなったり、崩れてしまうような機能は使ってはなりません。これにはウィキペディア英語版のWikipedia:HiddenStructureのような機能によってテーブルの中身を隠す方法[注 8]や、また、ダイナミック・ナビゲーション・ボックスの畳み込みなどJavaScriptを使用できなければ内容が分からないような実装も含まれるかもしれません。しかし互換性を考慮するあまり一般的なユーザが不便を感じることのないように、機能に制約のあるブラウザへの考慮は「最低限読める」ということが確かなレベルで良いです。
これらの配慮に慣れておくために、大きな変更を起こす可能性のある編集の前には、JavaScriptやCSSを無効にしてテストすべきです。Mozilla Firefoxでは、WebDeveloperという拡張を用いれば簡単にテストできます。その他のブラウザでも設定で無効にできます。また、インラインCSSは、いくつかのブラウザ、メディア、XHTMLのバージョンによってはサポートされていないことに少し注意してください。
キーボード・ショートカット
[編集]ウィキペディアにはキーボード・ショートカットが提供されています[20]。これらは無効にできます。
関連項目
[編集]脚注
[編集]注釈
[編集]- ^ WCAG 2.0は、「知覚可能」「操作可能」「理解可能」「堅牢」の4原則から成っています。この原則のもとに12のガイドライン（基本的な目標）が置かれています。各ガイドラインには「A」から「AAA」まで3段階の「達成基準」が与えられています。これらの指針のなかには、現在のMediaWikiの仕様上、達成困難なものもあります。
- ^ たとえばモバイル版のウィキペディアでは、見出しごとに文章が折り畳まれて表示されます。読者が見出しを見ただけで、記事を読むべきか判断できるべきです。
- ^ 2012年にはより大きな画面サイズが主流となり、1024×768も少数派になっています[3]。
- ^ 2006年には800×600サイズも考慮していました[4]。
- ^ スマートフォンでも2017年初頭にiPhone 6のサイズ4.7インチが主流となりましたが、iPhone 5のサイズ4インチはまだ多く使われています[5]。
- ^ 1つのリストであると正しく解釈されることは情報及び関係性 - 達成基準 1.3.1 を理解するに必要です。
- ^ 詳しくはmw:Help:HTML in wikitextをご参照ください。
- ^ この機能は英語版では2006年以降使われていません。現在はHiddenStructureが使われている箇所を簡単に見つけられるよう中身を隠さず、代わりにライム色で強調表示します。ウィキペディア日本語版では導入されていません。
出典
[編集]- ^ 「ウサギ」2009年10月28日 (水) 20:25(UTC)の版
- ^ Web Content Accessibility Guidelines (WCAG) 2.0 2.4.6項より。
- ^ Nielsen, Jakob (2012年5月7日). “大型化するコンピュータ画面”. U-site. 2016年12月28日閲覧。
- ^ Nielsen, Jakob (2006年7月31日). “画面解像度とページレイアウト”. U-site. 2016年12月28日閲覧。
- ^ Owen, Malcolm (2017年2月27日). “Original iPhone, 3G, 3GS still in active use, 2016 web traffic report reveals” (英語). apple insider. 2017年9月1日閲覧。
- ^ Web Content Accessibility Guidelines (WCAG) 2.0 3.1.1と3.1.2項より。
- ^ F14: 達成基準 1.3.3 の失敗例 － 形状又は位置のみでコンテンツを特定している（WCAG 2.0 達成方法集、W3C ワーキンググループノート、ウェブアクセシビリティ基盤委員会 (WAIC)[1]による日本語参考訳）
- ^ 色の使用 - 達成基準 1.4.1 を理解する
- ^ F13: 達成基準 1.4.1 の失敗例 － 画像の色の違いで伝られる情報が含まれないテキストによる代替を持っている
- ^ H37: img 要素の alt 属性を使用する
- ^ H67: 支援技術が無視すべき画像に対して、img 要素の alt テキストを空にして、title 属性を付与しない
- ^ G92: 非テキストコンテンツに対して、それと同じ目的を果たし、かつ同じ情報を示す長い説明を提供する
- ^ a b Web Content Accessibility Guidelines (WCAG) 2.0 2.2.2項より。
- ^ "Setting animated gif images to stop blinking after n cycles (within 5 seconds)". Techniques for WCAG 2.0 (英語). W3C. 2011年1月1日閲覧。
- ^ "Allowing the content to be paused and restarted from where it was paused". Techniques for WCAG 2.0 (英語). W3C. 2011年1月1日閲覧。
- ^ Web Content Accessibility Guidelines (WCAG) 2.0 2.3.1項より。
- ^ Web Content Accessibility Guidelines (WCAG) 2.0 1.2.2項より。
- ^ Web Content Accessibility Guidelines (WCAG) 2.0 1.2.3と1.2.4項より。
- ^ “H88: 仕様に準じて HTML を使用する”. waic.jp. WCAG 2.0 達成方法集. 2019年1月19日閲覧。
- ^ G90: キーボードがトリガーとなるイベントハンドラを提供する及びWeb Content Accessibility Guidelines (WCAG) 2.0 2.1.1項を参照。