公立碓氷病院ホームページ
ウェブアクセシビリティガイドライン

平成 30 年 3 月 30 日作成
平成 30 年 10 月 1 日改定

＜目次＞
1 はじめに................................................................................................ 1(1) 本ガイドラインの目的.................................................... 1(2) ガイドラインの適用範囲.................................................. 1(3) ウェブアクセシビリティについて .......................................... 1(4) 根拠となる法や規格など.................................................. 1(5) 配慮の対象となる利用者.................................................. 2(6) ガイドラインの見直し.................................................... 22 代替テキストに関して ............................................................................... 3(1) 非テキストコンテンツに代替テキストを提供する ............................ 33 適応可能................................................................................................ 4(1) ウェブコンテンツの情報と関係性を適切にマークアップする .................. 4(2) コンテンツの意味を理解するのに必要な音声読み上げの順序を保つ ............ 6(3) 理解すべき情報を感覚的にだけ伝えることのないように、テキストでも情報を伝える .... 6
4 識別可能................................................................................................ 7(1) 色の違いだけで情報を伝えない............................................ 7(2) 背景と文字のコントラストを十分に確保する ................................ 7(3) テキストサイズを利用者が変更できるようにする ............................ 8(4) 必要不可欠な場合を除いて、文字を画像化しない ............................ 8
5 キーボード操作可能.................................................................................. 9(1) キーボードのみで操作できるようにする .................................... 9(2) キーボードフォーカスを閉じ込めない ...................................... 96 発作の防止 ........................................................................................... 10(1) 閃光を放つコンテンツは原則として設けない ............................... 107 ナビゲーション可能................................................................................ 11(1) ブロックスキップができるようにする ..................................... 11(2) ページ内容を予測できるようなページタイトルをつける ..................... 11(3) ウェブコンテンツの順序どおりの使いやすいフォーカス順序にする ........... 11(4) リンクの表現は、リンク先を予測できる内容にする ......................... 12(5) 複数の到達手段を提供する............................................... 12(6) 内容がわかる見出しやラベルをつける ..................................... 13(7) フォーカスが視覚的に認識できるようにする ............................... 13

8 予測可能.............................................................................................. 14(1) フォーカスを受け取ったときにコンテキストの変化を引き起こさない ......... 14(2) 一貫したナビゲーションを提供する ....................................... 15
9 互換性 ................................................................................................ 16(1) 仕様に準じてウェブコンテンツを作成する ................................. 16(2) 識別名及び役割はプログラムが解釈できるようにする ....................... 16
用語解説.....................................................................................................17

1 はじめに(1) 本ガイドラインの目的
公立碓氷病院ホームページウェブアクセシビリティガイドライン(以下、「本ガイドライン」という。)は、日本工業規格1「JIS X 8341-3:2016」を踏まえ、公立碓氷病院のウェブサイトにおいて、年齢、身体的条件や閲覧環境にかかわらず、利用者の誰もが提供される情報を支障なく利用できることを目的とします。

