Upgrade to Pro — share decks privately, control downloads, hide ads and more …

アクセシビリティ

 アクセシビリティ

Cybozu

July 13, 2023
Tweet

More Decks by Cybozu

Other Decks in Technology

Transcript

  1. 杉崎 信清 視覚障害(全盲) スクリーンリーダー・キーボードネイティブ • 2020年 新卒⼊社→アクセシビリティチーム • アクセシビリティの啓発 •

    開発チームの⽀援 • 2022年 kintone Design Team(兼務) デザインテクノロジスト • デザインシステムの開発、保守、普及 趣味︓ワイン、読書、⿃と遊ぶこと ⾃⼰紹介
  2. すべての⼈=多様な環境・ツール・特性 環境 ▌ ࡏ୐ۈ຿ ▌ ւ֎ۈ຿ ▌ ෭ۀ ▌ ࣌୹ۈ຿

    ▌ ిंͷத ▌ ޻৔ͷத ▌ ਤॻؗ ▌ ΧϑΣ ▌ ԰֎ ▌ ໷ؒ ツール ▌ PC ▌ スマートフォン ▌ タブレット ▌ モニター ▌ マウス ▌ キーボード ▌ トラックパッド ▌ ⾳声⼊⼒ ▌ スクリーンリーダー ▌ 拡⼤鏡 ▌ リアルタイム字幕 個⼈の特性 ▌ 年齢 ▌ 性別 ▌ 国籍 ▌ ⼈種 ▌ 能⼒ ▌ スキル ▌ ⾊覚多様性 ▌ 視覚障害 ▌ 聴覚障害 ▌ 肢体不⾃由 ▌ 精神障害 ▌ 発達障害
  3. キーボード操作についての注意 • HTML標準のインタラクティブ要素はキーボードで操作できる • button, select, input要素など • 以下は⾃分でキーボード操作を実装する必要がある •

    独⾃のUIパーツを作る場合 • マウスに依存する操作を提供する場合(ホバー、D&Dなど) • キーボードフォーカスしたときのスタイルをつける
  4. デザイン 実装 やるべきこと(⾒出し・ランドマークなどの⽂書構造をマークアップする) デザイン • ⾒出しはh1...h6要素でマークアップする • header, footer, nav,

    aside...を使う • モックの段階で⾒出しにする箇所を決める • モックの段階でランドマークにする箇所を決める