多様な視点からアクセシビリティについて知れて有意義だった。視覚過敏の方、発達障害(ディスレクシア)の方の登壇があり、それぞれの経験・観点からアクセシビリティが語られることで、その意義や身近さを説得力高く感じた。加えてインフラ・バックエンドエンジニアでありながらフロントエンド領域に染み出してアクセシビリティ向上に取り組んでいる事例がとても印象的だった。
イベントページ:https://yumemi.connpass.com/event/328775
見えない部分のウェブアナリティクス
ゆめきちさん
- Semantic HTML→アクセシビリティ改善、SEO対策
- WCAGチェックシートの活用
- Lighthouse (Google) の活用
テストから始めるWebアクセシビリティ
すずきゆーだいさん
- 例として、プルダウンメニューの各要素の
role
属性を指定し分けることで、テストのしやすさと同時にアクセシビリティも改善する aria-expander
/aria-selected
といった属性指定も活用することで、テストの他にもスタイリングのしやすさにもつながる- テスタビリティをあげることが必ずしもアクセシビリティ向上に寄与するわけではないため、慎重に行うこと
- 複雑なUIコンポーネント実装は、アクセシビリティを考慮したライブラリ仕様も検討する
はじめてのアクセシビリティ実践記
尾崎 勇一さん
- Yahoo! ショッピング巨大な開発チーム、アクセシビリティへの取り組みが十分とは言えない状態、サービス規模からアクセシビリティ担保の社会的責任がある
- アクセシビリティを意識した開発、独自UI定義をしたフォームやh1のみ見出しの整理改善を実施
- 離れたら運用されず、トップダウンでの組織浸透も大事
- 企画・ビジネスサイドがアクセシビリティに馴染みなかった、受け入れ試験時の、キーボード操作を確認依頼した「できることから一歩ずつ」
- ボトムアップ+トップダウン、全社横断チームでの実践
みんなに知ってほしい視覚過敏のアクセシビリティ
Oriさん
- 視覚過敏とは?光や色、動きなど目からの刺激が過剰に感じられ、苦痛に感じる状態。
- 視覚過敏から見た、WCAG4つの項目
- 2.3.2 3回の閃光:点滅を控える。アニメーションなどで注意
- 2.2.2 一時停止、停止、非表示:カルーセルなどに一時停止ボタンを設置する(動くことで集中できない。カーソルで停止できるものも一見判別できないのでボタンで可視化する)
- 1.4.8 視覚的提示:テキスト幅、行間行送りや段落などタイポグラフィレベルの整備
- 1.4.3 コントラスト(最低限):コントラスト比、コントラストチェッカー利用、ただしあまりに高すぎるも注意、明度高い面積など
- 視覚過敏の人のデジタル環境について(モニター調整/テーマカラー設定、選べるテーマ多いと良し)
- アクセシビリティの話 → 自然にプロダクトの話になる、さらに良いプロダクトが社会に増えるのでは
ユーザーに聞いてみよう!
小野 高志さん
- Yahoo! 天気・災害サービスでの実践事例
- 各種チェッカー・シミュレータの活用(コントラストチェッカー/色覚特性の違いによらず判別できる色指定)
- ライブラリの活用(コントラストや色相が担保された社内ライブラリ)
- 視覚障害当事者に聞くことにより、セルフチェック以上の事例が発覚した
- 拡大してみることにより、イラストの理解しづらさ、画面領域外の選択肢項目に気がつけない
- 視力の低さから、イラストのモチーフがわからない、入力フィールドに気がつけない
見えづらい困りごとから考えるアクセシビリティ
Tenさん
- 発達障害の診断数は増加傾向、「障害・疾病名」でなく「困りごと」起点だとさらに多くなる
- 困りごとの事例
- 1. 文字量の多さ、行間、表現方法(比喩、挟まれる広告など)により、理解が難しい、集中できない
- 2. アニメーション、音声など動き → ストレスを感じたり、集中できない
- 3. 色やコントラスト、レイアウト → 色の多さによる疲れ、レイアウト変化に対応できない、低コントラストにより認識しづらい
- ディスレクシアのPC・スマホ活用方法:読み上げツール(VoiceOverだけでなく、直接選択による読み上げ、画像のALT指定)、ブラウザ拡張機能によりフォント・行間のカスタマイズをしている