- 2025/11/19
- https://smarthr.connpass.com/event/373387/
アクセシビリティチェックができるFigmaプラグインを作った
satakeさん(株式会社SmartHR)
https://docs.google.com/presentation/d/1UNMg-EAPKY5GQfQyIRkDXTv12s_jXvJS/edit
- プロダクトデザイン企画室
- デザインシステムの策定推進
- 使いやすいプロダクトのために
- うまく運用していくために
- チェックリストが遠くにあると負荷や漏れが起きる
- 探して確認して反映する
- Figmaプラグインでチェック
セマンティックHTMLで始める アクセシビリティ改善の基礎
hiro (@hiro0218)さん(株式会社ZOZO)
https://docs.google.com/presentation/d/1LkpbpQIsCiMxD167BJVk1tSxFx3-Ndvyo37q5KbFikE/edit
https://speakerdeck.com/zozotech/semantic-html-accessibility-basics
- HTML要素が与える影響
- divにonClickつけてボタンにしたら
- キーボード操作できない
- 支援技術が構造を理解できない
- ブラウザ標準操作がきかない
- buttonを使えばあらゆる課題が解決
- 正しいHTMLを選ぶだけで誰でも使える状態にできる
- divにonClickつけてボタンにしたら
- セマンティックHTML
- 単なる見た目だけではなく情報の意味を強化する
- WAI-ARIA
- どのように判断するといいか
- どんな情報が含まれているか
- 大きい文字は見出しなのかリード文なのか
- 見た目でなく文脈で
- 段落/強調/見出し
- 正しい組み合わせ
- pの中にdivは入れられないとか
- どんな情報が含まれているか
持続可能なアクセシビリティ開発
azukiazusa (@azukiazusa9)さん(株式会社はてな)
https://docs.google.com/presentation/d/1i6H1g_LvDU9qSb4o45k_ycbd_I6o32n88lhyJFUka8s/edit
https://speakerdeck.com/azukiazusa1/chi-sok-ke-neng-naakusesibiriteikai-fa
- 持続可能なアクセシビリティを目指してる
- 誰が書いても80%満たすくらいなところ
- AIが書くコードのアクセシビリティ
- 基本的な部分は人が書くより品質がいい
- 複雑な要素だと余計なことをしてかえって悪くなる
- 無駄にariaをつけたり
- linterなどではエラーにならないのでフィードバックを受けられず気づかない
- 取り組み
入社したばかりでもできる、 アクセシビリティ改善の第一歩
うな (@unachang113)さん(株式会社LayerX)
https://docs.google.com/presentation/d/1ltFeaex0_v8WZQq3cGlRGePGBGTgWQU4oiObcMRP2UA/edit
https://speakerdeck.com/unachang113/ru-she-sitabakaridemodekiru-akusesibiriteigai-shan-nodi-bu
- 入社して最初の取り組み
- アクセシビリティに興味がある人と認知してもらう
- まず自己紹介で興味があると伝えた
- slackチャンネルあれば入る
- コードを読んでプロダクトをさわってみる
- キーボードだけで操作できるとか
- チームを観察する
- フロントエンド/バックエンドもで職種が分かれてない
- チーム外から修正が入ってくることも多い
- アクセシビリティに興味がある人と認知してもらう
- 改善の取り組み
- まずはセマンティックなHTMLに
- Markuplintを小さくいれてみた
- reviewdogでdiffだけに適用
アクセシビリティの向上がそのまま事業貢献になると良い
Pasta-K (@pastak)さん(株式会社Helpfeel)
https://docs.google.com/presentation/d/1trkBgfi-5jHzehXhGqX5oXftVMboe-ZvvsB4_GS9Y6c/edit
https://speakerdeck.com/pastak/akusesibiriteinoxiang-shang-gasonomamashi-ye-gong-xian-ninarutoliang-i
