AAA11Y Accessible Website Gallery のご紹介

アクセシブルで素敵なウェブデザインを紹介するギャラリーサイト「AAA11Y」のご紹介（2023.5.19＠アクセシビリティの祭典2023）
https://www.aaa11y.com/

Transcript

1. アクセシブルで素敵なウェブデザインを紹介するギャラリーサイト 「AAA11Y Accessible Website Gallery」のご紹介 株式会社トルク　CDO/アートディレクター　阪口 卓也
2. デザインの力で情報格差をなくす 私たち株式会社トルクは「デザインの力で情報格差をなくす」 ということをミッションにかかげて活動する、デジタル領域を専門とした デザインファームです。 2
3. 意志 意図 言葉 体験 プログラム システム 動き デザイン 私たちは、意志、意図、言葉、体験、プログラム、システム、動きなど、人の営みを豊かにする創造の全てをデザインの対象と捉えて います。その中でもウェブアクセシビリティをデザインの重要な要素の一つと考えて、日々制作に取り組んでいます。 3
4. © SmartHR, Inc. https://work-design-award.jp/ 代表的な制作実績としては、 クラウド人事労務ソフトのSmartHRさんが主催する 「働き方改革の取り組み」 を表彰するアワード 「WORK DESIGN AWARD」 の公式サイトになります。 4
5. © SmartHR, Inc. 第10回Webグランプリ 「アクセシビリティ賞 優秀賞」 こちらはWCAG2.0レベルAA準拠を目標としたウェブアクセシビリティとデザイン性が評価され、第10回Webグランプリ 「アクセシビリティ賞 優秀賞」 をいただきました。 5
6. 「AAA11Y Accessible Website Gallery （以下、AAA11Y） 」は、このような制作の中で知り得た優れたサイトや、私たちのミッションを 多くの人たちと共有したいと考えて立ち上げたギャラリーサイトです。 https://www.aaa11y.com 6
7. キュレーションの特徴としては、視認性、可読性、操作性、音声読み上げへの対応といったアクセシビリティへの配慮はもとより、
 コンテンツのトーンにあったビジュアルデザインの両立がなされているか、ということを掲載の基準としています。 キュレーションの特徴 アクセシビリティ ビジュアルデザイン への配慮 ＋ の両立 7
8. 機能面の特徴としては、通常のギャラリーサイトにあるフィルター機能に加えて、 「ウェブアクセシビリティ達成基準の適合レベル」の 項目も設けていますので、皆さんのニーズに合ったアクセシブルで素敵なウェブサイトを簡単に見つけることができます。 ウェブアクセシビリティ達成基準の適合レベルのフィルター機能 8
9. また、各サイトのアクセシビリティポリシーのリンクも掲載していますので、発信元のアクセシビリティへの取り組みを知ると同時に、 ウェブデザインとしてそれがどのように表現されているのかを知ることもできます。 アクセシビリティポリシーのリンクも掲載 9
10. それでは一つの事例として、掲載しているサイトの中で優れたサイトを紹介したいと思います。こちらはスキンケア・ヘアケア商品が 代表的なユニリーバさんのウェブサイトになります。 © Unilever https://www.unilever.com/ 10
11. カラフルな配色で、ユニバーサルな事業と企業文化が表現されており、なおかつWCAGが定めるコントラスト比にきちんと対応 しています。もちろんキーボード操作にも対応しています。 © Unilever 11
12. 細かなところではメインビジュアルのイメージムービーに、音声読み上げに対応したサマリーテキストも用意されています。こういった 細やかな配慮はぜひ参考にしたいところです。 © Unilever 12
13. このように「AAA11Y」では、ウェブアクセシビリティに配慮した優れたサイトを多数掲載しています。 ウェブアクセシビリティに 配慮したサイトを多数掲載 13
14. 例えば、ウェブ制作会社の皆さんには、参考デザインの取集やワークショップ・勉強会の教材として、また、企業の皆さんには、自社の アクセシビリティへの取り組みの普及材料として、ぜひこのサイトをご活用ください。 勉強会・ワークショップの 教材として アクセシビリティへの 取り組みの普及 14
15. 実際に私たちの会社でも、職種やキャリアの差にこだわらず、社員全員で掲載サイトを探しキュレーションすることによって、皆で アクセシビリティへの知見を深め、それをデザインする上での工夫を共有することができています。 みんなで 共有 ウェブアクセシビリティへの知見を 15
16. さまざまなシーンでご利用ください このサイトを様々なシーンでご利用いただき、ウェブアクセシビリティとビジュアルデザインの両立が多くのサイトで実現していくこと を望んでいます。 16
17. また、 「AAA11Y」では、自選多選を問わず掲載サイトを募集しています。推薦いただいたサイトに関しては、私たち編集部の判断 で掲載可否を検討させていただいておりますので、応募イコール掲載ということではないのですが、ぜひご応募ください。 自選多選を問わず掲載サイトを募集中 ！ 17
18. 最後に、私たちは「デザインの力で情報格差をなくす」 ということをミッションとしているお伝えしましたが、その一歩は誰にでもできる 小さな心配りからだと考えています。 デザインの力で情報格差をなくす 誰にでもできる小さな心配りから 18
19. 皆さんとこのギャラリーサイトを通じて、より多くの人たちがウェブサイトを快適に使えるようになることを目指しています。ぜひ 「AAA11Y Accessible Website Gallery」を多くの方にご利用いただけると幸いです。 https://www.aaa11y.com 19