Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AAA11Y Accessible Website Gallery のご紹介
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Takuya Sakaguchi
June 23, 2023
Design
0
300
AAA11Y Accessible Website Gallery のご紹介
アクセシブルで素敵なウェブデザインを紹介するギャラリーサイト「AAA11Y」のご紹介(2023.5.19@アクセシビリティの祭典2023)
https://www.aaa11y.com/
Takuya Sakaguchi
June 23, 2023
Tweet
Share
Other Decks in Design
See All in Design
AIでデザインをつくる:基礎編
kenichiota0711
3
2.5k
デザイナーが主導権を握る、AI協業の本音と実践
satosio
7
2.8k
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
920
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
1.4k
root COMPANY DECK / We are hiring!
root_recruit
2
26k
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
1.9k
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
mewmo
PRO
0
160
CREATIVE CLASS受講課題|無印良品を題材としたブランド再構築について
happy_ferret153
0
620
結びながら、ひらく - にじむ境界のデザイン
hilokifigma
3
1.4k
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
2
520
Vibe Coding デザインシステム
poteboy
3
1.6k
kintone_aroma
kintone
0
1.4k
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
The Cult of Friendly URLs
andyhume
79
6.8k
Code Review Best Practice
trishagee
74
20k
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
200
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
The World Runs on Bad Software
bkeepers
PRO
72
12k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
66
37k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
190
Large-scale JavaScript Application Architecture
addyosmani
515
110k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
60
42k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
590
Transcript
アクセシブルで素敵なウェブデザインを紹介するギャラリーサイト 「AAA11Y Accessible Website Gallery」のご紹介 株式会社トルク CDO/アートディレクター 阪口 卓也
デザインの力で情報格差をなくす 私たち株式会社トルクは「デザインの力で情報格差をなくす」 ということをミッションにかかげて活動する、デジタル領域を専門とした デザインファームです。 2
意志 意図 言葉 体験 プログラム システム 動き デザイン 私たちは、意志、意図、言葉、体験、プログラム、システム、動きなど、人の営みを豊かにする創造の全てをデザインの対象と捉えて います。その中でもウェブアクセシビリティをデザインの重要な要素の一つと考えて、日々制作に取り組んでいます。
3
© SmartHR, Inc. https://work-design-award.jp/ 代表的な制作実績としては、 クラウド人事労務ソフトのSmartHRさんが主催する 「働き方改革の取り組み」 を表彰するアワード 「WORK DESIGN
AWARD」 の公式サイトになります。 4
© SmartHR, Inc. 第10回Webグランプリ 「アクセシビリティ賞 優秀賞」 こちらはWCAG2.0レベルAA準拠を目標としたウェブアクセシビリティとデザイン性が評価され、第10回Webグランプリ 「アクセシビリティ賞 優秀賞」 をいただきました。
5
「AAA11Y Accessible Website Gallery (以下、AAA11Y) 」は、このような制作の中で知り得た優れたサイトや、私たちのミッションを 多くの人たちと共有したいと考えて立ち上げたギャラリーサイトです。 https://www.aaa11y.com 6
キュレーションの特徴としては、視認性、可読性、操作性、音声読み上げへの対応といったアクセシビリティへの配慮はもとより、 コンテンツのトーンにあったビジュアルデザインの両立がなされているか、ということを掲載の基準としています。 キュレーションの特徴 アクセシビリティ ビジュアルデザイン への配慮 + の両立 7
機能面の特徴としては、通常のギャラリーサイトにあるフィルター機能に加えて、 「ウェブアクセシビリティ達成基準の適合レベル」の 項目も設けていますので、皆さんのニーズに合ったアクセシブルで素敵なウェブサイトを簡単に見つけることができます。 ウェブアクセシビリティ達成基準の適合レベルのフィルター機能 8
また、各サイトのアクセシビリティポリシーのリンクも掲載していますので、発信元のアクセシビリティへの取り組みを知ると同時に、 ウェブデザインとしてそれがどのように表現されているのかを知ることもできます。 アクセシビリティポリシーのリンクも掲載 9
それでは一つの事例として、掲載しているサイトの中で優れたサイトを紹介したいと思います。こちらはスキンケア・ヘアケア商品が 代表的なユニリーバさんのウェブサイトになります。 © Unilever https://www.unilever.com/ 10
カラフルな配色で、ユニバーサルな事業と企業文化が表現されており、なおかつWCAGが定めるコントラスト比にきちんと対応 しています。もちろんキーボード操作にも対応しています。 © Unilever 11
細かなところではメインビジュアルのイメージムービーに、音声読み上げに対応したサマリーテキストも用意されています。こういった 細やかな配慮はぜひ参考にしたいところです。 © Unilever 12
このように「AAA11Y」では、ウェブアクセシビリティに配慮した優れたサイトを多数掲載しています。 ウェブアクセシビリティに 配慮したサイトを多数掲載 13
例えば、ウェブ制作会社の皆さんには、参考デザインの取集やワークショップ・勉強会の教材として、また、企業の皆さんには、自社の アクセシビリティへの取り組みの普及材料として、ぜひこのサイトをご活用ください。 勉強会・ワークショップの 教材として アクセシビリティへの 取り組みの普及 14
実際に私たちの会社でも、職種やキャリアの差にこだわらず、社員全員で掲載サイトを探しキュレーションすることによって、皆で アクセシビリティへの知見を深め、それをデザインする上での工夫を共有することができています。 みんなで 共有 ウェブアクセシビリティへの知見を 15
さまざまなシーンでご利用ください このサイトを様々なシーンでご利用いただき、ウェブアクセシビリティとビジュアルデザインの両立が多くのサイトで実現していくこと を望んでいます。 16
また、 「AAA11Y」では、自選多選を問わず掲載サイトを募集しています。推薦いただいたサイトに関しては、私たち編集部の判断 で掲載可否を検討させていただいておりますので、応募イコール掲載ということではないのですが、ぜひご応募ください。 自選多選を問わず掲載サイトを募集中 ! 17
最後に、私たちは「デザインの力で情報格差をなくす」 ということをミッションとしているお伝えしましたが、その一歩は誰にでもできる 小さな心配りからだと考えています。 デザインの力で情報格差をなくす 誰にでもできる小さな心配りから 18
皆さんとこのギャラリーサイトを通じて、より多くの人たちがウェブサイトを快適に使えるようになることを目指しています。ぜひ 「AAA11Y Accessible Website Gallery」を多くの方にご利用いただけると幸いです。 https://www.aaa11y.com 19