アクセシビリティについて

2018年3月に実施した試験において満たしていない達成基準の事例と対応策

2018年3月に実施したJIS X 8341-3:2016附属書JBに基づく試験において、達成基準を満たしていないページが40ページのうち15ページ、達成できなかった基準が11ありました。基準を満たさなかった具体的な内容を事例で紹介し、その対応策を示します。

満たしていない達成基準の事例と対応策

1.1.1 非テキストコンテンツの達成基準

試験対象40ページ中、6ページで達成できませんでした。

事例1
試験実施時の状態 PDFでかつ外部サイトへのリンクを示すアイコンの代替テキストに、外部サイトへのリンクであることは含まれているが、PDFへのリンクであることが含まれていなかった。
対応策 適切な代替テキストを指定するよう、改めて機構内各担当者に注意喚起します。
対象ページ https://www.jetro.go.jp/world/asia/in/trade_02.html
事例2
試験実施時の状態 アクセントに使用している画像にリンクが張られていたが代替テキストが指定されていない。
対応策 リンクを削除し、代替テキストを空のままとします。 類似のページでは既に修正済みですが、対象ページが多く修正しきれなかった部分です。ページ改訂のタイミングで順次修正します。
対象ページ https://www.jetro.go.jp/biznews/announcement/2017/08/aee24da6f09d9424.html

1.3.1 情報及び関係性の達成基準

試験対象40ページ中、7ページで達成できませんでした。

事例1
試験実施時の状態 th要素のscope属性値が正しくない。colgroupをcolgroupeとするスペルミスがあった。
対応策 表作成は細かい記述が多く手間がかかるので、エクセルから変換するツールを用意し、間違いの軽減に努めます。
対象ページ https://www.jetro.go.jp/biznews/2018/01/027c35ca4e057724.html
事例2
試験実施時の状態 見出しレベルが文書構造と一致していない。h1レベルの次にh3レベルの見出しを記述していた。
対応策 アクセシビリティ対応を始めた比較的初期に作成したページで、見出しレベルをスキップすることに注意が払われていませんでした。現在では他の関連ページとの整合性を確保するための場合を除き、見出しレベルをスキップすることは避けてページ制作を行っています。
対象ページ https://www.jetro.go.jp/news/releases/2016/05f85bf761c38cd7.html
事例3
試験実施時の状態 不要なbr要素（改行）が記述されていた（li要素の中）
対応策 改めて、不要なbr要素を記述することのないよう、機構内各担当者に注意喚起します。
対象ページ https://www.jetro.go.jp/world/asia/in/trade_02.html
事例4
試験実施時の状態 字下げをcssではなく、全角スペースで行っていた。
対応策 現在は字下げを行う場合はcssで行っています。過去記事の修正については対象ページが多いのでプログラム的な処理を検討します。
対象ページ https://www.jetro.go.jp/biznews/2017/05/ee0955ebb12ba862.html

1.3.2 意味のある順序の達成基準

試験対象40ページ中、1ページで達成できませんでした。

事例1
試験実施時の状態

視覚的には「最終更新日」のあとに日付が続くようになっているが、HTMLの記述では逆になっていた。

コンテンツ管理システムのブロック設定に問題がある。

対応策 問題を把握したのが試験実施後なので、今後作成するページはコンテンツ管理システムのテンプレートを修正し、問題が発生しないようにします。ただし、過去ページについては対象ページが非常に多いため改めて対応を検討します。
対象ページ https://www.jetro.go.jp/world/reports/2016/02/777f4bb0969fb156.html

1.4.1 色の使用の達成基準

試験対象40ページ中、1ページで達成できませんでした。

事例1
試験実施時の状態 グラフの要素の一部をグレーから黒のべた塗の諧調で示していた。
色の仕様の達成基準で問題のあったグラフ画像
対応策

隣り合っていない要素であれば、べた塗の要素を利用しても問題ないと考えていました。

