「アクセシビリティやるぞ！LT祭り」を開催しました

maiha

こんにちは。SmartHR アクセシビリティスペシャリストのmaihaです。先日「アクセシビリティやるぞ！LT祭り」というオフラインのLTイベントを開催しました。

登壇者・参加者のみなさま、ありがとうございました！この記事ではイベントで発表してくださったみなさんの発表資料を紹介します。

全ての発表者が発表資料を公開していますが、一部、スクリーンリーダーで内容を読み上げられない資料があります。代替手段とはいえませんが、本記事に資料・発表の概要を掲載していますのでご利用ください。
今後のイベントでは、発表内容をアクセシブルな形式で公開できるよう、運営側で準備を進めていく予定です。ご期待くださいませ〜。

当日の発表

LT1: 興味関心から入るアクセシビリティ感想戦(合同会社DMM.com 石田 大貴さん)

LT初登壇の石田さん、発表内容はご自身が興味のある「動画」のアクセシビリティの手法について、メリットとWCAGの達成基準を絡めながら紹介してくださいました。

  • 自己紹介

  • 登壇した目的

    • アクセシビリティ初学者として学んだ内容を共有し、自身の知識を定着させる

    • 他のアクセシビリティ初学者にも良いインスピレーションを与えたい

  • イントロダクション

    • アクセシビリティについて勉強中

    • 内容が難しく、量が多い

    • 一番自分の興味関心が強い動画のアクセシビリティについて学ぶ

  • 取り組み一覧

    • オーディオディスクリプション

      • 登場人物の動き、表情、衣装や場面の変化など、動画の視覚的な情報を音声で説明する手法

    • キャプション

      • オープンキャプションとクローズドキャプション

    • トランスクリプション

      • 音声ファイルの内容を書き起こしたテキスト

  • 最後に

    • 字幕やトランスクリプトが、障害を持つ方への支援手段であることを再認識

    • 特定のグループへの取り組みが健常者にも利益をもたらすことを実感

    • 皆さんがどのような興味からアクセシビリティを学んだのか教えていただけると幸いです

LT2: 通知UIを改善している話(株式会社SmartHR shiraさん)

SmartHR社内の取り組み「アクセシビリティマスター養成講座」の参加者でもあるフロントエンドエンジニアのshiraさんは、チームで行っている改善について紹介してくださいました。

  • 自己紹介

  • SmartHR UI の紹介

  • SmartHR UIで通知に使っているコンポーネント「FlashMessage」について

  • なにが課題なのか

    • 課題1: 標準だと8秒で消える

    • 課題2: 気づきにくい

  • FlashMessage使用をやめてどうするか

    • 対応方針

      • ユーザーが操作した操作対象の近くにメッセージを表示する

      • 上記が困難な場合、「NotificationBar」でメッセージを表示する

    • 対応の流れ

      • どのような操作/処理を行ったときにメッセージを表示しているか精査

      • パターン別に分類し、各対応方針を検討

      • チームのデザイナーと認識合わせ・調整

      • チーム全体に展開し合意・決定

      • 画面ごとに対応を進行中

    • メッセージ表示パターン

      • ダイアログの場合

        • ダイアログを閉じない場合: ボタン付近

        • ダイアログを閉じる場合: NotificationBar

      • ダイアログ以外の場合

        • ボタンを押して行う処理の場合: ボタン付近

        • 上記以外: NotificationBar

    • よかったこと

      • 最初にパターン精査と各対応方針を決められたので対応を迷わず進められた

      • 通知を出すパターンを整理しドキュメント化したことでチームで共通認識をもてた


LT3: アクセシビリティへの取り組みにおいての内発的動機付け（私の場合）(合同会社DMM.com 古川純希さん)

