Slide 1

Slide 1 text

「AAA11Y」 コソコソ話 Accessible Website Gallery

Slide 2

Slide 2 text

マルシア セティアワン 株式会社トルク Marshia Setiawan デザイナー

Slide 3

Slide 3 text

デザインの力で情報格差をなくす MISSION 表層的なビジュアルだけをデザインと捉えず、 全てを の対象と捉えています。 デザイン 意志 意図 言葉 体験 プログラム システム 動き

Slide 4

Slide 4 text

アクセシビリティへの配慮がされた優れたウェブサイトを 多数紹介しているギャラリーサイトです。 機能面の特徴としては、通常のギャラリーサイトにある 「カラー」「カテゴリ」「タイプ」などフィルター機能に 加えて、「ウェブアクセシビリティ基準の対応レベル」の 項目も設けていますので、ユーザーのニーズに合ったアク セシブルで素敵なウェブサイトを簡単に見つけることが
 できます。

Slide 5

Slide 5 text

掲載判断はどういう風に行っていますか?

Slide 6

Slide 6 text

WCAGが提供しているガイド
 ラインに沿って判断しています waic.jp/resource/jis-x-8341-3-2016/ waic.jp/translations/WCAG20/Overview.html

Slide 7

Slide 7 text

タブ機能操作 www.unilever.com ① ② ③ ④ https://waic.jp/translations/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html タブキーにはカーソルのような
 移動させる機能がある

Slide 8

Slide 8 text

一時停止, 停止及び非表示 www.unilever.com waic.jp/translations/UNDERSTANDING-WCAG20/time-limits-pause.html この達成基準の意図は、ユーザーが
 表面的なものに注意をそらされない
 ようにすること。 動きのあるオブジェクトを追うのが困難な利用者 に障壁になるもとより、具体的には注意欠陥障害 をもつユーザーには、点滅しているコンテンツに 気を取られ、ウェブページの他の部分に集中する ことが困難となる。

Slide 9

Slide 9 text

コントラスト サイズの大きなテキストまたサイズの 大きな文字画像に、少なくとも 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

Slide 10

Slide 10 text

キュレーションの特徴は? 視認性、可読性、操作性、音声読み上げへの対応 サイトに内包しているコンテンツのトーンにあったビジュアルデザイン

Slide 11

Slide 11 text

多分、誰もまだ辿りつかない404ページの紹介

Slide 12

Slide 12 text

ご視聴ありがとうございます aaa11y.com @AAA11YGALLERY