Slack絵文字のアクセシビリティ

#デザイン

motchie

2019.12.25

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Slack絵文字のアクセシビリティ

はじめに

これは、アクセシビリティ Advent Calendar 2019 の25日目の記事です。

この記事では「アクセシビリティ Advent Calendar 2019」をふりかえり、次にSlack絵文字のアクセシビリティについて考えます。

アクセシビリティ Advent Calendar 2019

従来、伝統あるWebアクセシビリティ Advent Calendarの向こうを張る? ようにして「Webじゃないアクセシビリティ Advent Calendar」を作ってきました。

Echoデバイス(AVS)のアクセシビリティ機能の概要とスキルのガイドライン

今年は、@kazuhitoさんと事前に相談し、

従来通り、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絵文字においても、前景色と背景色のコントラストは、最も重要な課題と言えると思います。

コントラスト比が低いUIは20人に1人以上に影響! 対策をまとめてみた

ところが、状況はそう簡単ではありません。コントラスト比を確保する場合には、背景色が固定されている方場合が多く、Slackクライアントのように背景色がライトモードとダークモードに切り替えられる場合には、背景色が2パターンあり、途端に難しくなります。手元のMac版デスクトップクライアントでは、ライトモードとダークモードのSlack絵文字の背景色は以下の通りでした。