Chatwork Creator's Note

ビジネスチャット「Chatwork」のエンジニアとデザイナーのブログです。

ビジネスチャット「Chatwork」のエンジニアとデザイナーのブログです。

読者になる

どこからアクセシビリティ対応をすすめるか

こんにちは!モバイルアプリケーション開発部の Android エンジニア、いけちょ(@ikeda_shogouki)こと池田です。

最近、SLA の 3D プリンターを購入し、夜な夜なパーツを出力して遊んでいます。3D プリンター最高~!

さて、これは Chatwork Advent Calendar 2020 17 日目の記事です。

アクセシビリティ対応やってくぞい!

先日、Chatwork でどのようにアクセシビリティ改善を進めているかご紹介しました。

creators-note.chatwork.com

この記事を読んで、「よし!アクセシビリティ対応やってくぞい!」と思ったものの、どこからアクセシビリティ対応を進めたらよいか分からないという方もいるかもしれません。

そんなときは、Google が公式に公開している Accessibility Scanner というアプリで、アクセシビリティ対応が必要なところを洗い出すことができます。

Accessibility Scanner (ユーザー補助検証ツール) とは

Google I/O '18 のアクセシビリティに関する動画を視聴していたところ、 Accessibility Scanner というツールがあることを知りました。

An accessible process for inclusive design (Google I/O '18) - YouTube

日本では "ユーザー補助検証ツール" という名前で、このアプリを使うことで正しくラベルが設定されているか、ボタンの大きさが十分か、などを簡単にチェックすることができるようです。

developer.android.com

Accessibility Scanner を使ってみよう

詳しい使い方はこちらに記載されています。

Get started with Accessibility Scanner - Android Accessibility Help

今回は、Chatwork のタイムライン画面をこのツールで検証してみたいと思います。

インストール

アプリは Google Play からインストールできます。

Accessibility Scanner - Apps on Google Play

アプリの検証をする

ユーザー補助検証ツールを有効にすると、画面上にチェックマークのボタンが表示されます。

f:id:cw-michihiro:20201216145735j:plain:w500

このボタンをタップすると記録・スナップショットが選択でき、検証することができます。

  • 記録
    • 一連の操作で遷移した画面を検証
  • スナップショット
    • 現在表示中の画面を検証

f:id:cw-michihiro:20201216150816p:plain:w500

提案内容を見る

スナップショットをとると、検証の結果として修正が必要な箇所がハイライトされて表示されます。

f:id:cw-michihiro:20201216151254p:plain:w500

リスト表示にすると、contentDescription が設定されていない項目、操作可能な View のサイズが規定に満たない項目の修正が提案されています。

f:id:cw-michihiro:20201216152715p:plain:w500

サムネイル画像に contentDescription が設定されていない…。これは対応したほうがよさそうですね。あとで提案書を作成しておきましょう。

ボタンのサイズが小さい…のはこのボタンの並びでは対応が難しそうですね…

デザインについてはエンジニアからの指摘が難しいところですが、デザイナーに対し「タッチターゲット」の改善にフォーカスした問題提起ができることがわかります。

このように公開されているアプリやツールを使うことで、簡単にアクセシビリティ対応が必要な部分の発見につながります。見つかった問題点を改善していくことで、より使いやすいアプリになっていくでしょう。

よし!アクセシビリティ対応やってくぞい!