Accessibility.jp 無料セミナー
第1回 miChecker勉強会
2021年11⽉24⽇(⽔)
講師 : 飯塚 慎司

株式会社インフォ・クリエイツ
1目次• 本セミナーの⽬的• 今⽇のセミナーの⽅針• miChecker (エムアイチェッカー) とは• miCheckerの特徴• miCheckerのJIS X 8341-3:2016に対するカバレッジ• miCheckerの操作画⾯• miChecker 3つの機能の紹介• Accessibility.jp の紹介• 本⽇説明する問題 (10項⽬)• 指摘される代表的な問題

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

2

本セミナーの目的

⽬的は「Web制作者のスキル向上」に貢献すること
Webアクセシビリティの検査をする⾝としてWeb制作者のスキルが上がれば発⾒される問題が減って私たちの仕事は楽になる!
そして、より良くするための議論がもっとできるようになる

知識を宣伝することが⽬的ではありません (する程でもない)
当社サービスへの誘導が⽬的ではありません (しないとは⾔い切れない)
Copyright © InfoCreate Co., Ltd.All Rights Reserved.

3

今日のセミナーの方針

miCheckerで良く指摘される問題の解説
よく⾒かける代表的な問題について次のことを説明します。
l なぜ指摘されたか?
l 直さないとどんな問題を引き起こすのか
l どうやって直せば良いのか

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

4

miChecker (エムアイチェッカー) とは
l 総務省が提供しているアクセシビリティ評価ツール
https://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html

l HTML5 (W3C Recommendation 28 October 2014) に対応
l JIS X 8341-3:2016への対応
l 各種付属⽂書の更新
l ソースコードは Eclipse Public License Version 1.0(“EPL”)で公開
l AdoptOpenJDK の提供する Java 実⾏環境に対応

おまけl ACTFではaDesingerとして公開 (こちらも利⽤できる)
https://www.eclipse.org/actf/downloads/tools/aDesigner/l なまえの由来
Copyright © InfoCreate Co., Ltd.All Rights Reserved.

5

miCheckerの特徴
付属資料 : 「1_miChecker の特徴」より

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

6

miCheckerのJIS X 8341-3:2016に対するカバレッジ

38の達成基準(A/AA)に対するカバレッジ
l 14達成基準「問題あり」で診断[A:12l 3達成基準 「問題の可能性⼤」で診断 [A: 3l 11達成基準 「要診断箇所」の検出のみ [A: 6l 10達成基準 「⼿動確認」の指摘のみ[A: 4

AA: 2]
AA: 0]
AA: 5]
AA: 6]

達成基準別の診断項⽬数内訳(204項⽬)
達成基準 レベル 問題あり

問題の可 要判断箇
能性⼤

所

⼿動確認

達成基準 レベル 問題あり

1.1.1

A1191222.1.1

A

1.2.1

A00112.1.2

A

1.2.2

A001

12.2.1

A002

問題の可 要判断箇
能性⼤所

110010

⼿動確認

達成基準 レベル 問題あり
合計

010

30000111

3 3.2.1

A

00011A01

304

AA

00022

AA00022A00

505A

4114019AA00516AA00123A10103427A68103270102.2.2

A

3

111

1.2.4

AA

00102.3.1

A000

1

1 3.2.3
3.2.4
23
3.3.1
3
3.3.2
13.3.3
8
3.3.4
1
4.1.1
2
4.1.2
1

102.4.1

A

1.3.1

A

9

3

20

5

2.4.2

A

1.3.2

A

0

7

1

3

2.4.3

1.3.3

A

000

1

2.4.4

1.4.1

A

003

2

2.4.5

1.4.2

A

1010

1.4.3

AA

114

1

1.4.4

AA

3201

1.4.5

AA

0004

合計

200

⼿動確認

AA0所

AA

1.2.3

AA

能性⼤3 3.1.1
1 3.1.2

16 3.2.2

1.2.5

問題の可 要判断箇

95631101

A0001A3131

AA0001

2.4.6

AA00202.4.7

AA0001

診断項⽬内訳:「問題あり」 49項⽬、「問題の可能性⼤」 43項⽬、「要判断箇所」66項⽬、「⼿動確認」 46項⽬(指摘のみ)
⼿動確認のみの達成基準:
1.3.3 感覚的な特徴、1.4.5 ⽂字画像、2.3.1 3回の閃光⼜は閾値以下、2.4.3 フォーカス順序、2.4.5 複数の⼿段
2.4.7 フォーカスの可視化、3.1.2 ⼀部分の⾔語、3.2.1 フォーカス時、3.2.3 ⼀貫したナビゲーション, 3.2.4 ⼀貫した識別性
Copyright © InfoCreate Co., Ltd.All Rights Reserved.

