![見出し画像](https://assets.st-note.com/production/uploads/images/93571876/rectangle_large_type_2_5d80af04a47bc0f5394bf1383768b283.png?width=1200)
altは入ってれば良い訳じゃない!?alt勉強会を開催
こんちわ、デザイナーの沢登です。
前回の社内向けアクセシビリティ勉強会の記事以降、記事を見てもらった会社さんが自社でアクションを起こしてくれるのを観測しました。(ありがとうございます!)
そんなとき、noteさんの勉強会の記事を目にし、ボタンをbutton要素ではなくdiv要素で作成してしまい、スクリーンリーダーに認識出来ない問題など、弊社でも、あるある問題すぎて首がもげました。
noteでのアクセシビリティ向上はウェブサービスとしての改善過程を発信することも目的にしています。課題感はあるが始められない、何から始めれば良いのかわからない組織やサービス関係者の方に見てもらいたいです。以下のマガジンにまとめているので、フォローしてほしい。
というわけで、今回は画像のaltについて社内勉強会を行ったので共有していきます。今回もアクセシビリティアドバイザーのfreee 伊原さんに協力いただきエンジニア・デザイナー向けの勉強会を開催しました。
当日の勉強会資料
なぜやったのか
前回の勉強会では虚空ボタンの怖さを知ってもらい、実際にエンジニアの方に160以上の虚空ボタンの修正に関わってもらいました。が、虚空ボタンの撲滅は達成できたものの、アクセシビリティチームでは新たな課題にぶつかりました。
チームでは、alt入力の自動チェックとしてlinter(機械的に判定して、開発時に未入力を防げる仕組み)の導入を検討していましたが、、、Vueファイル150相当のaltエラーを検出しました。
エラーそのものの修正はチーム内で行えるが、新しいエラー対象を増やさないためにエンジニアやデザイナーへの意識の浸透が必要となり、今回の勉強会を開催しました。
きっかけは社内からでしたが、ほぼ同時期にTwitterでのalt設定に関する話題が盛り上がっていました。今回の資料はnoteに限らず使える考え方なので、altを正しく使いたい方に見てもらいたいです。
勉強会の中身どう決めたか
当日の内容は、エラーの中からグルーピングし傾向を把握し、発生頻度やプロダクトへの影響度合いから選出してもらい資料に起こしてもらうことで、noteの中で一番間違いやすくしかも頻出する部分に触れてもらうことができました。
![エラー内容をまとめたスプレッドシート](https://assets.st-note.com/img/1658413285306-UigK77uzyk.png?width=1200)
勉強会では、シーンごとに適切なaltを選びつつ、前後の文脈的に不要であれば空にする選択肢もあることを共有しました。
![どうぶつ写真ギャラリー 2枚の画像リンクイメージ](https://assets.st-note.com/img/1658244602237-773hQxL389.jpg?width=1200)
画像へのaltが必要なケース
![猫の写真ギャラリー サムネイルとテキストのついたリンクイメージ](https://assets.st-note.com/img/1658244602250-9QaeqJ4cVK.jpg?width=1200)
画像へのaltは不要なケース
![猫の画像について説明する伊原さん](https://assets.st-note.com/img/1658414941731-AoUI7FGvO9.png?width=1200)
![HTML Living Standardより The most general rule to consider when writing alternative text is the following: the intent is that replacing every image with the text of its alt attribute does not change the meaning of the page. 代替テキストを記述する際に考慮すべき最も一般的なルールは以下の通りです。意図するところは、すべての画像をそのalt属性のテキストで置き換えても、ページの意味が変わらないということです。 So, in general, alternative text can be written by considering what one would have written had one not been able to include the image. ですから、一般的に代替テキストは、画像を入れることができなかったら何を書いたかを考えることで書くことができます。 引用元:4.8.4.4 Requirements for providing text to act as an alternative for images](https://assets.st-note.com/img/1658416173622-UIShDfPD6c.png?width=1200)
4.8.4.4 Requirements for providing text to act as an alternative for images
最後に
参加者20名ほどのエンジニア・デザイナー・PMに集まってもらい開催させてもらいました。各々別々のチームから参加しており、各チームで一人でもこの話を持ち帰ってもらえればレビュー時などのコミュニケーションで、解決することも可能だと考えています。
社員の方は、slackのチャンネル #pjt-accessibility でaltの相談でもアクセシビリティに関する相談でも受けていますので、気軽に門を叩いてください。
ひきつづき、よろしくおねがいします!
過去に実施した社内勉強会
この記事が気に入ったらサポートをしてみませんか?