LT初登壇の古川さん、アクセシビリティについて学んでいくうちにモチベーション迷子になってしまったエピソードを発表してくださいました。

  • 自己紹介

  • 勉強していくうちに露見してきた問題: 自分のモチベーション迷子

  • 適切なモチベーションを持つことのメリットは？

  • モチベーションにはどのようなものがあるか？

  • 私のモチベーションの仮説

    • 自分の強みを発揮できるとうれしい

    • チームで改善する過程が楽しい

    • それが誰かの役に立つとよりうれしい

  • さまざまな体験から、自分の興味や関心を引き出してみる

    • オフラインイベントで、モチベーションが近い方との出会い

    • 様々なオンラインイベントで、会社の取り組みをチェック

    • アクセシビリティに取り組む重要性や楽しさやケーススタディを同僚からシェアしてもらう

    • 自らが WCAG2.1 の輪読会を主催し、仲間を巻き込む

  • 得られたこと

    • 自分との対話で自信がついた

    • 知識不足 = 伸びしろである

    • MTGでの主体的発言や改善提案

    • チームからの評価

    • 仕事の充実感が向上！

  • 仕事の意義≠モチベーションの源

  • まずは自分自身のモチベーションを探し、解像度を上げてみる

LT4: Accessible Website Gallery AAA11Yコソコソ話(株式会社トルク マルシアさん)

LT初登壇だというマルシアさんは、株式会社トルクさんが運営するアクセシブルなウェブサイトギャラリー aaa11y.comについて発表してくださいました！

  • 自己紹介

  • AAA11y.comの紹介

    • CMの紹介

  • AAA11y.comのウェブサイト掲載判断

    • WCAGのガイドライン

    • タブ機能操作

    • 一時停止、停止及び非表示(動きのあるオブジェクト)

    • コントラスト(最低限) 4.5:1

  • キュレーションの特徴

    • 視認性、可読性、操作性、音声読み上げへの対応

    • サイトに内包しているコンテンツのトーンにあったビジュアルデザイン

  • 404ページの紹介

LT5: Landmark 2023(株式会社トゥアール 森川結子さん)

会社でアクセシビリティ普及活動をしている森川さんは、WAI-ARIAのランドマークに関するクイズ形式の発表をしてくださいました！

  • 自己紹介

  • ランドマークロールについて

  • クイズの説明

  • QUESTION 1: WAI-ARIAで定義されているランドマークロールは次の8種類であり、そのすべてに対応するネイティブのHTML要素がある

  • QUESTION 2: すべての視覚可能なコンテンツはランドマーク内に存在する必要がある

  • QUESTION 3: nav要素が暗黙のロールをもつnavigationロールはドキュメントに対して1つでなければならない

  • QUESTION 4: WCAG2.0 2.4.1にブロックスキップという達成基準があるが、これはmain要素を適切に使うことで適合することができる

  • QUESTION 5: div要素にrole="region"を付与すると、そのdiv要素はregionロールのランドマークになる

  • QUESTION 6: アクセシブルネームをもっていないform要素はランドマークではない

  • QUESTION 7: すべてのsection要素にはアクセシブルネームをつけてランドマークにするのがよい

  • 解説記事: https://www.to-r.net/media/landmark/ 

登壇者のみなさん、素敵な発表をありがとうございました！

主催者のふりかえり

次回開催に向けて振り返ってみました。

嬉しかったこと

  • アクセシビリティがメインテーマのオフラインイベントに参加するのが初めて・2回目の人が参加者の半数以上いた

  • 登壇者5名中3名が初登壇だった

  • 参加登録者数に対する出席率が高かった

  • 定員少なめのイベントだったこともあり、交流しやすかったように感じた

次回に向けて、検討したいこと

  • オンライン配信について

    • 会場に来るのが難しい人もイベントに参加してもらいたい。が、運営の負担が少ない方法を探したい。

  • 発表資料のアクセシビリティについて

    • 発表資料のアクセシビリティ向上について、発表者に情報提供をする

    • なるべくアクセシブルな発表資料を作成・公開してもらえるようにしたい

それでは、次回開催をお楽しみに。さようなら。





この記事が気に入ったらサポートをしてみませんか？