株式会社トルクの本田一幸さん、堀江哲郎さんが選ぶ「アクセシビリティがいい」サイト5選
選んでくれた人
本田 一幸さん
株式会社トルク代表取締役。数々の広告サイト、コーポレートサイトなどの制作プロジェクトを手掛けた後、2020年、デザインファーム株式会社トルクを設立。
堀江 哲郎さん
株式会社トルクCTO、デザインエンジニア。2021年トルクに入社。Webアクセシビリティを向上したJamstack・サーバレスアーキテクチャのサイト構築などを手掛ける。
デザインとアクセシビリティを兼ね備えたアニバーサリーサイト
Ameba20周年記念サイト | つくる、つむぐ、つづく、Ameba LIFE
https://content.ameba.jp/amebalife/20th_anniversary/
サイバーエージェントは日本の代表的なインターネット企業として知られていますが、アクセシビリティの分野をリードする企業としても有名です。
同社は事業のミッションに「人と情報をつむぎ 暮らしが豊かに育ちつづけるための機会をつくる。」を掲げています。また、アクセシビリティにおいては「サイバーエージェントのサービスを利用する全ての人が、心身の機能や利用する環境に関係なく、提供されている情報やサービスを利用できること」を目指していると宣言しています。これらの理念に基づいて、同社はサービスやプロダクト、さまざまなWebサイトのアクセシビリティ向上に積極的に努めています。
サイバーエージェントの代名詞的なサービスブランドとも言えるAmeba事業の20周年記念サイトもこの理念のもと高いアクセシビリティと美しいデザイン、そしてリッチな演出を高度に両立していたため、選ばせていただきました。
サイバーエージェントのアクセシビリティへの取り組み では「サイバーエージェントのサービスを利用する全ての人が、心身の機能や利用する環境に関係なく、提供されている情報やサービスを利用できること」が掲げられ、策定された制作指針の公開やカンファレンスへの協賛など、同社がWebサービスのアクセシビリティ向上に熱心に取り組んでいることをご覧いただけます。
アクセシビリティに取り組む企業の指針となりうるポリシー
株式会社ビーワークス | Beeworks Co., Ltd
Webから紙まで媒体を問わず多様なクリエイティブを提供するビーワークスのコーポレートサイトもアクセシビリティが高いWebサイトです。
クリエイティブ企業のWebサイトとしては希少なアクセシビリティポリシーページとWebアクセシビリティ推進の取り組みページが用意されており、同社のアクセシビリティを重視する姿勢が鮮明に打ち出されています。
特にWebアクセシビリティ推進の取り組みページに記載されたコンテンツには、現場で判断に迷うポイントの紹介や同社の課題点を解決した担当者のコメント、具体的な取り組み内容が記載されています。これからWebアクセシビリティに取り組もうとする全ての企業にとって参考になるガイドラインとなるのではないでしょうか。
ビーワークスのアクセシビリティポリシー では、同社が目標とする適合レベルと対応度を「JIS X 8341-3:2016レベルA・レベルAA 一部準拠」と掲げ、アクセシビリティ試験を実施したページが列挙されています。
イラストやビジュアルに秘められた、緻密なアクセシビリティ施策の数々
ユニリーバコーポレートサイト(Unilever USA )
大手消費材メーカーのユニリーバのグローバルサイトは、アクセシビリティの高い大規模なWebサイトの一つです。
世界中の人々に毎日利用される日用品を提供していることもあり、デザインの随所に見られるダイバーシティ&インクルージョンを表現するイラストやビジュアルなど、世界に先駆けるアクセシビリティとデザインが両立された先進事例と言えるのではないでしょうか。
また、「JIS X 8341-3:2016 Level AA」を満たすための項目となるコントラスト比4.5:1以上を保ちながらも、親しみやすく同社らしい高いデザイン性を担保しています。さらに、サイトカラーをデフォルトモードだけでなく、ライトモードとダークモードに設定変更できるといったさまざまな状況のユーザーに対して選択肢を提供しており、現時点で考え得るあらゆるアクセシビリティ向上施策が行われています。
また、このWebサイトはAstro、Sanity、Netlifyなどモダンな技術、プラットフォームを採用していることからも、同社がデジタルを通じたコミュニケーションを強力に推進していることがうかがえます。
ウェブアクセシビリティ基盤委員会のホームページでは、JIS X 8341-3:2016 の達成基準早見表(レベルA&AA) を確認することができます。要注意事項として「動画や音声を自動再生しない」「キーボードによる操作ができる」「閃光を避ける」ことを挙げています。
設計思想とデザインにあらわれる、企業の成長性と先進性
株式会社SmartHR 採用サイト
https://recruit.smarthr.co.jp/
クラウド人事労務ソフト「SmartHR」を運営する株式会社SmartHRの採用サイトです。こちらのサイトは弊社トルクが制作しました。
SmartHR社は、アクセシビリティ本部を設置し全社的にアクセシビリティ向上に取り組む企業です。本サイトでは、採用活動の加速という主目的を達成しつつ、同社の「バリュー・カルチャーへの共感」と「いつでも・どんな人でも使えるようにする」という姿勢を伝えることを重視しています。 そのため、設計段階からアクセシビリティを考慮し、デザイン性とコンテンツを犠牲にすることなく、高いレベルのアクセシビリティを確保しています。
採用サイトでのアクセシビリティ配慮はまだ一般的とは言えませんが、ダイバーシティ&インクルージョンが重視される現代において、同社の取り組みは他社の手本となるでしょう。
ダイバーシティ(diversity)とは、日本語で「多様性」などを意味する言葉で、人種や性別、宗教、多様な価値観や異なる属性を持った人々が、ある組織や集団において共存している状態を指します。
インクルージョンとは(inclusion)とは、日本語で「包括」「包含」「内包物」などを意味する言葉で、 ビジネスシーンにおいては企業内すべての従業員が尊重され、個々が能力を発揮して活躍・貢献できている状態、またはそれらのチャンスが平等に与えられている状態を指します。
これらを実現するためには、アクセシビリティへの取り組みが必要不可欠です。
利用者目線で施された、公共サービスのアクセシビリティ
ニューヨーク公共図書館 The New York Public Library
米国では、ADA(障害を持つアメリカ人法)やリハビリテーション法第508条といった、障害者差別を禁止する法律が複数存在しており、2000年前後から国を挙げてアクセシビリティ向上を推進しています。
ニューヨーク公共図書館のWebサイトは、公共サービスという立場から、WCAG 2.0の達成基準であるレベル AA 以上に準拠するよう努めています。キーボード操作の最適化や画像に対する丁寧な alt の指定、表示上は同一文言となっている「SEE MORE…」などのリンクも、スクリーンリーダーでは違いがわかるような読み上げが設定されているなど、徹底したアクセシビリティ向上施策が行われています。
ADAとは「Americans with Disabilities Act」の略称で、障害者の差別禁止、及び障害者が他者と同じくアメリカでの生活を営むことができる機会を保証する、1990年に制定された連邦法です。
リハビリテーション法第508条は「Electronic and Information Technology」と題され、アメリカの連邦政府が開発、維持、購入、または使用する電子機器やITテクノロジーに関する要件を定めており、従業員や一般市民を含む障害を持つ人々が、それらの技術にアクセス可能であることが義務付けられています。
WCAG2.0 は、2008年にWorld Wide Web Consortium(W3C)が勧告したアクセシブルなWebサイトを構築するための基準です。このガイドラインに従うことで、さまざまな障害のある人に対して、コンテンツをアクセシブルにすることができるようになります。2023年にはウェブアクセシビリティ基盤委員会 (WAIC) の翻訳ワーキンググループが邦訳して公開したWebサイト、WCAG2.1 が発表されています。