コンテンツにスキップ

「Wikipedia:アクセシビリティ」の版間の差分

削除された内容 追加された内容
+提案
1月1日改訂案成立につき編集。冒頭部の告知を更新
1行目: 1行目:
{{告知|提案|「動画と音声」節へ翻訳加筆}}
{{告知|提案|冒頭部変更}}
{{proposed|あくせしひりてい|WP:ACCESS|WP:ACCESSIBILITY}}
{{proposed|あくせしひりてい|WP:ACCESS|WP:ACCESSIBILITY}}
'''アクセシビリティ'''では、記事を読みやすく、ブラウズしやすくするために考慮すべきことを説明します。アクセシビリティについて考慮されたページは、[[視覚]]や[[色覚]]、[[四肢]]などの[[障]]を持つ人たちにとっても利用しやすいだけでなく、一般の健康な人にも読みやすいものになるでしょう。
'''アクセシビリティ'''では、記事を読みやすく、ブラウズしやすくするために考慮すべきことを説明します。アクセシビリティについて考慮されたページは、[[視覚]]や[[色覚]]、[[四肢]]などの[[障]]を持つ人たちにとっても利用しやすいだけでなく、一般の健康な人にも読みやすいものになるでしょう。


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


== 記事の構造 ==
== 記事の構造 ==
{{Main|Wikipedia:スタイルマニュアル}}
{{Main|Wikipedia:スタイルマニュアル}}
=== 導入部 ===
=== 導入部 ===
[[Wikipedia:スタイルマニュアル (導入部)|スタイルマニュアル]]に説明があるように<!--日本語版にはあか?-->導入部では必要な要素を以下の順番で提示します。曖昧さ回避のリンク(dablinks)、メンテナンスタグ、インフォボックス、画像、ナビゲーションボックス(またはナビゲーション用テンプレート)、導入文、目次、そして最初の節のヘッダ、という順番です。
<!--[[Wikipedia:スタイルマニュアル (導入部)|スタイルマニュアル]]に説明があるように- 日本語版にはありませんで一旦コメントアウト。スタイルマニュアルでの説明は必要でしょうが-->導入部では必要な要素を以下の順番で提示します。曖昧さ回避のリンク(dablinks)、削除依頼タグ、メンテナンスタグ、Infobox、画像、ナビゲーションボックス(またはナビゲーション用テンプレート)、導入文、目次、そして最初の節のヘッダ、という順番です。


