AmebaLIFE事業本部でエンジニアをしている湯本航基（@yu_3in）です。
2025年もAmebaLIFEでは「誰もがいつでも、迷わず『書く』『読む』『応える』ができる状態」を目指し、さまざまなアクセシビリティ改善に取り組んできました。
本記事では、2025年に実施した主な取り組みをご紹介します。
合理的配慮に関するお問い合わせページの追加
2024年4月の改正障害者差別解消法施行を受け、2025年1月にAmebaブログへ新しく合理的配慮に関するお問い合わせページを開設しました。
障害のある利用者がアクセシビリティ上の問題を報告しやすい環境を整備し、すべてのユーザーにとって快適なサービスを提供するため、実際に困難を感じている方々の声を直接お聞きできる体制を構築しています。
詳しくはAmebaスタッフブログをご覧ください。
アクセシビリティ交流会の開催
2025年2月、社内でアクセシビリティ交流会を開催しました。社外からもゲストをお招きし、LTを交えながらアクセシビリティについて語り合う場となりました。
他社の方々との交流を通じて、組織を超えたアクセシビリティ推進のネットワークを広げることができました。
Figmaウェビナー「In The Code」への登壇
2025年3月24日、Figma主催のウェビナー「In The Code コードで紐解くデザインシステムSpindleの裏側」に弊社の安田が登壇しました。
本ウェビナーでは、AmebaLIFEのデザインシステムSpindleについて開発者目線で深掘りしました。Figmaと実装されたUIライブラリとの連携として、デザイン上のコンポーネントとGit上の実装を紐付けるCode Connectの活用や、CSSをAmebaLIFE推奨の単位に自動変換する独自プラグインSpindle Code Generatorなどを紹介しました。
アクセシビリティに関しては、デザイントークンの段階でコントラスト比を担保した色を定義している点や、Figma上で使えるアクセシビリティチェックリストをコンポーネント化している取り組みについて紹介しました。デザインデータの横にチェックリストを配置することで、「ターゲットサイズ」や「コントラスト比」などをその場で確認でき、デザイナーが自然にアクセシビリティをチェックできる環境を実現しています。
YouTubeにてアーカイブを視聴できますのでぜひご覧ください。
AIによる代替テキスト自動追加機能
AmebaブログでAIによる画像の代替テキスト（alt）自動追加機能を試験的に提供しています。
ブログサービスのようなユーザー生成コンテンツ（UGC）では、投稿者自身が代替テキストを設定する必要があり、アクセシビリティの担保が難しい領域でした。本機能ではAIを活用して画像の内容を解析し、代替テキストを自動生成することで、投稿者の負担を軽減しつつ、スクリーンリーダー利用者にも画像の内容が伝わるコンテンツ作成を支援しています。
生成された代替テキストは後から編集も可能なため、より適切な説明への調整も容易です。この機能をきっかけに「代替テキスト」の存在を知り、ブログで紹介してくださるブロガーさんもいらっしゃるなど、副次的な効果もありました。
詳しくはAmebaスタッフブログをご覧ください。
Spindleコンポーネントのアクセシビリティ改善対応
SpindleのUIコンポーネントに対してアクセシビリティ改善を実施しました。biome（JavaScriptのlinter/formatter）のアクセシビリティルールに基づき、複数のコンポーネントを見直しました。
- 不要なARIA属性の削除：ネイティブHTML要素が既に持っているロールや属性の重複を排除（例：
<dialog>要素の冗長なrole="dialog"の削除） - セマンティックHTMLの適切な使用：DropdownMenuを
<ul>/<li>から<div>/<button>+ 適切なrole属性に変更 - SVGアイコンへの名称付与：Ratingコンポーネントの星アイコンに
<title>要素を追加 - フォーカス管理の改善：HeroCarouselに
role="region"とaria-labelを追加し、支援技術での認識を向上 - キーボード操作の最適化：ダイアログのバックドロップクリックとキーボード操作を適切に分離
詳細はGitHub Pull Request #1527で確認できます。
インターン生によるSpindleとアクセシビリティガイドラインへの貢献
AmebaLIFEでインターンをしていた芝浦工業大学の関口匠弥さん（@newt239）が、Spindleの新規コンポーネントButtonSwitchの実装を担当しました。
Design Docの作成から実装まで一貫して取り組み、キーボードの矢印キーによるフォーカス移動や選択状態の切り替え、適切なARIA属性の設定など、アクセシビリティを考慮した実装を行いました。
また、Ameba Accessibility Guidelinesのドキュメント改善にも取り組み、4.1.2 カスタムコントロールの操作性を担保するで使用されていた具体例を、タブUIを使った例に差し替えました。
詳しくはSpindleへの新規コンポーネント追加を通じて学んだデザインシステムにおける設計の大切さ | CyberAgent Developers Blogをご覧ください。
アクセシビリティ入門ゼミの開催
2024年11月から約1年間、AmebaLIFEのデザイナー向けに「アクセシビリティ入門ゼミ」を開催しました。
AmebaLIFEのAccessibility Checklistを理解し、普段の業務でアクセシビリティを「自然と」意識できるようになることを目指して、以下のような活動を行いました。
- 輪読会：「見えにくい、読みにくい『困った！』を解決するデザイン【改訂版】」を題材に、色覚に配慮したデザイン、文字の読みやすさ、やさしい日本語の活用、図解における視線誘導など、実践的な知識を習得
- チェックリスト確認：デザイナー向けのAmeba Accessibility Checklistを参加者全員で見ながら、輪読会の内容を復習し、実践的に学習
- ワークショップ：担当サービスのアクセシビリティの気になるところを持ち寄り、参加者全員でアクセシビリティ上の課題を議論し改善策を模索
第二回ウェブアクセシビリティ試験とDevinの活用
現在、Amebaブログを対象とした第二回ウェブアクセシビリティ試験を進めています。第一回試験に続き、JIS X 8341-3:2016レベルAに加えて、新たにWCAG 2.2の一部達成基準を対象とした包括的な試験を実施しています。
発見された課題は優先順位をつけながら改善を進めています。また、試験的にAIエージェントDevinを活用した改善にも取り組んでいます。試験で起票された課題のうち、定型的な修正が可能なものについてはDevinに対応を任せることで、人手による改善と並行して効率的に進められるか検証中です。
また、QCチームにも協力いただきながら、継続的に試験を実施できる仕組みの検討も進めています。
第二回試験の試験結果は追って公開予定です。
おわりに
2025年も多角的にアクセシビリティ向上に取り組んできました。
アクセシビリティは一度達成すれば終わりというものではなく、継続的な改善が必要です。技術の進化やユーザーのニーズの変化に合わせて、常に学び、改善し続けることが大切だと考えています。
2025年は、合理的配慮の仕組み作りからAIを活用した最新技術の導入まで、幅広い取り組みを通じて「誰もがいつでも、迷わず『書く』『読む』『応える』ができる状態」に一歩ずつ近づくことができました。
これからも、ユーザーの皆様の声に耳を傾けながら、より良いサービスを提供していきます。
2026年も、引き続きよろしくお願いいたします。