ウェブアクセシビリティ
私
桝田 草一
@masuP9
略歴
- テキストサイトとかウェブ標準とか生まれ
- 新卒で製造業向けの営業マンに
- ウェブへの思いを捨てられずウェブ制作会社の門をたたく
- アクセシビリティやりたくてサイバーエージェント入社
- 4月からあずかるこちゃんのアクセシビリティ向上をお手伝いしてます
アクセシビリティとは
アクセシビリティ
accessibility
access + ability = アクセス可能性
アクセスできる
- 知覚できる
- 操作できる
- 理解できる
- 壊れない
知覚できる
隠しテキストとかもう世代的に通じ無さそう 今年35歳のボヤキ
操作できる
理解できる
আমি একটু অ্যাক্সেসযোগ্যতা দক্ষতা আছে
I have a little accessibility skill.
ワタシハアクセシビリティチョットデキル
壊れない
- 致命的なバグがあって目的が達成できない
- 崩れていて読めない
etc...
アクセシビリティのお隣さんたち
- アベイラビリティ(Availability)
- ファインダビリティ(Findability)
- ユーザビリティ(Usability)
明確に区別されず領域は重なる
もし
- きづけない...
- 操作できない...
- わからない...
- 壊れてる...
👉ユーザー体験どころではない！
アクセシビリティはUXの土台
ウェブをとりまく多様性
デバイスの多様性
閲覧環境の多様性
- 屋外
- 電車の中
- 料理中
- 運転中
ユーザーの多様性
およそ14人に1人
- 身体障害 - 29人に1人
- 知的障害 - 111人に1人
- 精神障害 - 32人に1人
〜づらいは誰にでも
見えづらい（ない）
- 全盲
- ロービジョン
- コンタクト外した
- 高齢者
- 後ろの方の席
- 眩しい環境
きこえづらい（ない）
- 失聴
- 難聴
- イヤホン忘れた
- 高齢者
- 授業中
- うるさい環境
操作しづらい（できない）
- 全身不随
- 四肢欠損
- 怪我した
- 高齢者
- マウスが壊れた
- 手袋している
誰かの使いにくいは、
誰かには使えない。
誰かの使えるは、
誰かには使いやすい。
多様であることの価値
多様性の尊重
法的に求められる
- 障害者差別解消法を根拠法にした訴訟
- 日本版VPATによる行政調達要件の厳格化
どうやってアクセシブルにするか
- 単純化する - ハードルを減らす
- 自動化する - ハードルをなくす
- 選択肢を複数提供する - 高いハードルと低いハードルを用意する
病児保育の予約とキャンセルをウェブでできるという選択肢を増やし、単純化している
あずかるこちゃんは…
👉圧倒的にアクセシブル💪
あずかるこちゃんを通じて、これまで病児保育を利用できなかった人たちが病児保育にアクセスできたとしたら…
ただしこれはサービスのコアコンセプトの話
まだまだ課題は多い…（たぶんね）
あずかるこちゃんが使えなくて
病児保育にアクセスできないとしたら...（逆に）
技術的な話
HTMLをきちんと書く
ガチ本当のマジでマジ
- 分かりやすい
<title> - 見出しは
<h1>~<h6> - リンクは
<a href>、ボタンは<button> - <input>には<label>
<img>にはalt属性を書く
Read the HTML Living Standard
デザイン
- 名前をつける
- 色に頼らない
- 動くものは止められる
やっていきましょう💪