独立行政法人国立科学博物館

ウェブアクセシビリティガイドライン

バージョン 1.0
2020/3/26

Copyright (c) National Museum of Nature and Science. All Rights Reserved

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

・はじめに
インターネットは情報の検索と発信の必須要素である。中でもウェブサイトは日常生活におけるサービス取得の有効な手段になっている。しかし、これを潜在的利用者全てが使用し、益するためにはウェブコンテンツのアクセシビリティ基準を遵守する必要がある。
そのため、ウェブアクセシビリティガイドライン(以下、「本ガイドライン」)では、独立行
政法人国立科学博物館が所有するウェブサイトにおいて、高齢者及び障害のある人を含む全ての利用者が使用している端末、ウェブブラウザ、支援技術などに関係なく利用することが出来るように、ウェブサイトが確保すべきアクセシビリティの達成基準について記載
する。

POINT
ウェブアクセシビリティ基盤委員会（WAIC）のサイトでは、アクセシビリ
ティについて次のように定義している。
「アクセスのしやすさを意味します。転じて、製品やサービスの利用しやすさという意味でも使われます。似た意味をもつ言葉にユーザビリティがあり
ますが、アクセシビリティはユーザビリティより幅広い利用状況、多様な利用者を前提とします」

作成：株式会社アイアクト
作成日：2020 年 3 月 26 日

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

1

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

目次
１. ウェブアクセシビリティガイドライン概要 ............................................................................ 5
本ガイドラインの目的 ...................................................................................................... 5
アクセシビリティを確保するメリット ......................................................................... 5
アクセシビリティ対応方針 ............................................................................................. 6
適合レベルについて ......................................................................................................... 6
対応度について ................................................................................................................. 7
アクセシビリティガイドラインの適用範囲 .................................................................. 8
適用範囲について ............................................................................................................. 8
適用範囲外について ......................................................................................................... 8
２. アクセシビリティ対応................................................................................................................ 9代替テキストのガイドライン(1.1) ................................................................................... 9
非テキストコンテンツに代替テキストを提供する(1.1.1) ..................................... 9
時間依存メディア(1.2)..................................................................................................... 15
音声だけ及び映像だけ（収録済み）に代替コンテンツを提供する(1.2.1) ...... 15
時間の経過に伴い変化するメディアの音声と映像に代替コンテンツを提供する(1.2.2、1.2.3) ................................................................................................................................ 16
適応可能(1.3)..................................................................................................................... 18
ウェブコンテンツの情報と関係性を適切にマークアップする(1.3.1) .............. 18
コンテンツの意味を理解するのに必要な音声読み上げの順序を保つ(1.3.2).. 24
理解すべき情報を感覚的にだけ伝えることのないように、テキストでも情報を伝える............................................................................................................................................ 25
識別可能(1.4)..................................................................................................................... 27
色の違いだけで情報を伝えない(1.4.1) .................................................................... 27
利用者の要求に応じてのみ、音声を再生する(1.4.2) ........................................... 29
背景と文字とのコントラストを十分に確保する(1.4.3) ....................................... 29
テキストのサイズをユーザーが変更できるようにする(1.4.4)........................... 31
必要不可欠な場合を除いて、文字を画像化しない .............................................. 32
キーボード操作可能(2.1)................................................................................................. 33
キーボードのみで操作できるようにする(2.1.1、2.1.3) ....................................... 33
キーボードフォーカスを閉じ込めない ................................................................... 34

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

2

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

十分な時間(2.2)................................................................................................................. 35
制限時間は原則として設けない(2.2.1) .................................................................... 35
自動更新するコンテンツや動きのあるコンテンツは、利用者が停止できるよ
うにする(2.2.2) ................................................................................................................................ 36
発作の防止(2.3)................................................................................................................. 37
閃光を放つコンテンツは原則として設けない(2.3.1) ........................................... 37
ナビゲーション可能(2.4)................................................................................................. 38
ブロックスキップができるようにする(2.4.1) ........................................................ 38
ページの内容を予測できるようなページタイトルをつける(2.4.2) .................. 40
ウェブコンテンツの順序通りの使いやすいフォーカス順序にする(2.4.3) ...... 40
リンクの表現は、リンク先を予測できる内容にする(2.4.4、2.4.9) .................. 41
複数の到達手段を提供する(2.4.5) ............................................................................. 43
内容が分かる見出しやラベルをつける(2.4.6) ........................................................ 44
フォーカスが視覚的に認識できるようにする(2.4.7) ........................................... 44
現在位置が把握できるようにする(2.4.8) ................................................................ 45
読みやすさ(3.1)................................................................................................................. 46
言語を指定する(3.1.1、3.2.2) ..................................................................................... 46
予測可能(3.2)................................................................................................................. 47
コンテンツにフォーカスしただけでコンテキストの変化を引き起こさない(3.2.1、3.2.5) ..................................................................................................................................... 47
コンテキストの変化を引き起こす前に何が起こるのかを説明し、実行ボタンを提供する(3.2.2) ........................................................................................................................ 48
一貫したナビゲーションを提供する(3.2.3) ........................................................ 49
同じ機能を持つコンテンツには一貫した名前や代替テキストを用いる(3.2.4) ................................................................................................................................................. 49
入力支援(3.3)................................................................................................................. 51
フォームにおいてスムーズに入力できるよう配慮する(3.3.2) ...................... 51
フォームにおいてエラーが起こらないようにする。起こった場合はエラー箇所を特定できるようにする(3.3.1、3.3.3、3.3.4) .................................................................. 53
互換性(4.1)..................................................................................................................... 55
仕様に準じてウェブコンテンツを作成する(4.1.1) ........................................... 55
識別名及び役割はプログラムが解釈できるようにし、利用者が操作できる

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

3

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

ようにする(4.1.2) ............................................................................................................................ 57
１. 実装チェックの方法.................................................................................................................. 59
実装チェックの方法 ........................................................................................................ 59
使用ツール ........................................................................................................................ 59
michecker ........................................................................................................................... 59
コントラストチェッカー ............................................................................................... 60
２. 実装チェックリスト.................................................................................................................. 61
代替テキストのガイドライン(1.1) ................................................................................. 61
時間依存メディア(1.2)..................................................................................................... 62
適応可能(1.3)..................................................................................................................... 63
識別可能(1.4)..................................................................................................................... 64
キーボード操作可能(2.1)................................................................................................. 66
十分な時間(2.2)................................................................................................................. 66
発作の防止(2.3)................................................................................................................. 68
ナビゲーション可能(2.4)................................................................................................. 68
読みやすさ(3.1)................................................................................................................. 70
予測可能(3.2)................................................................................................................. 71
入力支援(3.3)................................................................................................................. 72
互換性(4.1)..................................................................................................................... 73

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

4

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

１.ウェブアクセシビリティガイドライン概要
1 章ではウェブサイトを構築する上で達成すべきアクセシビリティレベルを解説します。

本ガイドラインの目的
本ガイドラインでは、国立科学博物館がユーザー向けに公開するウェブサイトが個人の身体的・機能的な状態に関係なく、同じ水準のウェブサービスを受けられるサイトを構築することを目的としています。

アクセシビリティを確保するメリット■ウェブコンテンツの品質向上
アクセシビリティにはどのようなウェブコンテンツであっても同じように適用できるガイ
ドラインがあります。例えば、今回使用している『JIS X 8341-3:2016』を基準に用いることによって、より明確な品質基準によるウェブコンテンツの制作や開発、運用が可能になります。2016 年 3 月に公示された『JIS X 8341-3:2016』は、世界標準である W3C 勧告『WCAG 2.0』や国際規格『ISO/IEC40500:2012』と同じ内容になりました。これにより、国・地域・言語が異なる場合でも、グローバル企業ではガイドラインの運用やウェブコン
テンツの品質管理がより容易になっています。
■多くのユーザーが利用できる
ウェブコンテンツを利用するときのユーザーが「○○できない」「○○しづらい」といったデメリットが解消されることにより、多くのユーザーが快適に利用できるようになります。
■ユーザー満足度とイメージの向上
ユーザーにとって重要なのは、快適に利用できるかどうかです。ユーザーはアクセシビリ
ティが確保されているかどうかは意識していません。もともと、アクセシビリティが確保されているかどうかは、見た目ではよくわかりません。しかし、アクセシビリティを確保することによってユーザビリティも向上し、結果としてそれがユーザーの満足度を高めることになり、ユーザーはより良い印象を抱くようになります。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

5

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン■社会的な責任を果たすことができる
企業のウェブサイトなどでは、コンプライアンス（法令遵守）や CSR（企業の社会的責任）という視点から、アクセシビリティの確保に取り組むこともあります。
国連の『障害者権利条約』をきっかけに世界各国で法整備が進む中、日本でも 2016 年 4 月
からの『障害者差別解消法』の施行によって、情報アクセシビリティの確保が求められています。もし利用者からウェブコンテンツに対する改善要求があれば、個別の対応を求められることになります。これを「合理的配慮」といいますが、公的機関には法定義務、民間の事業者には努力義務が課せられており、法的な責任を問われる可能性もあります。

アクセシビリティ対応方針
本ガイドラインでは日本産業規格「JIS X 8341-3:2016」への対応を実施します。
JIS X 8341-3:2016 は正式名称を『高齢者・障害者等配慮設計指針－情報機器における機器、ソフトウエアおよび サービス－第 3 部：ウェブコンテンツ』といい、2004 年 6 月 20日に制定され、2010 年 8 月及び 2016 年 3 月に改訂された、ウェブのアクセシビリティに関する JIS 規格です。高齢者や障害者を含めた多様な人々がウェブサイトを利用できるよ
うに、提供者や開発者が配慮すべき原則と要件が示されています。
参照サイト：
JIS 検索（検索ワード＝X8341-3）：https://www.jisc.go.jp/app/jis/general/GnrJISSearch.html

適合レベルについて
適用レベルとはウェブアクセシビリティ対応の達成程度を表すものです。JIS X 83413:2016 の適合レベルには、レベルの低い方からレベル A、レベル AA、レベル AAA の 3 段階が設けられています。
また、各適合レベルにおいて、満たすべき「達成基準」が定められています。達成基準とは、ページの作成において対応すべき個別の要件を規定したもので、レベル A は 25 項
目、レベル AA は 13 項目、レベル AAA は 23 項目の合計 61 項目。国立科学博物館ウェブ
サイトにおいては、基本的にレベル A 及びレベル AA を達成するので、合計 38 項目を達成目標とします。ただし、該当コンテンツが無い場合はその限りではありません。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

6

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

対応度について対応度とは、JIS X 8341-3:2016 の適合レベルについてどのように対応するか（したか）を示したもので、「準拠」「一部準拠」「配慮」のいずれかで表すことができます。
本ガイドラインの「2.アクセシビリティへの対応」の章以降において、高齢者、障害者の方でも快適で不自由のないサイト閲覧を実現するため、日本産業規格「JIS X 83413:2016」に沿った対応を実施。2020 年４月以降、サイト構築を行っていく上では「JIS X
8341-3:2016」におけるレベル A 及びレベル AA の基準に「準拠」（表 1 参照）するように更新します。
また、JIS X 8341-3:2016 におけるレベル A 及びレベル AA の「準拠」に対応するためには、最終的に別途巻末資料「アクセシビリティチェックシート（JIS X 8341-3:2016）」に従い対応項目のチェックを行い、基準をクリアします。
表 1「JIS X 8341-3:2016」への対応度
表記

