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
680
AAA11Yコソコソ話
SmartHR 「アクセシビリティやるぞ!LT祭り」
LT04 【Accessible Website Gallery AAA11Yコソコソ話】
Marshia
June 07, 2023
Tweet
Share
Other Decks in Design
See All in Design
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
630
クライアントワークにおける UXリサーチの実践
kozotaira
0
390
aya_murakami_portfolio
ayakaimi1101
0
1.3k
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
320
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
0
120
Flow, Not Stock 知識触媒としてのIA
5kaichi
0
160
The Golden Whitney
ohtristanart
PRO
0
110
Social Anxiety
ksmith2024
0
130
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
170
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
210
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
720
ito aya Portfolio
itoaya116
0
100
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
4 Signs Your Business is Dying
shpigford
183
22k
Making Projects Easy
brettharned
116
6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Fireside Chat
paigeccino
35
3.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
GraphQLとの向き合い方2022年版
quramy
44
14k
Thoughts on Productivity
jonyablonski
69
4.5k
Designing for humans not robots
tammielis
250
25k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
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