継続的にアクセシビリティを高めるために まずは無理なく基本を押さえる

@Frontrend Vol9 by masuP9

@masuP9

ますぴーとかかれたバッジの写真

FRESH!

生放送がログイン不要・高画質で見放題のプラットフォーム

[PR]FRESH!では配信主を募集しています。

👉 チャンネル開設のご案内

本題

運用が続くウェブサービス/サイトで、
アクセシビリティを無理なく高める
にはどうしたら良いのでしょう。

どうしたら良いのでしょう?

FRESH!での取り組みをご紹介します。

どうやってやってるの1

FRESH!での取り組み

  • まずはできるところから
  • みんなでやる

まずはできるところから

現状を確認する

アクセシビリティチェック

WCAG
(Web Contents Accessibility Guidelines)
  • 4つの原則
  • 12の指針
  • 59の達成基準
  • 3つのレベル

どこからやれば…

👉 とりあえずやれるところから!

4つの原則

おさらいしておきましょう

  • 知覚可能 = そこにあると知れる
  • 操作可能 = さわれる
  • 理解可能 = 分かる
  • 堅牢性 = 壊れにくい

最初にやったのは

  • alt入ってるかなー
  • キーボードで操作できるかなー

👉 知覚可能と操作可能の基本

基本かつ、抑えられるとかなり
底上げできる項目だが...

実はこれがすべてできている
ウェブサイトやサービスはかなり少ない

個人の感想です

チェック結果1 - alt

<Image>コンポーネント編

<div
  class="Image -cover"
  style="background-image: url(hoge.jpg)"
>
</div>
.Image.-cover > img {
  background-size: cover;
}

おやおや1

object-fitさえ使えれば...案件だった

👉 使おう

.Image.-cover > img {
  object-fit: cover;
}
<div class="Image -cover">
<img src="hoge.jpg" alt="huga" />
</div>

アクセシビリティーーーーーーーーー

ただobject-fit未対応ブラウザは...

<div
  class="Image -cover"
  style="background-image: url(hoge.jpg)"
  role="img"
  aria-label="hoge"
>
</div>

WAI-ARIAのお世話に...

で、できるところからだから...

結果2 - キーボード操作

<Menu>コンポーネント編

<div class="Menu">
  <span>Menu</span>
  <ul>~~~</ul>
</div>
.Menu:not(:hover) ul {
  display: none;
}

キーボードやタッチインターフェースで
どうやってhoverするん?

おやおや2

こんな時はやっぱり button

<button type="button" onClick={this.onClick}>Button</button>

buttonclickなら
キーボードやタップで操作可能に

hoverだけでなくclickでも操作可能にする

<div className="Menu"
  onMouseOver={this.onMouseOver}
  onMouseOut={this.onMouseOut}
>
<button className="Menu__button" type="button"
  aria-expanded={this.state.isListShow}
  onClick={this.onClick}
>Menu</button>
<ul>~~~</ul>
</div>

aでもいいです。ただしhrefあり

アクセシビリティーーーーーーー

だがしかし

日々続く機能開発
どしどし作られるコンポーネント

ひとりではできない

さらに

そもそもデザインが...

