今日からはじめるWebアクセシビリティ
ymrlさん(フリー株式会社)
https://docs.google.com/presentation/d/1l6pznNkfzXrtIM8DadlgCQTHVmM7GOLTFwkL8IY8eaQ/edit?slide=id.p#slide=id.p
- Webアクセシビリティ
- Webを利用することができる裾野の広さの度合い
- 利用できる人が1人でも多くなることを目指す指標
- 北米や欧州ではWebアクセシビリティの法的義務があるところも
- 日本では努力義務
- 障害者の社会モデル
- 個人モデル
- 医学的な観点での「障害者」
- 社会モデル
- 社会がマジョリティに最適化されていて障壁となっていること
- 社会の障壁がなくなれば障害者として扱う必要がなくなる
- 個人モデル
- Webアクセシビリティに完璧なんてない
- 聞いたこともない種類の障害のある人が使うかもしれない
- 聞いたこともないブラウザやツールを使ってアクセスせざるを得ない人がいるかもしれない
- 日本語や英語が母語ではないかもしれない
- 作り手の想定を超えた状態のユーザは常に存在する
- 想定ユーザにそんな人はいない？
- もともとのユーザが病気や怪我になるかもしれない
- ユーザの家族や友人などが代わりにアクセスするかもしれない
- 本当は使えないのにアクセシビリティが低くて使えない人がいるかもしれない
- Webアクセシビリティに取り組む意味
- Webはすでに社会のインフラ
- 障壁は減らしていく責任
- Webアクセシビリティが高まることで可能性が広がる
- Webはすでに社会のインフラ
- ガイドライン
- 2025年のおすすめルート
- 自分や周囲の人が「使いづらいと思っていることを見つける
- ツールを使って機械的に問題を見つける
- ツールで見つかる問題は2-3割
- 修正箇所の数は体感7-8割くらい
- コーディングスキルや知識の差が如実に現れる
- axeとLighthouse
- Lighthouseは内部でaxeを使ってる
- Accessibility Bisualizer
- 緑の人間マークはアクセシブルネーム
- ここに変なのが出てるとまずい
- 赤や黄色で警告が出てたら調べる
- 緑の人間マークはアクセシブルネーム
- ツールで見つかる問題は2-3割
- AIに相談してなおす
- 身近に詳しい人がいなくてもAIがけっこう正しいことを言ってくれる
- 必ず最後は人間が判断するように
- もっと詳しく知りたくなったら書籍を読んでみるといい
- 見えにくい、読みにくい「困った！」を解決するデザイン
- ウェブアクセシビリティ導入ガイドブック
- Webアプリケーションアクセシビリティ
- デザイニングWebアクセシビリティ
- 失敗例と成功例から学ぶ Webアクセシビリティの教科書
デザインシステムでA11y品質が担保できなかった「3つの理由」
たじまんさん(株式会社SmartHR)
https://docs.google.com/presentation/d/1hEoFqfJfDWL-Xv2h9uLEVWky_XNwewoGHY0J2VVNAlw/edit?slide=id.p#slide=id.p
https://speakerdeck.com/schktjm/dezainsisutemude-akusesibiriteipin-zhi-ga-dan-bao-dekinakatuta-3tunoli-you
- SmartHR Design System
- https://smarthr.design/
- コンポーネント集だけでなくブランドらしさを定義したもの
- アクセシビリティ基準/ガイドライン
- アクセシブルなコンポーネント
- 正しく使ってもらうためのカスタムlinterルール
- デザインシステムがあるだけではアクセシビリティの品質を担保できなかった
- 発生してしまった問題事例
- チェックボックスのアクセシブルネームがない問題
- 空文字問題
- 入力要素は特に気を使う必要がある
- アクセシブルに実装しやすいコンポーネントを提供していた
- 不足があればESLintでエラーになるから気づけるはず
- 空文字を入れることでエラーを回避できてしまった
- コンポーネント利用者と提供者で最低品質の認識が違っていた
- 提供者はエラーが出て理由を調べて対応してくれることを期待
- 利用者はスピードを求めるのでエラーを回避してはやくリリースしたい
- そもそも知らなかった可能性
- 開発時にアクセシビリティ基準を満たす必要があることを知らなかったかもしれない
- 知っているけどやれなかった可能性
- アクセシビリティの品質を考え評価するプロセスが含まれてないかもしれない
- 機能実装と学習の両立の難しさ
- linterでエラーが出てもそこに踏み込んで学習している余裕がない
- エラーは教育コンテンツにならない
- 専任チームがいることによる課題
- 意識しなくても品質担保ができるようになってくる
- 問題が少ないと関心を持つ機会も減ってしまう
- 3つの対策
Spindle 2025：AIエージェント×デザインシステムで変わるWeb開発
原 一成さん(株式会社サイバーエージェント)
https://speakerdeck.com/spindle/spindle-2025-how-ai-agents-and-design-systems-are-transforming-web-development-f79b09e0-d0be-4cb1-bfe3-9015768eba14
- Spindle
- Amebaらしさを定義したもの
- https://spindle.ameba.design/
- 去年までとの変化
- Spindleの開発フロー
- Suggest - Design - Document - Develop - Publish
- 全ての工程にAIが組み込まれた
- Spindleの開発フロー
- Spindle MCP
- Design to Code
- リポジトリの改善
- たくさんの変更が来ても受け入れられる状態に
- 依存ライブラリの更新
- AIがリリースノート見てやってくれたりする
- テスト環境のアップデート
- 不要なテストを整理したり
- 依存ライブラリの更新
- AIエージェント向けのドキュメント整備
- たくさんの変更が来ても受け入れられる状態に
UIデザインに役立つ2025年の最新CSS
池田 泰延さん(株式会社ICS)
https://speakerdeck.com/clockmaker/the-latest-css-for-ui-design-2025
