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
670
AAA11Yコソコソ話
SmartHR 「アクセシビリティやるぞ!LT祭り」
LT04 【Accessible Website Gallery AAA11Yコソコソ話】
Marshia
June 07, 2023
Tweet
Share
Other Decks in Design
See All in Design
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
490
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
190
セブンデックス カルチャーブック
sevendex
0
1.2k
portfolio2025_kanakoohata
kanako106
0
640
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.2k
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
270
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
210
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.9k
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k
aya_murakami_portfolio
ayakaimi1101
0
1.1k
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
200
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
690
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Music & Morning Musume
bryan
46
6.3k
Speed Design
sergeychernyshev
25
780
BBQ
matthewcrist
86
9.4k
Fireside Chat
paigeccino
34
3.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
4 Signs Your Business is Dying
shpigford
182
22k
Writing Fast Ruby
sferik
628
61k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Documentation Writing (for coders)
carmenintech
67
4.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
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