2024/7/17開催のアクセシビリティLT会の雑参加レポ。
URL
イベントページ
イベントアーカイブ
セッション
1. ゆめみのアクセシビリティの現在地と今後
X： https://x.com/ryo__kts
スライド： https://speakerdeck.com/ryokatsuse/yumeminoakusesihiriteinoxian-zai-di-tojin-hou
取り組み
→まだまだ社内的にも社外的にもa11yやっていきとは言えない
- ４年前から、、、
- スクリーンリーダー体験や、WCAG2.1輪読会など実施
- 今
- 輪読会
- デジダル庁webアクセシビリティ導入ガイドブック
- Webアプリケーションとアクセシビリティ
- a11y雑談会（職種問わないものも実施）
↓
- 輪読会
- 何かしら活動はしているが、全体に浸透しているとは言えない
- 向き合い方がわかってない
→ 「アクセシビリティが全ての土台・基盤であり、ユーザビリティはその基盤の上に成り立つものだ！」ということを伝えていきたい
浸透・学習（自分ごとにする）
- a11yに取り組む会社を参考に
- [困った！を解決するデザイン]https://komatta-design.studio.site/ を参考に
- 普段の仕事からa11yを意識
- チェック項目の導入やオンボーディングに組み込む
実践
- a11yに取り組むことを前提に見積もりとセットにクライアントに提案
- 要件定義・デザイン・開発・テスト・運用というそれぞれのフェーズで、具体的にどんなことに取り組むのか？
課題
- 熱量を冷まさない
- 職種が違ってもお互いに歩み寄る
- スキルの平準化
→アクセシビリティタスクフォースの結成
感想
- なかなか事業の貢献として大きくつながるものではないため、自分ごととして捉え、当たり前の完成にしていくことが大事なんだろうな
- 「アクセシビリティが全ての土台・基盤であり、ユーザビリティはその基盤の上に成り立つものだ！」というのはもう少し自分で咀嚼したい
2. 「アクセシビリティ対応」の先を見る 「デジタルアクセシビリティアドバイザー認定試験」を受けてみた
X: https://twitter.com/haribooooom
スライド： https://www.figma.com/deck/uVTS7a2QsZUCFy4cMwE738/%E3%80%8C%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E5%AF%BE%E5%BF%9C%E3%80%8D%E3%81%AE%E5%85%88%E3%82%92%E3%81%BF%E3%82%8B?node-id=1-71
note: https://note.com/haribom/n/n9a6caf61341c
a11yは、
- 社会で関わるすべての人の生活に関わる
↓
- 社会で生きるすべての人とは？
- 誰のためのa11yをやろうとしている・・・？
→勉強不足
→「デジタルアクセシビリティアドバイザー認定試験」を受けました
内容は、障害の理解・テクノロジーの理解・アクセシビリティ機能について
誰のためのa11yをやろうとしている・・・？
→a11y対応だからやるではなく、実際に障害を勉強した上でプロダクトを使う人に寄り添って開発をしていきたい.プロダクトの先にいる人に目を向ける。
感想
- 結局私たちはプロダクトの向こうにいる人に対してプロダクトを届けるのである。一歩先を考えた動きをしていく必要がある
- そのためにもユーザーを理解する必要がある。ユーザーのことも知らずただa11yに取り組んだというのは、ただの自己満足なのかもしれない
3. 「アクセシビリティが低いWebアプリ」を作ってみた
X: https://twitter.com/ygkn35034
スライド： https://ygkn.github.io/a11y-lt-made-low-accessible-web-app/#/1
小ネタ（障害）満載のWebアプリを作ってみて
↓
- 知識は力。知っておくと修正できることはたくさん
- チェックツールの特性を理解しよう
- 静的解析はコードベースで判断できる
- biomeとか、eslint-plugin-jsx-a11yとか
- https://qiita.com/Yasushi-Mo/items/524330da3723ab1018d7
- 動的解析は実際に動くものをみて確認
- 静的解析はコードベースで判断できる
- チェックツールでは2~3割ほどしか問題を発見できない
- 最初からa11yを考慮して設計・開発したいね
アクセシビリティ対応のグラデーション
- 「使用者の多くが困る」と「支援技術使用者が困る」は延長線上にある
- 特別なアクセシビリティ対応（特定の人しか困らないなど）、グラデーションであるので、これが実装されなきゃ誰がどういう状況で困るのかを都度考えて実装する必要がある
感想
- a11y、知っておくだけでも最初から対策しておけることの幅が広がったり、ユーザーの使うシーンをたくさん想像しながら開発できるのってエンジニアの中でもかなり大きい強みだなと思った
- 「使用者の多くが困る」と「支援技術使用者が困る」は延長線上にあるというのも、もう少し咀嚼したい
4. Webサイトのアクセシビリティ検査方法について
X： https://twitter.com/manasugiyoshi
紹介するツール： axe DevTools Pro
プロセス
- 自動検査
- AI検査
- 主導検査
見聞きする感じかなり便利そう。
- どこが引っ掛かっているか、どう修正したら良いかを教えてくれる
- 検査結果の保存、見返しも可能
- 結構サクッと終わる
- キャプチャも勝手にやってくれる
- 手動テストのナレッジもたくさん
- テスト結果のURLも共有できる
感想
- 明日使います
- 全然テストツール使ったことないので、そこから勉強します
5. 1週間VoiceOver生活
X: https://twitter.com/RuiOkazaki_
スライド： https://gamma.app/docs/1VoiceOver-q8utjtcmjf8z8jw
a11yを実装した先のユーザーに寄り添ってる？ユーザーへの理解、足りてる？
→1週間VoiceOverで生活しました
- iOS18でVoiceOverのチュートリアルがおすすめ
- スムーズな操作をするために知らないこと・操作がたくさん
- 読み上げは色々カスタマイズが可能
- VoiceOverに対応した音ゲーがある
- 重なりのあるUIが難しい
- 読み上げテキストがないと何のボタンかわからない
- 選択できない項目やリッチエディタは難しい
- 初心者でも問題なく過ごせた
感想
- 漢字入力は中国語の手書きキーボードで使えるはず（ひらがなは使えない）
- 私もやりてえ
- スライドが気持ちええ
6. アクセシブルなインクリメンタルサーチを作ってみた
X: https://twitter.com/ryo_manba
スライド： https://speakerdeck.com/ryo_manba/akusesiburunainkurimentarusatiwozuo-tutemita
インクリメンタルサーチ：文字入力するごとに検索結果が絞り込まれる検索方式のこと（Enter押さない）
a11y的課題
- リアルタイムな結果の更新に気づけない
- aria-describedbyでインクリメンタルサーチであることをユーザーに伝える
- 検索結果が見つからなかったことに気づけない
- aria-live regionsで検索結果が見つからない時にのみユーザーに伝える
- 結果が更新されるたびに通知することはUXを損ねる
- aria-live regionsで検索結果が見つからない時にのみユーザーに伝える
感想
- それ、インクリメンタルサーチって言うんですね
- aria属性なんにもわからん
7. Next.jsにおけるLazy Loding
X： https://twitter.com/imaimai17468
スライド： https://speakerdeck.com/imaimai17468/next-dot-jsniokerulazy-loading
Lazy Lodingとは
必要なときにリソースを読み込む ＝ あるページに遷移したとき、初期表示に不要なリソースは後から読み込む
効果
- 初期ロード時間の短縮
- →UXの向上
スライドでは Dynamic Importの説明（というのもこれはReact.lazy（）とSuspenseにおいて実装されている）
詳しくはスライド見て。スライド以上に詳しい説明しばらくできない。
8. visually-hiddenを使おう
X： https://twitter.com/fastman2nd
スライド： https://hayato-osh.github.io/slides/visually-hidden
visually-hiddenとは
要素を視覚的に非表示にしつつ、スクリーンリーダなどの支援技術には認識させるやつ
文字を単純にCSSで非表示にすると、a11yツリーからも消えてしまう
RadixUIやChakuraUIではコンポーネント提供、TailwindならRS-Onlyで
例えば2024/7/16を、2024年7月16日と読ませることが可能
感想
- そんな技術があるのかあ、と勉強に
- 懇親会でこれが最適解なのかな？という話をしたりしたので、もう少し自分で調べてみたい
まとめ
時刻は26時を回りました。もうやらねえと思う気持ちもありつつ、書いてよかったなと思ったり。
これやってると流石に持たないので、イベント聞きながら8割方書きたいですね。
２年前にハッカソンに一緒に出た先輩や、ちょくちょく会う友人、どこかで１度だけ飲んだ可愛くて楽しい先輩との再会、そしてお世話になった人の知人に偶然感謝をされてしまうHAPPYなイベントでした。また行きます。おやすみなさい。