社内勉強会「セマンティックでアクセシブルなHTML講座（基本タグ編）」
コンセプト
ターゲット：HTMLにかかわるエンジニア・ウェブ制作者の方々
バリュー：アクセシブルなHTMLを書く利点と方法がわかった、普段から意識してみよう、と言ってほしい
資料
動画
スライド
デモファイル
開催方法
概要
- 場所：オンライン（Zoom）
- 所要時間：１時間
- 形式：講習会
告知
社内で利用しているkintone（チームの情報の蓄積・共有・ディスカッションツール）に告知を行いました。
基本的で汎用的な話であることと、スクリーンリーダーのデモをしながら進めていくことを伝えました。
以下、告知内容です。
すぐ実践できるアクセシブルなHTML
～より多くの人にコンテンツを届けるために～セマンティックでアクセシブルなHTML講座（入門編） 開催のお知らせ
【概要】
ウェブコンテンツのアクセシビリティを高めてより多くの人に届けるための、最も基本的で汎用性のある考え方やテクニックを事例付きでお話しします。
キーワードは、「セマンティックでアクセシブルなHTMLを書く」です。
スクリーンリーダーでデモをしながら進めていきます。
皆さんが作ったウェブページは、適切に伝わっているでしょうか。
知らぬ間に、一部のユーザーを排除したり、閲覧しにくいなどのストレスを与えたりしてはいないでしょうか。
たとえば、以下のようなユーザーに伝わっているでしょうか。
- スクリーンリーダーユーザー
- ロービジョン
- キーボードユーザー
- 肢体不自由
- モバイル・タッチユーザー
HTMLを少し注意して書くことで、多くのユーザーの助けとなるアクセシブルなウェブコンテンツを提供することができます。
スクリーンリーダーユーザーの私がデモと解説をし、私が経験した不便なウェブ体験を交えつつ、講座を通して良いHTMLを作っていきます。
興味のある方はスケジュールにご参加ください。
【コンセプト】
誰に：HTMLにかかわるエンジニア・ウェブ制作者の方々
何を：アクセシブルなHTMLを書く利点と方法がわかった、普段から意識してみよう、と言って欲しい
（スキルは問いません。初心者の方もフロントエンドエキスパートの方も歓迎です。）
資料共有
資料はHTML/PPTX/PDFの３つを提供しました（内容はいずれも共通）。参加者は、利用しやすい形式を選んで手元で確認できます。
資料を多様な形式で提供することで、たとえば以下のようなユーザーのさまざまなニーズにこたえることができます。
- 全盲のスクリーンリーダーユーザーはHTML形式が読みやすい
- ロービジョンの方はスライドをローカルにダウンロードして、お好みの拡大率で見たい
- 日本語がネイティブでない方は、資料をウェブブラウザで閲覧して、翻訳にかけたり自動翻訳・ルビをつけるといったブラウザ拡張を使いたい
質問・感想の受付
当日、社内kintoneに実況スレッドを立て、質問や感想を自由に書き込んでもらいました。
勉強会のコンテンツ終了後に、実況スレッドに書き込まれた質問を拾って回答したり、その場で口頭での質問を受け付けたりしました。
実況スレッドに書き込んでもらうことで以下のようなメリットがあると考えます。
- 気づきや疑問を参加者同士で共有できる
- 書き込むことでコミュニケーションが活性化する
- 主催者側が、参加者の反応を確認できる
- 主催者側が、個別に質問に回答できる
開催結果
参加状況
４３人が参加しました。
アクセシビリティの基本編と告知したこともあり、幅広い部署から集客できました。また、オンライン開催ということで、拠点を超えて全国各地から参加しました。
参加部署の一例です。
- プロダクト開発チーム
- プロダクトライターチーム
- フロントエンドエキスパートチーム
- システムコンサルティング本部
- ビジネスマーケティング本部
- カスタマー本部
実況スレッドの反応
実況スレッドに寄せられたコメントをいくつか紹介します。
資料にhtml版もあるのですね！
引用のためにコピペする時にも便利そうと思いました！
VS Codeでスクリーンリーダー使って開発してるの見たのはじめてだ。
そもそもスクリーンリーダーに対応してるの知らなかった、すご
Garoonは昔、IEだとbuttonタグにうまくスタイルが当たらず、
aタグにしてしまった部分が多くあります。。。
直近 role="button" 追加でしのいだりしてますが、 ちゃんとbuttonタグにしたいです。
> ページ内でパーツに統一感がなくて混乱する
これめちゃ大事だな
はてなブログで記事を書くときに h のレベルをどうするべきなのかいつも悩んでいます
所感
今回の勉強会では以下のポイントを押さえて話をし、基本ができるとアクセシブルになるということを伝えました。
- 基本的で汎用的なテクニックや考え方であること
- スクリーンリーダーのデモをして実際に音声を聞いてもらうこと
- 世のウェブサイトは基本ができていないことがあり、スクリーンリーダーで操作しにくい悪いユーザー体験をすることが多々あること
- セマンティックなHTMLを書くことで、スクリーンリーダーユーザーをはじめより多くのユーザーにとってプラスになること
また、HTML版の資料を提供したことが好評でした。引用する時にも便利とのことです。資料は利用者が使いやすいものを選べるようにするとよさそうです。