Open8
🥹 アクセシビリティについて学びたい!!
2024年は、アクセシビリティを学んでいくぞ!!!
freeeのアクセシビリティ研修動画
アクセシビリティガイドライン
WCAG (Web Content Accessibility Guidelines)
freeeアクセシビリティー・ガイドライン
Ameba Accessibility Guidelines
STUDIO アクセシビリティ情報ページ
Webアクセシビリティーの4原則
- 知覚可能:画面上にある個々の情報が「存在すること」を知覚できる
- 理解可能:個々の情報が「何を表現しているのか」を理解できる
- 操作可能:クリックや文字入力を受け付けるものを操作できる
- 堅牢:上記3つが、Webブラウザの種類や世代を超えて実現している
本
見えにくい、読みにくい「困った!」を解決するデザイン
アクセシビリティとは
- access + ability → accessibility
- 製品やサービスの使いやすさ、分かりやすさ
- 誰もが、ほぼ同じコストで、ほぼ同じ量の情報を得られ、同じ目標を達成できる
- accessibilityのaとyの間が11文字なのでa11yと表記する場合もある
アクセシビリティで目指すもの
- 特定の誰かのためではなく、すべての人を対象にする
- 特別な専用のものを作るのではなく、同じものを使えるようにする
- 特定の条件での使いやすさではなく、あらゆる条件で使えることを目指す
👉 「アクセシビリティ=障害者対応」と思われがちだけど違う!
障害者とICT
- 上肢障害
- 細かい操作・マウス操作が困難/不可能
- 聴覚障害
- 音声コンテンツの利用が困難/不可能
- 音による注意喚起が難しい場合が多い
- 読みが困難な人(ディスレクシア)
- 色覚多様性・色弱
- 視覚障害
👉 障害者もPCやスマホを、(必要な場合は)支援技術の力を借りて使っている
障害の医療モデルと社会モデル
- 医療モデル: 医学的な事実に基づいて、その人が障害者であると判断する考え方
- 社会モデル: 社会環境の不備がその人の不便を生み、その人を障害者にしているとする考え方
👉 社会のアクセシビリティが高ければ、医療モデルで障害者となる人でも社会モデルでは障害がない人として生きていくことができる。
👉 社会のアクセシビリティが低ければ、医療モデルで障害がない人でも社会モデルで障害者になる。
この考えは知らなかった!😳
参考
今日からできるアクセシビリティ
共有はスクショじゃなくテキストにする
- スクショはスクリーンリーダーで読めない
- 中の文字を検索できない、翻訳もしづらい
- 文字と一緒にスクショを載せるのはアリ
- 引用元のURLがある場合はURLも載せる
色の使い方・選び方に気をつける
- 色の認識は人や状況によって大きく異なる
- 色覚特性がある人には違う色に見える
- モニターの設定によって違う色に見える
- 印刷の場合、経年劣化で退色する
👉 色のシュミレータを使ったり、グレースケールにしたりして見え方を確認する
👉 色だけで区別させるのではなく、形や言葉も併用する
👉 コントラストチェッカーを使って、見え方を確認する
ウェブアクセシビリティの「べき/べからず」ポスターを参考にする
Tappy
- スマートフォンのウェブ画面上のボタンやリンクなどの大きさを分析し、タップの成功率を表示するツール
リンクとボタン