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
710
AAA11Yコソコソ話
SmartHR 「アクセシビリティやるぞ!LT祭り」
LT04 【Accessible Website Gallery AAA11Yコソコソ話】
Marshia
June 07, 2023
Tweet
Share
Other Decks in Design
See All in Design
NAHO SHIMONO_Portfolio2025
nahohphp
0
850
Storyboard Honey
rocioparronrubio
0
270
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
290
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.6k
portfolio_YumiYasuda
yum0418
0
290
Saudade typeface
tiagoporto
0
330
オープンデータを利用して色々なものを作った話
hjmkth
1
110
線で考える画面構成
natsuume
1
880
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
AI動画生成ガチャ紹介
piyo7
1
110
Cyber Heart Online Book
hjnasby
0
120
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Unsuck your backbone
ammeep
671
58k
A Tale of Four Properties
chriscoyier
160
23k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
RailsConf 2023
tenderlove
30
1.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Designing for humans not robots
tammielis
253
25k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
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