2025新卒研修・アクセシビリティ #弁護士ドットコム

2025年入社の新卒エンジニア向けに実施した研修「アクセシビリティ」の資料です。弁護士ドットコム 開発本部 クラウドサインProduct Engineering部 書類管理・組織版チーム 林優が講師として登壇しました。

セッションタイトル：2025年入社の新卒エンジニア向け研修「アクセシビリティ」

■ 弁護士ドットコム株式会社プロダクト組織について
https://speakerdeck.com/bengo4com/introduction-for-creators

■ 採用情報はこちら
https://hrmos.co/pages/bengo4/jobs

■ テックブログ：弁護士ドットコム Creators’ blog
https://creators.bengo4.com/

■ X(Twitter)：弁護士ドットコム CREATOR'S
https://x.com/bengo4_creators

Transcript

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