「Wikipedia:アクセシビリティ」の版間の差分
→解像度: Help:MediaWikiに適応するブラウザ:ガラケーを考慮する必要はないのでは |
Apple tarte (会話 | 投稿記録) Apple tarte (会話) による ID:96504515 の版を取り消し タグ: 取り消し |
||
(23人の利用者による、間の45版が非表示) | |||
1行目: | 1行目: | ||
{{ |
{{Proposed|あくせしひりてい|WP:ACCESS|WP:ACCESSIBILITY}} |
||
'''アクセシビリティ'''では、記事を読みやすく、ブラウズしやすくするために考慮すべきことを説明します |
'''アクセシビリティ'''では、記事を読みやすく、[[ブラウズ]]しやすくするために考慮すべきことを説明します。 |
||
[[障害]]を持つ人たちへの配慮の必要性と、[[スマートフォン]]の普及など閲覧環境の多様化への対応について概説します。障害のあるなしに関わらず全てのウィキペディアンにとって読みやすく、編集しやすい記事を執筆できるように、以下のガイドラインを考慮してください。 |
|||
== 基本的な考え方 == |
|||
=== ウェブアクセシビリティ === |
|||
ウェブコンテンツにおける[[アクセシビリティ]](利用しやすさ)を「ウェブアクセシビリティ」といいます。 |
|||
* 視覚、聴覚などの知覚障害や、[[学習障害]]をもつ人にとっても読みやすい |
|||
* 高齢者や四肢に障害がある人にとっても操作しやすい |
|||
** こうした配慮は健常者にとっても利用しやすいものになります |
|||
* [[スクリーンリーダー]]など、障害者向けの補助ソフトウェアが意図通り機能する |
|||
** プログラムが情報を正しく解釈できるようにすることは、検索サイトのための[[クローラ]]の挙動にも有用です |
|||
これらを実現するため、国際機関[[World Wide Web Consortium|W3C]]が[[Web Content Accessibility Guidelines|WCAG]]というガイドラインを提唱しています。現在は2008年策定のWCAG 2.0が示されています<ref group="注">WCAG 2.0は、「知覚可能」「操作可能」「理解可能」「堅牢」の4原則から成っています。この原則のもとに12のガイドライン(基本的な目標)が置かれています。各ガイドラインには「A」から「AAA」まで3段階の「達成基準」が与えられています。これらの指針のなかには、現在のMediaWikiの仕様上、達成困難なものもあります。</ref>。 |
|||
* 詳細は[https://waic.jp/docs/WCAG20/Overview.html WCAG 2.0日本語版]を参照してください。 |
|||
Wikipedia:アクセシビリティでは、WCAG 2.0を参考にしながら、Wikipediaの記事が多くの人にとって利用しやすいものにするための様々な配慮を紹介します。 |
|||
=== 多様化する利用環境への配慮 === |
|||
{{See also|Wikipedia:多様な閲覧環境に配慮する}} |
|||
近年では、[[パソコン]]のみではなく、[[携帯電話]]や[[タブレット (コンピュータ)|タブレット]]などの小型端末などを使って[[ウェブサイト]]を読むことも一般的になっています。同時に、古くからある機器やソフトウェアによってウィキペディアを閲覧している人も沢山います。文章のみで閲覧する[[テキストブラウザ]]の愛好者も存在します。さらに、[[検索エンジン]]のbotや自然言語処理のプログラムからウィキペディア上の文章が理解されうる必要もあります。 |
|||
ウィキペディアを見るのに使用される装置やソフトウェアの環境、例えば[[ウェブブラウザ]]の種類・ウィンドウの大きさ、[[機種依存文字]]・表示可能な色・装置の性能、さらには装置に限らず印刷された用紙の紙幅なども様々に異なることに注意してください。 |
|||
== 記事の構造 == |
== 記事の構造 == |
||
{{Main|Wikipedia:スタイルマニュアル}} |
{{Main|Wikipedia:スタイルマニュアル}} |
||
=== 導入部 === |
=== 導入部 === |
||
[[Wikipedia:スタイルマニュアル |
<!--[[Wikipedia:スタイルマニュアル/導入部|スタイルマニュアル]]に説明があるように、 - 日本語版にはありませんので一旦コメントアウト。スタイルマニュアルでの説明は必要でしょうが-->導入部では必要な要素を以下の順番で提示します。曖昧さ回避のリンク(dablinks)、削除依頼タグ、メンテナンスタグ、Infobox、画像、ナビゲーションボックス(またはナビゲーション用テンプレート)、導入文、目次、そして最初の節のヘッダ、という順番です。 |
||
以下は、[[ウサギ]] |
以下は、[[ウサギ]]<ref>「ウサギ」2009年10月28日 (水) 20:25(UTC)の版</ref>の冒頭から引用した例です。上記の順番になっていることを確認してください。 |
||
<pre> |
|||
<syntaxhighlight> |
|||
{{Redirect|兎|麻雀を題材にした漫画|兎-野性の闘牌-}} |
{{Redirect|兎|麻雀を題材にした漫画|兎-野性の闘牌-}} |
||
{{Redirect|うさぎ|漫画『[[美少女戦士セーラームーン]]』の登場人物|月野うさぎ}} |
{{Redirect|うさぎ|漫画『[[美少女戦士セーラームーン]]』の登場人物|月野うさぎ}} |
||
24行目: | 46行目: | ||
'''ウサギ'''('''兎''')は、'''ウサギ科'''に属する草食[[哺乳類]]の総称。 |
'''ウサギ'''('''兎''')は、'''ウサギ科'''に属する草食[[哺乳類]]の総称。 |
||
</pre> |
|||
</syntaxhighlight> |
|||
=== 見出し === |
=== 見出し === |
||
{{Main|Wikipedia:スタイルマニュアル |
{{Main|Wikipedia:スタイルマニュアル/見出し}} |
||
見出しを読んだだけで節 |
見出しを読んだだけで節(セクション)の内容が分かるように、見出しを付けるべきです<ref name="2.4.6">[https://waic.jp/docs/WCAG20/Overview.html#visual-audio-contrast Web Content Accessibility Guidelines (WCAG) 2.0] 2.4.6項より。</ref>。強調(<nowiki>'''</nowiki>)を見出しとして使ったり、逆に見出しを強調として使わないでください<ref group="注">たとえば[http://ja.m.wikipedia.org/wiki/ モバイル版のウィキペディア]では、見出しごとに文章が折り畳まれて表示されます。読者が見出しを見ただけで、記事を読むべきか判断できるべきです。</ref>。 |
||
<!-- 表などはスタイルマニュアルと重複する部分があるため訳出せず--> |
<!-- 表などはスタイルマニュアルと重複する部分があるため訳出せず--> |
||
36行目: | 58行目: | ||
<!-- 正しいマークアップ --> |
<!-- 正しいマークアップ --> |
||
== Foo bars == |
== Foo bars == |
||
{{ |
{{Main|Foo bar}} |
||
{{ |
{{Cleanup-section}} |
||
[[ファイル:...|Typical Foo bar]] |
[[ファイル:...|Typical Foo bar]] |
||
47行目: | 69行目: | ||
=== 解像度 === |
=== 解像度 === |
||
ウィキペディアの記事は、スマートフォンのように小さな画面や、低い解像度しかないディスプレイでも見られるようにすべきです。一般ユーザに影響を与えることなくサポートできる最低の解像度は1024×768と考えられます(年々大型化しています{{Efn2|2012年にはより大きな画面サイズが主流となり、1024×768も少数派になっています<ref>{{Cite web |first=Jakob |last=Nielsen |authorlink=ヤコブ・ニールセン|title=大型化するコンピュータ画面 |url=https://u-site.jp/alertbox/screen_resolution |date=2012年5月7日 |publisher=U-site |accessdate=2016-12-28 |language=ja}}</ref>。}}{{Efn2|2006年には800×600サイズも考慮していました<ref>{{Cite web |first=Jakob |last=Nielsen |authorlink=ヤコブ・ニールセン |title=画面解像度とページレイアウト |url=https://u-site.jp/alertbox/20060731_screen_resolution |date=2006年7月31日 |publisher=U-site |accessdate=2016-12-28 |language=ja}}</ref>。}}{{Efn2|スマートフォンでも2017年初頭にiPhone 6のサイズ4.7インチが主流となりましたが、iPhone 5のサイズ4インチはまだ多く使われています<ref>{{Cite web |first=Malcolm |last=Owen |title=Original iPhone, 3G, 3GS still in active use, 2016 web traffic report reveals |language=en |url=https://appleinsider.com/articles/17/02/27/original-iphone-3g-3gs-still-in-active-use-2016-web-traffic-report-reveals |date=2017-2-27 |publisher=apple insider |accessdate=2017-9-1}}</ref>。}})。すべての記事はこの解像度で、水平方向のスクロールなしに読めなければなりません。1024×768の解像度では、画面の両側に画像や表が複数並んだ記事の閲覧には問題が生じることがあります。低い解像度しかない装置でも、段落を縦に引き伸ばしたり画像を違う位置へ移動させたりする機能を持つものもありますが、記事両側の同じ場所へ同時に画像や移動できるコンテンツ<!--floating content-->を追加するときには注意してください。同様に、大きな表や画像も問題を引き起します。水平方向へのスクロールが避けられない場合もありますが、その時にも表を横へ広げるよりは、下へ伸ばして構築し直せないか考えてみてください。 |
|||
ウィキペディアの記事は、スマートフォンのように小さな画面や、低い解像度しかないディスプレイでも見られるようにすべきです。一般ユーザに影響を与えることなくサポートできる最低の解像度は1024×768と考えられます(年々大型化しています<ref> |
|||
*2012年にはより大きな画面サイズが主流となり 1024×768 も少数派になっています:{{cite web |author=Jakob Nielsen |authorlink=ヤコブ・ニールセン|title=大型化するコンピュータ画面 |url=https://u-site.jp/alertbox/screen_resolution |date=2012年5月7日 |publisher=U-site |accessdate=2016-12-28}} |
|||
*2006年には800×600サイズも考慮していました:{{cite web |author=Jakob Nielsen |title=画面解像度とページレイアウト |url=https://u-site.jp/alertbox/20060731_screen_resolution |date=2006年7月31日 |publisher=U-site |accessdate=2016-12-28}} |
|||
*スマートフォンでも2017年初頭にiPhone 6のサイズ4.7インチが主流となりましたが、iPhone 5のサイズ4インチはまだ多く使われています:{{cite web |author=Malcolm Owen |title=Original iPhone, 3G, 3GS still in active use, 2016 web traffic report reveals |
|||
|url=http://appleinsider.com/articles/17/02/27/original-iphone-3g-3gs-still-in-active-use-2016-web-traffic-report-reveals |date=2017-2-27 |publisher=apple insider |accessdate=2017-9-1}}</ref>)。すべての記事はこの解像度で、水平方向のスクロールなしに読めなければなりません。1024×768の解像度では、画面の両側に画像や表が複数並んだ記事の閲覧には問題が生じることがあります。低い解像度しかない装置でも、段落を縦に引き伸ばしたり画像を違う位置へ移動させたりする機能を持つものもありますが、記事両側の同じ場所へ同時に画像や移動できるコンテンツ<!--floating content-->を追加するときには注意してください。同様に、大きな表や画像も問題を引き起します。水平方向へのスクロールが避けれらない場合もありますが、その時にも表を横へ広げるよりは、下へ伸ばして構築し直せないか考えてみてください。 |
|||
== 文章 == |
== 文章 == |
||
ここでは、主にスクリーンリーダーなどの閲覧環境に配慮した文章のスタイルについて解説します。 |
|||
{{ショートカット|WP:NOSTRIKE|WP:NOSYMBOLS}} |
|||
{{節スタブ|1=日本語に対応したスクリーンリーダーが読み上げるのが難しい文字コードの範囲について、および解決法|date=2009年11月}} |
|||
=== 誤字脱字に注意 === |
|||
# 誤字・脱字には注意してください。視覚障碍者向けの[[スクリーンリーダー]]などがうまく働かない可能性もあります。また、誤字・脱字のある文章は健常者にも読みにくいものです。 |
|||
誤字・脱字には注意してください。スクリーンリーダーなどがうまく働かない可能性もあります。また、誤字・脱字のある文章は誰にとっても読みにくいものです。 |
|||
# [[打消し線]](<del>これは例です。</del>)を使って、記事中の議論のある記述を修正しないこと。"<nowiki><!--</nowiki>"と"<nowiki>--></nowiki>"によるコメントアウトを使うか、完全に除去してしまってください。普通、スクリーンリーダーは文章の強調(イタリックや太字、下線など)を無視します。そのため打消し線の引かれた文章も、他の文と同じく読み上げられてしまいます。(ウィキペディアの方針や削除の議論に参加する編集者はこれに気をつけてください。抹消線のある文章はそうした議論においてよく用いられています) |
|||
# [[日本語]]や[[ラテンアルファベット]]に無い文字は、[[Wikipedia:外来語表記法|カタカナ表記]]するか[[翻字]]してください。[[ユニコード]]をサポートしていないスクリーンリーダーは、これらの文字を読みあげられないことがあります。(英語圏における記述:ユニコードに対応していないスクリーンリーダーでは、[[ISO/IEC 8859-1]](Laten-1)以外の文字はクエスチョンマークとして読み上げるでしょう。最も普及したスクリーンリーダーのJAWSの最新版でも、ユニコード文字を読むのは非常に難しいです。)また、♥([[ハート (シンボル)|ハートマーク]])のような読めない文字を使わず、その代わりに代替テキストつきの画像を使用してください。このようなシンボルの一部には{{tl|Dagger}}のように代替テキストつきの画像を表示させるテンプレートが存在する。[[:Category:画像挿入テンプレート]]を参照してください。 |
|||
=== 約物や符号に関する注意点 === |
|||
# [[ツールチップ]]など、情報を得るためにマウスの動きなどの物理的な動作を必要とする技術を使わないこと。なお、略語の元となった語を示す{{tl|Abbr}}は例外的に許可されます。 |
|||
見た目がよく似ている約物・符号は区別してください。表示ではほとんど変わらなくても、スクリーンリーダーでは全く違う文字として読み上げられます。 |
|||
# スクリーンリーダーを用いた編集では、1行ごとに編集するのが普通なので、どうしても必要な場合を除いてウィキペディアのソースに改行を入れないこと。 |
|||
* 例1:[[波ダッシュ]](〜)と全角[[チルダ]](~) |
|||
* 例2:[[ダッシュ (記号)|ダッシュ]](—)と[[プラス記号とマイナス記号|マイナス]](−)と[[ハイフン]](-) |
|||
* 例3:[[等号]](=)と[[ダブルハイフン]](゠)と[[下駄記号]](〓) |
|||
:{|class=wikitable style="background-color:#e6e6e6;" |
|||
|- |
|||
|(解説) |
|||
* 以下の記号は、見た目は非常によく似ていますが、異なる意味を持っています。 |
|||
** [[ダッシュ (記号)|enダッシュ]](–) - 区間や範囲、単語間の関係性などを示す。 |
|||
** [[ダッシュ (記号)|emダッシュ]](—) - 時間の経過や説明・副題・引用・省略などを示す。 |
|||
** [[プラス記号とマイナス記号|マイナス]](−) - 負符号、減算記号 |
|||
** [[ハイフン]](‐) - 単語を分割したり、複数の単語を繋いで一つの単語にする。 |
|||
** [[ハイフンマイナス]](-) - [[ISO/IEC 646|ISO 646 (ASCII)]] や [[ISO/IEC 8859-1|Latin-1]]での代用文字 |
|||
これらを取り違えたり誤用すると、スクリーンリーダーなどが意図通りに機能しない可能性があります。 |
|||
|} |
|||
詳しくは各記事を参照してください。 |
|||
=== 外国語 === |
=== 外国語 === |
||
日本語以外の語句には、{{Tl|Lang}}テンプレートを用いてください<ref>[https://waic.jp/docs/WCAG20/Overview.html#visual-audio-contrast Web Content Accessibility Guidelines (WCAG) 2.0] 3.1.1と3.1.2項より。</ref>。 |
|||
日本語(ラテン文字も含む?)以外の語句には、{{tl|lang}}タグを用いるべきです。 |
|||
{{ |
(例){{Tlx|Lang|fr|Assemblée nationale}} (国民議会)は、「{{Lang|fr|Assemblée nationale}} (国民議会)」と表示されます。 |
||
詳しい使用方法は{{Tl|Lang}}を参照してください。 |
|||
は、 |
|||
:{|class=wikitable style="background-color:#e6e6e6;" |
|||
{{lang|fr|Assemblée nationale}} (国民議会) |
|||
|- |
|||
|(解説) |
|||
* 単に「nationale」と書いた場合、スクリーンリーダーはこれを何語(どの言語)の単語であるか認識できず、誤った発音で読み上げてしまうかもしれません。 |
|||
|} |
|||
=== 翻字 === |
|||
と表示されます。 |
|||
{{ショートカット|WP:NOSYMBOLS}} |
|||
[[日本語]]や[[ラテン文字]]に無い文字は、[[Wikipedia:外来語表記法|カタカナ表記]]するか[[翻字]]してください(詳しくは{{Tl|ラテン翻字}}を参照)。 |
|||
また、♥([[ハート (シンボル)|ハートマーク]])のような読めない文字を使わず、その代わりに[[代替テキスト]]つきの画像を使用してください(このようなシンボルの一部には{{Tl|Dagger}}のように代替テキストつきの画像を表示させるテンプレートが用意されています。詳しくは[[:Category:画像挿入テンプレート]]を参照)。 |
|||
:{|class=wikitable style="background-color:#e6e6e6;" |
|||
|- |
|||
|(解説) |
|||
* [[Unicode]]をサポートしていないスクリーンリーダーは、これらの文字を読みあげられないことがあります。 |
|||
|} |
|||
=== 打ち消し線 === |
|||
{{ショートカット|WP:NOSTRIKE}} |
|||
{{打ち消し線}} |
|||
記事(標準[[Wikipedia:名前空間|名前空間]])などでは、[[打ち消し線]](取り消し線)を使用しないでください。 |
|||
:(例)<s>これは例です。</s> - こうした表記はしないでください。 |
|||
[[ノートページ]]などの議論ページでは、自身の発言を後で修正する場合など、打ち消し線を用いても構いません。専用のテンプレート({{Tl|Del}}・{{Tl|Ins}}・{{Tl|Delins}})もあります。詳しくは[[WP:REDACT]]や[[Help:ページの編集#取り消し線・下線]]を参照してください。 |
|||
なお、打ち消し線を使用するには、主に下記の3つの方法がありますが、(1)(2)はいかなる場合も禁止です。 |
|||
:{|class=wikitable |
|||
|- |
|||
| |
|||
* (1)削除タグ<nowiki><s></s></nowiki>を使う |
|||
* (2)修正タグ<nowiki><strike></strike></nowiki>を使う |
|||
* (3)削除された要素を意味する<nowiki><del></del></nowiki>タグや後から追加された部分を示す<nowiki><ins></ins></nowiki>タグを使う({{Tl|Del}}・{{Tl|Ins}}・{{Tl|Delins}}もこの機能を使っています。) |
|||
|} |
|||
:{|class=wikitable style="background-color:#e6e6e6;" |
|||
|- |
|||
|(解説) |
|||
* (1)の<nowiki><s></nowiki>タグや(2)の<nowiki><strike></nowiki>タグは古い形式の削除タグです。[[HTML4]]が導入された1997年に「非推奨」、[[HTML5]]が導入された2014年に「廃止」されています。 |
|||
* <nowiki><s></nowiki>タグや<nowiki><strike></nowiki>タグの使用は、検索エンジンやスクリーンリーダーでは意図通りに機能しない可能性があります。スクリーンリーダーはこの方法で打ち消し線を引いた場所もそのまま他の文と同じく読み上げてしまうかもしれません。 |
|||
* (3)の<nowiki><del></nowiki>タグ・<nowiki><ins></nowiki>タグは、HTML5で推奨されています。検索エンジンやスクリーンリーダーでも意図通りに解釈されるでしょう。 |
|||
* スクリーンリーダーを使う編集者は、議論に参加するとき、insタグやdelタグなどの意味を無視して普通の文章と同様に読み上げないよう、適切に要素の意味を読み取るようにスクリーンリーダーを設定してください。 |
|||
|} |
|||
=== 改行 === |
|||
{{See also|Wikipedia:改行時の注意点}} |
|||
スクリーンリーダーを用いた編集では、1行ごとに編集するのが普通です。どうしても必要な場合を除いてウィキペディアのソースに改行を入れないでください。 |
|||
=== ツールチップ === |
|||
[[ツールチップ]]など、情報を得るためにマウスの動きなどの物理的な動作を必要とする技術を使わないでください。なお、略語の元となった語を示す{{Tl|Abbr}}は例外的に許可されます。 |
|||
== リンク == |
== リンク == |
||
# リンクしすぎないこと。多くのスクリーンリーダーには、リンクのみを抽出して読み上げる場合があります。 |
# [[ハイパーリンク|リンク]]しすぎないこと。多くのスクリーンリーダーには、リンクのみを抽出して読み上げる場合があります。 |
||
# リンクには内容に沿った説明を付けること。特に外部へのリンクの場合は注意 |
# リンクには内容に沿った説明を付けること。特に外部へのリンクの場合は注意([[ここをクリック]]や[https://example.com ここ] あるいは「もっと読む」といったリンクを避けること)<ref>[https://waic.jp/docs/WCAG-TECHS/F14.html F14: 達成基準 1.3.3 の失敗例 - 形状又は位置のみでコンテンツを特定している](WCAG 2.0 達成方法集、[[W3C]] ワーキンググループノート、[[ウェブアクセシビリティ基盤委員会]] (WAIC)[https://waic.jp/]による日本語参考訳)</ref>。 |
||
# できる限り少ないコードを使うこと。編集画面での文章が読みやすくなります |
# できる限り少ない[[ソースコード|コード]]を使うこと。編集画面での文章が読みやすくなります(たとえば、<nowiki>"[[日本]]的"で済むところを"[[日本|日本的]]"としないこと</nowiki>)。 |
||
# 記号やユニコード文字をアイコンとして使わないこと。[[代替テキスト]]付きの画像のアイコンを使うべきです。例えば、"→"(「右」を意味する記号)のような記号はスクリーンリーダーが読まないことがあります。 |
# [[記号]]や[[ユニコード]]文字をアイコンとして使わないこと。[[代替テキスト]]付きの[[画像]]の[[アイコン]]を使うべきです。例えば、"[[→]]"(「[[右]]」を意味する記号)のような記号はスクリーンリーダーが読まないことがあります。 |
||
== 色 == |
== 色 == |
||
{{Main|Wikipedia:色の使用}} |
|||
<!--{{shortcut|WP:COLOR|WP:COLOUR|WP:COLORS}}--> |
|||
<!--色を適切に使用すれば情報の識別をしやすくできますが、[[色盲]]の利用者のために、または、白黒印刷されたページを読むときなどのために、色による情報が'''唯一の'''情報源とならないようにしてください。--> |
|||
[[ファイル:Example of team color problem on Clive Churchill article.png|thumb|alt=同じように主に文字を用いたユーザーインターフェースの2つのスクリーンショット。上のものは赤、緑、青を使用している。下のものは赤と緑にほぼ同じ色を使用しているもので、赤い文字は緑の背景の中でほとんど見えなくなっている。|赤緑色覚異常が視認性にどう影響するかを示しているスクリーンショット]] |
[[ファイル:Example of team color problem on Clive Churchill article.png|thumb|alt=同じように主に文字を用いたユーザーインターフェースの2つのスクリーンショット。上のものは赤、緑、青を使用している。下のものは赤と緑にほぼ同じ色を使用しているもので、赤い文字は緑の背景の中でほとんど見えなくなっている。|赤緑色覚異常が視認性にどう影響するかを示しているスクリーンショット]] |
||
{{see|Wikipedia:色の使用}} |
|||
'''色'''はウィキペディアの記事では[[Help:テンプレート|テンプレート]]と[[Help:表の作り方|表]]で最もよく使われています。使用できる色については[[ウェブカラー]]をご覧ください。 |
'''色'''はウィキペディアの記事では[[Help:テンプレート|テンプレート]]と[[Help:表の作り方|表]]で最もよく使われています。使用できる色については[[ウェブカラー]]をご覧ください。 |
||
<!--For technical assistance on how colors are used, see [[Help:Using colours]].--> |
|||
記事に色を使用する場合には、以下のようにアクセシビリティに留意しなければなりません |
記事に色を使用する場合には、以下のようにアクセシビリティに留意しなければなりません。 |
||
* 色が重要な情報を伝達する唯一の方法にならないようにしてください。たとえば、「表中の赤字部分は○○」といった方法を取ってはいけません。そういった場合は、斜体や太字を併用する、脚注を付ける、その「○○」を併記する、あるいは記号(※印や三角など)で表現する、などの方法を取るべきです。色だけで情報を表現しようとすると、[[失明|盲目]]の利用者や、モノクロ印刷やモノクロ画面でウィキペディアを閲覧する読者にはその情報が伝わりません。 |
* 色が重要な情報を伝達する唯一の方法にならないようにしてください<ref>[https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html 色の使用 - 達成基準 1.4.1 を理解する]</ref>。たとえば、「表中の赤字部分は○○」といった方法を取ってはいけません<ref>[https://waic.jp/docs/WCAG-TECHS/F13.html F13: 達成基準 1.4.1 の失敗例 - 画像の色の違いで伝られる情報が含まれないテキストによる代替を持っている]</ref>。そういった場合は、[[斜体]]や[[太字]]を併用する、[[Wikipedia:脚注|脚注]]を付ける、その「○○」を併記する、あるいは記号(※印や三角など)で表現する、などの方法を取るべきです。色だけで情報を表現しようとすると、[[失明|盲目]]の利用者や([[点字ディスプレイ]]や読み上げ機能→スクリーンリーダー)、[[モノクロ]][[印刷]]や[[モノクロ画面]]でウィキペディアを閲覧する読者にはその情報が伝わりません。 |
||
* ウィキペディアの読者には部分的もしくは完全な[[色覚異常]]を持つ人も多くいます(日本人男性には特に多く、軽度のものを含めると20人に1人が該当します)。ウィキペディアで用いられる色の組み合わせ(インフォボックス、ナビゲーションボックス、グラフなど)には適切な[[コントラスト]]を確保するようにしてください。色の選択に[ |
* ウィキペディアの読者には部分的もしくは完全な[[色覚異常]](色覚特性)を持つ人も多くいます([[日本人]]男性には特に多く、軽度のものを含めると20人に1人が該当します)。ウィキペディアで用いられる色の組み合わせ([[インフォボックス]]、[[Template:Navbox|ナビゲーションボックス]]、グラフなど)には適切な[[コントラスト]]を確保するようにしてください。色の選択に[https://paletton.com/ カラースキームジェネレータ]を用い、色覚異常をシミュレートするツール([https://www.vischeck.com/vischeck/vischeckURL.php vischeck.com]もしくは[https://www.toptal.com/designers/colorfilter Colorblind Web Page Filter]<!-- こちらは日本語に対応していないようです-->など)で結果を確認しましょう。 |
||
* リンクの色をデフォルトから(特に赤へと)変更することは混乱を招くので避けるべきです。 |
* リンクの色をデフォルトから(特に赤へと)変更することは混乱を招くので避けるべきです。 |
||
* 普通のテキストと青リンクのテキストの両方について、背景色とのコントラストに留意し、できるだけ衝突を避けてください(赤い背景に青い文字など)。 |
* 普通のテキストと青リンクのテキストの両方について、背景色とのコントラストに留意し、できるだけ衝突を避けてください(赤い背景に青い文字など)。 |
||
* 色を過度に使用している記事には、{{Tl|色の |
* 色を過度に使用している記事には、{{Tl|色の使用}}テンプレートを記事の冒頭に貼付してください。次のように表示されます。 |
||
{{色の |
{{色の使用|nocat=1}} |
||
* 以下のように表示される{{Tl|色}}テンプレートもあります。 |
|||
* {{lang|en|[[World Wide Web Consortium]]}}の草案アルゴリズムを使用している{{lang|en|[https://www.paciellogroup.com/resources/contrastanalyser/ Colour Contrast Analyser]}}や、専用の{{lang|en|[https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/ Firefoxアドオン]}}を用いて、色盲を含む視覚障害のある人に適切な色のコントラストになっているかをテストできます。 |
|||
{{色}} |
|||
<!--* {{lang|en|[http://www.accesskeys.org/tools/color-contrast.html AccessColor]}}{{リンク切れ|date=2016年10月}}で、HTMLソースと関連するCSSを解析し、文字と背景色との間の色のコントラストと明度を計算し、ページが[[Web Content Accessibility Guidelines|WCAG 1.0]]に準拠しているかをオンラインで点検できます。--> |
|||
* {{Lang|en|[[World Wide Web Consortium]]}}の草案アルゴリズムを使用している{{Lang|en|[https://www.paciellogroup.com/resources/contrastanalyser/ Colour Contrast Analyser]}}や、専用の{{Lang|en|[https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/ Firefoxアドオン]}}を用いて、色盲を含む視覚障害のある人に適切な色のコントラストになっているかをテストできます。 |
|||
== ブロック要素 == |
== ブロック要素 == |
||
=== 箇条書き === |
=== 箇条書き === |
||
{{Main|Help:箇条書き}} |
{{Main|Help:箇条書き}} |
||
リストに1行以上の改行を入れない |
リストに1行以上の改行を入れないでください。もしリストが1行以上離れてしまうと、HTMLのリストタグはそこで終わってしまい、改行の前と後が別のリストとして解釈されます<ref group="注">1つのリストであると正しく解釈されることは[https://waic.jp/docs/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html 情報及び関係性 - 達成基準 1.3.1 を理解する]に必要です。</ref>。 |
||
=== 表 === |
=== 表 === |
||
{{Main|Help:表の作り方}} |
{{Main|Help:表の作り方}} |
||
スクリーンリーダーや他のウェブブラウザは、表に含まれるデータをユーザが見やすい |
スクリーンリーダーや他のウェブブラウザは、表に含まれるデータをユーザが見やすい(あるいは聴きやすい)ように、一部のHTMLのテーブルタグを特別な方法で使うことがあります。 |
||
単にレイアウトのためだけに表を使うことは避けてください。 |
単にレイアウトのためだけに表を使うことは避けてください。 |
||
116行目: | 196行目: | ||
== 画像 == |
== 画像 == |
||
{{Main|Wikipedia:スタイルマニュアル#画像|Wikipedia:画像の代替テキスト}} |
{{Main|Wikipedia:スタイルマニュアル#画像|Wikipedia:画像の代替テキスト}} |
||
# 画像には[[代替テキスト]]を付けま |
# 画像には[[代替テキスト]]を付けることが推奨されます。代替テキストは、盲目のユーザや検索エンジンのクローラに対して、または画像が表示されないとき、画像の代わりとなる文章です<ref>[https://waic.jp/docs/WCAG-TECHS/H37.html H37: img 要素の alt 属性を使用する]</ref>。ただし、装飾用の画像には空の代替テキスト(空を指定することは何も指定しないこととは違います)を指定しましょう<ref>[https://waic.jp/docs/WCAG-TECHS/H67.html H67: 支援技術が無視すべき画像に対して、img 要素の alt テキストを空にして、title 属性を付与しない]</ref>。 |
||
# 画像にはキャプション |
# 画像にはキャプションを付けるべきです。[[Help:画像の表示]]も参照。画像のキャプションは、なるべく画像の意味を正確に説明し、単独で読んでも意味が理解できる文にするべきです。 |
||
# 可能ならば、画像を見られないユーザにも理解できるように、全ての図表やグラフにはテキストによる内容の説明を付けるべきです。 |
# 可能ならば、画像を見られないユーザにも理解できるように、全ての図表やグラフにはテキストによる内容の説明を付けるべきです<ref>[https://waic.jp/docs/WCAG-TECHS/G92.html G92: 非テキストコンテンツに対して、それと同じ目的を果たし、かつ同じ情報を示す長い説明を提供する]</ref>。 |
||
# 本文中に加えるのが適切ではない、画像の詳細な説明は画像の説明ページに移動させるべきです。 |
# 本文中に加えるのが適切ではない、画像の詳細な説明は画像の説明ページに移動させるべきです。 |
||
# 画像は関係する節内に置くべきです。これはモバイル用のサイトでの表示と、スクリーンリーダーが画像の代替テキストとキャプションを読み上げるタイミングに影響するからです。 |
# 画像は関係する節内に置くべきです。これはモバイル用のサイトでの表示と、スクリーンリーダーが画像の代替テキストとキャプションを読み上げるタイミングに影響するからです。 |
||
# 可能ならば、デフォルトのユーザ設定を上書きするほど |
# 可能ならば、デフォルトのユーザ設定を上書きするほど大きな画像にしないでください。文字を大きく表示するよう設定している閲覧者も居ます。大きな画像のサムネイルは、文字を表示するスペースを奪ってしまうかもしれません。 |
||
== 動画と音声 == |
== 動画と音声 == |
||
{{Main|Help:音声・動画の作成と利用}} |
|||
記事の理解を助けるために、動画や音声が使われることがあります。この場合も、画像や色に関する注意と同様に、動画や音声が情報を得る唯一の手段とならないように注意してください。 |
記事の理解を助けるために、動画や音声が使われることがあります。この場合も、画像や色に関する注意と同様に、動画や音声が情報を得る唯一の手段とならないように注意してください。 |
||
=== アニメーション画像 === |
|||
アニメーション画像のアクセシビリティを保証するためには下記のどれかを行う必要があります。 |
|||
* 5秒内に収まるようにする<ref name="2.2.2">[https://waic.jp/docs/WCAG20/Overview.html#visual-audio-contrast Web Content Accessibility Guidelines (WCAG) 2.0] 2.2.2項より。</ref><ref>{{Cite web2| url =https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G152| title = Setting animated gif images to stop blinking after n cycles (within 5 seconds)| work = Techniques for WCAG 2.0 | accessdate = 1 January 2011 | publisher = [[W3C]] |language=en}}</ref> |
|||
* 開始、一時停止、停止のメカニズムを配備する<ref name="2.2.2" /><ref>{{Cite web2|language=en | url = https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G4 | title = Allowing the content to be paused and restarted from where it was paused| accessdate = 1 January 2011| work = Techniques for WCAG 2.0 | publisher = [[W3C]]}}</ref>。 |
|||
これは5秒以上のアニメーション画像が動画ファイルに変換の上で使用されるべきことを意味します(変換の仕方については[[commons:Help talk:Converting video#Converting an animated GIF|converting animated GIFs to Theora OGG]]をご参照ください)。 |
|||
なお、発作を引き起こす恐れがあるため、1秒内に3回を超える閃光が出ないようにしてください<ref name="2.3.1">[https://waic.jp/docs/WCAG20/Overview.html#visual-audio-contrast Web Content Accessibility Guidelines (WCAG) 2.0] 2.3.1項より。</ref>。 |
|||
=== 動画と音声 === |
|||
動画と音声にはキャプションをつけることが推奨されます(やり方については[[:commons:Commons:Video#Subtitles and closed captioning]]をご参照ください)<ref name="1.2.2">[https://waic.jp/docs/WCAG20/Overview.html#visual-audio-contrast Web Content Accessibility Guidelines (WCAG) 2.0] 1.2.2項より。</ref>。 |
|||
耳の不自由な方には[[クローズドキャプション]]を使う必要がありますが<ref>[https://waic.jp/docs/WCAG20/Overview.html#visual-audio-contrast Web Content Accessibility Guidelines (WCAG) 2.0] 1.2.3と1.2.4項より。</ref>、これは現時点では機能が整っておらず2012年にPhabricatorで[[phabricator:T43694|要望が出された]]ままです。そのため、クローズドキャプションは現時点ではウィキペディア外でしか利用できません。 |
|||
== スタイルとマークアップについて == |
== スタイルとマークアップについて == |
||
一般的には、 |
一般的には、HTMLタグよりウィキテキストのマークアップを用いたほうが良いとされています。特に、<syntaxhighlight lang="html" inline><i></syntaxhighlight>(イタリック)や<syntaxhighlight lang="html" inline><b></syntaxhighlight>(太字)を文章の整形に使わないでください。それらの代わりに<syntaxhighlight lang="moin" inline>''</syntaxhighlight>や<syntaxhighlight lang="moin" inline>'''</syntaxhighlight>、または論理的なスタイルタグ(<syntaxhighlight lang="html" inline><em></syntaxhighlight>、<syntaxhighlight lang="html" inline><code></syntaxhighlight>や<syntaxhighlight lang="html" inline><strong></syntaxhighlight>など)を使いましょう。もちろんこれには例外もあります。たとえば、<syntaxhighlight lang="html" inline><font></syntaxhighlight>タグは記事に使わないほうが良いでしょう。そのかわりに、意味の違いを強調するためには、論理的なスタイルタグを使ってください。 |
||
<!-- |
|||
HTMLタグを使用する場合でも、[[HTML5]]で廃止または非推奨化されたタグ、[[MediaWiki]]で使えないタグ<ref group="注">詳しくは[[mw:Help:HTML in wikitext]]をご参照ください。</ref>はできるだけ避けてください<ref>{{Cite web |title=H88: 仕様に準じて HTML を使用する |work=WCAG 2.0 達成方法集 |url=https://waic.jp/docs/WCAG-TECHS/H88 |website=waic.jp |access-date=2019年1月19日}}</ref>。 |
|||
In general, styles for tables and other block-level elements should be set using CSS classes, not with inline style attributes. This is because the site-wide CSS is more carefully tested to ensure compatibility with a wide range of browsers; it also creates a greater degree of professionalism by ensuring a consistent appearance between articles. Deviations from standard conventions are acceptable where they create a semantic distinction (for instance, the infoboxes and navigational templates relating to The Simpsons use a yellow colour-scheme instead of the customary mauve, to tie in with the dominant colour in the series) but should not be used gratuitously. |
|||
--> |
|||
== スタイルシートやJavaScriptの制限された利用者への配慮 == |
== スタイルシートやJavaScriptの制限された利用者への配慮 == |
||
ウィキペディアの記事は、[[Cascading Style Sheets|CSS]]や[[JavaScript]]を部分的にしかサポートしていない機器からもアクセスできるべきです。しかしそれと同時に、 |
ウィキペディアの記事は、[[Cascading Style Sheets|CSS]]や[[JavaScript]]を部分的にしかサポートしていない機器からもアクセスできるべきです。しかしそれと同時に、CSSやJavaScriptをサポートした最新のブラウザと、機能の制限されたブラウザで同じ体裁を整えようとするならば、多くのユーザにとって有用な機能を制限せざるを得ない、という事実も知っておくべきです。CSSやJavaScriptを使えない環境で、コンテンツが見えなくなったり、崩れてしまうような機能は使ってはなりません。これにはウィキペディア英語版の[[:en:Wikipedia:HiddenStructure|Wikipedia:HiddenStructure]]のような機能によってテーブルの中身を隠す方法<ref group="注">この機能は英語版では2006年以降使われていません。現在はHiddenStructureが使われている箇所を簡単に見つけられるよう中身を隠さず、代わりに[[ライムグリーン|ライム]]色で強調表示します。ウィキペディア日本語版では導入されていません。</ref>や、また、[[Help:ダイナミック・ナビゲーション・ボックス|ダイナミック・ナビゲーション・ボックス]]の畳み込みなどJavaScriptを使用できなければ内容が分からないような実装も含まれるかもしれません。しかし互換性を考慮するあまり一般的なユーザが不便を感じることのないように、機能に制約のあるブラウザへの考慮は「最低限読める」ということが確かなレベルで良いです。 |
||
これらの配慮に慣れておくために、大きな変更を起こす可能性のある編集の前には、JavaScriptやCSSを無効にしてテストすべきです。[[Firefox]]では、WebDeveloperという拡張を用いれば簡単にテストできます。その他のブラウザでも設定で無効にできます。また、インラインCSSは、いくつかのブラウザ、メディア、XHTMLのバージョンによってはサポートされていないことに少し注意してください。 |
これらの配慮に慣れておくために、大きな変更を起こす可能性のある編集の前には、JavaScriptやCSSを無効にしてテストすべきです。[[Mozilla Firefox]]では、WebDeveloperという拡張を用いれば簡単にテストできます。その他のブラウザでも設定で無効にできます。また、インラインCSSは、いくつかのブラウザ、メディア、XHTMLのバージョンによってはサポートされていないことに少し注意してください。 |
||
== キーボードショートカット == |
== キーボード・ショートカット == |
||
{{Main|Help:キーボード・ショートカット}} |
{{Main|Help:キーボード・ショートカット}} |
||
ウィキペディアには[[キーボードショートカット]]が |
ウィキペディアには[[ショートカットキー|キーボード・ショートカット]]が提供されています<ref>[https://waic.jp/docs/WCAG-TECHS/G90.html G90: キーボードがトリガーとなるイベントハンドラを提供する]及び[https://waic.jp/docs/WCAG20/Overview.html#visual-audio-contrast Web Content Accessibility Guidelines (WCAG) 2.0] 2.1.1項を参照。</ref>。これらは無効にできます。 |
||
== 関連項目 == |
== 関連項目 == |
||
147行目: | 241行目: | ||
== 脚注 == |
== 脚注 == |
||
{{脚注ヘルプ}} |
|||
<references /> |
|||
=== 注釈 === |
|||
{{Notelist2}} |
|||
=== 出典 === |
|||
{{Reflist}} |
|||
{{DEFAULTSORT:あくせしひりてい}} |
|||
[[Category:ウィキペディアのアクセシビリティ|*]] |
[[Category:ウィキペディアのアクセシビリティ|*]] |
||
[[Category:記事のスタイルのルール|あくせしひりてい]] |
[[Category:記事のスタイルのルール|あくせしひりてい]] |
2023年11月11日 (土) 23:35時点における最新版
この文書はウィキペディア日本語版の方針やガイドラインとして提案中です。内容に関してノートページで議論を行っています。 |
アクセシビリティでは、記事を読みやすく、ブラウズしやすくするために考慮すべきことを説明します。
障害を持つ人たちへの配慮の必要性と、スマートフォンの普及など閲覧環境の多様化への対応について概説します。障害のあるなしに関わらず全てのウィキペディアンにとって読みやすく、編集しやすい記事を執筆できるように、以下のガイドラインを考慮してください。
基本的な考え方
[編集]ウェブアクセシビリティ
[編集]ウェブコンテンツにおけるアクセシビリティ(利用しやすさ)を「ウェブアクセシビリティ」といいます。
- 視覚、聴覚などの知覚障害や、学習障害をもつ人にとっても読みやすい
- 高齢者や四肢に障害がある人にとっても操作しやすい
- こうした配慮は健常者にとっても利用しやすいものになります
- スクリーンリーダーなど、障害者向けの補助ソフトウェアが意図通り機能する
- プログラムが情報を正しく解釈できるようにすることは、検索サイトのためのクローラの挙動にも有用です
これらを実現するため、国際機関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項を参照。