グラフを作成する場合は、べた塗の要素は1つまでとします。

対象ページ https://www.jetro.go.jp/biznews/2018/01/027c35ca4e057724.html

1.4.5 文字画像の達成基準

試験対象40ページ中、1ページで達成できませんでした。

事例1
試験実施時の状態 HTMLとCSSで表現可能な「表」を画像で掲載していた。
対応策

対象ページ「世界のビジネスニュース（通商弘報）」（2018年4月以降は「ビジネス短信」）は記事データを2次利用しているため、画像で表現する必要がありました。2018年2月にシステムの改修を行い、画像とHTMLを両方保持し、ページではHTMLで表現できるように改修しました。ただし、過去の記事についてはページ数が多いため、可能な範囲で対応を進めていきます。

対象ページ https://www.jetro.go.jp/biznews/2018/01/027c35ca4e057724.html

2.1.1 キーボードの達成基準

試験対象40ページ中、1ページで達成できませんでした。

事例1
試験実施時の状態 ページ内リンクにキーボードフォーカスを移動して、Enterキーを押しても、キーボードフォーカス（の基準）が移動しなかった。
対応策 ページ内リンクとは関係のない部分のjavascriptに問題があり、ページ内リンクの正常な動作を阻害していました。
javascriptを修正します。
対象ページ https://www.jetro.go.jp/world/europe/pl/trade_02.html

2.4.4 リンクの目的（コンテキスト内）の達成基準

試験対象40ページ中、5ページで達成できませんでした。
本項目は1.1.1 非テキストコンテンツの達成基準の事例1と事例2と同じ箇所です。

3.1.2 一部分の言語の達成基準

試験対象40ページ中、1ページで達成できませんでした。

事例1
試験実施時の状態 中国語（簡体字）ページのパンくずリストの画像の代替テキストが日本語になっていた。
対応策 プログラムで出力されている部分なので、少なくとも英語に修正し、lang属性を付与します。
対象ページ https://www.jetro.go.jp/sc/invest/setting_up/section3/page4.html
事例2
試験実施時の状態 同じく、中国語（簡体字）ページでコンテンツのメニュー部分で英語が使用されているにもかかわらず、言語属性の指定がされていなかった。
対応策 言語属性の指定が必要な箇所を明確にし、必要な箇所に必ず付与するよう、機構内各担当者に注意喚起します。
対象ページ https://www.jetro.go.jp/sc/invest/setting_up/section3/page4.html

3.3.2 ラベル又は説明の達成基準

試験対象40ページ中、5ページで達成できませんでした。
ただし、4ページは1つの共通ブロック内の記述の誤りでした。

事例1
試験実施時の状態 検索窓のID属性値とlabel要素のfor属性値が対応していなかった。
対応策 HTML記述時の単純ミスでした。確認を徹底するなど再発防止に努めます。
対象ページ https://www.jetro.go.jp/biznews/announcement/2017/08/aee24da6f09d9424.html

4.1.1 構文解析の達成基準

試験対象40ページ中、3ページで達成できませんでした。

事例1
試験実施時の状態 "が2重に記述されていた（""）。
対応策 テンプレートの記述ミスでした。十分確認してテンプレートを作成するようにします。
対象ページ https://www.jetro.go.jp/biz/sensor/special/2017/12/
事例2
試験実施時の状態 ヘッダーとフッターのパンくずリストのid属性値が重複していた。
対応策 多言語ページのみ修正が漏れていました。修正しました。
対象ページ https://www.jetro.go.jp/sc/invest/setting_up/section3/page4.html

4.1.2 名前（name），役割（role）及び値（value）の達成基準

試験対象40ページ中、6ページで達成できませんでした。
本項目は3.3.2 ラベル又は説明の達成基準の事例1と事例2と同じ箇所です。


お問い合わせ先
ジェトロ・情報データ統括課 ウェブサイト班
Tel: 03-3582-5278 Fax: 03-3582-5662