以下は、[[ウサギ]] <ref>「ウサギ」2009年10月28日 (水) 20:25(UTC)の版</ref>の冒頭から引用した例です。上記の順番になっていることを確認してください。
以下は、[[ウサギ]]<ref>「ウサギ」2009年10月28日 (水) 20:25(UTC)の版</ref>の冒頭から引用した例です。上記の順番になっていることを確認してください。
<pre>
<pre>
{{Redirect|兎|麻雀を題材にした漫画|兎-野性の闘牌-}}
{{Redirect|兎|麻雀を題材にした漫画|兎-野性の闘牌-}}
29行目: 29行目:
=== 見出し ===
=== 見出し ===
{{Main|Wikipedia:スタイルマニュアル (見出し)}}
{{Main|Wikipedia:スタイルマニュアル (見出し)}}
見出しを読んだだけで節(セクション)の内容が分かるように、見出しを付けるべきです。強調(<nowiki>'''</nowiki>)を見出しとして使ったり、逆に見出しを強調として使わないでください<ref>たとえば[http://ja.m.wikipedia.org/wiki/ モバイル版のウィキペディア]では、見出しごとに文章が折り畳まれて表示されます。読者が見出しを見ただけで、記事を読むべきか判断できるべきです。</ref>。
見出しを読んだだけで節セクションの内容が分かるように、見出しを付けるべきです<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>たとえば[http://ja.m.wikipedia.org/wiki/ モバイル版のウィキペディア]では、見出しごとに文章が折り畳まれて表示されます。読者が見出しを見ただけで、記事を読むべきか判断できるべきです。</ref>。
<!-- 表などはスタイルマニュアルと重複する部分があるため訳出せず-->
<!-- 表などはスタイルマニュアルと重複する部分があるため訳出せず-->


49行目: 49行目:
=== 解像度 ===
=== 解像度 ===
ウィキペディアの記事は、スマートフォンのように小さな画面や、低い解像度しかないディスプレイでも見られるようにすべきです。一般ユーザに影響を与えることなくサポートできる最低の解像度は1024×768と考えられます(年々大型化しています<ref>
ウィキペディアの記事は、スマートフォンのように小さな画面や、低い解像度しかないディスプレイでも見られるようにすべきです。一般ユーザに影響を与えることなくサポートできる最低の解像度は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}}
*2012年にはより大きな画面サイズが主流となり 1024×768 も少数派になっています:{{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}}
*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}}
*2006年には800×600サイズも考慮していました:{{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}}
*スマートフォンでも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
*スマートフォンでも2017年初頭にiPhone 6のサイズ4.7インチが主流となりましたが、iPhone 5のサイズ4インチはまだ多く使われています:{{cite web |first=Malcolm |last=Owen |title=Original iPhone, 3G, 3GS still in active use, 2016 web traffic report reveals |language=en |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-->を追加するときには注意してください。同様に、大きな表や画像も問題を引き起します。水平方向へのスクロールが避けられない場合もありますが、その時にも表を横へ広げるよりは、下へ伸ばして構築し直せないか考えてみてください。
|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-->を追加するときには注意してください。同様に、大きな表や画像も問題を引き起します。水平方向へのスクロールが避けられない場合もありますが、その時にも表を横へ広げるよりは、下へ伸ばして構築し直せないか考えてみてください。


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


=== 外国語 ===
=== 外国語 ===
日本語(ラテン文字も含む?)以外の語句には、{{tl|lang}}タグを用いるべきです
日本語以外の語句には、{{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>


{{tlx|lang|fr|Assemblée nationale}} (国民議会)
{{tlx|lang|fr|Assemblée nationale}} (国民議会)
76行目: 75行目:
== リンク ==
== リンク ==
# リンクしすぎないこと。多くのスクリーンリーダーには、リンクのみを抽出して読み上げる場合があります。
# リンクしすぎないこと。多くのスクリーンリーダーには、リンクのみを抽出して読み上げる場合があります。
# リンクには内容に沿った説明を付けること。特に外部へのリンクの場合は注意。([[ここをクリック]]や[http://example.com ここ] あるいは「もっと読む」といったリンクを避けること。)
# リンクには内容に沿った説明を付けること。特に外部へのリンクの場合は注意。[[ここをクリック]]や[http://example.com ここ] あるいは「もっと読む」といったリンクを避けること。)<ref>[https://waic.jp/docs/WCAG-TECHS/F14.html F14: 達成基準 1.3.3 の失敗例 - 形状又は位置のみでコンテンツを特定している]</ref>
# できる限り少ないコードを使うこと。編集画面での文章が読みやすくなります。(たとえば、<nowiki>"[[日本]]的"で済むところを"[[日本|日本的]]"としないこと</nowiki>)
# できる限り少ないコードを使うこと。編集画面での文章が読みやすくなります。(たとえば、<nowiki>"[[日本]]的"で済むところを"[[日本|日本的]]"としないこと</nowiki>)
# 記号やユニコード文字をアイコンとして使わないこと。[[代替テキスト]]付きの画像のアイコンを使うべきです。例えば、"→"(「右」を意味する記号)のような記号はスクリーンリーダーが読まないことがあります。
# 記号やユニコード文字をアイコンとして使わないこと。[[代替テキスト]]付きの画像のアイコンを使うべきです。例えば、"→"(「右」を意味する記号)のような記号はスクリーンリーダーが読まないことがあります。


== 色 ==
== 色 ==
{{see|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>。そういった場合は、斜体や太字を併用する、脚注を付ける、その「○○」を併記する、あるいは記号(※印や三角など)で表現する、などの方法を取るべきです。色だけで情報を表現しようとすると、[[失明|盲目]]の利用者や、モノクロ印刷やモノクロ画面でウィキペディアを閲覧する読者にはその情報が伝わりません。
* ウィキペディアの読者には部分的もしくは完全な[[色覚異常]]を持つ人も多くいます(日本人男性には特に多く、軽度のものを含めると20人に1人が該当します)。ウィキペディアで用いられる色の組み合わせ(インフォボックス、ナビゲーションボックス、グラフなど)には適切な[[コントラスト]]を確保するようにしてください。色の選択に[http://ColorSchemeDesigner.com カラースキームジェネレータ]を用い、色覚異常をシミュレートするツール([http://www.vischeck.com/vischeck/vischeckURL.php vischeck.com]もしくは[http://colorfilter.wickline.org/?j=1;t=a colorfilter.wickline.org]<!-- こちらは日本語に対応していないようです-->など)で結果を確認しましょう。
* ウィキペディアの読者には部分的もしくは完全な[[色覚異常]]を持つ人も多くいます(日本人男性には特に多く、軽度のものを含めると20人に1人が該当します)。ウィキペディアで用いられる色の組み合わせ(インフォボックス、ナビゲーションボックス、グラフなど)には適切な[[コントラスト]]を確保するようにしてください。色の選択に[http://ColorSchemeDesigner.com カラースキームジェネレータ]を用い、色覚異常をシミュレートするツール([http://www.vischeck.com/vischeck/vischeckURL.php vischeck.com]もしくは[http://colorfilter.wickline.org/?j=1;t=a colorfilter.wickline.org]<!-- こちらは日本語に対応していないようです-->など)で結果を確認しましょう。
* リンクの色をデフォルトから(特に赤へと)変更することは混乱を招くので避けるべきです。
* リンクの色をデフォルトから(特に赤へと)変更することは混乱を招くので避けるべきです。
* 普通のテキストと青リンクのテキストの両方について、背景色とのコントラストに留意し、できるだけ衝突を避けてください(赤い背景に青い文字など)。
* 普通のテキストと青リンクのテキストの両方について、背景色とのコントラストに留意し、できるだけ衝突を避けてください(赤い背景に青い文字など)。
* 色を過度に使用している記事には、{{Tl|色の過剰使用}}テンプレートを記事の冒頭に貼付してください。次のように表示されます。
* 色を過度に使用している記事には、{{Tl|色の使用}}テンプレートを記事の冒頭に貼付してください。次のように表示されます。
{{色の過剰使用|nocat=1}}
{{色の使用|nocat=1}}
* {{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|[[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]]に準拠しているかをオンラインで点検できます。-->


== ブロック要素 ==
== ブロック要素 ==
=== 箇条書き ===
=== 箇条書き ===
{{Main|Help:箇条書き}}
{{Main|Help:箇条書き}}
リストに1行以上の改行を入れないこと。もしリストが1行以上離れてしまうと、HTMLのリストタグはそこで終わってしまいます。
リストに1行以上の改行を入れないでください。もしリストが1行以上離れてしまうと、HTMLのリストタグはそこで終わってしまい、改行の前と後が別のリストとして解釈されます<ref>1つのリストであると正しく解釈されることは[https://waic.jp/docs/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html 情報及び関係性 - 達成基準 1.3.1 を理解する]に必要です。</ref>


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


単にレイアウトのためだけに表を使うことは避けてください。
単にレイアウトのためだけに表を使うことは避けてください。
117行目: 110行目:
== 画像 ==
== 画像 ==
{{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:画像の表示]]も参照。画像のキャプションは、なるべく画像の意味を正確に説明し、単独で読んでも意味が理解できる文にするべきです。
# 画像にはキャプション付けるべきです。[[Help:画像の表示]]も参照。画像のキャプションは、なるべく画像の意味を正確に説明し、単独で読んでも意味が理解できる文にするべきです。
# 可能ならば、画像を見られないユーザにも理解できるように、全ての図表やグラフにはテキストによる内容の説明を付けるべきです。
# 可能ならば、画像を見られないユーザにも理解できるように、全ての図表やグラフにはテキストによる内容の説明を付けるべきです<ref>[https://waic.jp/docs/WCAG-TECHS/G92.html G92: 非テキストコンテンツに対して、それと同じ目的を果たし、かつ同じ情報を示す長い説明を提供する]</ref>
# 本文中に加えるのが適切ではない、画像の詳細な説明は画像の説明ページに移動させるべきです。
# 本文中に加えるのが適切ではない、画像の詳細な説明は画像の説明ページに移動させるべきです。
# 画像は関係する節内に置くべきです。これはモバイル用のサイトでの表示と、スクリーンリーダーが画像の代替テキストとキャプションを読み上げるタイミングに影響するからです。
# 画像は関係する節内に置くべきです。これはモバイル用のサイトでの表示と、スクリーンリーダーが画像の代替テキストとキャプションを読み上げるタイミングに影響するからです。
125行目: 118行目:


== 動画と音声 ==
== 動画と音声 ==
{{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 web| url =http://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 web | url = http://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.wikimedia.org/w/index.php?title=Help_talk:Converting_video&oldid=39737985#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要素よりウィキのマークアップを用いるべきです。特に、<nowiki><i>(イタリック)や<b>(太字)</nowiki>を文章の整形に使わないでください。それらの代わりに<nowiki>''や'''</nowiki>、または論理的なスタイルタグを使いましょう。もちろんこれには例外もあります。<nowiki><u></u></nowiki>は、たとえばクリックできないリンクの例を作るなどの利用方法があるかもしれません。<nowiki><font>タグは記事に使わないほうが良いでしょう。そのかわりに、意味の違いを強調するためには、論理的なスタイルタグ、(<em>、<code>や<strong>)</nowiki>といったタグを使ってください。<!--Use <small> and <big> semantic tags to change font size, rather than setting it explicitly with the font-size= style attribute.-->
一般的には、HTMLタグよりウィキテキストのマークアップを用いたほうが良いとされています。特に、<nowiki><i></nowiki>(イタリック<nowiki><b></nowiki>(太字)を文章の整形に使わないでください。それらの代わりに<nowiki>''</nowiki><nowiki>'''</nowiki>、または論理的なスタイルタグ(<nowiki><em></nowiki>、<nowiki><code></nowiki>や<nowiki><strong></nowiki>など)を使いましょう。もちろんこれには例外もあります。<nowiki><u></u></nowiki>は、たとえばクリックできないリンクの例を作るなどの利用方法があるかもしれません。<nowiki><font></nowiki>タグは記事に使わないほうが良いでしょう。そのかわりに、意味の違いを強調するためには、論理的なスタイルタグを使ってください。

<!--
HTMLタグを使用する場合でも、[[HTML5]]で廃止または非推奨化されたタグ、[[MediaWiki]]で使えないタグ<ref>詳しくは[[m:Help:HTML in wikitext]]をご参照ください。</ref>はできるだけ避けてください<ref>[https://waic.jp/docs/WCAG-TECHS/H88 H88: 仕様に準じて HTML を使用する]</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]]を部分的にしかサポートしていない機器からもアクセスできるべきです。しかしそれと同時に、[[CSS]]や[[JavaScript]]をサポートした最新のブラウザと、機能の制限されたブラウザで同じ体裁を整えようとするならば、多くのユーザにとって有用な機能を制限せざるを得ない、という事実も知っておくべきです。CSSやJavaScriptを使えない環境で、コンテンツが見えなくなったり、崩れてしまうような機能は使ってはなりません。これには[[:en:Wikipedia:HiddenStructure]]のような機能によってテーブルの中身を隠す方法<ref>この機能は2006年以降使われていません。現在はHiddenStructureが使われている箇所を簡単に見つけられるよう中身を隠さず、代わりに[[ライムグリーン|ライム]]色で強調表示します。</ref>や、また、[[Help:ダイナミック・ナビゲーション・ボックス|ダイナミック・ナビゲーション・ボックス]]の畳み込みなど[[JavaScript]]を使用できなければ内容が分からないような実装も含まれるかもしれません。しかし互換性を考慮するあまり一般的なユーザが不便を感じることのないように、機能に制約のあるブラウザへの考慮は「最低限読める」ということが確かなレベルで良いです。
ウィキペディアの記事は、[[Cascading Style Sheets|CSS]]や[[JavaScript]]を部分的にしかサポートしていない機器からもアクセスできるべきです。しかしそれと同時に、[[CSS]]や[[JavaScript]]をサポートした最新のブラウザと、機能の制限されたブラウザで同じ体裁を整えようとするならば、多くのユーザにとって有用な機能を制限せざるを得ない、という事実も知っておくべきです。CSSやJavaScriptを使えない環境で、コンテンツが見えなくなったり、崩れてしまうような機能は使ってはなりません。これにはウィキペディア英語版の[[:en:Wikipedia:HiddenStructure|Wikipedia:HiddenStructure]]のような機能によってテーブルの中身を隠す方法<ref>この機能は英語版では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>。これらは無効にできます。


== 関連項目 ==
== 関連項目 ==

2019年1月19日 (土) 08:58時点における版

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

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

記事の構造

導入部

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

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

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

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

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

見出し

見出しを読んだだけで節(セクション)の内容が分かるように、見出しを付けるべきです[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. 記号やユニコード文字をアイコンとして使わないこと。代替テキスト付きの画像のアイコンを使うべきです。例えば、"→"(「右」を意味する記号)のような記号はスクリーンリーダーが読まないことがあります。

同じように主に文字を用いたユーザーインターフェースの2つのスクリーンショット。上のものは赤、緑、青を使用している。下のものは赤と緑にほぼ同じ色を使用しているもので、赤い文字は緑の背景の中でほとんど見えなくなっている。
赤緑色覚異常が視認性にどう影響するかを示しているスクリーンショット

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

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

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

ブロック要素

箇条書き

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

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

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

段組み

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

画像

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

動画と音声

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

アニメーション画像

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

  • 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の制限された利用者への配慮

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

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

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

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

関連項目

脚注

  1. ^ 「ウサギ」2009年10月28日 (水) 20:25(UTC)の版
  2. ^ Web Content Accessibility Guidelines (WCAG) 2.0 2.4.6項より。
  3. ^ たとえばモバイル版のウィキペディアでは、見出しごとに文章が折り畳まれて表示されます。読者が見出しを見ただけで、記事を読むべきか判断できるべきです。
  4. ^
  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. ^ a b 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項を参照。