アクセシビリティから考える情報設計

2026/09/10(木) CO-LAB Tech Night #13 困りごとから考えるフロントエンド開発
https://kinto-technologies.connpass.com/event/403034/

Transcript

1. アクセシビリティから 考える情報設計 2026.09.10 CO-LAB Tech Night #13 困りごとから考えるフロントエンド開発
2. 自己紹介 社内活動 谷 郁弥 （high-g） KINTO テクノロジーズ株式会社 KINTO 開発部 マスタメンテナンスツール開発チーム 兼務: 技術広報部 勤務地: Osaka Tech Lab KINTO Technologies Corporation | PROTECTED ・本務：社内業務を円滑にするツールの運用開発、他チームとの連携 ・兼務：技術広報業務 ＆ テックブログの運営と改善 社外活動 ・フロントエンドカンファレンス関西 立ち上げメンバー ・TSKaigi スタッフ
3. テックブログにさまざまな課題が存在 3ヶ月前の状態 ・ページの表示が遅い ・SEOの対策ができていない ・アクセシビリティ対応も手が回っていない ・総じて Lighthouse のスコアが低い 良質な記事が読者に届いておらず、 読者体験も良くない状態 KINTO Technologies Corporation | PROTECTED
4. 改善前のテックブログ KINTO Technologies Corporation | PROTECTED
5. AIによるテックブログ改善対応 パフォーマンス ・遅延フェッチ 1ページ目の情報だけ読み込み＋追加分のみ fetch 対応 ・全画像最適化 sharp + シェルを CI に組み込むことで画像最適化の自動化 SEO ・構造化データ、要約の整備 h1タグ追加、headerへ説明追加、JSON-LDの追加 ・記事一覧にメタ情報の追加 全記事の内容をAIに要約させ、一覧に掲載 アクセシビリティ ・セマンティックなタグの利用 一覧にul、サイドバーにaside、記事にarticleなど ・全画像にaltを付与 画像を適切に説明した情報が付与されていた方が良いはず… ・aria-labelの付与 マシンに情報を拾ってもらいやすいだろうと願いを込めて… KINTO Technologies Corporation | PROTECTED
6. Lighthouseのスコアは簡単に満点が取れた KINTO Technologies Corporation | PROTECTED
7. AI 対応後のテックブログ KINTO Technologies Corporation | PROTECTED
8. 「よし！仕事終わり！」と当時の自分は思っていた KINTO Technologies Corporation | PROTECTED
9. 社内のアクセシビリティアドボケートに見ていただくことに ※アクセシビリティアドボケートとは、社内でアクセシビリティを啓蒙している専門家であり、ネイティブスクリーンリーダーの方のこと KINTO Technologies Corporation | PROTECTED
10. アクセシビリティアドボケートの感想 スクリーンリーダーで確認いただいたところ... うーん、いくつか気になるところがありますね。 読みたい記事までなかなかたどりつけないですし、 記事のところは読み上げの情報がちょっと多いですね。 KINTO Technologies Corporation | PROTECTED
11. AIのみで改善対応したものをスクリーンリーダーで聞いてみる 登壇中に動画を再生 KINTO Technologies Corporation | PROTECTED
12. なぜこのような読み上げになってしまうのか 1 適切なところに見出しが無い BlogCard.tsx 2 過度な alt BlogCoverImage.tsx / BlogAvatar.tsx 3 過度な aria-label BlogCard.tsx // 本来は h3 であるべき // BlogCoverImage <p sc-camel-class-name='line- < p sc-camel-class-name='line- <div aria-label={title} > clamp-2'> clamp-2'> <Link href={postPath(slug)}> <img alt={`${title} cover`} /> </div> {title} </Link> </ p > // BlogAvatar（隣に著者名テキスト） <img alt={name} /> <Link href={postPath(slug)} む`} aria-label={` 記事「${title}」を読 > {title} </Link> </p> スクリーンリーダーでは、見出しジャンプを 多用するため、見出しが無いのは死活問題 KINTO Technologies Corporation | PROTECTED 「タイトル タイトル」「名前 名前」と読まれ る 可視テキストと aria-label で、同じ情報を 2 回分持つ
13. これらをa11yアドボケートのアドバイスのもとに適切に対応 1 見出しを h3 に変更＋記事一覧 の h2 を追加 2 alt の削除 BlogCoverImage.tsx / BlogAvatar.tsx 3 aria-label の削除 BlogCard.tsx BlogCard.tsx / BlogArticles.tsx // BlogAvatar の img < h3 sc-camel-class-name='lineclamp-2 font-bold'> <Link href={postPath(slug)}> {title} <Link href={postPath(slug)} <img alt={name} /> → <img alt='' /> // サムネイル（ラッパーも削除） aria-label={` `} > 記事「${title}」を読む {title} <div aria-label={title}> </Link> </ h3 > <img alt={`${title} cover`} /> </div> // ↓ aria-label削除 // 一覧の先頭にも可視の見出し → <img alt='' /> <Link href={postPath(slug)}> </Link> {title} <h2>{localeText.heading}</h2> スクリーンリーダー + H キーで h2 → h3 と たどれ、情報を見つけやすくなる KINTO Technologies Corporation | PROTECTED </Link> 名前は隣のテキストが担う。画像は装飾とし て扱う 可視テキストがそのまま読まれる。同じ情報 が 2 回にならない
14. 人に寄り添った改善をしたテックブログ KINTO Technologies Corporation | PROTECTED
15. 最適化したものを再度スクリーンリーダーで聞いてみる 登壇中に動画を再生 KINTO Technologies Corporation | PROTECTED
16. ブログ記事の読みやすさの改善も進めている BEFORE KINTO Technologies Corporation | PROTECTED AFTER
17. なにが問題だったか？ 当事者を理解していないアクセシビリティ対応になっていた ・当事者がスクリーンリーダーをどう扱っているのかを理解できていなかった ・闇雲に alt や aria-label を付与して知識を盛り込めば、対応ができている気になっていた ・偏った対応になりすぎて、様々な属性の人が扱いやすいかどうかが考えられていなかった KINTO Technologies Corporation | PROTECTED
18. まとめ Lighthouseやアクセシビリティツールのスコアと人がどう感じるかは別の話 アクセシビリティ対応は、ちゃんと当事者を意識することが大切 AI 時代だからこそ、今まで以上に人に寄り添ったモノづくりが大切 大切なのは、情報を受け取る人のことを考え、 気持ちよく情報にたどり着いてもらえる設計ができているか KINTO Technologies Corporation | PROTECTED
19. おわり ご清聴ありがとうございました