ウェブアクセシビリ

目標とする適合レベルの達

ティ方針の提示又は成基準の試験結果

追加表記事項

公開
準拠

必須試験を実施し、達成基準をなし

全て満たしていることを確
認
一部準拠

必須

試験を実施し、達成基準の今後の対応方針

一部を満たしていることを
確認

POINT
レベル AAA については、ウェブサイトの内容を考慮した際にレベル AAA 達成
基準の全てを満たすことが出来ない事例もあるため、サイト構築の一般方針としてレベル AAA 準拠を必須とすることを世界標準では推奨されていません。
ただし、レベル AAA を一部準拠することでよりアクセシビリティを高めている事例はあるので、達成できるのであれば積極的に要件を満たしましょう。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

7

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

アクセシビリティガイドラインの適用範囲
適用範囲について本ガイドラインはhttps://www.kahaku.go.jp/
ドメイン配下の全コンテンツを対象とします。

適用範囲外について[1-2-1.適用範囲について]で示した
https://www.kahaku.go.jp/
サイト全体のうち、以下については対象外とします。
１

外部より提供を受けている画像等

２

PDF ファイル

３

研究成果の画像等研究活動に関わる資料

４

利用者が限定されているウェブサイト

５

アーカイブとして残しているウェブサイト

６ YouTube 動画
７

SNS(Facebook,Twitter 等)

８

外国語ページ及びドメイン配下外のコンテンツ

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

8

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

２.アクセシビリティ対応
2 章からは実際にウェブサイトを構築する上で達成しなければならない基準について解説します。

代替テキストのガイドライン(1.1)
非テキストコンテンツに代替テキストを提供する(1.1.1)
関連 JIS 項目：1.1.1 非テキストコンテンツの達成基準 【レベル A】【目的】
画像などのテキストではない情報、非テキストコンテンツは代替文字を提供すること
により、目の不自由な人が画像の alt 属性の値を音声読み上げブラウザで読み上げた
り、点字に変換して認識することができるようになります。そのため、説明が必要な
画像に alt 属性をつけて値に適切に記述することで、テキスト情報として抽出できるよ
うになり、テキスト検索や音声化など、コンテンツを様々な方法で利用できるようになります。対応する際は、情報の抜け漏れや重複が無いようにし、誰もが平等に情報取得が出来るように配慮することが必要です。

POINT
画像の alt 属性にテキストを配置することで、目の不自由な方に対しても画像を理解してもらえるようになりますが、それ以外にも副次的な効果としてグーグルなどの検索エンジンにも画像を理解してもらえるようにもなります。そうすることで結果的に SEO 対策にも繋がり、より多くの利用者に閲覧してもらうことが出来ます。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

9

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン【対策方針】◆画像を掲載する場合には代替テキスト(alt 属性)を入力する。
◆意味を持たない画像の img 要素は alt 属性値を空にして、
title 属性を付与しないまたは CSS で指定する◆隣り合った画像とテキストリンクは同じリンクの中に入れる◆イメージマップの area 要素に代替テキストを提供する◆送信 / 実行ボタンとして用いる画像の alt 属性を使用する◆非テキストコンテンツの一般に認められた名前又は内容が分かる名前を提供する◆ライブ音声しか含まないコンテンツやライブの映像しか含まないコンテンツの目的を説明する◆object 要素のボディに代替テキストを記述する◆CAPTCHA を使用しない◆ASCII アート（アスキーアート）、顔文字は使用しない【具体的な実装例】◆画像を掲載する場合には代替テキスト(alt 属性)を入力する。
リンク画像の文字はリンク先のページの目的が分かるような内容にします。画像内の文字を全て alt 属性値に記入し、画像が見えなくても同じ情報が得られるようにします。
<例：テキストを含む画像バナー>

alt 属性値：alt=”和食”
alt 属性値：alt=”特別展 和食 日本の自然、人々の知恵”

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

10

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン◆意味を持たない画像の img 要素は alt 属性値を空にして、
title 属性を付与しない。または CSS で指定する<例：見出しを補助するイメージ画像>

イメージ画像

この場合のイラストは「ホットニュース」というリンクに対するイメージ画像であり、支援技術(音声読み上げブラウザ等)が本来無視すべき画像です。そのため、alt 属
性を空にした上で title 属性も付与しないでください。装飾が目的の画像も同様に写真であっても alt 属性値を空にして問題ありません。CSS で画像を指定できる場合は CSS
で画像を指定してください。

<img src="photo.jpg" alt="ホットニュース">background-image: url(imgs/index_title_07_bg.gif);

または<img src="photo.jpg" alt="">◆隣り合った画像とテキストリンクは同じリンクの中に入れる<例>

同じページへリンクする「リンクテキスト」と近接する「リンク画像」は同じリンクの中に入れ、代替テキストを空(から)にします。テキスト及び画像の代替テキストが重複しないようにしましょう。

<a href="landscape.html"><img src="fukei.jpg" alt="風景の科学展"/></a><a href="landscape.html">風景の科学展</a><a href="landscape.html"><img src="fukei.jpg" alt="" />風景の科学展</a>

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

11

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン◆イメージマップの area 要素に代替テキストを提供する<例>

クリッカブルマップなどを使用する際は alt 属性をつけ、alt 属性値に「マップの情報」を記述し、area 要素がある場合は alt 属性をつけ、alt 属性値に「マップのどの部分であるか」記述します。特に地図を使用する場合には見えなくても伝わるように alt
属性値を記述します。

<area shape="rect" coords="151,38,306,151" href="#aar_map"><area shape="rect" coords="151,38,306,151" href="#aar_map" alt="周辺マップへ">◆送信 / 実行ボタンとして用いる画像の alt 属性を使用する

alt 属性値：alt=”ログイン”または alt=”展示閲覧履歴のご確認ログイン”

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

12

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン◆非テキストコンテンツの一般に認められた名前又は内容が分かる名前を提供する

芸術作品など感覚的にしかとらえられないものは、タイトル、題材、受賞履歴や作者名など、客観情報のみ記述する（音楽、絵画等）

POINT
例えばモナリザの絵には「モナリザ。レオナルド・ダヴィンチ作」
といったように代替テキストを記述します。
◆ライブ音声しか含まないコンテンツやライブの映像しか含まない
コンテンツの目的を説明する<例 1：ライブ音声>
生放送のラジオやライブ映像などを配信する際は「○○生放送中」とその内容を説明するラベルをつけます。
◆object 要素のボディに代替テキストを記述する
object 要素でレンダリングされるコンテンツに対して、代替テキストを提供します。

<object> <p>ここに代替テキストを記述</p></object>◆CAPTCHA を使用しない<例>

不正機械アクセスを防ぐために使用される CAPTCHA は使用しないでください。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

13

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン◆ASCII アート（アスキーアート）、顔文字は使用しない
ASCII アートや顔文字は罫線やカッコなどの記号や文字を組み合わせて視覚的な表現を行うものです。文字としての意味が伝わらないため、使用しないようにします。

(*^-^*)、(・_・)【チェック方法】
チェックの際は「miChecker」を使用しますが、画像と alt の関連付けが正しいかどうかは目視にて確認します。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

14

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

時間依存メディア(1.2)
音声だけ及び映像だけ（収録済み）に代替コンテンツを提供する(1.2.1)
関連 JIS 項目：1.2.1 音声だけ及び映像だけ(収録済み)の達成基準 【レベル A】【目的】
音声のみのファイルや映像のみのファイルといったメディアに対して代替コンテンツが提供されていない場合、音声や映像を見ることの出来ないユーザーは情報を入手することが出来ません。そのため、コンテンツの中にこういったメディアを含む場合は必ず代替コンテンツを用意することで、情報を平等に提供できるようにします。テキストであれば、視覚、聴覚（読み上げソフトの機能併用）での情報を取得することが出来ます。
【対策方針】◆音声のみのメディアと同等の情報をテキスト等でも提供する◆映像のみのメディアと同等の情報をテキストでも提供する【具体的な実装例】◆音声のみのメディアと同等の情報をテキスト等でも提供する
mp3 ファイルといった音声ファイルをウェブ上で再生する場合には、音声が伝えている情報(効果音含む)をテキストに書き起こして代替コンテンツを作成します。

音声と共に音声ファイルのテキストが提供されるようにします。
【チェック方法】
時間依存メディアとテキスト内容が同等であるか比較検証を実施してください。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

15

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

時間の経過に伴い変化するメディアの音声と映像に代替コンテンツを提供する(1.2.2、1.2.3)
関連 JIS 項目：1.2.2 キャプション(収録済み)の達成基準 【レベル A】
1.2.3 音声解説又はメディアに対する代替コンテンツ (収録済み)の達成基準【レベルA】【目的】
2-1-2 同様、目や耳が不自由な人にとっては映像や音声といったメディアはその両方が提供されていないと情報の抜け漏れが発生し、正しく情報を取得することが出来ません。そのため、コンテンツの中にこういったメディアを含む場合は必ず代替コンテン
ツを用意することで、情報を平等に提供できるようにします。

POINT
2-1-2 と内容が似ていますが、2-1-3 では主に映像と音声が同時に再生されるメディア(生放送含む)についてのアクセシビリティ対応を実施します。
分類と必要な対応については以下を参照ください。
・音声のみのメディア→書き起こしテキスト(2-1-2 参照)
・映像のみのメディア→同等の情報を提供する代替テキスト(2-1-2 参照)
・音声と映像を含むメディア→字幕と動画の書き起こし(本章参照)【対策方針】◆時間の経過の伴い変化するメディアの音声と映像の内容が分かる概要を、テキストでも提供する

POINT
SMIL は、XML によって作られたマルチメディア記述用の言語で、時間に関するコントロールや、スクリーン上のプレゼンテーションのレイアウ
トの制御を行うことを目的としています。たとえば、音楽再生開始後 10秒で画像を切り替える、といった処理が可能です。このような時間によるコントロールの概念は、HTML にはないものです。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

16

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン【具体的な実装例】◆時間の経過に伴い変化するメディアの音声と映像の内容が分かる概要を、テキストでも提供する
動画を提供する場合には、動画の内容を記載したテキスト及び字幕を用意します。また、可能な限り動画の音声を書き起こしたテキストを同一ページもしくは別ページに記載してください。

動画で再生される音声ファイルを書き起こすことで視覚または聴覚（読み上げソフトの併用）による正しく情報を取得することが出来ます。

POINT
動画内の情報を全てテキストで掲載しようとした場合、膨大な量になってしまうことは可能性としておおいにあり得ます。上でも記載したように
YouTube などの外部サイトを使用して動画を埋め込んだ場合でも、自ずと試験ページの対象になりますので、試験の際は必要に応じて方針の変更やあらかじめ試験の対象から除外するという選択肢も検討してください。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

17

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン【チェック方法】
チェックの際は「miChecker」を使用します。また、SMIL 1.0/2.0 で音声解説が提供されているかを目視にて確認してください。

