docs(spindle-ui): 通知系コンポーネントの使い分けについて詳細追加

[tokimari]

2.2.1 コンテンツに制限時間を設けない の観点から、長い間アクセシビリティ上の懸念が払拭できなかったSnackBar, Toastについて、WAIから公式見解が示されたため、AmebaとしてもSnackBarとToastの 適切な 利用法について言及したいと思います。

詳細

主にモバイルアプリケーションで一般的になったSnackBarやToastコンポーネントは、制限時間が来ると自動で消えてしまうので、2.2.1の達成基準で問題になるのでは？と考えられていました。しかし、時間制限のない代替手段がある場合は、必ずしも時間調整できる必要はないとのことです。

Content that operates on a timer does not need to be time adjustable if there is an alternative that does not rely on a timer. For example, a web application such as an email client provides notification of new email arriving with a temporary message (such as a 'toast' message) in the lower right-hand side of the interface, and the message disappears after 5 seconds. Users are able to identify the arrival of email through other means, such as viewing the Inbox, so the disappearance of the message does not set a time limit on the their ability to determine if new mail has arrived. If the user has no other means of discovering the same information (or performing the same function), then each message would need to meet this Success Criterion in order to provide users with sufficient time to access the information.
https://www.w3.org/WAI/WCAG22/Understanding/timing-adjustable#intent

という段落が2024/6に追加されていました。
翻訳アプリで直訳：

タイマーで動作するコンテンツは、タイマーに依存しない代替手段があれば、時間調整可能である必要はありません。例えば、電子メールクライアントのようなウェブアプリケーションは、新しい電子メールの到着をインターフェイスの右下に一時的なメッセージ（「トースト」メッセージなど）で通知し、メッセージは5秒後に消えます。ユーザーは受信トレイを見るなど、他の手段でメールの到着を確認することができるので、メッセージが消えても、新しいメールが到着したかどうかを判断する能力に時間的な制限は設けられません。ユーザーが同じ情報を発見する（または同じ機能を実行する）他の手段がない場合、ユーザーが情報にアクセスするのに十分な時間を提供するために、各メッセージはこの成功基準を満たす必要があります。

無条件でokというわけではなく、条件付きなことに注意が必要なため、Spindle UIとしても用途について言及する必要があります。
ユーザーがToastを見逃しても支障がなく（＝代替手段があり）、見逃さなかった人にとっては使い勝手が向上するもの、です。

一方で、画面拡大時など、画面外に表示されてしまうことで通知を見逃してしまうというアクセシビリティの懸念はあるため、SnackBarとToastを使う際には下記２つの基準をクリアすることを明記します。

• 1.4.10 リフローできるAA
• 4.1.3 コンテンツの変更をユーザーに知らせるAA

上記を踏まえて、Toast, SnackBar, InlineNotification, Dialogの使い分けを明確にするためにコンポーネントの説明部分と使い分けについて記載しました。

気になりポイント

• 長くなりすぎ
• セクション名
• 表記内容の確認 @MasatoHonda とSlackで進める

スケジュール

急ぎではないです 🙏

[reg-suit]

reg-suit detected visual differences.

Check this report, and review them.

⚪ New
203

How can I change the check status?

If reviewers approve this PR, the reg context status will be green automatically.

[github-actions]

Visit the preview URL for this PR (updated for commit 8409838):

https://ameba-spindle--pr926-feature-update-notif-o20dkq8j.web.app

_{(expires Sat, 26 Oct 2024 06:58:49 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: e7521619a2dd5c653490c8246e81ec2a5c8f1435}

[tokimari]

Snackbarはデータ更新のフィードバックには使わないので、使ってはいけない、のように書く方が良いでしょうか 💭

[itsminadesu]

一旦、大枠だけコメントさせていただきました！ 🙏🏻 （細かい部分は修正次第で変わると思うので一旦スルーしています）

[tokimari]

#926 (comment) と #926 (comment) について、たしかになので @MasatoHonda とSlackで詰めます:pray:（内部資料参照したいのでslackにて・・）

[tokimari]

WAIのToast/SnackBarへの公式見解が出されたことを受けて内容を大幅に見直しました。まずはほんでぃと来週以降で相談しつつ修正を加えていく予定です。その後再レビュー依頼します！（内容にご意見いただくのは今でも全然！）

[tokimari]

@herablog @itsminadesu @yasuda-shin デザイナーチェックokだったので、再レビューお願いします〜〜！（PRガッツリ描き直しています 🙇 ）