7miCheckerの操作画面
付属資料 : 「1_miChecker の特徴」より

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

8

miChecker 3つの機能の紹介 (1/3)
ロービジョンシミュレーション

ロービジョンシミュレーションの結果を表⽰

⾊覚異常だけでなく、⾼齢者の⾒え⽅のシミュレーションも活⽤してほしい

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

9

miChecker 3つの機能の紹介 (2/3)
⾳声ユーザビリティ視覚化

読み上げ順をシミュレーションした状態と、アクセシビリティ検証結果がポップアップで表⽰される。

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

main, header, footer,nav, article, aside など
ランドーマークも検出10

miChecker 3つの機能の紹介 (3/3)
アクセシビリティ検証

概要レポートl シンプルにテキストで状態を説明
l 4原則のスコアから4段階で評価⾮常に良い
1つも問題指摘無し
良い
指摘はあるが「良い」と考えられる段階
悪い指摘が多く「悪い」状態
⾮常に悪い
指摘がとても多く、利⽤は困難と思われる状態
詳細レポートl 問題ありl 問題の可能性⼤l 要判断箇所l ⼿動確認

概ね修正が必要 (100%ではない)
修正の必要がない場合もある (ここが難しいところ)
検証が必要な箇所を指摘しているだけ (問題とは⾔っていない)
ツールでは何も検知出来なかったので⼿動で確認
Copyright © InfoCreate Co., Ltd.All Rights Reserved.

11

Accessibility.jp の紹介

miCheckerの出⼒の⾒⽅、対応の仕⽅を説明したサイト

https://accessibility.jp/resources/tools/michecker-techniques/

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

12

本日説明する問題No.

内容

達成基準

説明先URL

A: 1.1.1

同⼀テキストの繰り返しがあります

https://accessibility.jp/column/1568/

A: 1.1.1

画像にalt属性がありません。代替テキストを提供してください。(もし⽀援技術がこの画像を無視するべき場合は、 alt=”” と設定してください)：
src=”*”

https://accessibility.jp/column/1772/

A: 1.1.1

代替テキストが150⽂字を超えています。longdesc属性などを⽤いて、代替テキストを別に提供する事を検討してください

https://accessibility.jp/column/1987/

4

A: 1.1.1, A: 1.3.1
A: 3.3.2, A: 4.1.2

フォーム・コントロールにlabel要素およびtitle属性が関連付けられていません。

https://accessibility.jp/column/1515/

5

A: 1.1.1
A: 2.4.4, AAA: 2.4.9

ページ内リンク “*" は、読み上げ可能なテキストを持たないため、⾳声アクセスできません。

https://accessibility.jp/column/2020/

A: 1.3.1

th要素にscope属性がありません。scope属性を適切に⽤いて、データテーブルの⾒出しセルとデータセルを関連付けて下さい。

https://accessibility.jp/column/1606/

A: 1.3.2* は⽂字間に空⽩を含んでいるため、⾳声で正確に読み上げることが出来ない可能性がありますフォントサイズは相対的な⼤きさで指定してください。

https://accessibility.jp/column/1651/

AA: 1.4.4

フォントサイズは相対的な⼤きさで指定してください。

https://accessibility.jp/column/1624/

A: 4.1.1

id属性の値に重複があります。*

https://accessibility.jp/column/2053/

AA: 3.1.2[⼿動確認] 可固有名詞、技術⽤語、どの⾔語なのか不明な語句、及びすぐ前後にあるテキストの⾔語の⼀部になっている単語⼜は語句を除いて、コンテンツの⼀節⼜は語句それぞれの⾃然⾔語がどの⾔語であるかを、プログラムが解釈可能であることを確認して下さい。

https://accessibility.jp/column/1703/

123678910

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

13説明項⽬ 同⼀テキストの繰り返し
達成基準

A: 1.1.1

内容『同⼀テキストの繰り返しがあります。 』
説明先URLhttps://accessibility.jp/column/1568/
お伝えしたい事l この問題は利⽤者から⾒て、アクセシビリティへの理解を⽰す指数になります。しっかり対応することをお勧めします。
l 代替テキストを空にして、空のリンクを作ってしまわないよう注意してください。時々⾒かけます。

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

14説明項⽬ 代替テキストの無い画像
達成基準

A: 1.1.1

