はじめに
こんにちは！！今月2度目の登場！！株式会社DELTAでフロントエンドエンジニアをしているるなこです。
こちらの記事は、アクセシビリティ Advent Calendar 2023の16日目の記事です。
最近アクセシビリティへの興味が高まっており、SmartHRさん主催の「アクセシビリティやるぞ！LT祭り」の第四回目に参加してきたので、レポートを書きました！
去年は「HTMLのタグをちゃんと使おう」という記事を書いたので、興味ある方は合わせてお読みください！（いまだに♡頂いていて嬉しい）
LT祭りとは
アクセシビリティ向上に取り組む人のためのお祭りです。「アクセシビリティ向上って何をすればいいの？」「アクセシビリティって難しそう」そんなアクセシビリティ初心者のみなさんの参加をお待ちしています。もちろんベテランのみなさまも大歓迎です。
という感じで、ボトムアップの改善活動から具体的なUI改善事例まで、そして取り組み始めの方からどっぷりアクセシビリティに浸っている方まで、さまざまな視点があった会でした。株式会社SmartHRさんの主催で、年内で既に3回行われているそうです！
noteにSmartHRさんの開催レポートがあったので、気になる方はチェックしてみてください。（アーカイブ動画もあるよ）
発表
以下、発表された方の内容
ゼロから始めるアクセシビリティ啓蒙活動〜途中経過〜
👩💻 発表者 たじまん さん
📑 内容メモ
- zozoでレガシー環境からnext.jsへリプレイスする際、フロントエンドでも保守性と変更容易性を高めるためにテストを導入していた。
- そのなかで、セマンティクスを意識した実装が必要になり、アクセシビリティへの意識が高まっていった
- アンケートを取ると、約9割の人がアクセシビリティに何らかの関心を持っている
- やったこと
- なぜ取り組むのか？の言語化
- 改善活動のロードマップを作成
- 仲間を見つける
- 手を動かす人を増やす
- 成果を社内外に発信する
- 現状と課題
- 外部の専門家にアクセシビリティチェックを依頼できた。タスク化してメンバー活動に渡せた
- デザイナーとの協業や、本業が忙しくなり進捗出ないのが課題
感想
自分の興味から、どのようにプロジェクトに貢献できるかを考え、実際に組織を横断して改善活動できているのがすごい。自分だと、勝手に一人で気にして実装するくらいしかしていなかった…。デザイナーさんとの協業が必要なのは自分も感じました。見習いたい！！
入ってみて知ったfreeeのアクセシビリティ
👩💻 発表者 むろ さん
📑 内容メモ
- freeeはアクセシビリティを自然にやっている集団
- チェックプロセスが浸透・定着している
- デザインシステムがアクセシビリティにガチ対応している
- デザイナー以外も、アクセシビリティへの意識がある！
- 人材募集中だよ
感想
組織全体にアクセシビリティについての意識が行き届いているというまさに天国のような状態！！デザインシステムがアクセシビリティに対応しているのは強い。たじまんさんのお話でもあった通り、アクセシビリティの改善にはデザイナーさんの協業が不可欠。実装者も、テスターも、営業も、全員がこの視点を持つことが、アクセシビリティ推進の鍵になると思う。（アクセシビリティはそのサービスに触れる全員に関わる話なので）
書籍とアクセシビリティ～電子書籍について～
👩💻 発表者 ゆう さん
📑 内容メモ
- 大学生の頃に手話、2020年頃から音声ガイドに取り組む
- 電子書籍化は専門の業者が行っている。が、電子化にはとても手間がかかる！
- ただテキストを流し込むのではなくマークアップになる
- 図表、写真を適切な位置に移動する
- 書籍によって組版のフォーマットが違う
- 使用できるcssに制限がある
- 外字や外国語のフォント表示問題
- kindleでは英語以外の代替テキストが読まれない。。
- ただテキストを流し込むのではなくマークアップになる
感想
紙の書籍とデジタルの書籍の間をつなぐ事情に触れたのは初めてでとても新鮮でした。自分もよく電子書籍を購入しますが、こんな苦労があったとは。。目次がリンクになっていて、クリックするとジャンプできる電子書籍。これが私の手元に来るまでにコーディングしてくれた同志がいると思うと、感謝の気持ちでいっぱいです。
使用できるCSSの制限は、元文書を読んだところ、CSS3の勧告もちゃんとチェックしていて、追従するのは大変だから絞る（意訳）と書いてありました。epub用のプレフィックスがついたCSSにも対応していて、使えないタグが多いというより、組版に特化したプロパティに力入れている感じ。電子書籍は、この分野だけでとても深い専門領域になりそう…。
NVDA 2023.3はここがすごい！ ～タブのジャンプコマンドを紹介しちゃうぞ～
👩💻 発表者 辻 勝利 さん
📑 内容メモ
- NVDAでブラウザにタブナビゲーションのジャンプコマンドを設定してみよう！（操作動画）
感想
恥ずかしながらNVDAを今回初めて知りました。「次のタブに移動」というジェスチャーを指定するとき、ラップトップのキーボード配列にのみ適用するか、すべてのキーボード配列に適用するか選択できる設計に「そこまで想定するんだ…！」と感動しました。自分が実装したタブに適切なtabIndexを設定したくなってきた。。
ボタンの位置変更から始めたアクセシビリティ 〜ロービジョンユーザーの障壁となるUIの改善〜
👩💻 発表者 tosiiu さん
📑 内容メモ
- フォームのタイトルと「一行ずつ表示」ボタンが両端揃えなのを、左端揃えに変更
- 複数の見出しが並ぶフォームは、拡大鏡ユーザーだと移動量が多くなって見づらい
- そこで、見出しとセルを一行ずつ表示する機能を実装していた…だが
- 肝心の「一行ずつ表示」ボタンが、タイトルから離れていて気づかれていなかった
- 修正後は、拡大鏡ユーザー以外にも、気づいていなかったユーザーもいて、よい結果に
- 多くのユーザーに影響のあるuiの変更でも、最小限から始めると進めやすい
感想
具体的な改善事例。めちゃくちゃ学びがありました。修正が結果的にロービジョンのユーザーだけでなく、他に気づいていなかったユーザーのためにもなるのは、アクセシビリティが全ての人にとって関係があることを示していると思います。これから既存のプロダクトへアクセシビリティの概念を導入していくには、やっぱり最小限から改善体験を積んでいくことが重要なのかな。。。
まとめ
LT会、気軽にたくさんの人のお話を聞けるというのがいいところですよね。組織改善の話から具体的なUI改善事例まで、本当にさまざまなアクセシビリティの取り組みについて触れることができました。
この分野について、まだまだ知るべきことがたくさんあるなぁと感じます。自分で周囲にアクセシビリティの使命を伝えられるよう、多くの人を巻き込めるよう、もっと勉強していきたいです。これをきっかけにもっとたくさんのLT会に参加するぞ！！！！
余談
電子書籍の話を聞いていて、前前職のことを思い出しました。前前職は印刷会社内のWeb制作担当チームだったので、紙もの寄りのデザインをWebサイトに反映する際、マークアップに創意工夫が必要だったなぁと…。今から考えると、アクセシビリティからは程遠かったかも。表示フォントは端末に依存するため、Webフォントで１文字ずつ異体字を指定したり、食品のグラム表記はループテイルで表示したいという要望に対応したり、いろいろあったなあ…。
We're Hiring!
最後までお読みいただきありがとうございます。
弊社では一緒に働いてくれる仲間を募集中です！！！！
まずはカジュアル面談からお話しましょう！
Pitta：弊社CTOの丹がベットしたい技術を語りたがってます！
Google Form：もちろんこちらからでもOK！
来てねー！
DELTAは、ベンチャースタートアップなどの成長企業向けに、ソフトウェア・プロダクト開発や技術選定支援などの技術支援事業を提供しています。 また、成長企業向けに様々な事業支援を提供するSEVENRICH GROUPに属して、グループ内の事業会社や、出資先の支援もおこなっています。
Discussion