Slide 1
Slide 1 text
Bengo4.com, Inc.
弁護士ドットコム 新卒研修2025
アクセシビリティ
2025.05.30
弁護士ドットコム 開発本部 クラウドサイン Product Engineering 部 書類管理・組織版
チーム 林優
Slide 2
Slide 2 text
Bengo4.com, Inc.
お前なんでアクセシビリティやってるの？
社会的価値が高いサービス を作って社会貢献し対価を得る仕事がした
い
社会的価値が高いサービスは社会にいる全員が使える 必要がある
アクセシビリティ普及は避けて通れない
2
Slide 3
Slide 3 text
前置き
3
Slide 4
Slide 4 text
Bengo4.com, Inc.
これは何?
新卒エンジニア向けのアクセシビリティ の研修です
(そうでない人の受講を禁止するものではありません)
1時間の講座です
エンジニアとして現場に配属された際に意識 できるようアクセシビリティ
の基礎的な知識・スキルを習得することが目的です
4
Slide 5
Slide 5 text
Bengo4.com, Inc.
諸注意
まとまった質疑応答の時間は予定していません
疑問・質問などがあるときは、その場で挙手 してください
話の途中で遮っていただいても構いません
いくつかハンズオン を予定していますが、
状況によりカットされる可能性があります
5
Slide 6
Slide 6 text
今日のお話
6
Slide 7
Slide 7 text
Bengo4.com, Inc.
今日のお話
1. アクセシビリティとは何か
2. アクセシビリティの基礎
3. クラウドサインでの取り組み
4. VoiceOverハンズオン
まずアクセシビリティについての基本的な考え方をお伝えします
その後クラウドサインでの取り組みをお話しします
途中で都度ハンズオンを実施しアクセシビリティの意義を体験して頂きます
7
Slide 8
Slide 8 text
1. アクセシビリティ とは何か
8
Slide 9
Slide 9 text
アクセシビリティ
9
1. アクセシビリティとは何か
Slide 10
Slide 10 text
Bengo4.com, Inc.
アクセシビリティ と
は何か
説明できますか ?
10
Slide 11
Slide 11 text
Bengo4.com, Inc.
アクセシビリティとは何か考えてみましょう
11
シンキングタイム
Slide 12
Slide 12 text
Bengo4.com, Inc.
アクセシビリティとは何か考えてみましょう
12
このようなものを想像するでしょうか？
● アクセスするための何か
● 障がい者向けの対応
● バリアフリー的な？
Slide 13
Slide 13 text
Bengo4.com, Inc.
13
アクセス アビリティ アクセシビリティ
Access + Ability → Accessibility
【近づく・アクセスする】＋【能力・〜できること】
Slide 14
Slide 14 text
Bengo4.com, Inc.
アクセシビリティとは
14
一般にアクセシビリティとは、アクセスのしやすさ を意味します。転じて、
製品やサービスの利用しやすさという意味でも使われます。
引用：https://waic.jp/knowledge/accessibility/
Slide 15
Slide 15 text
Bengo4.com, Inc.
アクセシビリティとは
15
似た意味をもつ言葉にユーザビリティがありますが、アクセシビリティは
ユーザビリティより幅広い利用状況、多様な利用者 を前提とします。
Slide 16
Slide 16 text
Webアクセシビリティ
16
1. アクセシビリティとは何か
Slide 17
Slide 17 text
Bengo4.com, Inc.
Webアクセシビリティとは何か
Webのアクセシビリティを言い表す言葉がWebアクセシビリティです。
Webコンテンツ、より具体的にはWebページにある情報や機能の利用し
やすさを意味します。
引用：https://waic.jp/knowledge/accessibility/
17
Slide 18
Slide 18 text
Bengo4.com, Inc.
18
Webサイトは、老若男女問わず 多くの方に様々なデバイスで 使われてい
る。
● PC
● スマートフォン
● シニア向けスマホ
● タブレット
Webアクセシビリティとは何か
Slide 19
Slide 19 text
Bengo4.com, Inc.
19
アクセシビリティに配慮されていないと...
● 利用者の状況によっては、必要な情報を入手できない
● Web上で申込や手続きなどができない
Webアクセシビリティとは何か
Slide 20
Slide 20 text
Bengo4.com, Inc.
Webアクセシビリティとは何か
さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でWeb
を使うようになった今、あらゆるWebコンテンツにとって、Webアクセシビ
リティは必要不可欠な品質 と言えます。
20
Slide 21
Slide 21 text
アクセシビリティに取り組む利点
21
1. アクセシビリティとは何か
Slide 22
Slide 22 text
Bengo4.com, Inc.
アクセシビリティに
取り組む利点、
強みは何ですか ?
22
Slide 23
Slide 23 text
Bengo4.com, Inc.
取り組む利点を考えてみましょう
23
このようなものを想像するでしょうか
● 使いやすくなる
● 障がい者でも高齢者でも使えるようになる
● サービスの印象がよくなる
Slide 24
Slide 24 text
Bengo4.com, Inc.
24
👁知覚可能：利用者が提示されている情報を知覚できる
🖐操作可能：クリックや文字入力を受け付けるものを操作できる
🧠理解可能： 利用者がUIの操作と情報とを理解できる
堅牢 ：利用者が技術の進歩に応じてコンテンツにアクセスできる
アクセシビリティに取り組む利点
Slide 25
Slide 25 text
どんな人が恩恵を受けるのか
25
1. アクセシビリティとは何か
Slide 26
Slide 26 text
Bengo4.com, Inc.
どんな人が恩恵を受けるのか
26
厚生労働省の調査によれば、日本で身体障害者手帳を持っている人の
数は428.7万人です。少なくともこれだけの数の人がアクセシビリティの
恩恵を受ける可能性があります。
引用：https://tech.plaid.co.jp/introduction-to-accessibility
Slide 27
Slide 27 text
Bengo4.com, Inc.
どんな人が恩恵を受けるのか
27
引用
：https://www.mhlw.go.jp/toukei/list/seikatsu_chousa_b_h28.html
視覚障害 視覚・言語
障害
肢体不自
由
内部障害 障害種別
不詳
合計
31.2万人
（7.3%）
34.1万人
（8%）
193.1万人
（45%）
124.1万人
（28.9%）
46.2万人
（10.8%）
428.7万人
Slide 28
Slide 28 text
Bengo4.com, Inc.
どんな人が恩恵を受けるのか
28
なかでも、「一時的な障害 」はよく見落とされがちです。
● メガネを忘れたりコンタクトレンズをなくしたりして画面が見えにくい
● 手を汚したり腱鞘炎になったりしてマウスが操作しづらい
● 職場や電車の中なのでスピーカーで音を聞くことができない
● 飲酒していたり、睡眠が不足していたりして認知能力や学習能力が
低下している
引用：https://tech.plaid.co.jp/introduction-to-accessibility
Slide 29
Slide 29 text
Bengo4.com, Inc.
どんな人が恩恵を受けるのか
29
決して障害者だけの問題ではない ということですね
Slide 30
Slide 30 text
障害者差別解消法
30
1. アクセシビリティとは何か
Slide 31
Slide 31 text
Bengo4.com, Inc.
障害者差別解消法とは
31
行政機関や事業者に対して、障害のある人への障害を理由とする「不当
な差別的取扱い 」を禁止するとともに、障害のある人から申出があった場
合に、負担が重すぎない範囲で障害者の求めに応じ合理的配慮 をする
もの
引用：https://www.gov-online.go.jp/article/202402/entry-5611.html
Slide 32
Slide 32 text
Bengo4.com, Inc.
不当な差別的取扱い
32
障害のある人に対して、正当な理由なく、障害を理由として、財・サービス
や各種機会の提供を拒否 したり、サービスなどの提供に当たって場所や
時間帯を制限したりするなど、障害のない人と異なる取扱いをして障害の
ある人を不利に扱うこと をいいます
Slide 33
Slide 33 text
Bengo4.com, Inc.
不当な差別的取扱い
33
引用：https://www.gov-online.go.jp/article/202402/entry-5611.html
Slide 34
Slide 34 text
Bengo4.com, Inc.
合理的配慮の提供とは
34
障害のある人から「社会的なバリアを取り除いてほしい」という意思が示さ
れた場合には、その実施に伴う負担が過重でない範囲で、バリアを取り
除くために必要かつ合理的な対応をする
Slide 35
Slide 35 text
Bengo4.com, Inc.
合理的配慮
35
車椅子のまま着席できるスペースを確保
引用：https://www.gov-online.go.jp/article/202402/entry-5611.html
Slide 36
Slide 36 text
Bengo4.com, Inc.
合理的配慮
36
難聴・弱視の方のために太いペンで大きな文字を書いて筆談
引用：https://www.gov-online.go.jp/article/202402/entry-5611.html
Slide 37
Slide 37 text
Bengo4.com, Inc.
合理的配慮の提供義務
37
令和3年（2021年）に障害者差別解消法が改正され、事業者による障害
のある人への「合理的配慮の提供」が義務化 されました。
この改正法は令和6年（2024年）4月1日に施行されました。事業者が法
に反する行為を繰り返し、自主的な改善を期待することが困難な場合な
どには、国の行政機関から報告を求められたり、助言や指導、さらには
勧告を受けたりする場合があります。
Slide 38
Slide 38 text
障害の社会モデル
38
1. アクセシビリティとは何か
Slide 39
Slide 39 text
Bengo4.com, Inc.
社会モデルと医学モデル
39
「障害とは何か」を考えるときに、一つのヒントになる障害の社会モデル と
いう捉え方があります。
また、それとは対となる医学モデル があります。
Slide 40
Slide 40 text
Bengo4.com, Inc.
医学モデルとは
40
医学的観点から診断された障害を本質であると捉え、個人的治療により
問題解決を図る考え方です。
つまり、医学モデルの考え方では、障害によって生み出された障壁は個
人の責任であり、治療によって社会に適応していかなければなりません。
引用：https://the-ayumi.jp/2023/01/31/social-model/
Slide 41
Slide 41 text
Bengo4.com, Inc.
医学モデルとは
41
あなたは障害だからあなた自身が責務 を負って障害を治療すればそれ
は障害ではなくなる、というニュアンス
Slide 42
Slide 42 text
Bengo4.com, Inc.
障害の社会モデルとは
42
「障害者差別解消法」は、障害の「社会モデル」の考え方を踏まえている。
これは障害者が日常生活又は社会生活で受ける様々な制限は、心身の
機能の障害のみに起因するものではなく、社会における様々な障壁と相
対することによって生じる ものという考え方である。
引用
：https://www8.cao.go.jp/shougai/whitepaper/r05hakusho/gaiyou/h0
1.html
Slide 43
Slide 43 text
Bengo4.com, Inc.
障害の社会モデルとは
43
つまり、障壁を生み出しているのは社会であり、それを解消するのは社会
の責務であるという考え方
Slide 44
Slide 44 text
Bengo4.com, Inc.
社会によって障害が障害でなくなる
44
株式会社SmartHR様の例
https://accessibility.smarthr.co.jp/specialmovie/
> それぞれの人が自分の力で使える仕組みを職場に加えることで、誰か
が誰かの「やさしさ」だけに依存する必要がなくなり、
Slide 45
Slide 45 text
Bengo4.com, Inc.
社会によって障害が障害でなくなる
45
環境が整備 されていないから合理的配慮が必要になる
環境の整備 が進めばそもそも障害は障害じゃなくなる
Slide 46
Slide 46 text
Bengo4.com, Inc.
我々サービス提供者にとっての責務
46
社会に根付いたサービスを作るということは、社会の責務を果たす必要
があるということ
Slide 47
Slide 47 text
Bengo4.com, Inc.
まとめ
47
● 障害者差別解消法とは、障害者の権利を守る法律
● 障害の社会モデルは、社会の課題に焦点を当てる
● 医学モデルは、個人の医学的問題に焦点を当てる
● 社会モデルと医療モデルは、対照的な考え方
● 障害のある人もない人 も、共に生きやすい社会へ
Slide 48
Slide 48 text
ハンズオン
48
1. アクセシビリティとは何か
Slide 49
Slide 49 text
Bengo4.com, Inc.
ハンズオンについて
49
アクセシビリティが何なのかはふわっと分かったかも？
ただWebシステムにとって一体どう役立つのか というのが分からない
そこで体験をしていただきます
Slide 50
Slide 50 text
Bengo4.com, Inc.
シナリオ
キーボードのみ で対象サイトを操作してください。
あなたは何らかの要因でマウスが使えない人です。
● 目が見えなくてポインタがどこにあるかわからない
● 手が使えなくて言葉での操作しかできない
ポインティング操作ができない場合のブラウザ操作を体験
50
Slide 51
Slide 51 text
Bengo4.com, Inc.
対象
駒瑠市〜アクセシビリティ上の問題の
体験サイト〜 を使用します
https://a11yc.com/city-komaru/index.
php#config
1. こまらない市
2. たいへんなこまる市
51
Slide 52
Slide 52 text
2. アクセシビリティの基礎
52
Slide 53
Slide 53 text
HTMLの最大の強みは
アクセシビリティ
53
2. アクセシビリティの基礎
Slide 54
Slide 54 text
Bengo4.com, Inc.
HTMLの強みは柔軟性
HTMLはコンテンツ制作側がテキストに意味を与えている
コンテンツ制作側でスタイルをつけていることが多いが、
ユーザー側 (ブラウザ側) でスタイルを変更 することも可能
折り返し位置の変更 などもできる
引用
：https://speakerdeck.com/bengo4com/20250405-bengo4com-html
css
54
Slide 55
Slide 55 text
Bengo4.com, Inc.
HTMLの強みは柔軟性
PDFは制作側がテキストにスタイルを与えている
ユーザー側 (ブラウザ側) は基本的にスタイルを変更できない
単純なズーム、拡大縮小には対応するが、
折り返し位置の変更などは難しい
55
Slide 56
Slide 56 text
Bengo4.com, Inc.
基本的に
HTMLの仕様に基づいて
マークアップしたコンテンツは
アクセシブルになる
56
Slide 57
Slide 57 text
アクセシビリティツリー
57
2. アクセシビリティの基礎
Slide 58
Slide 58 text
Bengo4.com, Inc.
アクセシビリティツリー
58
Slide 59
Slide 59 text
Bengo4.com, Inc.
アクセシビリティツリーとは
Webページのコンテンツ構造を、スクリーンリーダーなどの支援技術が理
解しやすいように変換したものです。
ブラウザがHTMLやCSSを解析して構築するDOMツリー（文書オブジェク
トモデル）をもとに生成されますが、視覚的な表現に関わる要素の一部が
省略されるなど、支援技術が必要とする情報に特化 して簡素化されてい
ます。
59
Slide 60
Slide 60 text
Bengo4.com, Inc.
何に使うもの？
読み上げソフトなどの支援技術のために、プラットフォームに特有のアク
セシビリティ API から使用されます
引用
：https://developer.mozilla.org/ja/docs/Glossary/Accessibility_tree
60
Slide 61
Slide 61 text
Bengo4.com, Inc.
アクセシビリティツリーが持つ情報
このツリーは、各要素の下記情報を持っています。
● 「役割（Role）」
● 「名前（Name）」
● 「説明（Description）」
● 「状態（State）」
61
Slide 62
Slide 62 text
Bengo4.com, Inc.
役割 (Role)
その要素が何であるか を示します。HTMLの要素タイプやWAI-ARIAの
role属性によって決定されます。
（例: ボタン、リンク、見出しなど）
62
Slide 63
Slide 63 text
Bengo4.com, Inc.
役割 (Role)
63
表示
DOM
アクセシビリティツリー
プロパティ
Slide 64
Slide 64 text
Bengo4.com, Inc.
名前 (Name)
その要素を識別するためのテキスト 情報です。要素のコンテンツ、alt属
性、aria-label属性などから計算されます。
（例: ボタンのテキスト「メニュー」、リンクのテキスト「駒瑠市環境イベント
エこ・まるシェ」のお知らせ」など）
64
Slide 65
Slide 65 text
Bengo4.com, Inc.
名前 (Name)
65
表示
DOM
アクセシビリティツリー
プロパティ
Slide 66
Slide 66 text
Bengo4.com, Inc.
説明 (Description)
要素に関する補足的な情報を提供します。aria-describedby属性などか
ら提供されます。
（例: 入力欄の例示や補足説明など）
66
Slide 67
Slide 67 text
Bengo4.com, Inc.
説明 (Description)
67
表示
DOM
アクセシビリティツリー
プロパティ
Slide 68
Slide 68 text
Bengo4.com, Inc.
状態 (State)
要素の現在の状態 を示します。
（例: チェックボックスがチェックされているか、要素が開いているか閉じて
いるかなど）
68
Slide 69
Slide 69 text
Bengo4.com, Inc.
状態 (State)
69
表示
DOM
アクセシビリティツリー
プロパティ
Slide 70
Slide 70 text
Bengo4.com, Inc.
アクセシビリティツリーの重要性
支援技術は、このアクセシビリティツリーを通じてWebページの情報を取
得し、利用者に適切な形式 （音声読み上げ、点字表示など）で伝えます。
例えば、スクリーンリーダーはアクセシビリティツリーを読み取り、「これは
ボタンで、名前は『送信する』です」（極端な例）のようにユーザーに伝えま
す。
70
Slide 71
Slide 71 text
Bengo4.com, Inc.
アクセシビリティツリーの重要性
Webアクセシビリティを確保するためには、HTMLの適切なセマンティク
ス（意味）の使用 や、WAI-ARIA属性の適切な利用によって、正確で分
かりやすいアクセシビリティツリーが生成されるようにマークアップを行う
ことが重要です。
これにより、様々な支援技術を利用するユーザーが、Webコンテンツの
内容や操作方法を正確に理解し、利用できるようになります。
71
Slide 72
Slide 72 text
Bengo4.com, Inc.
アクセシビリティツリーの重要性
つまり、アクセシビリティツリーは、Webコンテンツと支援技術の間をつ
なぐ「通訳」 のような役割を果たしていると言えます。適切なアクセシビリ
ティツリーの構築は、アクセシブルなWebサイトを実現するための基盤と
なります。
72
Slide 73
Slide 73 text
ハンズオン
73
2. アクセシビリティの基礎
Slide 74
Slide 74 text
Bengo4.com, Inc.
概要
74
実際アクセシビリティツリーってどんなもの？
何がどう見える？
を体験していただきます
Slide 75
Slide 75 text
Bengo4.com, Inc.
シナリオ
WCAG適合レベルが高いこまらない市のUIのアクセシビリティツリーを見
てみましょう
まずは先のスライドで紹介した箇所を比較し、時間が余れば他の箇所に
ついても見てみてください
75
Slide 76
Slide 76 text
Bengo4.com, Inc.
アクセシビリティツリーを開く手順
1. サイト上で右クリック > 検証 で開発者ツールを開く
2. 要素 タブの2段目の アクセシビリティ タブを開く
3. 要素 タブ内の ユーザー補助ツリービュー を開く
76
Slide 77
Slide 77 text
WAI-ARIA
77
2. アクセシビリティの基礎
Slide 78
Slide 78 text
Bengo4.com, Inc.
WAI-ARIAとは
ブラウザーや支援技術が認識できるさらなる意味論を追加することによっ
てそのような問題に対処し、ユーザーの理解を助ける技術です。
引用
：https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics
78
Slide 79
Slide 79 text
Bengo4.com, Inc.
何のためのもの？
複雑なUIコントロールを作成する際に生じるアクセシビリティの問題に対
処するために存在します。
特に、意味づけされていないHTMLや、JavaScriptによって動的に更新さ
れるコンテンツが含まれる場合に有用です。
79
Slide 80
Slide 80 text
Bengo4.com, Inc.
どうやって使う？：ロール
HTML標準の要素として定義はないものの、UIに多く見られる別のペー
ジ構造を定義 する
例: role="tablist"、role="tabpanel"
https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role
80
Slide 81
Slide 81 text
Bengo4.com, Inc.
どうやって使う？：プロパティ
要素の性質を定義し、追加の意図や意味論を与える ために使用されま
す。
例:
フォーム入力が必須であることを定義するaria-required
他の要素をラベルとして参照できるaria-labelledby
81
Slide 82
Slide 82 text
Bengo4.com, Inc.
どうやって使う？：状態
要素の現在の状態を定義 する特別なプロパティです。状態は主に
JavaScriptによってプログラムから変更されます。
例:
こまる市のメニューボタンにあった開閉状態を示すaria-expanded
フォーム入力が現在無効であることをスクリーンリーダーに伝える
aria-disabled
82
Slide 83
Slide 83 text
Bengo4.com, Inc.
どうやって使う？：通知
aria-liveは、Webページが更新された際に、スクリーンリーダーなどの支
援技術にその変更を通知 するための属性です。コンテンツの動的な変更
をユーザーに伝えます。
https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-live
例: ユーザーの操作が完了したことを知らせる時に出すトーストUI
https://getbootstrap.jp/docs/5.3/components/toasts/#%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b7%e3%83%93
%e3%83%aa%e3%83%86%e3%82%a3
83
Slide 84
Slide 84 text
Bengo4.com, Inc.
注意点1
WAI-ARIA属性は、ブラウザーのアクセシビリティAPIを通して提供される
情報を除いて、Webページに何の影響も与えません
84
Slide 85
Slide 85 text
Bengo4.com, Inc.
注意点2
WAI-ARIAは必要な場合のみ使用するべき であるという重要な原則が
あります。
スクリーンリーダーユーザーの理解に必要な意味論の提供は、常にネイ
ティブのHTML機能を使用して行うべきです。
85
Slide 86
Slide 86 text
Bengo4.com, Inc.
注意点2
WAI-ARIAが必要になるケース
● HTMLのネイティブの機能だけではアクセシブルにできないとき
● HTMLの標準の仕様では実現できない・実現が難しいことをやろうと
しているとき
● コードに大きな変更を加えづらい状況で、少しでもアクセシビリティを
高めようとしているとき
引用：https://qiita.com/ymrl/items/6c9c059208ea11e6d7bc
86
Slide 87
Slide 87 text
支援技術
87
2. アクセシビリティの基礎
Slide 88
Slide 88 text
Bengo4.com, Inc.
支援技術とは
PCやモバイル端末などを使うために支援が必要なユーザー向けに、そ
れぞれのニーズに合うように様々な機能を提供する ソフトウェアやハー
ドウェア、デバイスなどの総称
引用：https://weba11y.jp/glossary/sa/assistive-technology/
88
Slide 89
Slide 89 text
Bengo4.com, Inc.
支援技術とは
Webページを利用する際に使用されている支援技術としては、具体的に
は以下のようなものが挙げられる。
● スクリーンリーダー（読み上げソフト）
● 画面拡大
● 色の反転
● ジョイスティック
● トラックボール
● キーボードガード
89
Slide 90
Slide 90 text
Bengo4.com, Inc.
点字ディスプレイ
引用
：https://www.kgs-jpn.co.jp/archives/welfare-products/bmsair32
90
Slide 91
Slide 91 text
Bengo4.com, Inc.
スクリーンリーダー
画面の内容を音声で伝えます。
視覚障害者、読み書き困難者、学習障害者に役立ちます。
ブラウザ拡張機能だけでなく、システム全体で動作します。
参考：https://developer.mozilla.org/ja/docs/Glossary/Screen_reader
91
Slide 92
Slide 92 text
Bengo4.com, Inc.
ジョイスティック
引用：https://www.at-mall.com/products/optima-joystick
92
Slide 93
Slide 93 text
WCAG
93
2. アクセシビリティの基礎
Slide 94
Slide 94 text
Bengo4.com, Inc.
WCAGとは
WCAG (Web Content Accessibility Guidelines)は、様々な障害のある
人がWebコンテンツを利用しやすくするための、広範囲にわたる技術に
依存しないアクセシビリティの推奨事項 です。
94
Slide 95
Slide 95 text
Bengo4.com, Inc.
網羅性
WCAGに従うことで、様々な障害のある人に対してコンテンツをアクセシ
ブルにする ことができます。具体的には、以下のような障害のある人への
適応が含まれます:
● 全盲又はロービジョン
● ろう又は難聴
● 運動制限
● 発話困難
● 光感受性発作
● これらの組合せ
● 学習障害及び認知限界への一部の適応
95
Slide 96
Slide 96 text
Bengo4.com, Inc.
網羅性
ただし、WCAG はこれらの障害のある人に対するあらゆる利用者のニー
ズに対処するものではないことも明記されています。
96
Slide 97
Slide 97 text
Bengo4.com, Inc.
網羅性
WCAG は、デスクトップ、ラップトップ、タブレット、及びモバイルデバイス
上のWebコンテンツのアクセシビリティを扱います。
このガイドラインに従うことは、一般にWebコンテンツが利用者にとって
より使いやすいものにもなる とされています。
97
Slide 98
Slide 98 text
Bengo4.com, Inc.
網羅性
また、加齢により能力が変化している高齢者にとってもWebコンテンツを
より使いやすくするものであり、しばしば利用者全般のユーザビリティを
向上させます。
98
Slide 99
Slide 99 text
Bengo4.com, Inc.
適合レベル
Webコンテンツのアクセシビリティに対して三つの適合レベルを定義して
います。
これらの適合レベルは以下の通りです:
● レベル A (適合の最低レベル)
● レベル AA
● レベル AAA (適合の最高レベル)
99
Slide 100
Slide 100 text
Bengo4.com, Inc.
適合レベル
各レベルに適合するためには、指定されたレベル及びそれより下のレベ
ルのすべての達成基準を満たす か、又は適合している代替版を提供す
る必要があります。
● レベル A で適合するには、レベル A のすべての達成基準を満たしま
す。
● レベル AA で適合するには、レベル A およびレベル AA のすべての
達成基準を満たします。
● レベル AAA で適合するには、レベル A、レベル AA、およびレベル
AAA のすべての達成基準を満たします。
100
Slide 101
Slide 101 text
Bengo4.com, Inc.
適合レベル
適合はWebページ全体に対して判断されます。ただし、コンテンツの中に
は、レベル AAA のすべての達成基準を満たすことのできないものもある
ため、サイト全体の一般的な方針としてレベル AAA での適合を要件とす
ることは推奨されていません。
101
Slide 102
Slide 102 text
Bengo4.com, Inc.
達成基準紹介
WCAGの達成基準の一部を紹介します
102
Slide 103
Slide 103 text
Bengo4.com, Inc.
達成基準 1.1.1 非テキストコンテンツ
利用者に提示されるすべての非テキストコンテンツには、同等の目的を
果たすテキストによる代替 が提供されている。
https://waic.jp/translations/WCAG22/#non-text-content
例: ![]()
に alt 属性を設定する
103
Slide 104
Slide 104 text
Bengo4.com, Inc.
達成基準 2.1.1 キーボード
コンテンツのすべての機能は、個々のキーストロークに特定のタイミング
を要することなく、キーボードインタフェースを通じて操作可能 である
https://waic.jp/translations/WCAG22/#keyboard
例: ボタンが 要素でマークアップされている
104
Slide 105
Slide 105 text
ハンズオン
105
2. アクセシビリティの基礎
Slide 106
Slide 106 text
Bengo4.com, Inc.
概要
106
WCAGを守ると実装どうなるの？
操作感にどんな違いが出るの？
あらためてこまる市のサイトを触ってみましょう
Slide 107
Slide 107 text
Bengo4.com, Inc.
シナリオ
こまる市のサイトをつかって、WCAG適合レベルが高いサイトと適合して
いないサイトをキーボードのみ で操作してみましょう
107
Slide 108
Slide 108 text
Bengo4.com, Inc.
対象
1. たいへんなこまる市 (適合レベル
はAも満たしていない)
2. こまらない市 (適合レベルAAを満
たしている)
108
Slide 109
Slide 109 text
ここまでのまとめ
109
2. アクセシビリティの基礎
Slide 110
Slide 110 text
Bengo4.com, Inc.
アクセシビリティの基礎
● あるべきマークアップ をしよう
● それにより整理されたアクセシビリティツリー が生成される
● 不足する意味論はWAI-ARIAで補足
● すると支援技術を用いてアクセスしやすくなる
● WCAG基準で試験しよう
110
Slide 111
Slide 111 text
111
3. クラウドサインの取り組み
Slide 112
Slide 112 text
Bengo4.com, Inc.
112
ここからはクラウドサインにおけるローカルな話
Slide 113
Slide 113 text
利用シーン
113
3. クラウドサインの取り組み
Slide 114
Slide 114 text
Bengo4.com, Inc.
114
クラウドサインは
様々な業界やユーザーから 使用されています
Slide 115
Slide 115 text
Bengo4.com, Inc.
115
自治体
電子契約で地方自治体のDXを推進
https://www.cloudsign.jp/governme
nt/
Slide 116
Slide 116 text
Bengo4.com, Inc.
116
医療
PCR検査の手続きを非対面・非接触で実現。高齢者も含め
約8割がクラウドサインで申込。
https://www.cloudsign.jp/case/2022/10/11/taniai-clinic/
製造業
自動車メーカーでも着実に進む電子化。クラウドサインの初
期・運用コストの低さに着目
https://www.cloudsign.jp/case/2022/04/27/toyota-body/
Slide 117
Slide 117 text
Bengo4.com, Inc.
117
社会インフラ としての責務があり
誰もが利用できるようにする
アクセシビリティが必要
Slide 118
Slide 118 text
アクセシビリティ試験
118
3. クラウドサインの取り組み
Slide 119
Slide 119 text
Bengo4.com, Inc.
WCAGに基づいた達成基準試験
119
Slide 120
Slide 120 text
Bengo4.com, Inc.
試験結果の公開
120
https://www.cloudsign.jp/info/20240508_information/
Slide 121
Slide 121 text
Bengo4.com, Inc.
試験結果の公開
121
たくさんの反響がありました
freeeさんからお褒めの言葉をいただいたり、弁コム公式X（旧Twitter）の
投稿は観測史上最高のインプレッションを計測しました
Slide 122
Slide 122 text
実装改善
122
3. クラウドサインの取り組み
Slide 123
Slide 123 text
Bengo4.com, Inc.
123
例1）情報及び関係性を理解する（WCAG達成基準 1.3.1）
ラベルと入力欄が関連付けられていない
と、支援技術を利用しているユーザーはそ
の入力欄が何を入力するものなのか 正確
に把握できない
input要素のid属性にlabel要素のfor属性と
同じものを設定する
Slide 124
Slide 124 text
Bengo4.com, Inc.
124
例2）フォーカス の可視化（WCAG達成基準 2.4.7）
キーボード操作をするユーザーにとっては、
フォーカスが可視化されていないと
現在の場所がわからず 操作ができない。
フォーカスされたとき
視覚的にフォーカスを見えるように する
Slide 125
Slide 125 text
社内布教・仕組み化
125
3. クラウドサインの取り組み
Slide 126
Slide 126 text
Bengo4.com, Inc.
126
アクセシビリティに関する取り組みを社内広報しています
● 機能開発する際にアクセシビリ
ティを意識してもらう
● ビジネスにとっての利点 を開発
以外の部署に伝える
Slide 127
Slide 127 text
Bengo4.com, Inc.
社内用ガイドライン作成
127
● クラウドサインのアクセシビリティガイドライン
● ひとことWCAG
● 逆引きWCAG、あるいは設計時・実装時に気をつけること
● デザイナー用a11yチェックリスト
Slide 128
Slide 128 text
Bengo4.com, Inc.
開発共有会での布教
128
アクセシビリティチームの活動を共有するとともに、当資料のような内容を
他エンジニアに広めています
Slide 129
Slide 129 text
外部イベント
129
3. クラウドサインの取り組み
Slide 130
Slide 130 text
Bengo4.com, Inc.
アクセシビリティチェック
130
全盲の方にご協力頂きクラウドサインのアクセシビリティチェックを実施し
ました
https://youtu.be/YQXA5GRuvtQ?si=xjpu4hm-c4ld9_-w
Slide 131
Slide 131 text
131
まとめ
Slide 132
Slide 132 text
Bengo4.com, Inc.
132
アクセシビリティ
やっていきましょう！
Slide 133
Slide 133 text
133
4. VoiceOver ハンズオン
Slide 134
Slide 134 text
Bengo4.com, Inc.
VoiceOverハンズオンについて
134
今までのハンズオンはマウス操作を封じることで、ポインタ操作ができな
い人のWebへのアクセス体験を簡易的にしてもらいました
ここでは実際に目が見えない方が使用するスクリーンリーダーを使ってみ
ましょう
Slide 135
Slide 135 text
Bengo4.com, Inc.
操作方法
https://support.apple.com/ja-jp/guide/voiceover/vo4be8816d70/10/
mac/15.0
まずは上記サイトを開いて、その上でVoiceOver操作に慣れてみましょう
声が聞こえた方が実感湧きますが騒がしくなってしまうので、イヤホンを
つけてください
135
Slide 136
Slide 136 text
Bengo4.com, Inc.
シナリオ
VoiceOver のみでこまらない市のサイトを操作してみましょう
目が見えない人のブラウザ操作を体験
136
Slide 137
Slide 137 text
137
おつかれさまでした