この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Slack絵文字のアクセシビリティ
はじめに
これは、アクセシビリティ Advent Calendar 2019 の25日目の記事です。
この記事では「アクセシビリティ Advent Calendar 2019」をふりかえり、次にSlack絵文字のアクセシビリティについて考えます。
アクセシビリティ Advent Calendar 2019
従来、伝統あるWebアクセシビリティ Advent Calendarの向こうを張る? ようにして「Webじゃないアクセシビリティ Advent Calendar」を作ってきました。
- 従来通り、Web以外のアクセシビリティを扱うこと
- Webアクセシビリティ Advent Calendarに入れなかった場合の受け皿になること
の2点を目的に、厚かましいことにアクセシビリティ Advent Calendar 2019とさせていただきました。
@kazuhitoさんほどの広報はできなかったのですが、皆様のご協力により大半の日にエントリーしていただくことができました。
毎年「Webアクセシビリティ以外に2つ目のAdvent Calendarは過剰かもしれない...」という気持ちになりますが、A11YJ Slack にて「非Webアクセシビリティ勢が連携するためにも、これからも続けてください」との暖かいお言葉をいただき、大変に勇気づけていただきました。今後も続けていければと考えています。
Slack絵文字のアクセシビリティ
私が所属するクラスメソッドでは、2019年7月に社内のSlackに完全移行しました。現時点では、4600以上のカスタム絵文字が登録されています。
登録されているカスタム絵文字もバラエティに富んでいますが、20年近くアクセシビリティに取り組んで来た身としては、Slack絵文字のアクセシビリティが気になっていました。
また今年の6月にモバイルアプリのSlackクライアント、9月にはデスクトップでもダークモードが利用可能となり、この文脈で、従来言われていたアクセシビリティ以外の方もダークモードを利用される機会が増えたのではと考えています。
"The Slack Engineering Blog"のダークモード対応に関するエントリ: Building Dark Mode on Desktop を見ると、ダークモード対応のためにデザインシステムの再構築を含むかなりの労力が割かれたことが記載されています。
以下、こうした現状を踏まえて、Slack絵文字のアクセシビリティについて考えます。
1. 色のコントラスト
色のコントラストについては、以前に記事を書きました。 Slack絵文字においても、前景色と背景色のコントラストは、最も重要な課題と言えると思います。
ところが、状況はそう簡単ではありません。コントラスト比を確保する場合には、背景色が固定されている方場合が多く、Slackクライアントのように背景色がライトモードとダークモードに切り替えられる場合には、背景色が2パターンあり、途端に難しくなります。手元のMac版デスクトップクライアントでは、ライトモードとダークモードのSlack絵文字の背景色は以下の通りでした。
| ライトモード | ダークモード |
|---|---|
| #F6F6F6 | #222529 |
この両方の背景色でコントラスト比4.5:1以上を確保することは、実は大変難しくなります。社内のデザイナーさんに相談したところ、調査していただきました。次の色になります。
- #DA3626
- #B46000
- #448600
- #00866E
- #0079CD
- #5B61FF
- #964BF3
- #C127E3
この8色を前景色にすると、見やすくなりそうです。
2. 一次停止または閃光
GIFアニメーションなどをSlack絵文字に変換するツールが提供されていることもあり、自動的に動くSlack絵文字が作成されています。
- キラキラした色の変更
- 横方向へのスクロール
- 回転
- ガタガタふるえる
Slackクライアントの 環境設定 → アクセシビリティ → アニメーション → 画像と絵文字のアニメーションを許可する のチェックをオフにすることで、自動的な動きを止めることができます。
Slackのユーザーがこのオプションを利用することを期待して、アニメーションによる影響がないユーザー向けにはアニメーションするSlack絵文字を提供するという手もありますが、やはり 2.3.1 閃光 や 2.2.2 一時停止 などを勘案すると、アニメーションは避けるのがよいかと考えます。
まとめ
Slackの絵文字がすごい勢いで増えるワークスペースもあるかと思いますが、絵文字を作成するときには、コントラストに注意してアニメーションは避けるのがよいかと思います。
3
