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
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
モビリティプラットフォームの未来を築くクラウド基盤
kossykinto
0
200
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
1.9k
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
280
UI/UX & Web Design Portfolio 2025|Madoka Kumagai
madoka_portfolio
2
110
AIでデザインをつくる:基礎編
kenichiota0711
1
1.4k
TUNAG BOOK 2024
stmn
PRO
0
1.4k
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
0
280
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
koyaman
1
1.2k
プロダクトリニューアルと同時に進める初めてのデザインシステム
techtekt
PRO
0
430
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
payatsusan213
0
190
decksh object reference
ajstarks
2
1.5k
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
designer_no_pon
0
1.1k
Featured
See All Featured
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
190
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
610
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
160
Believing is Seeing
oripsolob
1
44
How to Ace a Technical Interview
jacobian
281
24k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
750
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
0
1.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.3k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
66
36k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
220
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