POINT※1.2.4,1.2.5 についてはウェブサイト内で生放送をする際に参照する項目ですので今回は省略しています。また、1.2.6～1.2.9 については AAA のため説明を省略しています。

適応可能(1.3)
ウェブコンテンツの情報と関係性を適切にマークアップする(1.3.1)
関連 JIS 項目：1.3.1 情報及び関係性の達成基準【レベル A】【目的】
ウェブサイトを構築する上で必須となる HTML は見出しや箇条書き、段落などの構造を記述するためのものです。そのような HTML をウェブコンテンツの文書構造に応じた適切に用いることで、文字の大きさや太さ、色といった視覚的な情報に頼ることが出来ない人でも、文書の内容が理解しやすくなります。そのため、情報の重要度や参照、引用している箇所は必ず HTML で明記します。
【対策方針】◆h1 要素～h6 要素を用いて、見出しを特定する◆リストには、ol 要素、ul 要素、dl 要素を用いる◆デザインの為の要素を HTML で使用しない（font color、font size、b 等）◆太字等の強調箇所は strong、em 要素を用いる◆参照箇所に cite 要素を用いる◆引用箇所に blockquote 要素を用いる◆下付き文字上付き文字に、sub、sup 要素を用いる◆テキストの表現のバリエーションによって情報を伝えない◆レイアウト table は基本的に使用しない。使用する際は、th、summary、caption を使用しない。
◆ データ table を使用する際は caption、tr、th、td を適切に使用する

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

18

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン◆label 要素を用いてテキストラベルとフォームコントロールを関連付ける label 要素を用いることができないとき title 属性を用いてフォームコントロールを特定する◆ページにコンテンツを追加する場合 DOM(ドキュメント・オブジェクト・モデル)を用いる◆関連したリンクをグループ化するために nav 要素を使用する【具体的な実装例】◆h1 要素～h6 要素を用いて、見出しを特定する
読み上げソフトを使用すれば、見出しだけをピックアップして読み進めることが可能です。そのため、情報の強弱を付けて目的とするコンテンツに素早く辿り着けるようにします。見出しのマークアップは h1→h2→h3→h4→h5→h6 の順番に設定します。

<h1>3 つの主要事業</h1><h1>3 つの主要事業</h1><h1>(1)調査研究</h1><h2>(1)調査研究</h2><h1>(2)標本資料の収集・保管</h1><h2>(2)標本資料の収集・保管</h2><h1>(3)展示・学習支援</h1><h2>(3)展示・学習支援</h2><h1>関連リンク</h1><h3>関連リンク</h3>◆リストには、ol 要素、ul 要素、dl 要素を用いる
箇条書きなどを使用する際に用いるリスト要素を使用すると、視覚以外でもリストであることを支援技術が認識できる可能性があります。
<例><p>・JR「上野」駅(公園口)から徒歩 5 分<br>・東京メトロ銀座線・日比谷線「上野」駅(７番出口)から徒歩 10 分<br>
・京成線「京成上野」駅(正面口)から徒歩 10 分<br>
・館内に駐車場および駐輪場はございません<br></p>

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

19

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン<li>JR「上野」駅(公園口)から徒歩 5 分</li><li>東京メトロ銀座線・日比谷線「上野」駅(７番出口)から徒歩 10 分</li><li>京成線「京成上野」駅(正面口)から徒歩 10 分</li><li>館内に駐車場および駐輪場はございません</li>◆デザインの為の要素を HTML で使用しない（font color、font size、b 等）
文字や背景の色・文字のサイズを HTML で指定すると、ユーザーの閲覧環境で色変更
や文字サイズ変更等ができない場合があります。特に文字サイズ変更がウェブ上で実施できないとレベル AA 準拠が難しくなります。このため、色やサイズ等のレイアウ
トの要素を指定する時は、HTML で指定するのではなく CSS で指定してください。
<例 1>
【必須】