内容『画像にalt属性がありません。代替テキストを提供してください。(もし⽀援技術がこの画像を無視するべき場合は、 alt=”” と設定してください)： src=”*” 』
説明先URLhttps://accessibility.jp/column/1772/
お伝えしたい事l アクセシビリティの基本中の基本です。しかし、悩まれている⽅も多いので、改めて整理してみました。
迷った時は、スクリーンリーダーの利⽤者が⽬の前にいらっしゃると思って、その⽅に説明をしてみてください。ただし、後ろにも沢⼭の⼈が並んでいて、⼿短に伝える必要があると想定します。その内容を代替テキストに⼊れるのが良いでしょう。
Copyright © InfoCreate Co., Ltd.All Rights Reserved.

15説明項⽬ 150⽂字を越える代替テキスト
達成基準

A: 1.1.1

内容『代替テキストが150⽂字を超えています。longdesc属性などを⽤いて、代替テキストを別に提供する事を検討してください』
説明先URLhttps://accessibility.jp/column/1987/
お伝えしたい事l ⻑い代替テキストは読み上げの観点で適当ではありません。

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

16説明項⽬ フォーム・コントールのラベル
達成基準

A: 1.1.1, A: 1.3.1, A: 3.3.2, A: 4.1.2

内容『フォーム・コントロールにlabel要素およびtitle属性が関連付けられていません。 』
説明先URLhttps://accessibility.jp/column/1515/
お伝えしたい事l WCAG2.1対応を考えて、今からしっかりとした⽅針を決めて対応していくべきです。
l label要素とtitle属性の両⽅をしているすることはしないでください。

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

17説明項⽬ 読み上げ可能なテキストを持たないリンク
達成基準

A: 1.1.1, A: 2.4.4, AAA: 2.4.9

内容『ページ内リンク "*"は、読み上げ可能なテキストを持たないため、⾳声アクセスできません。 』
説明先URLhttps://accessibility.jp/column/2020/
お伝えしたい事l この問題は利⽤者から⾒て、アクセシビリティへの理解を⽰す指数になる。しっかり対応した⽅が良い。
l 代替テキストを空にして、空のリンクを作ってしまわないよう注意する。

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

18

説明項⽬ th要素のscope属性
達成基準

A: 1.3.1

内容『 th要素にscope属性がありません。scope属性を適切に⽤いて、データテーブルの⾒出しセルとデータセルを関連付けて下さい。 』
説明先URLhttps://accessibility.jp/column/1606/

scopeの方向の覚え方

CRお伝えしたい事l 本当に表の利⽤が必要なのかから考えましょう。コピペが多⽤される現在、表は案外使いにくいものです。
l 使うならば、徹底してシンプルにしscope="col"scope="row"ましょう。
l 左上隅を空⽩にする場合、td要素にすることをお勧めします。

それぞれのキャラクタの端が scope の向きを表すと覚えやすいです。なお、結合セルの場合は、colgroup あるいは rowgroupを⽤います。

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

19説明項⽬ ⽂字間空⽩達成基準

A: 1.3.2

内容『 * は⽂字間に空⽩を含んでいるため、⾳声で正確に読み上げることが出来ない可能性がありますフォントサイズは相対的な⼤きさで指定してください。 』
説明先URLhttps://accessibility.jp/column/1651/
お伝えしたい事l 「問題の可能性⼤」の項⽬ですが、指摘が正しい場合の多い項⽬です。

これが指摘されている場合は必ず確認しましょう。
l この項⽬もアクセシビリティの理解度を表すものであり、誤りが複数あると、アクセシビリティの取り組みを疑われるかもしれません。できるだけ早期に解決すべき項⽬です。
l ⽂字間にスペースを空けることはCSSで可能です。デザインガイドなどで指定⽅法を盛り込んでおくと良いでしょう。
Copyright © InfoCreate Co., Ltd.All Rights Reserved.

20説明項⽬ フォントサイズの指定
達成基準

AA: 1.4.4

内容『フォントサイズは相対的な⼤きさで指定してください。 』
説明先URLhttps://accessibility.jp/column/1624/
お伝えしたい事l ブラウザのZoom機能で問題無く拡⼤できれば良しとしていますが、今後は厳しく対応した⽅が良いと考えます。
l Zoom拡⼤であっても問題が⽣じるケースに遭遇することが少なくありません。⼤抵は横スクロールで表⽰域が⽋けるトラブルです。すべての利⽤者にとって問題ですので気をつけましょう。

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

21

説明項⽬
達成基準

id属性値の重複
A: 4.1.1

