社内勉強会「セマンティックでアクセシブルなHTML講座（UXライティング編）」
コンセプト
ターゲット：プロダクトライターの方々
バリュー：文言を検討するときのアクセシビリティの観点を知れた、普段から意識してみよう、と思って欲しい
ターゲット：HTML にかかわるエンジニア・ウェブ制作者の方々
バリュー：文言の重要性がわかった、文言のさまざまな付け方がわかった、と言って欲しい
資料
動画
スライド
デモファイル
開催方法
概要
- 場所：オンライン（Zoom）
- 所要時間：１時間
- 形式：講習会
告知
社内で利用しているkintone（チームの情報の蓄積・共有・ディスカッションツール）に告知を行いました。
基本的で汎用的な話であること、スクリーンリーダーのデモをしながら進めること、サイボウズプロダクトの事例を交えつつ紹介することを伝えました。
以下、告知内容です。
セマンティックでアクセシブルなHTML講座（UXライティング編）開催のお知らせ
【概要】
こんにちは。デザイン＆リサーチ ポカリチームのSUGIです。
ポカリチームでは、定期的にアクセシビリティ勉強会を開催しています。
今回は、アクセシビリティの観点を交えたリンク・ボタンなどの文言の付け方や実装方法についてお話します。機能を生かすのも殺すのも文言次第。文言が適切で、適格に伝われば、
より多くの人に届くアクセシブルなウェブコンテンツになります。
スクリーンリーダーのデモを交えつつ、アクセシブルな文言について掘り下げてみましょう。皆さんがウェブコンテンツを作るとき、次のような疑問や問題を感じたことはありませんか？
- 文言はどの程度具体的にすればよいのか
- そもそも文言がいるかどうか
- アイコンだけで示すときどうすればよいか
- 文言をアクセシブルにする実装方法は
- デザインを変えにくい場合文言をどう提供すればよいか
これらの疑問・問題について取り上げます。
今回紹介するのは、タイトル・画像・リンク・ボタンの4つのケースです。
スクリーンリーダーの実演とサイボウズプロダクトの事例を交えつつお話していきます。興味のある方はスケジュールにご参加お願いします。
【コンセプト】
誰に：HTML にかかわるエンジニア・ウェブ制作者の方々
何を：文言の重要性がわかった、文言のさまざまな付け方がわかった、と言って欲しい誰に：プロダクトライターの方々
何を：文言を検討するときのアクセシビリティの観点を知れた、普段から意識してみよう、と思って欲しい
資料共有
資料はHTML版で提供しました。
今回はデモが主体となるため、資料は捕捉として活用し、スクリーンリーダーの音声や口頭で捕捉する発表者の声に集中してもらうようアナウンスしました。
質問・感想の受付
当日、社内kintoneに実況スレッドを立て、質問や感想を自由に書き込んでもらいました。
勉強会のコンテンツ終了後に、実況スレッドに書き込まれた質問を拾って回答したり、その場で口頭での質問を受け付けたりしました。
実況スレッドに書き込んでもらうことで以下のようなメリットがあると考えます。
- 気づきや疑問を参加者同士で共有できる
- 書き込むことでコミュニケーションが活性化する
- 主催者側が、参加者の反応を確認できる
- 主催者側が、個別に質問に回答できる
字幕の投影
ZoomとUDトークを連携し、発表者の話している内容の字幕を投影しました。
参加者は字幕機能をONにすることで字幕を見ることができます。
開催結果
参加状況
４０人が参加しました。
アクセシビリティの観点を考慮した文言の考え方と告知したため、多くのプロダクトライターが参加しました。またオンライン開催のため、拠点を超えて多くの人を集客できました。
参加部署の一例です。
- プロダクトライターチーム
- プロダクト開発チーム
- フロントエンドエキスパートチーム
- システムコンサルティング本部
- ビジネスマーケティング本部
- 人事本部
実況スレッドの反応
実況スレッドに寄せられたコメントをいくつか紹介します。
「テキストが最もアクセシブル」
肝に銘じます。
主題を最初に言う、はaltテキストにも有効。なるほどー
aria-hiddenは初めて聞きました。
aria-labelは読み上げられますよね。
文言そのものも大事だけど、適切に読み上げられるようにHTMLを記載することが大事なんだなと再認識しました。
リンクの読み上げ内容の補完は、aria-label や aria-labelledby を使う方法もあるんですかね？
https://waic.jp/docs/WCAG-TECHS/ARIA7
https://waic.jp/docs/WCAG-TECHS/ARIA8
リンクテキストを変更する方法だと、視覚的なデザインとの兼ね合いがとりづらいケースもあると思うので、
そういう場合はARIAを使うのもよいかもしれません。
所感
今回の勉強会では以下のポイントを押さえて話をしました。
- テキストが最もアクセシブルであること
- 可能な限りテキスト文言を提供すること
- 文言を画面に表示できない場合でも、ツールチップやARIAを駆使して文言を提供すること
また、文言の有無で操作性に強い影響を受けるスクリーンリーダーユーザーの実際のデモをすることで、より重要な問題であるととらえてもらう狙いがありました。
さらに、自社プロダクトの良い・悪い事例を紹介することで、身近に感じてもらえるよう心掛けました。