<font color="red">（必須）</font>.red{color:#ff0000;}
<例 2>

【必須】

<font size="16px">（必須）</font>.moji {font-size: 1em;}◆太字等の強調箇所は strong、em 要素を用いる
文字を太くして強調する箇所は、strong、em 要素を用いてください。
<例>
【必須】

<b>(必須) </b><strong>(必須)</strong>

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

20

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン◆参照箇所に cite 要素を用いる
参照している文章には cite を用いて参照していることを明記します。

<cite>恐竜の教科書</cite>という著書があります。
◆引用箇所に blockquote 要素を用いる
著書や論文などの中から一文を取り上げて記載する場合は、引用していることを明確にする blockquote 要素を用います。

文中に<blockquote>骨はその動物の体がどのように機能したのか</blockquote>という一文がありますが…
◆下付き文字、上付き文字に、sub、sup 要素を用いる
上付き文字には sup 要素、下付き文字には sub 要素を使ってください。
<例 1>

<例 2>

・E=mc2・H2O

E=mc<sup>2</sup>

H<sub>2</sub>O◆テキストの表現のバリエーションによって情報を伝えない
視覚のみで情報を伝えると読み上げソフトでは違いが分かりません。情報は文章で伝えるようにしてください。

赤字の展示物は期間限定です

下線を引いてる展示物は期間限定です

・恐竜の化石・恐竜の化石(期間限定)

・アンモナイトの化石

・アンモナイトの化石

・植物の化石・植物の化石Copyright (c) National Museum of Nature and Science. All Rights Reserved.

21

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン◆レイアウト table は基本的に使用しない。使用する際は th、summary、caption を使用しない。
表は縦横の関係を把握しなければならないため、音声読み上げブラウザを使用した場
合、内容を正しく理解することが難しい場合があります。そのため使用せざるを得ない場合は表の構造を HTML で適切に表現してください。

POINT
テーブルでレイアウトを組む手法はアクセシビリティの観点以外にも構造が複雑化した場合、それを組むコーダーの負担も増大するためデメリットの方が目立つ手法です。なるべく使用しないでください。

このようにページそのものの構造を table を使用してレイアウトを組むことは読み上げソフ
トを使う上で読みづらい構造になります。css を使用してレイアウトを組んでください。

和食展の詳細はこちら

開催期間：●月×日～●月×日◆データ table を使用する際は caption、th、td を適切に使用する
縦軸と横軸で情報整理するテーブル、通称データテーブルは使用してもアクセシビリ
ティ上問題はありません。ただし使用する際は caption、th、td を使用してください。
※caption：テーブルの表題、th：テーブルの見出しデータセル；td：テーブルのデータセル<例 1：caption、tr、th、td を使用している例>【展示内容】【展示内容】

12 月

1月

3階

恐竜展

恐竜展

2階

日本刀展

昆虫展

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

22

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン<例 2>

セルは結合しないでください。結合してしまうと読み上げソフトで正しく情報が伝わりません。
【展示内容】【展示内容】

12 月

1月

3階

恐竜展

2階

日本刀展

昆虫展

【展示内容】

12 月

1月

3階

恐竜展

恐竜展

2階

日本刀展

昆虫展

【展示内容】◆label 要素を用いてテキストラベルとフォームコントロールを関連付ける label 要素を用いることができないとき title 属性を用いてフォームコントロールを特定する<例>

テキストを選択しても入力できる状態

テキストを選択すると入力可能な状態になっていません。

になります。

<label for="firstname">ユーザーID</label><input type="text" name="firstname" id="firstname" />Copyright (c) National Museum of Nature and Science. All Rights Reserved.

23

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン◆ページにコンテンツを追加する場合、DOM(ドキュメント・オブジェクト・モデル)を用いる
原則としてプログラムは使用しないでください。 使用しなければならない理由がある
時は DOM を用いてください◆関連したリンクをグループ化するために、nav 要素を使用する<nav id="nav"> <ul><li><a href="---" title="利用案内">利用案内</li><li><a href="---" title="展示">展示</li><li><a href="---" title="学習">学習</li><li><a href="---" title="研究活動と標本・資料">研究活動と標本・資料</li><li><a href="---" title="各種手続き・報道関係資料">各種手続き・報道関係資料</li></ul></nav>【チェック方法】
チェックの際は「miChecker」を使用します。また、CSS をオフにして表示情報が伝わるかどうか確認し、バリデートチェックにて HTML の構造に問題がないか確認しましょう。

コンテンツの意味を理解するのに必要な音声読み上げの順序を保つ(1.3.2)
関連 JIS 項目：1.3.2 意味のある順序の達成基準 【レベル A】【目的】
大見出し→中見出し→小見出しというように文書の構造を決める際には内容に応じて適切に情報を配置していきますが、音声読み上げブラウザを使用する視覚的に情報の順序を理解することが出来ない人に対しても同様に情報を提供する必要があります。
【対策方針】◆コンテンツを意味のある順序で並べる◆単語の文字間にスペースやタグを用いない

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

24

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン【具体的な実装例】◆コンテンツを意味のある順序で並べる

小見出し：2-1-1

大見出し：2↓↓

大見出し：2

中見出し：2-2↓↓

中見出し：2-2

小見出し：2-1-1

POINT
意味のある順序になっているかどうかは視覚情報と読み上げソフトが同じ順番で読み上げされるかを比較すると確認しやすいです。

◆単語の文字間にスペースやタグを用いない
注意点として日付の単位が変わる場合は必ず[年][月][日]というように漢字で区切ってください。記号で区切ったとしても、読み上げソフトはそれを認識出来ません。
「国 立 科R2
2020/1/24

学

博

物

館」

「国立科学博物館」
令和 2 年
2020 年 1 月 24 日

【チェック方法】
チェックの際は「miChecker」を使用します。また、CSS をオフにして表示情報が伝わるかどうか確認し、バリデートチェックにて HTML の構造に問題がないか確認しましょう。

理解すべき情報を感覚的にだけ伝えることのないように、テキス
トでも情報を伝える
関連 JIS 項目：1.3.3 感覚的な特徴の達成基準 【レベル A】【目的】
図形や位置などの感覚的な情報は視覚情報に頼った伝達手段のため、目の不自由な人にとっては認識することが出来ません。そのため、そのような感覚的な情報もテキス
トを付けて補足することで読み上げソフトにも対応出来るようにします。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

25

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン【対策方針】◆理解すべき情報を感覚的にだけ伝えることのないようにテキストでも情報を伝える【具体的な実装例】◆理解すべき情報を感覚的にだけ伝えることのないようにテキストでも情報を伝える<例 1>

このページの下へ<例 2>
特別展「和食」のページを閉じる際は右下の×をクリックしてください。

ページを閉じる×【チェック方法】
チェックの際は「miChecker」を使用します。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

26

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

識別可能(1.4)
色の違いだけで情報を伝えない(1.4.1)
関連 JIS 項目：1.4.1 色の使用の達成基準【レベル A】【目的】
色の区別が付きづらい色覚異常の症状を持つ人や、目の不自由な人にとっては色の違いを区別することが困難となります。
「赤字の部分は…」といった色の違いだけで情報の違いを表現せずに。テキスト情報のみで伝えることが出来るようにします。
【対策方針】◆リンク又はコントロールはその文字色と周囲にあるテキストとのコントラスト比を 3:1 以上にする◆テキストの色の違いで情報を伝える際は、視覚的な手がかりを補足する◆色の違いで伝えている情報をテキストでも入手可能にする◆色とパターンを併用する

POINT
コントラスト比とはディスプレイに表示される画像・映像において明暗の差がどれだけあるかを示す指標。数字の値が大きいほどコントラスト比は大きく明暗の差が大きい。最大のコントラスト比は「白地に黒文字」で21：1 となっている。基本的にはコントラスト比が高いほどメリハリのある画質が得られ、文字や色がくっきりと見えるが、視認性はコントラスト
比だけでなく、解像度や最大輝度などの複合的な要素で決まる。

【具体的な実装例】◆リンク又はコントロールはその文字色と周囲にあるテキストとのコントラスト比を 3:1 以上にする<例>
特別展和食～日本の自然、人々の知恵～（※外部サイト）

1.0:1

日本列島の自然と環境の多様性やそこに暮らす人々の知恵と工夫の歴史を“和食”を通じて紹介します。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

27

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

特別展和食

3.0:1 以上

～日本の自然、人々の知恵～（※外部サイト）

日本列島の自然と環境の多様性やそこに暮らす人々の知恵と工夫の歴史を“和食”を通じて紹介します。
◆テキストの色の違いで情報を伝える際は、視覚的な手がかりを補足する◆色の違いで伝えている情報をテキストでも入手可能にする<例>
・赤字は必須入力です。

・必須項目は必ず入力してください。

お名前

お名前(必須)◆色とパターンを併用する

POINT
画像グラフを作成する際は図そのものにアクセシビリティ対応する他にも、本文(テキスト)にグラフの内容が分かる文章を記述してください。

【チェック方法】
チェックの際は「コントラストチェッカー」を使用します。また、CSS をオフにして表示情報が伝わるかどうか確認し、バリデートチェックにて HTML の構造に問題がな
いか確認しましょう。※コントラストチェッカーについては巻末資料で解説します。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

28

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

利用者の要求に応じてのみ、音声を再生する(1.4.2)
関連 JIS 項目：1.4.2 音声の制御の達成基準【レベル A】【目的】
音声読み上げブラウザを使用している際に、他に再生されている音声に邪魔されてしまうと読み上げブラウザの音声が聞こえなくなってしまうため、ユーザーが任意の状
況で音声を再生出来るようにしなければなりません。
【対策方針】◆利用者の要求に応じてのみ、音声を再生する【具体的な実装例】◆利用者の要求に応じてのみ、音声を再生する
基本的に音声は自動再生させないことが推奨されますが、警告などの目的で発せられる極短時間の音声については許容されます。
<例>

音声は自動再生せず、クリックしたら音声が再生するよう設定してください。
【チェック方法】
動画ファイルを再生し、確認してください。

背景と文字とのコントラストを十分に確保する(1.4.3)
関連 JIS 項目：1.4.3 コントラスト（最低限レベル）の達成基準【レベル AA】【目的】
画像内の文字色と背景色のコントラストを十分に確保できていない場合、高齢者をはじめとする多くの利用者は文字を認識することができないため、文字を配置する場合
は文字を識別しやすいコントラスト比にする必要があります。
※ただし、企業名などのロゴはその限りではありません。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

29

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン【対策方針】◆文字の色と背景色とのコントラスト比を 4.5:1 以上にする。ただし、少なくとも 22
ポイント又は 18 ポイントの太字のように、サイズの大きな文字は 3:1 以上あればよい（アルファベット文字の場合は、18 ポイント又は 14 ポイントの太字）。
【具体的な実装例】◆文字の色と背景色とのコントラスト比を 4.5:1 以上にする。ただし、少なくとも 22
ポイント又は 18 ポイントの太字のように、サイズの大きな文字は 3:1 以上あればよ。
い（アルファベット文字の場合は、18 ポイント又は 14 ポイントの太字）<例 1>

左の良い例の赤色(#CE0000)では背景とのコントラスト比が 5.8:1 あり、十分に要件を満たしますが、右の悪い例では赤色(#FF0000)と背景のコントラスト比が 4.0:1 しかな
いため、コントラスト比が不十分です。
<例 2>

写真に文字を重ねる場合はコントラスト比を確保した背景を敷くとコントラスト比を確保しやすくなります。

POINT
コントラスト比は目視だけでは判別が難しいケースも多く見られます。なので、サイト構築の際はコントラスト比を常にチェック出来るようにチェッカーを使用しながら構築することを推奨します。
【チェック方法】
チェックの際は「コントラストチェッカー」を使用します。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

30

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

テキストのサイズをユーザーが変更できるようにする(1.4.4)
関連 JIS 項目：1.4.4 テキストのサイズ変更の達成基準【レベル AA】【目的】
高齢者など、軽度の視覚障害を持つ利用者にとっては小さな文字が読みにくい人がいます。そのため画面拡大ソフトのような支援技術を使わずともそのまま読むことができるようにユーザーが自身でテキストサイズを変更出来るようにします。 このとき、文字サイズが変更できるように文字サイズは絶対値で入力しないようにします。
【対策方針】◆ブラウザによる文字の拡大機能を利用可能なマークアップをおこなう。
◆テキストやテキストコンテナのサイズ指定には px や pt 等の絶対指定ではなく、
em、％、キーワード等の相対指定を用いる◆文字サイズを変更してもコンテンツの機能が損なわれていないかを確認する【具体的な実装例】◆文字を拡大する機能をつける<例>

画像右下のように文字サイズを拡大出来る機能を設けることで文字の視認性を向上させます。
◆テキストやテキストコンテナのサイズ指定には px や pt 等の絶対指定ではなく、
em、％等の相対指定を用いる

span.sample1 {font-size: 12px; }span.sample1 {font-size: 1em; }こうすることで、文字サイズ拡大機能を設置した場合でもユーザーの判断に応じて文字サイズを拡大することが出来ます。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

31

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン◆文字サイズを変更してもコンテンツの機能が損なわれていないかを確認する
ページの作成を行った際は文字を 200％以上に拡大して、コンテンツの機能が損なわれている箇所が無いかを確認する。

【チェック方法】
チェックの際は「miChecker」を使用し、ブラウザでもチェックしてください。

必要不可欠な場合を除いて、文字を画像化しない
関連 JIS 項目：1.4.5 文字画像の達成基準【レベル AA】【目的】
文字を画像化してしまうと、ユーザーにとって閲覧しやすい環境への変更が難しくな
ります。そのため、必要不可欠な場合を除いて文字を画像化しないようにします。
【対策方針】◆必要不可欠な場合を除いて、文字を画像化しない【具体的な実装例】◆必要不可欠な場合を除いて、文字を画像化しない<必要不可欠な場合>
・ロゴ

・画像の上の文字【チェック方法】
チェックの際は「miChecker」を使用しますが、文字の画像化が必要な場合もあります
ので、デザインへの依存度を検討してください。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

32

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

キーボード操作可能(2.1)
キーボードのみで操作できるようにする(2.1.1、2.1.3)
関連 JIS 項目：2.1.1 キーボードの達成基準【レベル A】
2.1.3 キーボード(例外なし)の達成基準【レベル AAA】
【目的】
目と手を同時に使うマウスは、全盲の視覚障害者には扱うことが出来ません。そのため、マウスを使わずともキーボード操作だけで全ての操作や情報の取得を可能にする必要があります。また、画面上のカーソルを見つけたり、目で追うことが困難な利用者や、手が震えたり手を上手く動かすことの出来ない人についても同様です。
【対策方針】◆リンクは a 要素の href 属性を用いる◆入力フォームの構築は HTML のフォームコントロールを用いる◆マウスクリックもしくはキーボードによるエンターでアクションが起こるよう設定する※レベル AAA【具体的な実装例】◆リンクは a 要素の href 属性を用いる
このように a 要素を使用することで、マウスクリック及びキーボードエンターどちらでも操作可能になります。
<例><a href="/exhibitions/permanent/index.html">常設展示ガイド</a>◆入力フォームの構築は HTML のフォームコントロールを用いる
フォームを構築する際はキーボード操作可能な要素や属性を使用します。代表的なものとしては以下になります。
button、fieldset、legend、input type ="button"、input type ="submit"、input type ="reset"、
input type ="image"、input type ="text"、input type ="passWord"、input type ="checkbox"、
input type ="radio"、select、option、textarea

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

33

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン◆マウスクリックもしくはキーボードによるエンターでアクションが起こるよう設定する※レベル AAA
左の例では実行ボタンがなく、項目を選択した瞬間にページが遷移してしまうため、キーボードでの操作が困難になります。そのため、プルダウンなどのユーザーが選択してもらう場面では右の例のように別途ボタンを設置し、ユーザーがボタンを押下するまでページ遷移しないように設計します。

【チェック方法】
チェックの際は「miChecker」を使用する他に、手動でブラウザ操作が出来るかを確認
してください。

キーボードフォーカスを閉じ込めない
関連 JIS 項目：2.1.2 キーボードトラップなしの達成基準【レベル A】【目的】
キーボードのみで操作しているユーザーがコンテンツの一部分に閉じ込められてしまうケースが多々あります。そのため、キー操作のみで移動出来るようにします。
【対策方針】◆キー操作のみで全てのコンテンツを操作でき、他のページへも移動できる【具体的な実装例】◆キー操作のみで全てのコンテンツを操作でき、他のページへも移動できるキーボードフォーカスがコンテンツの一部で閉じ込められてしまい、コンテンツの一部から抜け出せなくなって、コンテンツの残りの部分へ移動することができないというようなことが無いようウェブページを制作する。
【チェック方法】
チェックの際は「miChecker」を使用する他に、手動でブラウザ操作が出来るかを確認
してください。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

34

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

十分な時間(2.2)
制限時間は原則として設けない(2.2.1)
関連 JIS 項目：2.2.1 タイミング調整可能の達成基準【レベル A】【目的】
コンテンツを利用するためにかかる時間は利用者によって大きく異なります。そのため、作業に制限時間を設けてしまうと構築側の想定する作業を完了できない、または
操作ミスを誘発してしまうなど、様々な不都合が生じます。なので、期間限定のイベントや施設利用申し込みといったやむを得ない場合を除き、コンテンツの利用には時間制限を設けないように設計します。また、セキュリティ上の都合などで時間制限を設ける場合には利用者の操作で時間を延長できるようにすることが必要です。
【対策方針】◆制限時間は設けない【具体的な実装例】◆制限時間は設けない<例>
このページは 10 秒後にリダイレクトします。
【チェック方法】
チェックの際は「miChecker」を使用する他に、手動でブラウザ操作が出来るかを確認
してください。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

35

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

自動更新するコンテンツや動きのあるコンテンツは、利用者が停止できるようにする(2.2.2)
関連 JIS 項目：2.2.2 一時停止，停止及び非表示の達成基準【レベル A】【目的】
動きのあるコンテンツは高齢者や視覚に障害がある利用者にとって認識しづらいことが多いため、利用者が任意のタイミングで停止できるようにします。
【対策方針】◆スクロールする文字は基本的に使用しない◆コンテンツを一時停止させて、一時停止させたところから再開できるようにする◆点滅するコンテンツは原則として使用しない。使用する必要がある場合は 5 秒未満
で点滅が終わるようにコンテンツを作成する◆アニメーション GIF を設定する場合は 5 秒以内に停止するようにする◆自動更新されるコンテンツを停止させるコントロールを用いる【具体的な実装例】◆スクロールする文字は基本的に使用しない◆点滅するコンテンツは原則として使用しない。使用する必要がある場合は 5 秒未満
で点滅が終わるようにコンテンツを作成する

お知らせ

→

お知らせ

お知らせ

◆自動更新されるコンテンツを停止させるコントロールを用いる

特別展は外部ページになります
5 秒後に自動的にジャンプします。

特別展は下記の URL をクリックしてご覧ください。
▶http://www～【チェック方法】
チェックの際は「miChecker」を使用する他に、手動でブラウザ操作が出来るかを確認
してください。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

36

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

発作の防止(2.3)
閃光を放つコンテンツは原則として設けない(2.3.1)
関連 JIS 項目：2.3.1３回の閃光又は閾値以下の達成基準【レベル A】【目的】
光過敏性発作の疾患のある人は数回以上の閃光があり、なおかつ一定の周期で閃光を放つコンテンツが原因で発作を引き起こす恐れがあります。そのため、閃光を放つコ
ンテンツは閃光を放つ部分を失うことで情報の本質が損なわれたり、表現として不足する場合に限り公開できるものとします。また、設ける必要がある場合は 1 秒間 3 回以下とし、閃光を放つエリアを十分に小さくする必要があります。
【対策方針】◆閃光を放つコンテンツは原則として公開しない。
◆閃光を放つコンテンツを公開する場合、閃光は 1 秒間に 3 回以下に限る。
【チェック方法】
チェックの際は「miChecker」を使用します。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

37

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

ナビゲーション可能(2.4)
ブロックスキップができるようにする(2.4.1)
関連 JIS 項目：2.4.1 ブロックスキップの達成基準【レベル A】【目的】
主に音声読み上げブラウザを使用している人の場合、複数ページに共通して設置されているグローバルナビやヘッダーをスキップ出来ないと操作が煩雑になります。そのため、ページの先頭からメインコンテンツ開始位置までスキップできる機能を提供することで、毎回グローバルナビなどを聞かなくてよくなります。また、見出しに移動する機能を備えたソフトの場合は読み飛ばしと同等の機能を有することになります。
【対策方針】◆コンテンツの各セクションの開始位置に見出し要素を提供する◆フレームは原則として使用しない。使用する場合には title 属性を付与する【具体的な実装例】◆コンテンツの各セクションの開始位置に見出し要素を提供する
見出し要素を適切に設置することで、音声読み上げブラウザで見出しだけをピックアップして読み進み、目的とするコンテンツに素早く辿りつくことができます。

POINT
見出しのマークアップは h1→h2→h3→h4→h5→h6 の順番に設定します。
h1→h2→h2→h3 となるのは問題ないですが、h1 が無かったり、順番がh1→h3→h2 とならないよう注意が必要です。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

38

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン◆フレームは原則として使用しない。使用する場合には title 属性を付与する
フレームはブラウザ画面を複数に区切ることで、別々の内容を表示させる手法です。
通常なら複数に区切られたウィンドウが一度に表示されますが、音声読み上げブラウ
ザでは区切られたそれぞれのウィンドウの内容を一つ一つ確認することになり、情報把握が複雑になります。また、ウィンドウを複数に区切ることでスクロールが必要不可欠になり、マウスの正確な操作が難しい利用者の負担が増すことになります。そのため、フレームは基本的に使用しないでください。

①<frame name="menu" src="kahaku_menu.html" scrolling="YES" >②<frame name="main" src="kahaku_main.html" scrolling="YES" marginwidth="0"
marginheight="0">①<frame name="menu" src="kahaku_menu.html" scrolling="YES" title="メニューバー" >②<frame name="main" src="kahaku_main.html" scrolling="YES" marginwidth="0"
marginheight="0" title="科博の活動">【チェック方法】
チェックの際は「miChecker」を使用します。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

39

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

ページの内容を予測できるようなページタイトルをつける(2.4.2)
関連 JIS 項目：2.4.2 ページタイトルの達成基準【レベル A】【目的】
ページタイトルは音声読み上げブラウザで読み上げられる文字になるので、わかりに
くいタイトルを設定すると正しくページの内容を把握出来ません。また、同じ内容のページタイトルが複数設定されている場合も混乱を招くため、ページの内容に合った
タイトルを設定します。
【対策方針】◆ページタイトルにコンテンツの内容が分かるタイトルを提供する【具体的な実装例】◆ページタイトルにコンテンツの内容が分かるタイトルを提供する<title>利用案内・情報 ≫ アクセス・利用案内 :: 国立科学博物館

National Museum of

Nature and Science,Tokyo</title>【チェック方法】
チェックの際は「miChecker」を使用します。

ウェブコンテンツの順序通りの使いやすいフォーカス順序にする(2.4.3)
関連 JIS 項目：2.4.3 フォーカス順序の達成基準【レベル A】【目的】
ページ操作をキーボードに依存している人の場合、Tab キーでコンテンツ間を移動します。そのため、コンテンツの順番と Tab キーで移動する順番を統一しないとキーボード使用者が混乱します。なので、順序を統一して公平な情報取得を可能にします。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

40

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン【対策方針】◆ウェブコンテンツの順序どおりの使いやすいフォーカス順序にする【具体的な実装例】◆ウェブコンテンツの順序どおりの使いやすいフォーカス順序にする

この場合、音声読み上げブラウザは姓→姓→名→名の順番で読み上げるので、適切に情報が伝わりません。

この場合、音声読み上げブラウザは一人目→姓→名→二人目→姓→名の順に読みます
ので、情報が正しく伝わります。
【チェック方法】
チェックの際は「miChecker」を使用します。

リンクの表現は、リンク先を予測できる内容にする(2.4.4、
2.4.9)
関連 JIS 項目：2.4.4 リンクの目的（コンテキスト内）の達成基準【レベル A】
2.4.9 リンクの目的の達成基準【レベル AAA】
【目的】
リンクの貼られたテキストから移動先ページの予想が出来ない場合、全ての利用者が混乱します。読み上げソフトはリンクのテキストのみを拾うので、リンクを設置する
際は移動先ページの内容が理解出来るテキストにします。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

41

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン【対策方針】◆リンクテキストに「こちら」などの表現は使用しない◆リンク画像やイメージマップはリンク先の内容を予想できるような代替テキストを指定する◆PDF などのファイルをリンクに貼る場合は明記する◆外部サイトにジャンプする場合は明記する【具体的な実装例】◆リンクテキストに「こちら」などの表現は使用しない

来月以降の展示物の詳細についてはこちら

来月以降の展示物の詳細についてはこちら◆リンク画像やイメージマップはリンク先の内容を予想できるような代替テキストを指定する<a href=” https://www.kahaku.go.jp/” alt=””>https://www.kahaku.go.jp/</a><a href=” https://www.kahaku.go.jp/” alt=”国立科学博物館トップページ”>
https://www.kahaku.go.jp/</a>◆PDF などのファイルをリンクに貼る場合は明記する

令和元年度の研究報告(PDF 形式：800kb)◆外部サイトにジャンプする場合は明記する

特別展ミイラ ～「永遠の命」を求めて(※外部サイトに飛びます)【チェック方法】
チェックの際は「miChecker」を使用します。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

42

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

複数の到達手段を提供する(2.4.5)
関連 JIS 項目：2.4.5 複数の手段の達成基準【レベル AA】【目的】
利用者がサイト内で目的のコンテンツを見つける手段を複数用意することで利用者が情報をより早く見つけることができるようになります。例えば、読み上げソフトを用いる視覚障害者の利用者は、ナビゲーションバーから探していくよりも、検索機能を使用してサイト内の適切な部分へナビゲートしていくほうが容易なことがあります。
このため、あらゆるシーンを想定したサイト構築をする必要があります。
【対策方針】◆サイトマップを提供する◆検索機能を提供する【具体的な実装例】◆サイトマップを提供する◆検索機能を提供する【チェック方法】
チェックの際は「miChecker」を使用します。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

43

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

内容が分かる見出しやラベルをつける(2.4.6)
関連 JIS 項目：2.4.6 見出し及びラベルの達成基準【レベル AA】【目的】
読む速度が遅い障害のある利用者及び短期記憶に制約のある利用者にとって、それぞれのセクションの内容を予測できるように見出しが記述されていると役に立ちます。
そのため、利用者がすぐ理解出来る見出し作りをします。
【対策方針】◆内容が分かる見出しをつける◆目的や内容が分かるラベルを提供する【具体的な実装例】◆内容が分かる見出しをつける◆目的や内容が分かるラベルを提供する

お名前(必須)【チェック方法】
チェックの際は「miChecker」を使用します。

フォーカスが視覚的に認識できるようにする(2.4.7)
関連 JIS 項目：2.4.7 フォーカスの可視化の達成基準【レベル AA】【目的】
障害のある利用者にとって、フォーカスされている項目を視覚的に認識しやすくなる
ことでサイト内の利便性が向上します。そのため、リンク文字や画像を設置する際にはフォーカスの可視化を実装する必要があります。
【対策方針】◆リンク文字やリンク画像にフォーカスされた時、変化が起こるようにする◆フォーム等の入力項目にフォーカスされた時、変化が起こるようにする

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

44

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン【具体的な実装例】◆リンク文字やリンク画像にフォーカスされた時、変化が起こるようにする

・フォーカス前の状態：アクセス・利用案内
・フォーカス後の状態：アクセス・利用案内

・フォーカス前の状態：

・フォーカス後の状態：◆フォーム等の入力項目にフォーカスされた時、変化が起こるようにする

・フォーカス前の状態：お名前(必須)・フォーカス後の状態：お名前(必須)【チェック方法】
チェックの際は「miChecker」を使用します。

現在位置が把握できるようにする(2.4.8)
関連 JIS 項目：2.4.8 現在位置の達成基準【レベル AAA】
【目的】
利用者が深い階層のページへ移動した際に、コンテンツを理解したり、関連情報を探すことに役立つので、現在地がサイトのどの場所なのかを明示する必要があります。
【対策方針】【具体的な実装例】◆パンくずリストを提供する<例>◆サイトマップを提供する【チェック方法】
チェックの際は「miChecker」を使用します。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

45

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

読みやすさ(3.1)
言語を指定する(3.1.1、3.2.2)
関連 JIS 項目：3.1.1 ページの言語の達成基準【レベル A】
3.1.2 一部分の言語の達成基準【レベル AA】【目的】
言語を適切に指定すれば読み上げソフトが言語を正しく認識することができるようになります。なので、サイト内で使用する言語は全て指定する必要があります。
【対策方針】◆html 要素の言語属性を用いる◆言語属性を用いて、部分的に用いられている自然言語の変更を指定する【具体的な実装例】◆html 要素の言語属性を用いる<html lang="ja">◆言語属性を用いて、部分的に用いられている自然言語の変更を指定する<p>国立科学博物館<span class=”eigo” lang=”en”>The National Museum of Nature and Science</span></p>【チェック方法】
チェックの際は「miChecker」を使用します。

POINT
この章に関連する以下の JIS 項目についてはレベル AAA の中でも達成条件が難しいため、ガイドラインからは除外します。
関連 JIS 項目：
3.1.3 一般的ではない用語の達成基準【レベル AAA】
3.1.4 略語の達成基準【レベル AAA】
3.1.5 読解レベルの達成基準【レベル AAA】
3.1.6 発音の達成基準【レベル AAA】

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

46

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

予測可能(3.2)
コンテンツにフォーカスしただけでコンテキストの変化を引き起こさない(3.2.1、3.2.5)
関連 JIS 項目：3.2.1 フォーカス時の達成基準【レベル A】
3.2.5 要求による変化の達成基準【レベル AAA】
【目的】
コンテンツにフォーカスしただけ（マウスオーバーした状態）でコンテキストの変化が予期せず起これば視覚障害のある人、認知能力や運動機能に障害のある人はコンテ
キストの変化を理解できない可能性があります。そのため、エンターやクリックなど
利用者のアクションによってコンテキストの変化が起こるよう設定することで、状況をスムーズに理解できるようになります。
【対策方針】◆コンテンツにフォーカスしただけ（マウスオーバーした状態）で、コンテキストの変化を起こさないようにする【具体的な実装例】◆コンテンツにフォーカスしただけ（マウスオーバーした状態）で、コンテキストの変化を起こさないようにする←の１画像では違いがわからない
もう１画像遷移した画像を追加
ポインタでフォーカス(マウスオーバー)しただけでリンクが開いてしまう悪い例

エンターまたはクリックでリンク先が開く良い例【チェック方法】
チェックの際は「miChecker」を使用します。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

47

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

コンテキストの変化を引き起こす前に何が起こるのかを説明し、実行ボタンを提供する(3.2.2)
関連 JIS 項目：3.2.2 入力時の達成基準【レベル A】【目的】
視覚に障害のある人や高齢者など多くの利用者は、ページ上で利用者が意図しない変化が起きてしまうと、その変化に気づかない、またはその変化に戸惑う場合があります。そのため、何かしらの変化を起こす場合には利用者のアクションによっての変化が起こるよう設定することで、状況をスムーズに理解できるようになります。
【対策方針】◆ページの変化を引き起こす時は何が起こるのかを説明し、実行ボタンを提供する◆リンクは原則として別ウィンドウを開く設定にしない【具体的な実装例】◆ページの変化を引き起こす時は何が起こるのかを説明し、実行ボタンを提供する<例>
左の例ではページの変化を引き起こす前に何が起こるかの説明が「確認ボタン」だけでは不足していますが、右の例ではページの変化を引き起こす前に何が起こるかを説明する文があり、「確認ボタン」をクリックすると確認ページへの移動が実行されるということが明示されています。

◆リンクは原則として別ウィンドウを開く設定にしない
リンク設定時に別ウィンドウ表示にするのは、「サイト内以外のページにリンク設定する場合」、「PDF、Word、Excel といったファイルにリンク設定する場合」のみにする。

【チェック方法】
チェックの際は「miChecker」を使用します。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

48

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

一貫したナビゲーションを提供する(3.2.3)
関連 JIS 項目：3.2.3 一貫したナビゲーションの達成基準【レベル AA】【目的】
グローバルナビゲーションのようなどのページでも繰り返し用いられるパーツはページ毎に記載が異なると、利用者の快適性を下げてしまいます。そのため、認知的負担を軽減するためにも、同じような機能は一貫した表記をする必要があります。
【対策方針】◆繰り返されるナビゲーションは毎回同じ順序で提示する【具体的な実装例】◆繰り返されるナビゲーションは毎回同じ順序で提示する<一貫した表記>【チェック方法】
チェックの際は「miChecker」を使用します。

同じ機能を持つコンテンツには一貫した名前や代替テキストを用いる(3.2.4)
関連 JIS 項目：3.2.4 一貫した識別性の達成基準【レベル AA】【目的】
利用者にとって、同じ機能でも名称や造形が異なっていれば、同一物と認識できず混乱する場合があります。そのため、同じ機能を持つコンテンツには一貫した名前や代替テキストを用いることで、利用者がスムーズに情報を理解することができるようにします。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

49

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン【対策方針】◆同じ機能を持つコンテンツには一貫した名前や代替テキストを用いる【具体的な実装例】◆同じ機能を持つコンテンツには一貫した名前や代替テキストを用いる
左の例ではページによってページ先頭へのリンクの表現が異なるため、利用者が混乱します。右の例ではどのページでも一貫した表現が使われているので、利用者がスムーズにサイトを閲覧することが出来ます。

【チェック方法】
チェックの際は「miChecker」を使用します。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

50

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

入力支援(3.3)
フォームにおいてスムーズに入力できるよう配慮する(3.3.2)
関連 JIS 項目：3.3.2 ラベル又は説明の達成基準【レベル A】【目的】
フォームは複数項目の入力をする場合が多いため、音声読み上げブラウザを利用している利用者や、手の不自由な利用者の利便性を考慮する必要があります。そのため、フォームを分かりやすく作ることで、入力に時間のかかる利用者の負担を軽減出来る
ようにします。
【対策方針】◆フォームの先頭で、必須項目や必要とする入力フォーマットの説明文を提供する◆入力条件や入力例などを事前に利用者に分かりやすく伝える◆入力項目とラベルの関係性を明確にする◆隣接するボタンを用いて、テキストフィールドの目的をラベル付けする◆フォームコントロールにグループがある場合は fieldset 要素や legend 要素を用いる【具体的な実装例】◆フォームの先頭で、必須項目や必要とする入力フォーマットの説明文を提供する

お問い合わせフォーム
必須項目は必ず入力してください。
フリガナは全角カナで入力してください

お名前(必須)フリガナ(全角カナ)◆入力条件や入力例などを事前に利用者に分かりやすく伝える

お名前
フリガナ

(必須)
(全角カナ)

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

51

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

お名前(必須)
入力例：山田太郎

フリガナ(全角カナ)
入力例：ヤマダタロウ◆入力項目とラベルの関係性を明確にする

お名前(入力例：山田太郎)◆隣接するボタンを用いて、テキストフィールドの目的をラベル付けする<例>
検索キーワードから探す◆フォームコントロールにグループがある場合は fieldset 要素や legend 要素を用いる
<例>

電話番号
-

-

<fieldset><legend>電話番号</legend><input id="areaCode" name="areaCode" title="市外局番" type="text" size="3" value="" ><input id="exchange" name="exchange" title="電話番号の上 3 桁"type="text" size="3"value=""><input id="lastDigits" name="lastDigits" title="電話番号の下 4 桁" type="text" size="4"value=""></fieldset>【チェック方法】
チェックの際は「miChecker」の音声ユーザビリティ視覚化モードで確認してください。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

52

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

フォームにおいてエラーが起こらないようにする。起こった場
合はエラー箇所を特定できるようにする(3.3.1、3.3.3、3.3.4)
関連 JIS 項目：3.3.1 エラーの特定の達成基準【レベル A】
3.3.3 エラー修正の提案の達成基準【レベル AA】
3.3.4 エラー回避（法的，金融及びデータ）の達成基準【レベル AA】【目的】
フォームを利用する際に、間違って入力した箇所が分からなければ利用者の利便性が下がります。そのため、入力エラーが起きた際はその内容及び修正法が容易に理解出来るようにします。
【対策方針】◆必須項目が入力されていない場合にはエラー箇所をテキストで説明する◆利用者が認められた値以外を入力した場合にはテキストで説明する。可能であればテキストの修正候補を提示する◆利用者が要求されたフォーマット以外の内容を入力した場合にはテキストで説明する。可能であればテキストの修正候補を提示する◆入力エラー時にはバリデーション機能でアラートを表示する。
◆法的義務、金銭的取引に関わるフォームでは送信ボタンに加えてチェックボックスを設ける【具体的な実装例】◆必須項目が入力されていない場合にはエラー箇所をテキストで説明する

お名前(必須)
入力エラー：必須項目が入力されていません◆利用者が認められた値以外を入力した場合にはテキストで説明する。可能であればテキストの修正候補を提示する

訪問日(必須)１２ 月１２ 日
日付が正しくありません。半角英数字で入力してください。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

53

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン◆利用者が要求されたフォーマット以外の内容を入力した場合にはテキストで説明する。可能であればテキストの修正候補を提示する

入力内容が正しくありません。
「年」の値をご確認ください。
訪問日(必須)3020

年１２ 月１２ 日◆入力エラー時にはバリデーション機能でアラートを表示する。

<例 1>

<例 2>
入力エラーがあります。以下をクリックするとエラー箇所にカーソルが移動します。
・お名前を入力してください。
お名前(必須)
入力例：山田太郎◆法的義務、金銭的取引に関わるフォームでは送信ボタンに加えてチェックボックスを設ける【チェック方法】
チェックの際は「miChecker」を使用します。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

54

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

互換性(4.1)
仕様に準じてウェブコンテンツを作成する(4.1.1)
関連 JIS 項目：4.1.1 構文解析の達成基準【レベル A】【目的】
ウェブサイトを構築する上では、HTML 及び CSS のルールに則って制作しなかった場
合、読み上げソフトなどの支援技術が正しく利用出来なくなります。そのため、仕様に基づいた制作が必要になります。
【対策方針】◆ウェブページをバリデートする◆開始タグ及び終了タグを仕様に準じて用いていることを確認する◆ウェブページが「整形式 (well formed)」であることを確認する◆ウェブページの id 属性値が一意的（ユニーク）であるようにする【具体的な実装例】◆ウェブページをバリデートする・HTML・XHTML 構文の検証 Markup Validation Service
URL：https://validator.w3.org/
・CSS 構文の検証 CSS Validation Service
URL：https://jigsaw.w3.org/css-validator/◆開始タグ及び終了タグを仕様に準じて用いていることを確認する<p>一行目</p><p>一行目</p><p>二行目<p>二行目</p>

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

55

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン◆ウェブページが「整形式 (well formed)」であることを確認する<p>文章<div><img src="photo.jpg" alt="常設展"></p></div><p>文章</p><div><img src="photo.jpg" alt="常設展"></div>

POINT
整形式 (well formed)記述であるかどうかは専門家でも見逃しがちなポイン
トです。以下のページに注意点がまとまっているので参照してください。
URL: https://waic.jp/docs/WCAG-TECHS/H75◆ウェブページの id 属性値が一意的（ユニーク）であるようにする<p id="test">テスト</p><p id="test">テスト</p><p id="test">テスト</p><p id="testtest">テスト</p>

POINT
id 属性はたとえ重複で実装していたとしても、表面上は問題なく動いてしまうことが多いので注意してください。

【チェック方法】
チェックの際は W3C の「The W3C Markup Validation Service」(http://validator.w3.org/)などを利用してウェブページをバリデートしてください。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

56

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

識別名及び役割はプログラムが解釈できるようにし、利用者が操作できるようにする(4.1.2)
関連 JIS 項目：4.1.2 名前(name)，役割(role)，及び値(value)の達成基準【レベル A】【目的】
例えば検索ボタンを制作する際は、そのパーツが検索ボタンだとプログラムに解釈してもらえなければ支援技術が理解出来ません。そのため、独自のパーツを実装する場
合はプログラムに識別されるようにします。
【対策方針】◆識別名及び役割はプログラムが解釈でき、なおかつ利用者が操作できるようにする【具体的な実装例】◆識別名及び役割はプログラムが解釈でき、なおかつ利用者が操作できるようにする

キーワードから探す

検索<input type="image" src="search.gif" alt="サイト内検索" id="search" />【チェック方法】
チェックの際は「miChecker」を使用します。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

57

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン<巻末資料>
ウェブアクセシビリティ
実装チェックリスト
2020/3/26

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

58

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

１.実装チェックの方法
実装チェックの方法
ウェブページを作成した事業者は、納品前に後に記載されている JISX8341-3:2016 のレベ
ル A、AA(場合によりレベル AAA)に基づく実装チェックリストを使用し、実装チェックを実施してください。また、実装チェックの際に達成方法について不明な点がありました
ら、本ガイドラインをご参照ください。

使用ツール
michecker
michecker は JISX8341-3:2016（高齢者・障害者等配慮設計指針－情報通信における機器，
ソフトウェア及びサービス－第 3 部：ウェブコンテンツ）に基づくウェブアクセシビリテ
ィ対応の取組を支援するために、総務省が開発し、提供するアクセシビリティ評価ツールです。チェック作業は基本的にこのツールを用いて実施しますので総務省から発行されている以下の PDF を見て環境を整えてください。
URL:http://www.soumu.go.jp/main_content/000594199.pdf

POINT
michecker 以外にも有用なツールが多数存在します。
その中からいくつか紹介しますので各自の判断でご使用ください。
・W3CValidator(英語)W3C の公式ツールで、構築した HTML がウェブアクセシビリティのルールに従っているかどうかをチェックできます。
URL:http://validator.w3.org/
・AccessibilityDeveloperToolsforChrome(英語)グーグルクロームの拡張機能で、デベロッパーツールにアクセシビリティ監査
オプションが追加されます。
URL: https://chrome.google.com/webstore/detail/accessibility-developert/fpkknkljclfencbdbgkenhalefipecmb?hl=ja

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

59

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

コントラストチェッカー
コントラストチェッカーについては公的機関が提供しているツールは無く、制作者が自身で導入するツールでのチェックとなります。ここでは 2019 年 12 月現在で有用と思われる
ツールをいくつか記載します。各々の判断でご使用ください。
・Contrast(Mac 専用)
前景と背景の色をピッカーで選ぶだけで WCAG に準拠した色のコントラストになっているかすぐにチェックができます。ショートカットを設定できるので手軽に色のコントラス
ト比の確認が出来ます。
URL:https://usecontrast.com/
・snook.ca(英語)ウェブサービスなので OS の制約を受けず、様々な端末で使用で出来るサービスです。
URL:https://snook.ca/technical/colour_contrast/colour.html
・ColorZilla(英語)Firefox と GoogleChrome の機能拡張で、カーソルが合った場所の色を拾うことができます。デザイン段階とモニター上で色の差異が発生することも多々あるので、この機能を使用してモニター上でのコントラストを確認してください。
URL:
https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

60

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

２.実装チェックリスト
代替テキストのガイドライン(1.1)
ウェブページが画像、・ライブ音声・ライブ映像・動画・object 要素のいずれかを含む場
合、達成できていれば「OK」、できていなければ「NG」、該当するコンテンツがなければ「該当なし」に○をつけてください。「OK」か「該当なし」か不明な場合、どちらに○をつけていただいても問題ありません。検証項目の正しい実装が不明である場合には、本ガイドライン「２．アクセシビリティ対応」の「２－１．代替テキストのガイドライン」を確認してください。
# 検証項目レベル

OK

NG 該当なし

１）非テキストコンテンツに代替テキストを提供する
1.1.1非テキストコンテンツの達成基準【レベルA】

①
②
③
④

画像データ内にテキストがレイアウトされている場合、その画像に表示されているテキストが alt属性値に入力されている。

A

情報として使用している画像データには、画像内容が理解できるテキストがalt属性
値に入力されている。
title属性が入力されている場合でもalt属性は必要となり、title属性とalt
属性の入力内容が重複していない。
alt属性値が必要となる画像データにおいては、CSSでの表示設定がおこなわれていない。

A

装飾目的の背景画像など意味を持たない画像データは、alt属性値が空（alt=””）とな⑤ り、title属性が付与されない。またはCSSでの表示設定がなされていAる。

⑥ 画像データのalt属性値と、隣り合うテキストの内容が重複していない。
⑦⑧

イメージマップのarea要素にalt属性値に画像内容が理解できるテキス
トが入力されている。
実行ボタンとして用いる画像に実行内容を表したテキストがalt属性値として設定されている。

AA
A

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

61

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

画像データに一般に認められた名前又は内容が分かる名前を提供してい⑨ る。(例：alt=”絵画”→alt=”フィンセント・ファン・ゴッホ《ひまわAり》1888年”)⑩⑪

ライブ配信の音声データ・映像データにおいて内容が理解できるテキス
トが併記されている。。
外部リソースを埋め込む際に使用するobject要素のボディへ代替テキス
トが記述されている。

A
A

時間依存メディア(1.2)
ウェブページが音声や映像を含む場合、達成できていれば「OK」、できていなければ「NG」、該当するコンテンツがなければ「該当なし」に○をつけてください。「OK」か「該当なし」か不明な場合、どちらに○をつけていただいても問題ありません。検証項目の正しい実装が不明である場合には、本ガイドライン「２．アクセシビリティ対応」の「２－２．時間依存メディア」を確認してください。
# 検証項目

レベル

OK

NG

該当なし

１）音声だけ及び映像だけ（収録済み）に代替コンテンツを提供する
1.2.1音声だけ及び映像だけ（収録済み）の達成基準【レベルA】①

音声データと同等の情報をテキスト等でも提供している。（例）歌詞など② 映像データと同等の情報をテキストでも提供している。

AA

２）時間依存メディアの音声と映像に代替コンテンツを提供する
キャプション（収録済み）の達成基準【レベルA】
音声解説又はメディアに対する代替コンテンツ（収録済み）の達成基準【レベルA】①

映像データにおいて、映像と同期した音声またはテキストが提供されている。

A

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

62

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

適応可能(1.3)
達成できていれば「OK」、できていなければ「NG」、該当するコンテンツがなければ「該当なし」に○をつけてください。
「OK」か「該当なし」か不明な場合、どちらに○をつけていただいても問題ありません。検証項目の正しい実装が不明である場合には、本ガイドライン「２．アクセシビリティ対応」の「２－３．適応可能」を確認してください。
# 検証項目

レベル

OK

NG

該当なし

１）ウェブコンテンツの情報と関係性を適切にマークアップする
1.3.1情報及び関係性の達成基準【レベルA】①

h1要素～h6要素を順序よく用いている。
注）h3→h2のように順序が逆になっている場合はNGとなります。

② リストには、ol要素、ul要素、dl要素を用いている。
③

デザインの為の要素をCSSで設定し、HTMLでは使用していない。
（例）fontcolor、fontsize、b等

AAA

太字等の強調箇所はstrong、em要素、
参照箇所にcite要素、④ 引用箇所にblockquote要素、A

下付き文字、上付き文字に、sub、sup要素を用いている。
テキスト表現のバリエーションでの情報伝達をおこなって⑤ いない。

A（例）「斜体の文字は更新箇所」等はNGとなります。

⑥⑦

レイアウト目的で<table>は基本的に使用しない。使用する際
は、th、summary、captionを使用していない。
データtableを使用する際は、caption、tr、th、tdを使用している。

AAlabel要素を用いて、テキストのラベルを関連付けている。label⑧ 要素を用いることができないとき、title属性を用いて適切に値をA

入力している。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

63

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

ページにコンテンツを追加する場合、DOM（ドキュメント・オブジ⑨ ェクト・モデル）を用いる。少なくともHTML内にA

document.write()やinnerHTML()は用いていない。

⑩ 関連したリンクをグループ化するために、nav要素を使用する。

A２）コンテンツの意味を理解するのに必要な音声読み上げの順序を保つ
1.3.2意味のある順序の達成基準【レベルA】① コンテンツ内容が理解できる順序で並べている。
②

単語の文字間にレイアウト目的でのスペースやタグを用いていない。

AA３）理解すべき情報を感覚的にだけ伝えることのないようにテキストでも情報を伝える
1.3.3感覚的な特徴の達成基準【レベルA】①

利用者が理解すべき情報が感覚的な表現となっていない。
（例）「大きなボタンを押してください」等はNGとなります。

A

識別可能(1.4)
達成できていれば「OK」、できていなければ「NG」、該当するコンテンツがなければ「該当なし」に○をつけてください。
「OK」か「該当なし」か不明な場合、どちらに○をつけていただいても問題ありません。検証項目の正しい実装が不明である場合には、本ガイドライン「２．アクセシビリティ対応」の「２－４．識別可能」を確認してください。
# 検証項目

レベル

OK

NG

該当なし

１）色の違いだけで情報を伝えない
1.4.1色の使用の達成基準【レベルA】
リンク又はコントロールは、その文字色と周囲にあるテキストと① のコントラスト比を3:1以上にしている。又は下線を表示していAる。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

64

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

テキストの色の違いで情報を伝える際は、視覚的な手がかりを補足している。

② 又は、色の違いで伝えている情報をテキストでも伝えている。

A

又は、色とパターンを併用している。

２）利用者の要求に応じてのみ、音声を再生する
1.4.2音声の制御の達成基準【レベルA】①

音声データの自動再生をおこなっておらず、利用者の要求に応じてのみ音声を再生がおこなえる。

A３）背景と文字のコントラストを十分に確保する
1.4.3コントラスト（最低限レベル）の達成基準【レベルAA】
太字でないテキストが18ポイント（日本語は22ポイント）未満、①

太字のテキストが14ポイント（日本語は18ポイント）未満の場
合：テキスト（及び画像化された文字）とその背景の間に、4.5:1

AA

以上のコントラスト比をもっている。
太字でないテキストが18ポイント（日本語は22ポイント）以上、②

太字のテキストが14ポイント（日本語は18ポイント）以上の場
合：テキスト（及び画像化された文字）とその背景の間に、3:1

AA

以上のコントラスト比をもっている。

③

対象となる文字がロゴまたはブランド名の一部である場合は適用
外とする。

AA

４）テキストのサイズを利用者が変更できるようにする
1.4.4テキストのサイズ変更の達成基準【レベルAA】
テキストやテキストコンテナのサイズ指定には、pxやpt等の絶① 対指定ではなく、em、％、キーワード等の相対指定を用いてい

AA

る。

②

文字を200％以上に拡大して、コンテンツの機能が損なわれている箇所が無い。

AA５）必要不可欠な場合を除いて、文字を画像化しいない
1.4.5文字画像の達成基準【レベルAA】①

ロゴやデザイン上必要不可欠な場合を除いて、文字を画像化しない。
注）アンチエイリアスがオフの文字はNGとなります。

AA

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

65

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

キーボード操作可能(2.1)
達成できていれば「OK」、できていなければ「NG」、該当するコンテンツがなければ「該当なし」に○をつけてください。
「OK」か「該当なし」か不明な場合、どちらに○をつけていただいても問題ありません。検証項目の正しい実装が不明である場合には、本ガイド
ライン「２．アクセシビリティ対応」の「２－５．キーボード操作可能」を確認してください。
# 検証項目

レベル

OK

NG

該当なし

１）キーボードのみで操作できるようにする
2.1.1キーボードの達成基準【レベルA】
マウスを使わず、キーボード操作のみでウェブページのすべて① のコンテンツを操作でき、別のページへも移動することができAる。

2.1.2キーボードトラップなしの達成基準【レベルA】
ユーザーがキーボード操作でフォーカスを移動させている際② に、コンテンツの一部分にフォーカスが閉じ込められてしまうA

ことがない。

2.1.3キーボード（例外なし）の達成基準【レベルAAA】③

マウスによるクリック、またはキーボードによるエンターでアクションが起こるよう設定している。

AAA

十分な時間(2.2)
達成できていれば「OK」、できていなければ「NG」、該当するコンテンツがなければ「該当なし」に○をつけてください。
「OK」か「該当なし」か不明な場合、どちらに○をつけていただいても問題ありません。検証項目の正しい実装が不明である場合には、本ガイド
ライン「２．アクセシビリティ対応」の「２－６．十分な時間」を確認してください。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

66

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン# 検証項目

レベル

OK

NG

該当なし

１）制限時間は原則として設けない
2.2.1タイミング調整可能の達成基準【レベルA】①

ユーザーアクション完了までの制限時間は原則として設けていない。又は設定する必要がある場合は、20時間以上としている。

A

２）自動更新するコンテンツや動きのあるコンテンツは、利用者が停止できるようにする
2.2.2一時停止，停止及び非表示の達成基準【レベルA】①②

スライド、スクロールするコンテンツを停止または非表示にすることができる。
自動更新するコンテンツを一時停止させて、一時停止させたところから再開できるようにしている。

AA

点滅するコンテンツは原則として使用しない。

③ 使用する必要がある場合は、5秒未満で点滅が終わるようにコンA

テンツを作成している。

④

アニメーションGIFを使用している場合、数回のループ後（5秒以内）に停止するように設定している。

A

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

67

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

発作の防止(2.3)
達成できていれば「OK」、できていなければ「NG」、該当するコンテンツがなければ「該当なし」に○をつけてください。
「OK」か「該当なし」か不明な場合、どちらに○をつけていただいても問題ありません。検証項目の正しい実装が不明である場合には、本ガイド
ライン「２．アクセシビリティ対応」の「２－７．発作の防止」を確認してください# 検証項目

レベル

OK

NG

該当なし

１）閃光を放つコンテンツは原則として設けない
2.3.1３回の閃光又は閾値以下の達成基準【レベルA】
閃光を放つコンテンツは原則として設けていない。又は設ける必① 要がある場合は、1秒間3回以下とし、閃光を放つエリアを十分に小Aさくしている。

ナビゲーション可能(2.4)
達成できていれば「OK」、できていなければ「NG」、該当するコンテンツがなければ「該当なし」に○をつけてください。
「OK」か「該当なし」か不明な場合、どちらに○をつけていただいても問題ありません。検証項目の正しい実装が不明である場合には、本ガイド
ライン「２．アクセシビリティ対応」の「２－８．ナビゲーション可能」を確認してください。
# 検証項目

レベル

OK

NG

該当なし

１）ブロックスキップができるようにする
2.4.1ブロックスキップの達成基準【レベルA】①②

コンテンツの各セクションの開始位置に見出し要素でタイトルを提供している。
ページレイアウトにおいてフレームは使用していない。もしフレームを用いている場合にはtitle属性を付与している。

AA

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

68

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

２）ページの内容を予測できるようなページタイトルをつける
2.4.2ページタイトルの達成基準【レベルA】①

ページタイトル末尾に「ｘｘｘｘｘ：国立科学博物館」と記入

Aし、更にコンテンツの内容が分かるタイトルを提供している。

３）ウェブコンテンツの順序どおりの使いやすいフォーカス順序にする

2.4.3フォーカス順序の達成基準【レベルA】①

キーボード操作をした時、ウェブコンテンツの表示順序がフォー
カス順序となっている。

A４）リンクの表現は、リンク先を予測できる内容にする

2.4.4リンクの目的（コンテキスト内）の達成基準【レベルA】
2.4.9リンクの目的の達成基準【レベルAAA】
リンクテキストは、それだけでリンク先が予測できる内容にし、「→」な① どの表現は使用していない。

リンク画像やイメージマップは、リンク先の内容を予想できるよ② うな代替テキストを指定している。

A/AAA
A/AAA

PDFなどHTML以外のファイルにリンクをはる場合は、データカ③ テゴリーやデータサイズを記載し、分かりやすさが配慮されてい A/AAA
る。

④

外部サイトにリンクをおこなう場合は、外部リンクであることを分かりやすい手法で表現している。

A/AAA

５）複数の到達手段を提供する
2.4.5複数の手段の達成基準【レベルAA】① サイト全体のサイトマップを提供している。

AA② 検索機能を提供している。

AA

６）内容が分かる見出しやラベルをつける
2.4.6見出し及びラベルの達成基準【レベルAA】① 本文の概要が分かる見出しをつけている。

AA② 目的や内容が分かるラベルをつけている。

AA

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

69

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

７）フォーカスが視覚的に認識できるようにする
2.4.7フォーカスの可視化の達成基準【レベルAA】
リンク文字やリンク画像、又はフォーム等の入力項目にフォーカス
された時、フォーカスインジケータやカーソルが適切に表示されてい①るAA（CSS等でフォーカスインジケータやカーソルを消していない）

８）現在位置が把握できるようにする
2.4.8現在位置の達成基準【レベルAAA】① パンくずリストを提供している。

AAA② サイトマップを提供しているAAA

読みやすさ(3.1)
達成できていれば「OK」、できていなければ「NG」、該当するコンテンツがなければ「該当なし」に○をつけてください。
「OK」か「該当なし」か不明な場合、どちらに○をつけていただいても問題ありません。検証項目の正しい実装が不明である場合には、本ガイドラ
イン「２．アクセシビリティ対応」の「２－９．読みやすさ」を確認してください。
# 検証項目

レベル

OK

NG

該当なし

１）言語を指定する
3.1.1ページの言語の達成基準【レベルA】① html要素の言語属性（lang 属性）を用いている。

A

3.1.2一部分の言語の達成基準【レベルAA】①

部分的に用いられている自然言語の変更を言語属性（lang 属性）を用いて、指定している。

AA

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

70

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

予測可能(3.2)
達成できていれば「OK」、できていなければ「NG」、該当するコンテンツがなければ「該当なし」に○をつけてください。
「OK」か「該当なし」か不明な場合、どちらに○をつけていただいても問題ありません。検証項目の正しい実装が不明である場合には、本ガイドラ
イン「２．アクセシビリティ対応」の「２－１０．予測可能」を確認してください。
# 検証項目

レベル

OK

NG

該当なし

１）コンテンツにフォーカスしただけでコンテキストの変化を引き起こさない
3.2.1フォーカス時の達成基準【レベルA】
3.2.5要求の変化の達成基準【レベルAAA】
コンテンツにフォーカスしただけ（マウスオーバーした状態）① で、コンテキスト（フォームの送信や新規ウインドウの作成なA/AAAど）の変化を起こさないようにする

２）コンテキストの変化を引き起こす前に何が起こるのかを説明し、実行ボタンを提供
する
3.2.2入力時の達成基準【レベルA】①

コンテキストの変化を引き起こす前に何が起こるのかを説明し、実行ボタンを提供している。

② リンクは別ウィンドウまたはタブを開く前に利用者に知らせる

A
達成基準
外

３）一貫したナビゲーションを提供する
3.2.3一貫したナビゲーションの達成基準【レベルAA】①

同一カテゴリ内のウェブページは共通したナビゲーションを採用
している。

AA

４）同じ機能を持つコンテンツには一貫した名前や代替テキストを用いる
3.2.4一貫した識別性の達成基準【レベルAA】①

同じ機能を持つコンテンツには一貫した名前や代替テキストを用
いている。

AA

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

71

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

入力支援(3.3)
フォームを含む場合、達成できていれば「OK」、できていなければ「NG」、該当するコンテ
ンツがなければ「該当なし」に○をつけてください。「OK」か「該当なし」か不明な場
合、どちらに○をつけていただいても問題ありません。検証項目の正しい実装が不明である場合には、本ガイドライン「２．アクセシビリティ対応」の「２－１１．入力支援」を確認してください。
# 検証項目

レベル

OK

NG

該当なし

１）フォームにおいてスムーズに入力できるよう配慮する
3.3.2ラベル又は説明の達成基準【レベルA】①②

入力フォームの先頭で、必須項目や必要となる入力フォーマット
に関する説明文を提供している。
入力条件や、入力例などを事前に利用者に分かりやすく伝えている。

AAlabel要素を用いて、テキストのラベルとフォームコントロール③ を関連付けている。label要素を用いることができないとき、title属性

Aを用いてフォームコントロールを特定している。

④⑤

隣接するボタンを用いて、テキストフィールドの目的をラベル付けしている。
フォームコントロールにグループがある場合は、fieldset要素及びlegend要素を用いている。

AA２）フォームにおいてエラーが起らないよう、起った場合はエラー箇所を特定できるようにする
3.3.1エラーの特定の達成基準【レベルA】
3.3.3エラー修正の提案の達成基準【レベルAA】①②

必須項目が入力されていない場合には、エラー箇所をテキストで説明している。
利用者が認められた値以外を入力した場合には、テキストで説明し、可能であればテキストの修正候補を提示している。

A/AA
A/AA

利用者が要求されたフォーマット以外の内容を入力した場合に③ は、テキストで説明し、可能であればテキストの修正候補を提示 A/AA
している。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

72

独立行政法人国立科学博物館
ウェブアクセシビリティガイドライン

入力エラー時には、クライアントサイドのバリデーションによっ④ て、アラートを表示している。又はテキストでエラーを表示して A/AAいる。

⑤

送信する前に、利用者が回答を確認及び修正できるようにしている。

3.3.4エラー回避（法的，金融及びデータ）の達成基準①

法的義務、金銭的取引に関わるフォームでは、送信ボタンに加えて、確認の為のチェックボックスを設けている。

A/AA【レベルAA】
AA

互換性(4.1)
達成できていれば「OK」、できていなければ「NG」、該当するコンテンツがなければ「該当なし」に○をつけてください。
「OK」か「該当なし」か不明な場合、どちらに○をつけていただいても問題ありません。検証項目の正しい実装が不明である場合には、本ガイドラ
イン「２．アクセシビリティ対応」の「２－１２．互換性」を確認してください。
# 検証項目

レベル

OK

NG

該当なし

１）仕様に準じてウェブコンテンツを作成する
4.1.1構文解析の達成基準【レベルA】
バリデーターを用いて作成したウェブページを検証した結果、バリデートエラーがない。参考バリデーター）① W3CMarkupValidationService（https://validator.w3.org/）

A注）SNSのタグは除く。

Copyright (c) National Museum of Nature and Science. All Rights Reserved.

73