内容『 id属性の値に重複があります。* 』
説明先URLhttps://accessibility.jp/column/2053/
お伝えしたい事l PCとスマホの両モードで検索機能を持つ場合、重複することが良くあります。⼤抵はdisplay:noneで⾮表⽰としているので、問題はないと判断しますが、Nu Html Checkerでもエラーとして検出することから異なるようにすることをお勧めします。
l idは数値から始められません。ご注意ください。

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

22説明項⽬ コンテンツの⼀節⼜は語句の⾔語
達成基準

AA: 3.1.2

内容[⼿動確認] 『可固有名詞、技術⽤語、どの⾔語なのか不明な語句、及びすぐ前後にあるテキストの⾔語の⼀部になっている単語⼜は語句を除いて、コンテンツの⼀節⼜は語句それぞれの⾃然⾔語がどの⾔語であるかを、プログラムが解釈可能であることを確認して下さい。』
説明先URLhttps://accessibility.jp/column/1703/
お伝えしたい事l 部分の語句に⾔語指定が必要かどうかの判断は簡単ではない場合があります。無⽤に外国語を、ましてファッションで利⽤することは控えるべきです。
l 迷った時は⽇本語の指定のままスクリーンリーダーで聞いてみてください。読みから内容が理解できない場合は、やはり⾔語指定するか、その単語を使⽤すること⾃体を再検討してください。
Copyright © InfoCreate Co., Ltd.All Rights Reserved.

23

指摘される代表的な問題 (1/4)
「問題あり」 (49項⽬)で検出する問題⼀覧 1
達成基準

指摘される問題

A: 1.1.1

画像にalt属性がありません。代替テキストを提供してください。(もし⽀援技術がこの画像を無視するべき場合は、 alt="" と設定してください)： src="{0}"A: 1.1.1

画像ボタンにalt属性がありません。代替テキストを提供してください。

A: 1.1.1

area要素にalt属性がありません： {0}。代替テキストを提供してください。

A: 1.1.1{0}（&nbsp;を含む空⽩⽂字のみ）は画像のalt属性として不適切です。 (もし⽀援技術がこの画像を無視するべき場合は、 alt="" と設定してください。そうでなければ適切な代替テキストを提供してください。)

A: 1.1.1

同⼀テキストの繰り返しがあります： {0}A: 1.1.1

applet要素にalt属性を提供してください (もし読み上げる必要がないアプレットの場合は alt="" と設定してください)

A: 1.1.1

object要素内には、代替テキストを提供してください

A: 1.1.1

空⽩⽂字のみからなる⽂字列 "{0}" は画像ボタンのalt属性として不適切です。適切な代替テキストを指定してください

A: 1.1.1, A: 1.3.1,
A: 3.3.2, A: 4.1.2

フォーム・コントロールに関連付けられたlabel要素が存在せず、title属性の値が空または空⽩⽂字だ
けです。フォーム・コントロールの⽬的を表わすlabel要素もしくはtitle属性を付与してください。

A: 1.1.1, A: 1.3.1,
A: 3.3.2, A: 4.1.2

フォーム・コントロールにlabel要素およびtitle属性が関連付けられていません。

A: 1.1.1, A: 2.4.4,
AAA: 2.4.9

ページ内リンク "{0}" は、読み上げ可能なテキストを持たないため、⾳声アクセスできません

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

24指摘される代表的な問題 (2/4)
「問題あり」 (49項⽬)で検出する問題⼀覧 2達成基準

指摘される問題

A: 1.3.1

th要素にscope属性がありません。scope属性を適切に⽤いて、データテーブルの⾒出しセルとデータセルを関連付けて下さい。

A: 1.3.1

th要素のscope属性値が不正です。scope属性を適切に⽤いて、データテーブルの⾒出しセルとデータセルを関連付けて下さい。

A: 1.3.1

id属性及びheaders属性を適切に⽤いて、データテーブルのデータセルを⾒出しセルと関連付けて下さい。 {0}A: 1.3.1

データセルのheaders属性値に含まれるidに対応する⾒出しセルがありません。 {0}A: 1.3.1

データセルのheaders属性値に含まれるidがセルでない要素({0})を参照しています。id属性及びheaders属性を適切に⽤いて、データテーブルのデータセルを⾒出しセルと関連付けて下さい。

A: 1.3.1, A: 3.3.2

各fieldset要素には、そのグループの説明を含めたlegend要素を指定してください

A: 1.3.1, A: 3.3.2

同じname属性値を持つtype="radio"またはtype="checkbox"のinput要素のグループが同⼀のfieldset要素に含まれることを確認して下さい

A: 1.4.2

⾃動的に⾳を再⽣することは避けてください。 ⾃動的に再⽣する際は、⾳を再⽣していることを明⽰しているか確認してください