そもそも仕様が...(ry

みんなで目指す指針が必要だ...!!

みんなでやる

ガイドラインの作成 / 展開

FRESH! Accessibility Guildelines

概要

FRESH!が提供するサービスを対象としたアクセシビリティガイドライン。

コンテンツ制作者、及びUI開発者はガイドラインに沿った制作をすることを強く推奨する

ガイドラインを少し紹介
  • 指針
  • 実装方法と解説(についてのリンク)
  • テスト方法
1.1.1 非テキストコンテンツの代替テキスト

非テキストコンテンツ(画像や動画)には
代替テキストを提供する

実装方法 / 解説
  1. 非テキストコンテンツ:達成基準 1.1.1 を理解する | WCAG2.0解説書
  2. キャプション (収録済):達成基準 1.2.2 を理解する | WCAG 2.0解説書
テスト方法
  1. ESlintプラグインによる自動チェック
    1. eslint-plugin-jsx-a11y/accessible-emoji
    2. eslint-plugin-jsx-a11y/img-has-alt
    3. eslint-plugin-jsx-a11y/iframe-has-title
  2. コードレビューによるチェック

なぜWCAGをそのまま使わないのか

  • 実際に使われるガイドラインにしたい
    • 非技術者でも理解できる文言にしたい
    • 無理な項目をいれない
  • サービス特性に合わせたガイドラインにしたい
    • 配信管理画面はオーサリングツール
      👉 ATAG 2.0 をベースとしたい

ガイドラインについておさらい

WCAG

Web Contents Accessibility Guidelines

(主に)コンテンツのためのガイドライン

UAAG

User Agent Accessibility Guidelines

ユーザーエージェントのためのガイドライン

ATAG

Authoring Tool Accessibility Guidelines

オーサリングツールのためのガイドライン

ATAGの対象

  • DreamWeaver, ホームページビルダーなどのエディタ
  • ブログシステム、Wiki
  • CMS
  • WYSIWYG HTMLエディタ

などなど

ATAGの二つの観点

  1. オーサリングツールがアクセシブルかどうか
  2. アクセシブルなコンテンツを生成できるか
ガイドラインB.2.3.1:代替コンテンツの編集

オーサリングツールがテキスト以外のコンテンツを追加する機能を提供する場合、著者はテキスト以外のコンテンツに対してプログラムによって関連付けられた代替テキストを変更できます。

👉 画像アップできるなら
alt入れられるようにしとけよ!(意訳)

ドキュメントは書くだけじゃだめ

関係者を巻き込む

時間を取ってガイドライン全項目を説明

自分事だと捉えてもらうことが大事

デザイナー
1.3.1 色の使用

色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段としない

1.3.3 コントラスト

コンテンツやUI上のテキストやアイコンの視覚的提示に、4.5:1 以上のコントラスト比を設ける。ただし、次の場合は除くが、可能な限りコントラスト比を確保する。

  • 大きな文字サイズのテキスト
  • 操作不可能なUI上のテキスト
  • ロゴタイプ
2.1.4 ターゲットサイズ

ポインティングのターゲットサイズは、タッチインターフェース向けUIでは 44×44 px 以上を確保する。

ディレクター
2.1.2 複雑な操作に依存しない

コンテンツやUIの全ての機能には、特定のキーストロークのタイミングや複雑なジェスチャを必要としないようにし、必要な場合は単純な操作による代替操作を用意する。

コナミコマンドの禁止 🚫

2.2.2 一時停止、停止、非表示

動きのある、点滅している、スクロールする、又は自動更新する情報は、それらがコンテンツとして必須出ない場合、利用者がそれらを一時停止、停止、非表示にすることができるメカニズムを提供する

説明の仕方も大事

アクセシビリティったらアクセシビリティ!

🙅

世の中には目の見えない人もいてね…

🤔

そうだけどそうじゃない

だれにとっても

キャラ作りも大事

全社に配信される中途社員紹介メールより

著者の顔写真リッチなインターネットアプリケーションを作れる
アクセシビリティおじさんになるためにサイバーエージェントに入社しました。
よろしくお願いします!

自己ブランディング 💪

「自分の会社やチームに
アクセシビリティおじさん
とか言う人が居たな...」

最初は「うるさいやつだな...」
と思われるかもしれませんが

巻き込んだ結果、少しずつ

  • 新デザインの際にアクセシビリティについて相談が来るように
  • 仕様の相談の際に考慮されるものの一つに

やさしく粘り強く、負けない気持ちで
アクセシビリティおじさんしていきましょう

ガイドラインは鋭意作成中 💪

完成したら公開予定

今後やりたいこと

ガイドラインの公開

社内他サービスへの横展開

他社サービスに真似されたい

ガイドラインのカバレッジを広く

ビジネス職にも...
ユーザーが作るコンテンツにも...

生放送動画のリアルタイム字幕生成ェ...

テストの強化

QAチームとの連携

  • ガイドラインの項目をQA時にテストする
  • 通常テストの改善

例えばテスト手順中の操作で「クリック」があれば、キーボード操作もテスト

自動ブラウザテスト

まとめ

  • まずはできるところから 👉 簡易チェックから
  • みんなでやる 👉 指針を作って巻き込む
  • もっと広げていくぞ

できるところからやっていきましょう 💪

ありがとうございました

謝辞 & リンク(出現順)

最初に戻る🏠