見出し画像

Webアクセシビリティの学校 特別授業

さっちゃん

いま私の中で話題のアクセシビリティ。
今回は「デザイン」という切り口の特別授業を受講です。

インクルーシブデザインで“未来の当たり前”をつくる

株式会社コンセント　佐野実生さん

ウェブアクセシビリティは誰かのための特別対応ではない。
ウェブアクセシビリティは可能性を広げる。

アクセシビリティ／インクルーシブを少し意識するだけで、伝えたかったものがもっとより伝わりやすくなる。
制約ではなく、可能性。

インクルーシブデザインとは？
選べる自由があり、一人ひとりにとって嬉しいデザイン

未来の当たり前とは？
時代や環境とともに「当たり前」は常に変化し続ける
例）リモートワーク
・対面での会議やセミナーができない
　→　外に出られない／遠方に住んでいる
・家族がいるので会議でマイクをONにできない、音を出せない
　→　声が出せない／音が聞こえない
・ネット回線が弱くてビデオがONにできない
　→　目が見えない
過去には特別なニーズだったものが、時代の変化によって多くの人が満たされたいニーズに変わっていく。

多様性：Diversity
多様性には2種類ある
・タスク型多様性：知見、能力、価値観など
・デモグラフィー型多様性：性別、国籍、人種、年齢など
→「みんな」にあわせると「誰にもあわなくなる」
→「みんな向け」より「ひとりひとり向け」

今日からできること
選べる自由を増やす
→　いろんな使い方、可能性を検討する
→　実施可否ではなく、考える・着目することがまずは大事

ウェブ制作に活かすユニバーサルデザイン

majima DESIGN　間嶋沙知さん

ユニバーサルデザインとは？
→　様々な状況の人が同じものを使える
→　利用者全体のユーザビリティが向上する
・バリアフリー：バリアを取り払い使いやすくする
　→　対象＝障害者など
・ユニバーサル：はじめからバリアを作らないように設計する
　→　対象＝すべての人

色覚特性に配慮した色使い
良い色使い＝その目的が達成できるかどうか
・感性的役割：イメージを伝える
・機能的役割：文字を読ませる、区別／分類／状態を伝える

色を見るのに必要な3要素
・光
・物体
・視覚
→　光に反応する錐体細胞の反応バランスで色の認識が異なる
→　高齢者が見分けづらい配色は一般色覚やロービジョンの方にも見分けづらい

見分けにくい配色に気づくことはカラーユニバーサルデザインの第一歩
→　シミュレーターを利用する
→　色以外との組み合わせる：色　×　形、大きさ、太さ、模様、文字
　　→　複数の手段で除法を伝える工夫をする
→　みやすく調整する　　

「読みやすい」フォント選びと文字組の基礎
様々な「見えづらさ」を解消する文字＝UDフォント
・字面を大きく
・画線をシンプルに
・アキの確保
・独立したシルエット
→　視認性、判読性の向上
→　可読性や演出が満たせないことはある

よく使われている場所
・正しく読める
・スペースが限られている
・様々な人が利用する
・間違えてはいけない
・安全に関わる
・公共性が高い

文字組の基本
・文字サイズ
　→　ストレスなく読めるサイズを確保する
　→　ユーザーによる文字サイズやフォント、色の変更を可能な状態にする
　→　文字情報はテキストで提供する
・一行あたりの文字数
　→　本文：40字/1行が目安
・適切な行間
　→　文字サイズの1.5倍の行送り
　→　適切な行間は行長に比例する
　→　リスト項目の間の行間は広めに
・文字揃え
　→　本文の基本は左揃え
　→　Webでの両端揃え／中央揃えは避ける

よくある質問
ユニバーサルデザイン＝表現が制限される
→　目的にあった選択／組み合わせの工夫
→　より多くの人に確実に情報を届ける武器になる
地方の中小案件には不要？
→高齢化、多様化、オンライン化が進む今、地域に関係なくメリットがある

みんなのためのコントラストとデザインの話

HUMORE　たじまちはるさん

デザインで意識すること
誰に／何を／どうやって伝えるか？
→　アクセシビリティを考慮するとそれぞれのシーンをより深く考える
→　どんなシーンでも情報を得られるように

コントラストとは？
コントラスト比＝背景と情報の輝度の差
→　コントラストが低いと埋もれて見えにくくなる

