「現場のプロが語るWebアクセシビリティLT会 第1回 〜デザインと開発の現場から届けるリアル〜」に参加してきました

基調講演

諸熊浩人さん(株式会社U'eyes Design)

  • ウェブアクセシビリティが必要とされる背景
    • 2024/4改正障害者差別解消法
  • 国内での動き
    • 建物などは昔から進んでる
      • 1994年ハートビル法
  • 国外の動き
    • 1998米国リハビリテーション法508条
    • 最近だと2025に欧州アクセシビリティ法
  • JIS X 8341-3
    • ウェブ技術を用いたコンテンツのアクセシビリティ品質基準
    • WCAG2.0ベース
  • アクセシビリティ失敗談
    • PCなのにスマホ表示になってしまう
      • 200%にしたときに起きる
      • PCじゃないとできない操作
    • アクセシビリティの指摘がサイト全体に影響して納期が遅延
      • 設計初期段階で考えないといけない配色やレイアウトなど
      • 動画の字幕などコンテンツ制作者でないと分からないところ
      • 終盤で検査してなおせばいいとはいかない
  • ウェブアクセシビリティ評価ツール
    • WAIV2
      • Ueyes Designの有料製品
      • CSS/JSの解析もする

アピリッツLT①

くろす。さん(株式会社アピリッツ デザイナー)

  • オレンジ色の壁
    • コントラスト比を満たすのが難しい
    • AA準拠の壁
    • ブランドカラーがオレンジや緑だとNGになることが多い
  • 試行錯誤
    • オレンジの色を微調整
      • ブランドイメージとの乖離
    • あしらいでブランドカラーを使う
      • 印象付けるため
    • アイコンに頼らない
      • アイコンだけで表現するのはNGなのでアイコンでブランドをアピール
    • -> 情報構造を理解していないとどこを装飾すべきか判断できない

U'eyes Design LT

三好佑紀さん(株式会社U'eyes Design デザイナー)

  • アクセシビリティ
    • できないをなくす
    • すべてのユーザ
  • ユーザビリティ
    • できるをよりできるに
    • 特定ユーザやシーン
  • ユーザビリティ評価
    • ユーザビリティ評価だけではアクセシビリティのことまで考慮しきれない
  • アクセシビリティとユーザビリティは相互に関わり合ってる
    • どちらかではなくどちらも

アピリッツLT②

内田晴風さん(株式会社アピリッツ デザイナー)

  • 作るプロセスからアクセシビリティの担保が必要
    • 一部の職種が頑張るだけでは難しい
    • 作り手が迷うような状況ではうまくいかない
  • 実践例
    • プロジェクトの情報を毎回同じフォーマットにまとめる
      • 引き継ぎや途中参加のハードルが下がる
      • 属人化を防げる
      • 3.2.3一貫したナビゲーション
    • 迷わないFigmaデータを作る
      • 認知負荷を下げるための整理
      • ページのIDやタイトル
      • 作成状況のステータス
      • セクションや見出しを使って構造を整理
      • 3.2.3一貫したナビゲーション
      • 2.4.6見出し及びラベル
    • 用語集を作る
      • プロジェクト内での用語集
        • 業界特有の専門用語や略語
      • UI/プロダクト内で使う用語集
        • プロダクト上のラベルなどの用語
      • 3.1.3
      • 3.1.4
  • 目の前のプロジェクトの改善がエンドユーザが使うものの改善にもつながる