# プレビューも編集も削除もできないまま公開されてしまうコメント欄
Source: https://easeweb.dev/learn/comment-review
Topics: フォーム > すべてのフォーム送信を確認・取り消しできる (WCAG 3.3.6)
The fix: コメント欄のボタンでプレビューへ進むようにし、「編集」と「コメントを送信」を置いて、書いた本人が見るまで何も公開しないようにします。または、本人のコメントの下に、明記した期限まで「編集」と「削除」を示します。後者も基準を満たしますが、本人が気づくまで間違いは公開されたままです。
Test with: keyboard, screen reader, zoom
References: https://www.w3.org/WAI/WCAG22/Understanding/error-prevention-all.html https://www.w3.org/WAI/WCAG22/Techniques/general/G98 https://www.w3.org/WAI/WCAG22/Techniques/general/G164 https://www.w3.org/WAI/WCAG22/Techniques/general/G168 https://api.drupal.org/api/drupal/core%21modules%21comment%21help_topics%21comment.configuring.html.twig/10 https://wordpress.org/plugins/simple-comment-editing/
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
## 場面
あるレシピブログはWordPressで作られていて、各レシピの下に、WordPressがどのブログにも用意するコメント欄があります。この例では、ここで関わる部分だけを残しています。コメントの入力欄、名前の欄、そして「コメントを送信」ボタンです。すばやく書けるように作られていて、たいていのコメントはそのとおり、書いて押せば終わりです。
トマトスープを作った読者が、こつを書き込もうとします。塩は小さじ2杯のつもりでしたが、「大さじ2杯」と書いてしまいました。どちらも「さじ」で終わる、よく似た言葉です。このブログはコメントを承認待ちにしない設定のため、「コメントを送信」を押すと、コメントはその場で、読者の名前とともに、レシピを読むすべての人に公開されます。少しして読み返し、間違いに気づきます。コメントの下には「編集」も「削除」もなく、直し方を示すものもありません。ブログの持ち主にメールを書いて、待つしかありません。そのあいだに、次にスープを作る人が、このこつのとおりに塩を入れるかもしれません。
## 確認できる問題
達成基準3.3.6「エラー回避（すべて）」はレベルAAAです。利用者に情報の送信を求めるページでは、次の三つのうち少なくとも一つが必要です。送信を取り消せること。入力されたデータの入力エラーがチェックされ、修正できること。確定する前に、情報を確認し、確定し、修正する手段があること。3.3.4はAAで同じことを求めますが、対象は法的な義務、金融取引、サイトに保存された利用者のデータの変更、試験の回答に限られます。コメントはどれにも当たらないため、3.3.6の対象になります。
このフォームも欄の検証はしています。コメントや名前が空だと、エラーが返ります。文字どおりに読めば、これは達成基準の二つ目の方法に当たり、厳密に読めばそこで終わるという見方もあります。しかし、WCAGは入力エラーを、フォームが受け付けない情報と定義しています。「塩を大さじ2杯」は受け付けられるため、この達成基準が防ごうとしている間違いには、チェックが届きません。3.3.6が十分な達成方法として示すのは、3.3.4の達成方法をすべてのフォームに使うことです。送信の前に回答を確認して修正できる段階（G98）、送信後に変更や取り消しができる期限の明記（G164）、送信ボタンに加えたチェックボックス（G155）、削除した情報を復元する手段（G99）、操作を続ける前の確認（G168）です。どれも検証ではなく、このフォームはどれも備えていません。
WordPressは、コメントを書く訪問者に、投稿前のプレビューも投稿後の編集も用意していません。期限付きの編集を加えるには、プラグインを使います。一方Drupalには、コメントを保存する前のプレビューを必須にする設定が、本体に用意されています。
## 利用者への影響
コメントは公開され、書いた人の名前が付き、レシピがある限りその下に残ります。レシピ、やり方の解説、商品のページでは、ほかの人がそこに書かれたとおりに行動します。間違えやすい人ほど、サイトの持ち主にメールで訂正を頼むことも負担になりがちです。
## 自動チェックとAIの限界
各欄にはラベルがあり、ボタンには名前があり、フォームは自動チェックをすべて通ります。コメントをプレビュー、編集、削除できるかは、「コメントを送信」の後にサーバーが何をするかで決まり、スキャナーが実際のサイトにコメントを投稿することはありません。フォームのマークアップには、送信内容がどう扱われるかが書かれていないため、EaseWebの診断にもこれを見つけるチェックはありません。コーディングアシスタントにこのフォームの「エラーを防いで」と頼むと、コメント欄に`minlength`と`maxlength`を加えることがあります。短すぎるコメントは防げても、「大さじ」は防げません。
## 修正前：「コメントを送信」でその場で公開される
```html recipe.html
コメント
```
- フォームが届くとすぐに、サーバーがコメントを公開します。
- 公開される前に、コメントを本人に見せる段階がありません。
- 投稿した後、書いた本人がコメントを編集する手段も、削除する手段もありません。
## 修正後：投稿する前の、スレッドの中のプレビュー
```html recipe.html
コメント
```
```html recipe-with-preview.html
コメント
```
1. フォームのボタンを「プレビュー」にし、押すと、ほかの誰にも見えない下書きとしてコメントを保存するようにします。
2. 同じレシピのページを、下書きの位置で開いて返します。コメントは公開されるときと同じスレッドの中に、本人にしか見えないプレビューとして表示されます。レシピもそれまでのコメントもページに残るので、ほかの人が読むのと同じ場所でこつを読み返せます。
3. フォームがあった場所に「コメントを送信」と「コメントを編集」を置きます。「コメントを編集」では、コメントと名前を保ったままフォームが戻ります。間違いは一か所を直すだけで済み、コメントを書き直す必要はありません。
4. コメントを公開するのは「コメントを送信」だけにします。
これで修正前の例は直り、G98のとおり、確定する前にコメントを確認し、確定し、修正する手段があるため、3.3.6を満たします。
## 修正後：期限を明記した、自分のコメントの「編集」と「削除」
```html recipe.html
コメント
```
```html recipe-editing.html
コメント
```
```html recipe-deleting.html
コメント
```
1. コメントが投稿されたら、そのコメントを識別するキーをCookieに保存し、どのブラウザーが書いたかをサイトが分かるようにします。
2. コメントの下に、いつまで編集・削除できるかを時刻で示します。
3. その時刻まで、そのブラウザーに「編集」と「削除」のリンクを示し、それぞれ何を対象にするかが分かる名前にします。
4. 「編集」では、コメントをスレッドの中のその場所でフォームに変え、入力欄にはコメントがすでに入っているようにします。間違いは一か所を直すだけで済み、前後の返信も見えたままです。
5. 削除する前に、そのコメントのすぐ下で確認します。書いたものを消すこと自体が3.3.4の対象になるため、「削除」では、「コメントを削除」と「削除しない」を選ぶ質問を示します。
コメントはその場で公開されますが、直すことも取り下げることもできるため、修正前の例は直り、G164の明記された期限によって3.3.6を満たします。ただし、これだけでは十分ではありません。本人が気づくまで間違いは公開されたままで、そのあいだに次の読者がそのとおりにするかもしれません。また、役に立つのは、期限が間違いに気づけるだけ長く、コメントを送信したブラウザーから操作する場合に限られます。スマートフォンで書き込み、ノートパソコンでスレッドを読んだ人は、そこからは直せません。
## どの方法を選ぶか
どちらも3.3.6を満たします。プレビューを使ってください。ほかの人が読む前に間違いを止められるのはプレビューだけで、ログインしていてもいなくても、どの端末でも、すべての人に使えます。できれば「編集」と「削除」も加えてください。スレッドに載ったコメントを見て初めて気づく間違いにも対応できます。ただし、「編集」と「削除」だけでは、見つかるまで間違いは公開されたままです。
## 実装の判断
プレビューから投稿までのあいだ、下書きはページの中だけでなく、サーバーに保存します。そうすれば、戻るボタン、「コメントを編集」、再読み込みのどれでも、コメントと名前がそのまま戻ります。長いフォームについては「[同じ住所を二度入力させるチェックアウトフォーム](/ja/learn/redundant-entry)」も参照してください。
承認待ちのコメントも、この役目は果たしません。WordPressは初期設定では、まだ承認されたコメントがない人のコメントを承認待ちにし、書いた本人には「あなたのコメントは承認待ちです。」と添えて表示します。ブラウザーに情報が保存されていなければ「あなたのコメントは管理者の承認待ちです。これはプレビューで、コメントは承認後に表示されます。」となります。どちらの場合も、本人は見られても変更はできず、管理者は書かれたままの内容を承認します。
一部のフォーラムにある、入力に合わせて入力欄の下で更新されるプレビューでは、書式がどう表示されるかは分かります。しかし、映っているのは入力欄のすぐ横にある同じ言葉で、ボタンを押せばそのまま公開されるため、確認の段階の代わりにはなりません。
編集できる期限は、編集を必要とする人に合わせて決めます。WordPressのコメント編集プラグインには、訪問者の編集期限を初期設定で5分とするものがありますが、読むのに時間がかかる人や、戻ってきてから間違いに気づく人には短すぎます。アカウントのあるサイトなら、コメントをアカウントに結び付け、どの端末からでも、より長く、または期限なしで編集できるようにできます。返信が付いた後にコメントが変わったときは、そのそばに「編集済み」と示し、返信の意味が通るようにします。
削除はデータを消すため、AAの3.3.4の対象になります。先に確認するページか、直後の「元に戻す」で対応できます。「[質問が読み上げられない確認ダイアログ](/ja/learn/confirmation-dialogs)」と「[読む前や元に戻す前に消えるトースト](/ja/learn/toast-timing)」を参照してください。支払い、法的な同意、保存されたデータの変更では、同じ選択がAAで必須です。「[確認も取り消しもできずに支払いが確定するチェックアウト](/ja/learn/error-prevention)」を参照してください。
## 修正の確認
1. 小さじを大さじと書くなど、わざと間違えたテストのコメントを送信し、公開される直前まで進む。確定する前に、ほかの人に見えるとおりの形でコメントが示されること、または後から変更できることを確認する。
2. プレビューの下の「コメントを編集」を使う。コメントと名前を保ったままフォームが戻り、次のプレビューに直したコメントが表示されることを確認する。
3. 編集の期限がある場合、その終わりが自分のコメントのそばに時刻で示されていることを確認し、キーボードだけでコメントを一つ編集し、別のコメントを一つ削除して、「削除」が先に確認を求めることを確かめる。
4. スクリーンリーダーで、プレビューの下の「コメントを送信」より前にコメント全体が読み上げられること、または送信したコメントのすぐ後に「編集」と「削除」があり、何を対象にするかが分かることを確認する。
5. 400%の拡大表示やスマートフォンで、コメント全体と、それを公開するボタンを一緒に、または続けて読めることを確認する。
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。コメントの仕組み、そのプラグイン、テーマを変更した際は、再度確認します。
## 制限
このサンプルは、どのフォームでも同じ結果になることを保証するものではありません。例はブログのコメントですが、レビュー、フォーラムの投稿、メッセージ、問い合わせ、会員登録も、送信するボタンで同じ選択が必要です。コメントが投稿されたことを、画面とスクリーンリーダーの両方で伝えるのは別の問題です。「[読み上げられないフォームの送信結果](/ja/learn/form-results)」を参照してください。3.3.6はAAAで、W3Cはサイト全体にAAAを求めることを推奨していませんが、公開されるコメントは、間違いを防ぐ手間は小さく、残ったときに困ることは大きい場所です。サイトが送るメールも含めて一連の流れ全体を、実際の読者と、その人たちが頼る道具で確認してください。
---
このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）
Sam・たった今
おいしいスープでした。最後に塩を大さじ2杯加えるのがおすすめです。