「第116回「WEB TOUCH MEETING」アクセシビリティSP」に参加してきました

• 2024/4/13
• https://www.webtouchmeeting.com/event/21
• アクセシビリティの話はよく聞きますが新しい学びもあって広島まで行ったかいがありました
  • 障害者差別解消法についてしっかり説明を聞けたのは初めてだった
  • スクリーンリーダーはmacのVoiceOverしか使ったことなかったのでNVDAがどんな感じか知れた
  • iPhoneのVoiceOverで自分が作ったページを聞いてみようと思った
  • 読字障害の人がブラウザ拡張で行間を広げる時に思ってた以上に広くしてたのが学びだった

ウェブアクセシビリティ、今知っておくべきこと

• 植木 真さん

アクセシビリティ

• UXを構成する要素の1つ
• アクセシビリティとユーザビリティ
  • アクセシビリティはそもそも使えるか
  • ユーザビリティはその上で使いやすいかどうか
• 法律で義務化される？
  • No

障害者差別解消法

• 不当な差別的取扱いの禁止
  • 車椅子で介助者いないと入店断るとか
• 合理的配慮の提供
  • 障害のある人から対処してほしいと申し出があった場合負担が重すぎない範囲で対応すること
  • 負担がおもすぎるは様々な要素を勘案して判断する
    • ケースバイケース
• 環境の整備
  • 不特定多数の障害のある人に向けた事前的改善措置

2024/4の改正で何が変わった?

• 「合理的配慮の提供」が事業者にも義務化されるようになった
  • 東京では2018から義務化されてた
• 「環境の整備」は努力義務のまま
• Webのアクセシビリティが義務化されるわけではない

Webサイトでポイント整理

• アクセシビリティを高めておく
  • 環境の整備
• 困っていると言われた時に建設的対話で解消を検討
  • 合理的配慮
• Web以外で解消できることもある
  • 電話やメール
  • ただしWebサイトを改善することでUX向上や同じことで困ってる他の人への対処へつながる
    • 個別対応が減るのでコストも減る

環境の整備のために

• W3Cのガイドライン
  • WCAG -> ISO -> JIS
• 当事者ユーザの声を聞くことが大事
  • ガイドラインに準拠しても合理的配慮の提供を求められる可能性は残る

アクセシビリティとビジネス

• 少子高齢化の促進
  • 見えづらい聴こえづらいなどの人が増えていくということ
  • アクセシビリティに配慮することでビジネスチャンスが増える

よく見つかる問題点

• 見出しのマークアップ
• 画像の代替テキスト
• キーボード操作
• 色のコントラスト
• 動画のキャプション

見出しのマークアップ

• 見た目だけではなくマシーンリーダブルにする
• h1はページに1つ
• 見出しレベルは見手間でなく文書構造で決まる
• 見出しレベルは1つずつ下げる
• 何のセクション化見出しで見極められるようにする

画像の代替テキスト

• 代替テキストｗｐつけてマシーンリーダブルにする
• altだと長くなる場合は別手段でも
  • 説明を本文に
  • グラフと同じデータをたｂぇで
  • モーダルや別ページでもよい
• altの書き方
  • 画像にある文言をそのまま過不足なく書く
  • 省略したり主観を入れたりしない
  • altデシジョンツリー

キーボード操作

• キーボードだけで操作できるように
• スマホやタブレットでも外付けで使ってる人がいる
• フォーカス移動
  • tab or shift + tab
• リンクやボタンを押す
  • enter or スペース
• 選択肢の切り替え
  • 矢印キー
• フォーカスの可視化
  • フォーカスインジケータを明示する

色のコントラスト

• 文字色と背景色のコントラスト比を4.5:1以上
  • hover時の色など注意

動画のキャプション

• 音声情報を字幕でも提供する

見えづらい困りごととアクセシビリティ

• 常岡 天祐さん

発達障害とは

• 医療用語ではなく行政が決めた言葉
• 環境とのミスマッチで困り事が生まれる障害
  • ASD(自閉症スペクトラム)
  • ADHD(注意欠陥/多動性障害)
  • LD(読字障害/書字障害/算数障害)

読字障害当事者のWeb閲覧方法

• 読み上げツールを使う
  • 読み上げる箇所を探すことに疲れる
• フォントや行間をカスタマイズする
  • helperbird
    • ブラウザ拡張でフォントや行間を変えられる
    • https://www.helperbird.com/
  • デモだと行間2行分くらいあけて読んでた

スクリーンリーダーでアクセシビリティチェック

• 西本 卓也さん

スクリーンリーダーとは

• 支援技術
• 視覚的な読みやすさを改善
• 文字を読む

スクリーンリーダーの状況

• PC Talker
  • 83%が使ってる(日本以外では使われてない)
• NVDA
  • 52%(日本で)
• iPhone VoiceOver
  • 90%(スマホユーザ)
• JAWS
  • 11%(世界では61%)
• ナレーター
  • 43%(メインで使う人は少ない)
• WebAIMのデータ

NVDA

• NonVisual Desktop Access
• 請願者と同じコストでパソコンを使えるようにしたい
• 50以上の言語に対応
• OSS
• アドオン
• 日本語版
  • 日本語の音声と点字に対応

スクリーンリーダーでチェック

• NVDAとiPhoneのVoiceOver
• 必要なときだけ起動する
• 操作を少しずつ覚える
• チェックしたいことを絞る

WAI-ARIA

• HTMLでは足りないところを補助するためのもの
• ariaの悪い例も見ることがある
• ARIA-Barriers
  • ariaの悪い例を紹介するサイト
  • https://shuaruta.github.io/ARIA-Barriers/

ウェブアクセシビリティ実現のための組織体制について

• 神森 勉さん

企業ウェブサイト

• 企業のウェブ担当でアクセシビリティを大事に思ってる人は多いが手が回らない
• 自社と顧客をつなげるコミュニケーション
• ウェブの情報入手の制限
  • 屋外で
  • 音が聞けない状況
  • スマホで操作しづらい
  • 言い回しが難しくて分かりづらい
  • →障害の有無にかかわらず発生する
• 企業にとってはウェブサイトとから情報が取れないと特定の顧客とのコミュニケーションを拒否してることになる
• ウェブだけアクセシビリティが高まってもだめ
  • その先についても対応できる環境が整っている必要がある
  • 例えば
    • 採用サイトがアクセシブルになって応募してきたとき受け入れ体制はとれているか
    • レンタルサーバーの申込みがアクセシブルでも実際に利用するコントロールパネルがアクセシブルでないと使えない

人間の尊厳、幸福、アクセシビリティ

• 中道 一志さん

ヌーラボのアクセシビリティ

• Backlogチーム
  • 課題の管理サービス
  • 表示要素がとにかく多い
    • 基本の内容を地道にやっている
• Webサイトチーム
  • サービスがたくさんあってWebサイトが多い
  • 主力のサービスのサイトを重点的に
  • 機能やプランの紹介やヘルプなど要素が多い
  • キーボードや読み上げなどを中心に対応