こんにちは、@kubosho_です。普段はABEMA開発本部Webチームで活動しつつ、アクセシビリティエキスパートとして社内外へのアクセシビリティ啓蒙・推進をやっています。最近はみんながWebブラウザー上でFIFA ワールドカップ カタール 2022を楽しめるよう、CDNの調整やWebサーバーの負荷試験などをやっていました。広い意味でアクセシビリティを担保していたと言えますね。

さて、この記事ではアクセシビリティ Advent Calendar 2022 22日目の記事として、当社で2022年に起こったアクセシビリティ関連の出来事を紹介します。

なお前年度の取り組みは2021年、サイバーエージェントのアクセシビリティを振り返るをご覧ください。

また当社のアクセシビリティに対する取り組みについては、SDGsへの取り組み内の「誰もが快適かつ安心安全で使いやすいサービスの提供」やアクセシビリティへの取り組みにまとめています。合わせてご覧ください。

サッカーの試合データのアクセシビリティ向上

「試合データ」のデザインと色調整技術

ABEMAではFIFA ワールドカップ カタール 2022の全64試合を無料生中継しました。期間中は多くの人に視聴いただき、また多くの反響をいただきました。

そのFIFA ワールドカップ カタール 2022の配信では「試合データ」機能を提供し、試合の状況を分かりやすく可視化しました。

試合データを提供するにあたって、あくまで試合の視聴を主軸に置いた上で試合データをどう見せるかをユーザーインタビューも踏まえて情報設計をしました。また試合データのUIに使われる色も各チームのキーカラーを使いつつ、WCAG 2.1の達成基準 1.4.11 非テキストのコントラストも踏まえてある程度視認しやすい輝度まで自動で調整するようにしました。

詳しくは#ABEMA で試合のデータをアクセシブルに!デザインと色調整技術にまとめています。

Amebaブログが対象とするWebアクセシビリティ達成基準の全項目でレベルAに適合

AmebaブログではWebアクセシビリティに関するJIS規格「JIS X8341-3:2016」に基づいたWebアクセシビリティ試験を2020年におこない、JIS X8341-3:2016のシングルAに一部準拠していることを確認しました。この試験以降は継続的にアクセシビリティ改善をおこなっています。改善の様子は@AmebaA11Yで発信しています。

Webアクセシビリティ試験で非適合だった箇所を改善を積み重ねて適合するようにした結果、ついに対象とするWebアクセシビリティ達成基準の全項目でレベルA(加えて一部のレベルAA)に適合しました。詳しくはAmebaブログが、全ての達成基準でレベルAに適合するまでにまとめています。

また2022年、Amebaブログのアクセシビリティを振り返るに、デザインシステムのSpindleにアクセシビリティを考慮したコンポーネントの追加をした話や、Ameba Accessibility Guidelinesにアプリの実装方法を追加した話などを書いています。

薬急便(やっきゅうびん)におけるカラーコントラスト比の改善

薬局・医薬品販売業のデジタルシフト支援を手がけるMG-DXでは、オンライン上で医療機関・クリニックや薬局を予約したり、診療・服薬指導が受けられたりする、薬急便というサービスを提供しています。

薬急便では、コントラスト比のスコアを4.5以上にすることを目標にStarkを使って主要な文字色とその背景色のコントラスト比を改善しました。リンクの色とタグに使われている青色の差も大きく改善されました。今後は色以外の改善もおこなっていきます。

処方せん事前送信画面の変更前と変更後を比較しています。変更後は変更前と比較して背景色と文字色のコントラスト比が高まっています。

文字・リンク・タグ・警告色の変更前と変更後を比較しています。変更前は背景色と比較して多くの色でJIS X8341-3:2016のダブルA基準を満たさないコントラスト比でしたが、変更後は全ての色でダブルA基準以上を満たしています。

広報紙のデジタル化による効果的な住民への情報発信に向けた実証実験を鹿児島県日置市と開始

官公庁・自治体のDX推進支援を行う専門開発組織「GovTech(ガブテック)開発センター」では、デジタル版の広報紙を活用した効果的な住民への情報発信に関する実証実験を鹿児島県日置市と開始しています。

GovTech開発センター、広報紙のデジタル化による効果的な住民への情報発信に向けた実証実験を鹿児島県日置市と開始

この実証実験にあたって、デジタル版「広報ひおき」をWebアクセシビリティに関するJIS規格「JIS X8341-3:2016」の適合レベルAAに準拠することで、いつでもどこでも気軽に日置市の最新情報にふれられます。

デジタル版「広報ひおき」は日置市「広報ひおき」デジタル版からアクセスできます。

当社開催イベントのランディングページにおけるアクセシビリティの取り組み

サイバーエージェントでは、プロダクトだけではなくイベントのランディングページでもアクセシビリティ向上に力を入れています。その一例が今年開催したCyberAgent Developer Conference 2022CA BASE NEXT – CyberAgent Developer Conference by Next Generationsです。

CyberAgent Developer Conference

CyberAgent Developer Conferenceでは有志でアクセシビリティチェックをSlack上でおこない、クリティカルな部分を修正していきました。

CA BASE NEXT

CA BASE NEXT Webサイトのトップページ:コンセプトを表した「BASE HAUS」を背景に、ロゴと開催日時が表示されている

CA BASE NEXTのランディングページでは、ランディングページ開発チームの目標「カンファレンスへの期待感が一瞬で高まるLPをつくる」を達成するため、アクセシビリティとパフォーマンスに力を入れました。

その中でもアクセシビリティについて書くと、アクセシビリティの基準達成とチーム開発の速度・体験をバランス良くやるための達成基準決めやツールの導入、アクセシビリティチェックシートの作成と指摘事項の対応をしました。

CA BASE NEXTのランディングページでおこなった施策の詳細については、Speaker Deck上で資料を公開しているのでご覧ください。

アクセシビリティ関連イベントへの登壇・協賛

当社ではアクセシビリティ関連イベントへの登壇・協賛もしました。登壇・協賛したイベントは次の通りです。

また登壇したイベントの発表内容は次の通りです。

GAAD JAPAN 2022

タイトル: サイバーエージェントのアクセシビリティ向上の取り組み紹介と、Next Experts (アクセシビリティ) としての所信表明

UIT Meetup vol.16 『ちゃんとやってる?アクセシビリティ』

タイトル: 個人からチームに広げるアクセシビリティ向上の輪

まとめと今後の展望

今年、当社が実施したアクセシビリティ向上の取り組みや活動を紹介しました。紹介した以外にもアクセシビリティ向上の取り組みや活動はまだあります。

また今まではメディア事業からのアクセシビリティ向上の取り組みや活動紹介が多かったですが、今年は複数の事業からアクセシビリティ向上の取り組みや活動紹介をできて、徐々にアクセシビリティ向上の文化が広がっているのを感じます。

しかしアクセシビリティ向上の文化を根付かせるにはまだやることがあります。特に営利企業である限り、ビジネスへの貢献があると認められて経済合理性がある状態にしないと、文化として根付かないと考えています。

しかしそういった状態になれば「サービスを利用する全ての人が心身の機能や利用する環境に関係なく、提供されている情報やサービスを利用できること」という目標を達成するための大きな一歩を踏み出せそうです。

2023年も目標を達成するため活動していきます。