Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AAA11Yコソコソ話

Marshia
June 07, 2023

 AAA11Yコソコソ話

SmartHR 「アクセシビリティやるぞ!LT祭り」
LT04 【Accessible Website Gallery AAA11Yコソコソ話】

Marshia

June 07, 2023
Tweet

Other Decks in Design

Transcript

  1. 「AAA11Y」
    コソコソ話
    Accessible Website Gallery

    View Slide

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

    View Slide

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

    View Slide

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

    できます。

    View Slide

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

    View Slide

  6. WCAGが提供しているガイド

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

    View Slide

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

    移動させる機能がある

    View Slide

  8. 一時停止,
    停止及び非表示
    www.unilever.com
    waic.jp/translations/UNDERSTANDING-WCAG20/time-limits-pause.html
    この達成基準の意図は、ユーザーが

    表面的なものに注意をそらされない

    ようにすること。
    動きのあるオブジェクトを追うのが困難な利用者
    に障壁になるもとより、具体的には注意欠陥障害
    をもつユーザーには、点滅しているコンテンツに
    気を取られ、ウェブページの他の部分に集中する
    ことが困難となる。

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide