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コソコソ話
Search
Marshia
June 07, 2023
Design
0
690
AAA11Yコソコソ話
SmartHR 「アクセシビリティやるぞ!LT祭り」
LT04 【Accessible Website Gallery AAA11Yコソコソ話】
Marshia
June 07, 2023
Tweet
Share
Other Decks in Design
See All in Design
Masked shaman-Storyboard 2025
ashley0521
0
260
苦労が多かった多言語対応をFigmaで楽にした話
pioneer_devrel
PRO
0
170
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
470
私とデザインの10年
iflection
0
100
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
280
250131_product meetup
motokoishida
0
170
portfolio_YumiYasuda
yum0418
0
240
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.3k
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.4k
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
190
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
190
問いの変遷
iflection
0
100
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.3k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
We Have a Design System, Now What?
morganepeng
52
7.5k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.5k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Faster Mobile Websites
deanohume
306
31k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
690
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
33k
Unsuck your backbone
ammeep
671
57k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
590
For a Future-Friendly Web
brad_frost
177
9.7k
Transcript
「AAA11Y」 コソコソ話 Accessible Website Gallery
マルシア セティアワン 株式会社トルク Marshia Setiawan デザイナー
デザインの力で情報格差をなくす MISSION 表層的なビジュアルだけをデザインと捉えず、 全てを の対象と捉えています。 デザイン 意志 意図 言葉 体験
プログラム システム 動き
アクセシビリティへの配慮がされた優れたウェブサイトを 多数紹介しているギャラリーサイトです。 機能面の特徴としては、通常のギャラリーサイトにある 「カラー」「カテゴリ」「タイプ」などフィルター機能に 加えて、「ウェブアクセシビリティ基準の対応レベル」の 項目も設けていますので、ユーザーのニーズに合ったアク セシブルで素敵なウェブサイトを簡単に見つけることが できます。
掲載判断はどういう風に行っていますか?
WCAGが提供しているガイド ラインに沿って判断しています waic.jp/resource/jis-x-8341-3-2016/ waic.jp/translations/WCAG20/Overview.html
タブ機能操作 www.unilever.com ① ② ③ ④ https://waic.jp/translations/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html タブキーにはカーソルのような 移動させる機能がある
一時停止, 停止及び非表示 www.unilever.com waic.jp/translations/UNDERSTANDING-WCAG20/time-limits-pause.html この達成基準の意図は、ユーザーが 表面的なものに注意をそらされない ようにすること。 動きのあるオブジェクトを追うのが困難な利用者 に障壁になるもとより、具体的には注意欠陥障害 をもつユーザーには、点滅しているコンテンツに
気を取られ、ウェブページの他の部分に集中する ことが困難となる。
コントラスト サイズの大きなテキストまたサイズの 大きな文字画像に、少なくとも 3:1 の コントラスト比がある ロゴにおいてコントラストの要件はない 4.5:1 (最低限) www.unilever.com
7.6:1 8.4:1 7.7:1 8.9:1 https://waic.jp/translations/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#larger-scaledef
キュレーションの特徴は? 視認性、可読性、操作性、音声読み上げへの対応 サイトに内包しているコンテンツのトーンにあったビジュアルデザイン
多分、誰もまだ辿りつかない404ページの紹介
ご視聴ありがとうございます aaa11y.com @AAA11YGALLERY