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

2017年4月28日 @Frontrend Vol9 by masuP9

@masuP9

• 桝田 草一（ますぴー）
• 株式会社サイバーエージェント
• フロントエンドデベロッパー
• CAのアクセシビリティおじさん(自称)

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

本題

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

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

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;
}

2

こんな時はやっぱり button

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

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

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>

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

だがしかし

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

ひとりではできない

さらに

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

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

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

みんなでやる

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

FRESH! Accessibility Guildelines

概要

ガイドラインを少し紹介

• 指針
• 実装方法と解説（についてのリンク）
• テスト方法

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の対象

ATAGの二つの観点

1. オーサリングツールがアクセシブルかどうか
2. アクセシブルなコンテンツを生成できるか

ガイドラインB.2.3.1：代替コンテンツの編集

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

👉 画像アップできるなら
alt入れられるようにしとけよ！（意訳）

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

関係者を巻き込む

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

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

デザイナー

1.3.1 色の使用

1.3.3 コントラスト

2.1.4 ターゲットサイズ

ディレクター

2.1.2 複雑な操作に依存しない

コナミコマンドの禁止 🚫

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

説明の仕方も大事

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

🙅

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

🤔

そうだけどそうじゃない

だれにとっても

キャラ作りも大事

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

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

自己ブランディング 💪

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

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

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

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

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

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

完成したら公開予定

今後やりたいこと

ガイドラインの公開

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

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

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

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

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

テストの強化

QAチームとの連携

自動ブラウザテスト

• aXe CLI
• addyosmani/a11y

まとめ

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

ありがとうございました

謝辞 & リンク（出現順）

• FRESH!
• slack-reaction-decomoji
• WCAG 2.0
• WCAG 2.0 日本語訳
• WCAG 2.0 解説書
• evcohen/eslint-plugin-jsx-a11y
• UAAG 2.0
• ATAG 2.0
• パフォーマンスはなぜ重要なのか？ - 目先の UX(?) にとらわれないクライアントサイド開発の本質

最初に戻る🏠