コントラストを使ったデザインテクニック
・メリハリ：みやすさの整理と確認をする
　配色で悩んだら明度のみに置き換える
　→　その状態でも一番伝えたい情報が伝わるか？
　→　明度に置き換えると色覚特性に見え方が左右されにくくなる
　→　色の有無を問わない視認性を担保できる
・表現力アップ：コントラストの使い所と明度の幅を活用する
　彩度理解すると1色の濃淡でビジュアルを整理できる
　→　装飾も情報もみやすくなる
　→　1色の濃淡で整理するとポイントカラーを入れやすい
　→　伝えたい情報を見やすくする＋装飾の表現を豊かにする
・情報の強弱：情報に差をつける
　色＋明度差で情報をグルーピングする
　→　文章を階層構造で整理する
　　　→　マークアップもしやすい
　→　コントラスト比4.5以上を基準に情報の見やすさを守る
　→　流れと俯瞰した見やすさを作る

アクセシビリティ、デザイナーの関わり方と仲間の増やし方

Chatwork株式会社　守谷絵美さん

リスク予見
デザイン制作では様々なリスクに注意を払っている
→　著作権、肖像権、ブランドガイドライン・・・＋アクセシビリティ
→　デザインが人を「排除」するリスクへの対処＝アクセシビリティ
　　→　デザインが人を傷つけることさえある
→　アクセシビリティに正しく考慮することは社会的評価・アピールにも
　　ex）3DGs：福祉、教育、働きがい、平等など
　　→　諸外国に比べて日本は対応が遅れている
　　→　アメリカでのADA訴訟件数の増加

相手に合わせて戦略を立てて攻略していく
・デザイナーに関心を持ってもらう
　・自分たちでできることを考える
　　→　カラーユニバーサルデザインについての共有
　・全体像や「裏」を説明する
　　→　サイトのアクセシビリティテストの実施
　　→　誰がルールを決めているのかを丁寧に説明
　　→　有名なデザインガイドラインとアクセシビリティの関係を説明　
・エンジニアの気を引く：やりたいと思わせるアプローチ
　・テクノロジー方面からのアプローチ
　　→　アクセシビリティが特別な人のためのものではないことを伝える
　　→　実際にスクリーンリーダーを操作し現状を実感する
　　→　デザイン×開発での意見交換
・要件を探り、解決方法を導き出す：改修したいを叶える
　・実行を妨げられる要因を洗い出す
　・ステークホルダーがGOを出しやすくする

Keyword：エシカルデザイン

世界を変えるためのデザインシステム

freee株式会社　山本伶さん

Webアクセシビリティ難しすぎる問題
・「誰のため」が難しい
　→　Webが使えなくて困ってる人になかなか出会うことがない
　→　コストが増えてメリットが少ないように思われる
　→　なぜダメなのかが納得できない
　→　スクリーンリーダーの話をすると視覚障害の人のためのものっぽい
　　　→　目の見えない人が身近にいない
　　　→　実装者じゃないから関係ない
　→　マーケティング対象として障害者が認識されないので優先度が低い
　　　→　工数の増加に見合う効果があるかどうかわからない
　　　→　「困っている」人の姿が見えない
・「何をやる」が難しい
　→　扱われる問題や手法がさまざまな領域にまたがる
　→　アクセシビリティの情報体系と分業の情報体系が一致しない
　→　職種／専門外の知識や行動が必要になる
・「誰がやる」が難しい
　→　分業の枠を越えるのが難しい
　→　1人ですべてをやるのは難しい

みんなで理解して、みんなでやる
・特定の誰かのためではなく、抽象的な品質として捉える
・実際の業務フロー／体制にあわせたやり方を整備する

デザインシステムの構築
Sketchシンボル＝Reactコンポーネントとして共通のUIコンポーネント集
→　開発効率向上
　　コンポーネントの組み合わせでデザイン
　　HTML/CSSを書かなくてもフロントが組み上がる
　　→　簡単に画面が作れる
→　UIの品質向上
　　ブランドイメージ、ユーザービリティ、アクセシビリティの担保

デザインシステムをベースにする
・アクセシビリティを何も考えずに画面を作っても落第点にはならない
　→　コントラスト比を意識したカラーパレットの色
　→　実装が難しいものが最初から組み込まれている
　　例）メニューの開閉、キーボード操作、モーダルダイアログ
・問題もある
　→　コンポーネントに内包できないものがいろいろある
　→　使いたいものがないと独自に作っている

アクセシビリティが難しすぎる
・WCAGガイドライン
　→　内容が抽象的
　→　どこまでやればいいのかわからない
・ガイドラインをベースに自社独自のルールを決める
　→　ガイドラインの運用体制を決める
　→　チェック体制を作る
　　　→　開発しながら各工程でチェックできるリストを作成
　　　→　職域に応じてチェックする項目を分類

世界を変えるためのデザインのためのデザイン
すべての人に届くようなデザインができれば、世界を変えられる
→　そのための仕組みやチームをデザインする


参考

Twiiter#a11y学校



この記事が気に入ったらサポートをしてみませんか？