A: 2.2.1, AAA:
2.2.4, AAA: 3.2.5

周期的にページのリロードを⾏う事は避けてください (<meta http-equiv="Refresh">の利⽤は避けてください)

A: 2.2.1, AAA:
2.2.4, AAA: 3.2.5

⾃動的にページをリダイレクトすることは避けてください
は避けてください)A: 2.2.2, A: 4.1.1

blinkを⽤いて5秒以上⽂章を明滅させることは避けてください。

A: 2.2.2, A: 4.1.1

text-decoration:blinkを⽤いて5秒以上⽂章を明滅させることは避けてください 。({0})

A: 2.2.2, A: 4.1.1

marqueeを⽤いて⽂章をスクロールさせることは避けてください

A: 2.4.1

本⽂へ移動などのスキップリンクを提供してください(<meta http-equiv="Refresh">の利⽤（本⽂へジャンプ、本⽂へのリンク等）

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

25指摘される代表的な問題 (3/4)
「問題あり」 (49項⽬)で検出する問題⼀覧 3
達成基準

指摘される問題

A: 2.4.1

本⽂へ移動などのスキップリンクへの到達に{0}秒もかかりますしてください)

A: 2.4.1

このスキップリンクはジャンプ先のアンカー"{0}"が存在しないため利⽤できません

A: 2.4.1

このページ内リンクは、ジャンプ先のアンカー"{0}"が存在しないため利⽤できません

A: 2.4.1, A: 4.1.2

frame要素にtitle属性がありません。frame要素には、フレームの内容を説明するための空でないtitle属性を提供してください

A: 2.4.1, A: 4.1.2

iframe要素にtitle属性がありません。iframe要素には、フレームの内容を説明するための空でないtitle属性を提供してください。{0}A: 2.4.1, A: 4.1.2

frame要素のtitle属性が空⽩⽂字のみから構成されています。frame要素には、フレームの内容を説明するための空でないtitle属性を提供してください

A: 2.4.1, A: 4.1.2

iframe要素のtitle属性が空⽩⽂字のみから構成されています。iframe要素には、フレームの内容を説明するための空でないtitle属性を提供してください。{0}A: 2.4.2

このHTML⽂書に空でないtitle要素を提供してください。

A: 2.4.4, AAA:
2.4.9

このリンク内には読み上げ可能なテキストが存在しないため、アクセシブルではありません。{0}A: 2.4.4, AAA:
2.4.9

リンクのtitle属性の値として、空の⽂字列や空⽩⽂字のみからなる⽂字列を使⽤してはいけません

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

(スキップリンクの挿⼊位置を⾒直26

指摘される代表的な問題 (4/4)
「問題あり」 (49項⽬)で検出する問題⼀覧 4
達成基準

指摘される問題

A: 3.1.1

⽂書内で主に利⽤されている⾔語を{0}属性を⽤いて明⽰してください (例： <html {0}="ja">)

A: 3.1.1{0}属性の値にはBCP 47またはその後継仕様に準拠したものを使⽤してください

A: 4.1.1

このページには複数のbody要素があるようです．HTMLを修正してください

A: 4.1.1

body要素の中にhead要素があるようです．HTMLを修正してください

A: 4.1.1

このページには複数のhtml要素があるようです．HTMLを修正してください

A: 4.1.1

body要素の位置が正しくないようです．HTMLを修正してください

A: 4.1.1

このページにはbody要素が無いか，誤った位置に配置されているようです．HTMLを修正してください

A: 4.1.1

accesskey属性の値に重複があります。({0})

A: 4.1.1

id属性の値に重複があります。({0})

AA: 1.4.3, AAA:1.4.6

⽂字⾊と背景⾊のコントラスト⽐が3:1未満です。{0}AA: 1.4.4

フォントサイズは相対的な⼤きさで指定してください。{0}AA: 1.4.4

固定サイズのフォントは使わないでください。

AA: 1.4.4

この⽂字は⼩さすぎます。さらに固定サイズのフォントが使われています。

AAA: 2.4.10

⾒出し(h1,h2…)の⼊れ⼦関係を適切なものにしてください。{0}Copyright © InfoCreate Co., Ltd.All Rights Reserved.

27

ご参加ありがとうございました。
ご意⾒・ご質問・ご要望等につきましては、次のアドレスまで、直接、メールをいただければと思います。
できるだけ対応していきたいと思います。
インフォ・クリエイツ

飯塚慎司

siizuka@infocreate.co.jp

よろしくお願いいたします。

Copyright © InfoCreate Co., Ltd.All Rights Reserved.

28