講師：間嶋沙知さん
▼自己紹介
・高知在住フリーランス
・小規模受託案件メイン
・印刷物＋ウェブデザイン
・こぶたと暮らしている
▼「困った！」を解決するデザイン
書籍：2024年09月24日発売
▼アクセシビリティは0か100かではなく高めるもの
現状より多くの人に届く可能性を拡げるもの
減点法ではなく加点法でいこう。
①アクセシビリティってなんだろう
ユーザビリティと間違いやすい
アクセシビリティ：使える状況の幅広さ
使いやすさはアクセシビリティの上に成り立つ
まずは使えるレベルを満たす
その状況をより多くの人に拡げる
・ユーザビリティも向上する
・シャンプーの容器：シャンプーのこきざみに込められた思い 花王
https://www.kao.com/jp/web-accessibility/accessibility-movies/
・ネットフリックス：訴訟をもとに字幕を付け始めた。
https://help.netflix.com/ja/node/116022
▼アクセシビリティのよくある誤解
うちには必要ない？関係ない？
・ユーザーに障害者はいないから
・若者がターゲットだから
・公的機関じゃないから
アクセシビリティが必要ないものはない
無関係な人はいない
アクセスできないと価値や情報、体験を受け取れない
▼ニーズ/ペインの共有
状況 一時的 永続的
たくさんのにもつ 怪我 片腕
騒がしい場所 耳鳴り 聴覚障害
まぶしい場所 白内障 ロービジョン
▼高齢社会
2070年 38.7%
▼障害の社会モデル
社会の側にある壁を取り除けば「障害」はなくなる
×階段のみ 〇エレベーターもある
▼職場に必要なのは、あなたのやさしさです？ SmartHR
https://accessibility.smarthr.co.jp/specialmovie/
▼障害者差別解消法改正
具体的な基準が提供されているわけではない。
×アクセシビリティが義務化されます！
×これひとつで国の要求する基準を満たせます
→事業者の「合理的配慮」の提供が義務化した。
▼合理的配慮の提供
障害のある人から、社会の中にあるバリアを取り除くために
何らかの対応を必要としているとの意思が伝えられたときに
負担が重すぎない範囲で対応すること
Reasonable Accommodation
合理的、適正な 調整。
▼合理的配慮の提供のポイント
建設的な対話をもとに調査を行う
▼環境の設備
合理的配慮が適格に行えるよう、不特定多数の
障害者を主な対象として行う事前の改善措置
アクセシビリティを向上する＝「環境の整備」を進めると
・合理的配慮の提供がスムーズに行える
・いろんな状況で誰もが便利に使える
・社会参加できる人/利用者の母数が増える
▼アクセシビリティ向上のポイント
誰かの「困った！」に気づいて改善すること
改善すればみんなが使いやすくなる
②困った！を解決するデザイン
▼「知らなかった」が壁をつくる
・ユーザーの困りごとを知らなかった
・困りごとの解決方法を知らなかった
▼アクセシビリティは視点を増やす味方
・ユーザーの困りごとを知らなかった
→ユーザーと利用状況を知る
・困りごとの解決方法を知らなかった
→手段や表現の引き出しを増やす
▼書籍：「困った！」を解決するデザイン
・初版は黄色マーカーで強調
改定版は波線
▼色の困りごと①コントラストが低い
ロービジョン：焦点ズレ・光量過多
加齢：白内障
▼アクセシブルな色使いのポイント①
コントラストを確保する
・屋外の直射日光の下
・薄暗い部屋で見ている
・古いモニタ、プロジェクター
・急ぎながら見ている
→さまざまな状況で見えやすくなる
▼色の困りごと②色だけで情報を伝えている
日本人男性の約20人に1人が一般色覚と異なる色覚
→色以外の要素と組み合わせて情報を伝える
▼カラーユニバーサルデザイン
色のわかりやすさを誰もが受け取れるように
▼色覚シミュレーションのチェックポイント
・色の見え方によって読めなくなる情報がないか
・色の見え方が異なっても色分けは機能しているか
・色だけで伝えている情報はないか
▼カラーユニバーサルデザイン推奨配色セット
https://jfly.uni-koeln.de/colorset/
▼文字とことばの困りごと
読みにくさの状況はさまざま
・見えない、見えにくい
・言語の壁
・読書姿勢を保つのが困難
・ディスレクシア
▼アクセシブルな文字とことばのポイント
特性に応じて利用しやすい形式を選べるようにする
▼アクセシブル・ブック
特性に応じて利用しやすい形式でコンテンツにアクセスできる本
読書バリアフリー法 文部科学省
★ここに画像001
▼コンテンツ作成時のポイント
見出しをつけよう
見出しがないと…
・わかりにくい
・情報が見つけにくい
・読む気にならない
▼見出しの役割
見出しは
目を引くために役立つだけでなく
情報を組織化し、
階層構造を明らかにし、
ページ上の道案内となり、
焦点を作り出します。
▼見出しのつけかた
①情報を整理して内容ごとにまとめる
②内容を予測できる見出しをつける
③見た目に反映する
▼さらにアクセシブルに
見出し要素を使おう（書式設定）
・目次が生成できる
・スタイルを一括で変更できる
▼見出し要素を使うコツ
・見出しレベルで階層を表す
・見出しでないものに装飾目的で見出し要素を使わない
③ウェブとアクセシビリティ
ウェブ→どこからでもアクセスできる
ウェブの力はその普遍性にある。
障害の有無に関わらず誰でもアクセスできることは
ウェブの本質的なあり方である。
Tim Berners-Lee
▼視覚障害者のウェブページ利用方法の紹介ビデオ（総務省）
https://www.youtube.com/watch?v=RLIKacI05fE
・VoiceOver
・らくらくマウスIIIジョイスティック型
▼おすすめ
書籍：Webアプリケーションアクセシビリティ
▼何をどこまでやればいいの…？
あらゆる困りごとをカバーできる指針が欲しい！
Web Content Accessibility Guidelines 2.2
https://waic.jp/translations/WCAG22/
▼WCAGの４つの原則
１：知覚可能 29
２：操作可能 34
３：理解可能 21
４：堅牢 2
▼達成基準の３つの適合レベル
A:最低限の基準
達成できないと支援技術を使ってもアクセスできない
AA:望ましい基準
達成できれば支援技術なしでもアクセスしやすい
AAA:発展的な基準
達成できればさらにアクセスしやすくなる
※通常はAかAAを目指す
WCAG 早見表：時代工房
https://www.jidaikobo.com/archives/40.html
・WCAG 解説書 https://waic.jp/translations/WCAG21/Understanding/
・各社のウェブアクセシビリティガイドライン
・Ameba
https://ameblo.jp/accessibility ・freee
https://a11y-guidelines.freee.co.jp/index.html ・LIFULL
https://www.lifull.blog/entry/lifull-accessibility-guidelines ・SmartHR
https://smarthr.design/accessibility/ ・ウェブアクセシビリティ導入ガイドブック（デジタル庁）
https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook
④ここから始めるアクセシビリティ
▼４つの「非干渉」
達成できないと他のコンテンツまで干渉するもの
・音声の制御
・3回の閃光、又は閾値以下
・キーボードトラップなし
・一時停止、停止、非表示
▼非干渉①音声の制御
音声を勝手に再生しない！
▼非干渉②３回の閃光、又は閾値以下
光が激しい点滅する表現を避ける！
（ポケモンショック事件）
▼③非干渉：キーボードトラップなし
フォーカスインジケーターを消さない
2.4.7.フォーカスの可視化（AA）
▼非干渉④一時停止、停止、非表示
コンテンツを勝手に動かさない
動かさずに表示する方法を検討する
AAA11Y：https://www.aaa11y.com/
▼The WebAIM Million：https://accessible-usable.net/2024/04/entry_240411.html
▼コントラストの確保
▼代替テキスト
AIで作ってもらう。
▼チェックリスト
A11y.jp：https://weba11y.jp/
ウェブアクセシビリティ簡易チェックリスト
https://smarthr.design/accessibility/check-list/
アクセシビリティを高めることは
情報・価値・体験が届く人を増やす
クリエイティブな行為
コメント