見出し画像

noteにおける画像ALT情報について

以下、基本的にアクセシビリティ業界系むけの内容です。まず最初に、noteの画像ALT情報の件に関しては、土下座しかありません。

noteの画像ALT対応は、開発リソースおよび過去の設計経緯など、色々なものが絡んだ暗礁地帯です。いまの見積もりでは根本的な解決には、半年から1年程度かかると想定されています。

最初は僕も、「いざとなったら自分がコード書いて数日でなおしたれ」という気分でいたんですが、まったくそんな甘い状態ではありませんでした…Developer Meetupの質疑応答でもあがりましたが、これはもうゴメンなさいしかできない状態。

正直ベースで、ここはnoteのシステム設計の歴史的ウィークポイントです。むしろアクセシビリティ業界の人に、どうすればいいかご意見を伺いたい。ベストプラクティスは僕らも把握してるのですが、それが実行不能なため、セカンドベストを模索している状態です。

以下、想定しているシナリオと課題点です。

Plan A: エディタのALT属性入力対応

ベストプラクティスその1。noteのエディターで画像アップロード時に、ALT情報をいれられるようにする。完成までに半年〜1年ぐらいかかり、5人ぐらいのエースプレイヤーが拘束されそうです。

このプランを困難にしているのは、エディターの分断問題です。noteのエディターは、PC WEB/ スマホWEB / iOS / Androidと大きく4つあり、WEBは各種ブラウザのContent EditableとDOM対応が必要となります。エディタのALT入力対応のためには、サーバー側更新と同時に、全てのエディターを同時にアップデートしなければなりません。PCだけ対応しても、アプリで開くとALTが消滅する、最悪ファイルが開けないなどが想定されます。

いちおう、noteのエディターはVer3で、これからVer4設計が計画されており、ALT情報はこのバージョンに搭載検討です。

ただし、このプランのためには前提として、既存エディターのNuxt.JS移行、新エディターの設計、PC/スマホの全機種実装(content editable地獄)および、iOS / Androidのエディター実装、そのためのObjectiveCとか古いコードを脱却(実質アプリのリニューアル)…という前行程が必要となります。

これらを(ほぼ全て)クリアしないと、エディターの同時アップデートができません。このためチーム編成としては、全ブラウザ間のDOMやContent Editableに精通したシニアエンジニアを筆頭に、エースクラスの大量投入の発生が予想されます。

正直、あまり現実的でない、かつ時間がかかりすぎるプランです。


Plan B: メディアマネージャーの実装

ベストプラクティスその2。こちらは、CMSにメディアマネージャーを実装し、そちら側で画像ファイルを管理する手法です。つまりALT情報はメディアマネージャーで管理します。

この方法なら、エディタの改修は最小ですみます。ただし、この場合も、全プラットフォームへのメディアマネージャーの実装と、ファイル管理方式の再設計が必要となります。

エディタ改修よりは影響が小さいですが、こちらも数ヶ月の改修と、noteの編集ワークフローおよび基礎設計変更の発生が予想されます。(あわせて、ストックフォトシステムとメディアマネージャーの運用整合性の設計が発生します)。


また、Plan A / Bに共通する課題として、「ALT入力を実装しても、大多数のユーザーはそもそもALTを入力してくれない」という問題があります。このため、多大なコストをかけ、返金決済システム、データ基盤、通知基盤などよりクリティカルなプロジェクトを止めてALT入力を実装しても、実効性が発生しないことが懸念としてあがっています。仕様上ALT入力ができても、みんな入力しないので、もともとの問題が半分しか解決しない…という点です。

理想解は見えるのに、理想解に届く道があまりに遠すぎて、正直こまってます。いざとなったら自分がコード書いて数日でなおしたれ」という気分でいたんですが、まったくそんな甘い状態ではありませんでした。


Plan C: 空ALTに自動代替コンテンツを流し込む

というわけで、いますぐできる現実的な案は、「ALTに自動で代替情報を流し込む」というものです。これは工数数日でできるため、即時対応として採用されました。(また、手続き処理のため、ユーザーがやってくれないという問題にも対処できます)。

ただ、空タグとして何をいれるか?という問題で揉めており、

C-1: ALTに""を挿入
C-2: ALTにファイル名を挿入
C-3: ALTに「画像1」を挿入

どれを選んでも、誰かから怒られるという状況です。

C-1プランは、写真は妥協できますが図表で問題になります。

C-2プランは、「ファイル名からの情報漏洩が心配」という指摘がでています。(個人的には、この指摘にはちょっと異論があります。ALTと関係なく、アップロード時点でファイル名のチェックは推奨されます)。

C-3プランは、C-1の亜種で、まぁ図表の中身は対して解決しません。


最終目標は、Plan Bのメディアマネージャーを現状は採択案として検討していますが、実装されるのは半年〜1年はかかると想定されます。

それまでの暫定案として、実効性のはる対処療法を探しているのですが、よいものがあったらぜひ教えてくださいませ。この件は、本当に困っているので、よい知恵があったらぜひ「カイゼン目安箱」よりお教えください。

https://docs.google.com/forms/d/e/1FAIpQLSfOnl-LGaXuFWSsNMdLta7mtkr4UJQDMI7GFX8T4vx52h58sw/viewform



この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

よろしければ、サポートお願いいたします! 頑張っているnoteチームのみんなに、回らないお寿司をご馳走しようと思います。

多謝(お返事がランダムに出せるようになりました)
172

深津 貴之 (fladdict)

piece of cake CXO。THE GUILD代表。ユーザーの行動を設計するデザイナです。 UXデザインやUIデザイン、noteのカイゼン報告などについて書いていきます。

noteカイゼン報告

noteのカイゼン事項を報告します
6つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。