(2) ガイドラインの適用範囲
本ガイドラインは、公立碓氷病院ホームページ (https://usui-hospital.jp/で始まるページすべてを指す。)を適用範囲とします。

(3) ウェブアクセシビリティについて
ウェブアクセシビリティとは、「高齢者や障害者を含めて、誰もがホームページ等で提供される情報や機能を支障なく利用できること」を意味します。

(4) 根拠となる法や規格など
ア 日本工業規格 JIS X 8341-3:2016
平成 16 年 6 月に JIS X 8341-3:2004「高齢者・障害者等配慮設計指針 －情報通信における機器、ソフトウェア及びサービス －第 3 部：ウェブコンテンツ」が初めて制定されました。平成 18 年 12 月、「WCAG(Web Content Accessibility Guidelines)2.0」2が W3C(WorldWide Web Consortium)3勧告となったことを受け、平成 22 年 8 月に、WCAG2.0 を包含する形
で JIS X 8341-3 が全面改正され、「JIS X 8341-3:2010」となりました。その後、平成 24 年10 月に「WCAG2.0」は、「ISO4/IEC5 40550:2012」になりました。そして、WCAG2.0 が ISO/IECの国際規格になったことを受けて、その一致規格となるように平成 28 年 3 月に改正され、「JIS X 8341-3:2016」となりました。

イ 障害者の権利に関する条約、障害者基本法と障害を理由とする差別の解消の推進に関する法律
日本は、平成 25 年に障害者基本法6を改正するとともに、障害を理由とする差別の解消の推進に関する法律(障害者差別解消法)7を公布しました。障害者の権利に関する条約8の求める水準に達したことから、平成 26 年 1 月 20 日に同条約を批准しました。その後、障害者差1

別解消法が平成 28 年 4 月 1 日に施行されました。

ウ みんなの公共サイト運用ガイドライン(2016 年版)
総務省は、JIS X 8341-3:2016 の改正公示と障害者差別解消法の施行を踏まえ、「みんなの公共サイト運用ガイドライン(2016 年版)」を平成 28 年 4 月に公表しました。国や地方公共団体などの公的機関のウェブコンテンツが、誰もが利用しやすいものとなるように、公的機関がウェブアクセシビリティの確保、維持や向上に取り組む際の取組の支援を目的として作成されました。公的機関は当ガイドラインにより、JIS X 8341-3:2016 の適合レベル AAに準拠することが求められています。

(5) 配慮の対象となる利用者
本ガイドラインは、公立碓氷病院ウェブサイトを訪れる全ての利用者を配慮の対象とします。

(6) ガイドラインの見直し
利用者の閲覧環境の変化やウェブサイトの制作技術の変化に対応するため、本ガイドラインを年 1 回見直すこととします。

2

2 代替テキストに関して(1) 非テキストコンテンツに代替テキストを提供する＜関連 JIS 項目:1.1.1

非テキストコンテンツの達成基準＞【ルール】✔画像を掲載する際には、代替文字(alt 属性)9を付与する。
✔同一の代替文字が繰り返されることがないようにする。

【メリット】
画像などのテキストではない情報は、代替文字を提供することで、利用者が必要とする形式に変換し利用することができます。また、利用者が画像を非表示にしている場合には、代替文字が画像の内容を伝えます。
箇条書きのマークなどの意味を持たない画像に、代替文字は必要ありません。
【対応例】
悪い例

講座のお知らせ

代替文字：「設定なし」
左記の画像に代替文字を設定しない場合、音声読み上げブラウザでは、何も読み上げられず、次に表記された「日時と場所」だけが読

日時：平成 30 年 4 月 11 日 10 時からみ上げられます。
場所：公立碓氷病院

良い例

講座のお知らせ

代替文字：「講座のお知らせ」
代替文字を設定することで、音声読み上げブラウザで「講座のお知らせ」と読み上げられ

日時：平成 30 年 4 月 11 日 10 時からるので、利用者に正しい情報を伝えられま

場所：公立碓氷病院す。

3

3 適応可能(1) ウェブコンテンツの情報と関係性を適切にマークアップする＜関連 JIS 項目:1.3.1

情報及び関係性の達成基準＞【ルール】✔見出し要素は HTML10文法にのっとって使用する。
✔箇条書きを掲載する場合には、リスト要素を使用する。
✔表を使用する際には、見出しとキャプション(表の表題)を記述する。
✔視覚情報による表現のみで情報を伝えない。

【メリット】
ウェブコンテンツの文書構造に応じた適切な HTML 要素を用いることにより、文字の大きさ、太さや色など視覚的な情報に頼ることなく、文書の内容が理解しやすくなります。
【対応例 1：見出し要素の使用順序について】
悪い例

良い例

良い例

表題

表題

表題

大見出し

大見出し

大見出し

小見出し

中見出し

中見出し

中見出し

小見出し

中見出し

見出しの順番は、「大見出し(h2)」、「中見出し(h3)」、「小見出し(h4)」の順で掲載します。
h1 は既に設定されているため、h2 から設定します。
スクリーンリーダーでは、見出しだけをピックアップして読み進むことができます。そのため、見出しが設定されていない場合は、目的コンテンツにたどり着くまで、すべての文章を読み上げなければならず、時間がかかってしまいます。

4【対応例 2：表の作成について】
良い例

募集要項 1表題(キャプション)

採用人員○○名

賃金

時給○○円

受験資格

▲▼▲

応募期日

随時受付

見出し

表題を設定することでセル内の内容が「募集要項 1」に関する表であり、「採用人員」、「賃金」、「受験資格」、「応募期日」の情報が提供されていることがわかります。

5

(2) コンテンツの意味を理解するのに必要な音声読み上げの順序を保つ＜関連 JIS 項目:1.3.2

意味のある順序の達成基準＞【ルール】✔文中にレイアウト目的でスペースや改行を使用しない。
✔年月日に使用されるスラッシュ(/)や時刻に使用されるコロン(:)などの記号は極力使用しない。
✔表は読み上げ順を考慮して内容を理解しやすくなるように作成する。

【メリット】
音声読み上げブラウザでは、改行箇所、スペースで休止します。そのため、意図しない内容で文章が読み上げられることを防ぎます。また、記号表記した場合でも、音声読み上げブラウザでは意図しない内容で読み上げられることを防ぎます。
【具体例 1：単語や文字間にスペースを用いている場合】
悪い例

良い例

時 間(トキ アイダ)時間(ジカン)【具体例 2：年月日や時刻の表記】
悪い例

良い例

4/1(ヨンブン ノ イチ)

4 月 1 日(シガツツイタチ)

8:30(ハチ コロン サンジュウ)

8 時 30 分(ハチジサンジュップン)H30(エイチサンジュウ)

平成 30 年(ヘイセイサンジュウネン)(3) 理解すべき情報を感覚的にだけ伝えることのないように、テキストでも情報を伝える＜関連 JIS 項目:1.3.3

感覚的な特徴の達成基準＞【ルール】✔形、大きさや位置など感覚的な特徴だけで説明せず、テキスト情報を補足する。

【メリット】
視覚的に障害のある利用者が、形や位置以外の情報を補足することで、形や位置だけで伝えられている情報を理解できるようになります。

6

4 識別可能(1) 色の違いだけで情報を伝えない＜関連 JIS 項目:1.4.1

色の使用の達成基準＞【ルール】✔色のみで「情報を伝える」表記はしない。

【メリット】
色覚障害を有する利用者や音声読み上げブラウザを使用している利用者は、色の区別をすることが難しいです。そのため、「赤字はエラー」など、色の違いだけで情報の違いを表現されると正しく意図が伝わらないので、テキスト情報で表記することで、内容理解のための手がかりを見たり聞いたりすることができます。

(2) 背景と文字のコントラストを十分に確保する＜関連 JIS 項目:1.4.3

コントラスト(最低限レベル)の達成基準＞【ルール】✔画像内に文字が配置されている場合は、文字の背景色と前景色のコントラストに配慮し使用する。

【メリット】
画像内の文字色と背景色のコントラストを十分に確保できていない場合、高齢者をはじめとする多くの利用者は、内容をうまく認識できません。そのため、画像内に文字が配置された画像を使用する場合は文字を識別しやすい画像を使用することで、文字がより見やすくなります。
なお、コントラストの確認には、フリーツール「Colour Contrast Analyser」などが使用できます。

7

(3) テキストサイズを利用者が変更できるようにする＜関連 JIS 項目:1.4.4

テキストのサイズ変更の達成基準＞【ルール】✔利用者がテキストのサイズを任意で 200％までサイズを変更できるようにする。

【メリット】
軽度の視覚障害を持つ利用者が、画面拡大ソフトのような支援技術を使わず、そのまま読むことができます。

(4) 必要不可欠な場合を除いて、文字を画像化しない＜関連 JIS 項目:1.4.5

文字画像の達成基準＞【ルール】✔必要不可欠な場合を除いて、文字を画像化しない。

【メリット】
文字を画像化しないことで、文字の拡大や色の変更など利用者が閲覧しやすい状態に変更できるようになります。

85 キーボード操作可能(1) キーボードのみで操作できるようにする＜関連 JIS 項目:2.1.1

キーボードの達成基準＞【ルール】✔可能な限り、コンテンツをキーボード又は (代替キーボードが利用できるような)キーボードインタフェースで操作できるようにする。

【メリット】
マウスを使用することが困難で主にキーボードを使用している利用者がコンテンツを利用しやすくなります。

(2) キーボードフォーカスを閉じ込めない＜関連 JIS 項目:2.1.2

キーボードトラップなしの達成基準＞【ルール】✔キーボード又はキーボードインタフェースだけを使用している利用者がウェブコンテンツを利用できるようにする。

【メリット】
全盲の人や身体障害のある人など、キーボード又はキーボードインタフェースだけを使用している利用者がコンテンツを利用できるようになります。

9

6 発作の防止(1) 閃光を放つコンテンツは原則として設けない＜関連 JIS 項目:2.3.1

3 回の閃光又は閾値以下の達成基準＞【ルール】✔閃光を放つコンテンツは原則として公開しない。

【メリット】
閃光を放つコンテンツを閲覧しているときに発作を起こす可能性のある利用者は、発作を起こすことなく、サイト上のコンテンツを閲覧することが可能になります。

10

7 ナビゲーション可能(1) ブロックスキップができるようにする＜関連 JIS 項目:2.4.1

ブロックスキップの達成基準＞【ルール】✔複数のウェブページ上で繰り返されるコンテンツのブロックをスキップする機能を提供する。
✔コンテンツの各セクションの開始位置に見出し要素を提供する。

【メリット】
キーボード又はキーボードインタフェースだけを使用している利用者が、より少ないキーストロークだけでコンテンツに到達できるようになります。

(2) ページ内容を予測できるようなページタイトルをつける＜関連 JIS 項目:2.4.2

ページタイトルの達成基準＞【ルール】✔ページの内容が伝わるタイトルを設定する。

【メリット】
ウェブページにある情報が自分のニーズに関係があるかどうかを、すべての利用者が素早くかつ容易に確認できるようになります。

(3) ウェブコンテンツの順序どおりの使いやすいフォーカス順序にする＜関連 JIS 項目:2.4.3

フォーカス順序の達成基準＞【ルール】✔文書の内容や構造を無視した表示位置の指定をしない。

【メリット】
コンテンツ内を順番に行き来していて、フォーカス順序が音声読み上げ順序と一致しているものと考えている、キーボードの利用者に役立ちます。

11

(4) リンクの表現は、リンク先を予測できる内容にする＜関連 JIS 項目:2.4.4

リンクの目的（コンテキスト内）の達成基準＞【ルール】✔同一ページ内にリンク先の異なる複数の同一リンクテキストを用いない。
✔リンクの目的が、PDF11などの場合、ファイル形式をリンクテキストに含める。
✔「詳細」「こちら」などの曖昧なリンクテキストを用いる場合には、前後の文脈からリンク先の内容が予測できるように配慮する。

【メリット】
障害のある利用者が、必要のないリンクをスキップできたり、リンクの目的を判断できるようになります。
【具体例 1：リンクテキスト】
悪い例
当院広報誌うすい 9 号が発行されました。詳細はこちらをごらんください。
良い例
当院広報誌うすい 9 号が発行されました。詳細はこちらをごらんください。

【具体例 2：PDF などのファイルにリンクを貼る場合】
良い例
公立碓氷病院診療スケジュール（PDF）(5) 複数の到達手段を提供する＜関連 JIS 項目:2.4.5

複数の手段の達成基準＞【ルール】✔サイト内にあるウェブページを見つける手段を複数提供する。

【メリット】
目的のコンテンツを見つける手段を複数提供することで、利用者が情報をより早く見つけるのを手助けすることができます。

12

(6) 内容がわかる見出しやラベルをつける＜関連 JIS 項目:2.4.4

リンクの目的（コンテキスト内）の達成基準＞【ルール】✔ページ作成時に、ページ内容がわかる見出しをつける。
✔コンテンツが利用者の入力を要求する場合は、ラベル又は説明文で提供する。

【メリット】
ページ内容に見出しが記述されていることで、利用者が内容を理解したり、推測しやす
くなります。

(7) フォーカスが視覚的に認識できるようにする＜関連 JIS 項目:2.4.7

フォーカスの可視化の達成基準＞【ルール】✔リンク文字やリンク画像にフォーカスされたとき、視覚的な変化が起こるようにする。

【メリット】
キーボードでページを操作している利用者が、キーボードで操作している要素を視覚的に常時確認でき、フォーカスがどこにあるのかを見つけることができるようになります。
【具体例：リンク文字】
良い例
フォーカス前フォーカス後人間ドックのご案内

人間ドックのご案内

138 予測可能(1) フォーカスを受け取ったときにコンテキストの変化を引き起こさない＜関連 JIS 項目:3.2.1

フォーカス時の達成基準＞【ルール】✔ページを開いたときに、ポップアップなど別のウィンドウを開かない。

【メリット】
コンテキストの変化が予期せず起こる可能性を少なくすることによって、視覚障害、認知能力の低下や運動障害のある利用者に役立ちます。

14

(2) 一貫したナビゲーションを提供する＜関連 JIS 項目:3.2.3

一貫したナビゲーションの達成基準＞【ルール】✔繰り返されるナビゲーションは毎回同じ順序で提示する。

【メリット】
繰り返されるナビゲーションが、サイトの各ページで提示されることで、利用者が各ページのどこにあるのかを予測できるようになります。
【具体例：繰り返されるナビゲーション】「病院だより「うすい」」ページ「出前講座・健康講座」ページ

一貫したナビゲーション

15

9 互換性(1) 仕様に準じてウェブコンテンツを作成する＜関連 JIS 項目:4.1.1

構文解析の達成基準＞【ルール】✔ウェブページを仕様に基づき作成し、HTML や CSS12の構文エラーが無いようにする。

【メリット】
ウェブページが仕様に準じていることで、仕様に基づき開発されている支援技術 (スクリーンリーダーなど)が問題なくコンテンツを理解できるようになります。

(2) 識別名及び役割はプログラムが解釈できるようにする＜関連 JIS 項目:4.1.2

名前 (name)、役割 (role)、及び (value)の達成基準＞【ルール】✔識別名及び役割はプログラムが解釈できるようにし、利用者が操作できるようにする。

【メリット】
識別名及び役割をプログラムや支援技術が解釈できるようにすることで、利用者が利用する支援技術との互換性を保つことが可能になります。

16

＜用語解説＞
1 日本工業規格
工業標準化法(昭和 24 年法律第 185 号)に基づき、制定される日本の国家基準です。

2 WCAG(Web Content Accessibility Guidelines)2.0
W3C によって公開されているウェブアクセシビリティに関するガイドラインです。

3 W3C(World Wide Web Consortium)
Web 技術の標準化を行う非営利団体の名称です。

4 ISO(International Organization for Standardization)
国際標準化機構といい、国際的な標準の国際規格(IS:international standard)を策定しています。

5 IEC(International Electrotechnical Commision)
国際電気標準会議といい、電気工学、電子工学や関連した技術を扱う国際的な標準化団体です。規格などの一部は ISO と共同で開発しています。

6 障害者基本法(昭和 45 年法律第 84 号)
障害者の自立や社会参加の支援などのための施策を総合的かつ計画的に推進することを目的とした法律です。本法律第 9 条の規定に基づき、障害者基本計画が策定されています。

7 障害を理由とする差別の解消の推進に関する法律(平成 25 年法律第 65 号。略称：障害者差別解消法)
国の行政機関、独立行政法人、地方公共団体や地方独立行政法人に対し「不当な差別的取扱い」を禁止するとともに「合理的配慮の提供」を義務付ける法律です。ウェブアクセ
シビリティを含む情報アクセシビリティは、環境の整備として位置づけられ、事前的改善措置として計画的に推進することが求められています。

17

8 障害者の権利に関する条約(略称：障害者権利条約)
障害者の人権や基本的自由の享有を確保し，障害者の固有の尊厳の尊重を促進することを目的として，障害者の権利の実現のための措置などについて定める条約です。

9 alt (オルト)属性
HTML の img 要素の中に記述される画像の代わりとなるテキスト情報です。

10 HTML (HyperText Markup Language)
ウェブページを記述するためのウェブコンテンツのマークアップ言語で、W3C によって標準化が定められています。正しい html 標準仕様で制作されたウェブコンテンツは、W3Cが定める正しい標準仕様で開発された Web ブラウザや利用機器であれば文書の解釈や表示が正しく行えます。

11 PDF (Portable Document Format)
Adobe Systems 社によって開発された電子文書のためのファイル形式で、平成 20 年 7 月に ISO により標準化されました。コンピュータの機種や環境にかかわらず、もとのソフトウェアで作成したとおりに正確に表示できます。

12 CSS (Cascading Style Sheets)
ウェブページの表示スタイルや書式を指定するための言語で記述したファイルです。
HTML と組み合わせて使用し、CSS は視覚的なレイアウトなどを調整する機能を持っています。

18