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
640
AAA11Yコソコソ話
SmartHR 「アクセシビリティやるぞ!LT祭り」
LT04 【Accessible Website Gallery AAA11Yコソコソ話】
Marshia
June 07, 2023
Tweet
Share
Other Decks in Design
See All in Design
Night Shift concept 9/15/2024
cpineda57
0
730
Картирование процесса фасилитация стратсессий с Картой гипотез при помощи Карты процесса-опыта
ashapiro
0
350
最速で価値を届けるUXリサーチ
degudegu2510
5
1.2k
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
110
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
740
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
3.4k
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
1
1.7k
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.3k
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
160
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
5
44k
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.1k
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
260
Featured
See All Featured
Happy Clients
brianwarren
97
6.7k
Code Review Best Practice
trishagee
63
17k
Visualization
eitanlees
143
15k
Building Applications with DynamoDB
mza
90
6k
Optimising Largest Contentful Paint
csswizardry
31
2.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Building Adaptive Systems
keathley
38
2.2k
A Tale of Four Properties
chriscoyier
156
22k
Gamification - CAS2011
davidbonilla
80
5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.8k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
The Language of Interfaces
destraynor
154
24k
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