セミナー「今さら聞けない！Web制作者が知っておくべきWebアクセシビリティの今とこれから」の講義第一部「遅くはない！今から始めるアクセシビリティ」の資料です。

1. 遅くはない！
今から始める
アクセシビリティ
Presented by みるく

2. アクセシビリティとは
誰もが、どんな環境でも
情報にアクセス出来る事。
1/34

3. アクセシビリティを
勉強する上で大事な事
アクセシビリティの基準等の文章が
難解なものが多いという事もあり、
間違った解釈をしかねないので、
自分の解釈に自信がなければ、
正しい知識を持った人に聞き、
正しく理解しよう。
2/34

4. アクセシビリティの4原則
1.知覚可能
2.操作可能
3.理解可能
4.堅牢性
3/34

5. アクセシビリティガイドライン
WCAG2.0 Level A, AA, AAA
Web Content Accessibility Guidelines (WCAG) 2.0
↑イコール↓
JIS X 8341­3:2016 レベル A, AA, AAA
JSA Web Store ­ JIS X 8341­3:2016 高齢者・障害者等配慮設計指針―情報通信における機器，
ソフトウェア及びサービス―第３部：ウェブコンテンツ
JIS X 8341­3:2016 解説 公開資料＆リンク集 . ウェブアクセシビリティ基盤委員会（WAIC）
4/34

6. W3C勧告 WCAG2.0 がそのまま
国際規格ISO/IEC 40500:2012になり、
JIS X 8341­3 は、2016年に
ISO/IEC 40500:2012と一致するよう
改定された結果、
WCAG2.0とISO/IEC 40500:2012と
JIS X 8341­3:2016は同じものに
5/34

7. ユーザビリティと
アクセシビリティって
違う物なの？
6/34

8. ユーザビリティについて
1998年のISO 9241­11での定義
ある製品が、
特定の利用状況において、
特定のユーザによって、
指定された目標を達成するために
用いられる際の
有効さ、効率、ユーザの満足度の度合い。
7/34

9. アクセシビリティの問題
8/34

10. ユーザビリティの問題
9/34

11. アクセシビリティの問題
10/34

12. ユーザビリティの問題
11/34

13. アクセシブルにする利点
マシーンリーダブルにもなるので、
SEO的にも良い。
サイトの品質が良くなる。
マルチデバイスにも対応できる。
アクセス出来る人が増えると
サイトに訪れるユーザーも増える。
12/34

14. では、高齢者でも障碍者でもない人が
情報を得られない時ってどんな状況？
13/34

15. 視力が悪い人がメガネもしくはコンタクトを失くした時
手を怪我もしくは骨折してマウスが使えない時
マウスが壊れてキーボードしか使えない時
騒音の中にいて音声が何も聞こえない時
14/34

16. いつも頭の隅に置いておいて欲しい事！
生きている限り誰もが年を取り高齢者になる。
高齢者になると小さい字は見えにくくなり、
耳も聞こえづらくなり、
運動機能も低下していく。
ずっと健康でいられるのが一番ですが、
いつ病気や怪我等で障碍を抱える事になるかわからない。
つまり他人ごとではないという事！
15/34

17. では、想像してみよう
16/34

18. 視覚的情報が得られなかったら・・・
音から情報を得られなかったら・・・
高齢者と呼ばれる年になったら・・・
17/34

19. 実務においても
想像する事はとても大事！
18/34

20. 原稿がWordで届いたのでコピペして作業終了。
19/34

21. 下記を読み上げてみよう。
・日 時 ２０１４/０７/１９(土) １１:００～１５:３０
・場 所 大 阪 研 修 センター
・講演会 労 働 契 約 についての 解 説
・詳 細 労 働 契 約 について 基 本 的 な 事 項 を
大 阪 大 学 教 授 の 佐 藤 太 郎 氏が
教 授 の 目 線 から 語られます。
20/34

22. 下記を読み上げてみよう。修正版
・日時 2014年7月19日土曜日 11時から15時30分
・場所 大阪研修センター
・講演会 労働契約についての解説
・詳細 労働契約について基本的な事項を
大阪大学教授の佐藤 太郎 氏が
教授の目線から語られます。
21/34

23. コントラストに配慮してないページ
フォントサイズも 10px と小さい
22/34

24. ロービジョンシミュレーション
使用したツール：miChecker
23/34

25. 色覚シミュレーション
C型：3種類の錐体がすべて揃っている一般色覚
P型：赤い光を主に感じる錐体が無い、あるいは分光感度がずれている
D型：緑の光を主に感じる錐体が無い、あるいは分光感度がずれている
T型：青い光を主に感じる錐体が無いため、青色付近の識別が困難
出典IAUD ユーザー情報集／事例集 Ver1.10
使用したツール：Chromatic Vision Simulator
24/34

26. カラーコントラストチェックツールの紹介
カラー・コントラスト・アナライザー
背景色と文字色のコントラスト比がWCAG2.0のLevelAA,AAAをクリアしているか
簡単にチェック出来、色覚タイプごとのシミュレーション結果も表示出来る。
WCAG Contrast Checker(Firefoxのアドオン)
ページを表示するだけでWCAG2.0のLevelAA,AAAをクリアしているかチェック出来る。
25/34

27. でも、いちいち修正するの時間かかるし、
面倒たがらやってられな～い。
26/34

28. さっき話した事を思い出して！
この情報が大きな地震が起こった直後の災害情報だったら？
命に関わる情報なのに情報が正しく正確に得られない人がいていいの？
この情報が得られなかったのが原因で命を落とす事になったら？
情報が得られないのが自分だったら？
27/34

29. こ れ だ け は
押 さ え て お き た い
アクセ シブル な
ペ ー ジ に す る
３つ の 要点
28/34

30. １.適切なaltの付け方
altテキストは、ただテキストを入れるというだけでなく
前後の文脈を読んで適切な値を入れるようにする。
不適切な例
動く被写体を撮るのは難しい。
動物を撮るポイントを紹介しよう。
alt="子犬"
適切な例
動く被写体を撮るのは難しい。
動物を撮るポイントを紹介しよう。
alt="写真：籠に入った3匹の可愛い子犬"
適切なaltテキストの例
29/34

31. ２.お問合せフォームの例
30/34

32. ２.お問合せフォームの例
ラベルとテキスト入力フィールドを関連付ける
<label for="name">
</label> < input type="text" id="name"…
<label for="kana">
</label> < input type="text" id="kana"…
<label for="mail">
</label> < input type="text" id="mail"…
<label for="content">
</label> < textare id="content"…

33. ３.キーボードで操作できる様にする
すべての機能を
キーボードで操作できる様に
するのは必須！
また、5秒以上動くものは、
必ずユーザーが
停止できないといけない！
32/34

34. To make
everyone Happy!
33/34

35. まずは、
出来る事からはじめよう。
altの値を正確に入れてるサイトが
増えるだけでも
Webの世界は変わってくるでしょう。
34/34

36. ありがとうございました。
Thank you for your time.
White Stage : https://white­stage.com.