トピックを検索
確認も取り消しもできずに文章を書き換えるAIリライトボタン
プロフィールの「AIで改善」ボタンが、保存済みの自己紹介をその場でAIの文章に書き換えて保存するため、本人が約束していないことが公開され、元の文章を取り戻せません。
about.value = text; 問題
書き直しで何が変わったかを見つけにくい人や、最初に書いた文章を思い出しにくい人が、比べる機会も取り戻す手段もないまま、自分の言葉を置き換えられ、保存されます。
フリーランス向けのあるサイトでは、一人ひとりに公開のプロフィールがあり、依頼する人は連絡する前に自己紹介を読みます。ページは入力するそばから保存されます。ある経理代行の人は、自分でこう書きました。「小さなお店やカフェの帳簿付けを、副業として夜に請け負っています。メッセージには2日以内に返信します。」欄の下には「AIで改善」ボタンがあります。
文章を整えてもらうつもりで押すと、欄の文章はこう変わります。「経験豊富な経理のプロとして、中小企業の成長を支えます。いつでも対応可能で、すべてのメッセージに1時間以内に返信します。」読みやすい文章ですが、もう保存されています。しかも、本人が書いていない約束が二つ入っています。いつでも対応できること、1時間以内に返信することです。元の文章は消えました。「元に戻す」はなく、Chromeでは Ctrl+Z を押しても新しい文章のままです。依頼する人は、本人が守れない約束を読み、本人は自分の言葉を取り戻すために、思い出して打ち直すしかありません。
達成基準3.3.4「エラー回避（法的、金融、データ）」はレベルAAです。この基準は、利用者が管理するデータ、つまり本人が見て自分で変えられるデータ（アカウントの名前や住所、プロフィールの自己紹介など）を変更・削除するページを対象にしています。ページがそのデータを変えるときは、次の三つのうち少なくとも一つが必要です。変更を取り消せること。入力エラーがチェックされ、修正できること。確定する前に、情報を確認し、確定し、修正する手段があること。このボタンは、どれも満たしていません。
W3Cの解説によれば、この基準は保存のたびに確認を求めるものではありません。自分で入力して保存したなら、その変更は本人がしたもので、本人も目にしています。今回の変更はソフトウェアが書いたもので、本人が目にするのは、保存していた文章がすでに置き換えられた後です。W3Cが挙げる3.3.4の十分な達成方法のうち、次の二つはこの変更にも当てはまります。送信の前に回答を確認して修正できる段階（G98、W3Cは法的な取引とテストの場合に挙げています）と、削除した情報を取り戻せる手段（G99、情報を削除する操作の場合に挙げています）です。基準の二つ目の方法である入力エラーのチェックは役に立ちません。書き換えた文章は形式上どこも誤りがなく、言っていることが変わったと分かるのは本人だけだからです。
ブラウザーにも頼れません。Ctrl+Z が取り消すのは、欄に入力した操作です。スクリプトが欄の値を書き換えた場合は取り消すものがなく、Chromeでは書き換えた文章が残ります。元の文章はサーバーからも消えているため、再読み込みしても新しい文章しか戻ってきません。
公開のプロフィールでは、書き換えた文章こそが依頼する人の読む文章で、本人はその内容を守ることを求められます。1時間以内に返信するという約束は、守るか、期待していた依頼者に一人ずつ説明するしかありません。
10グループ中4グループに影響
- 全盲 （影響あり）
- 弱視 （影響あり）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響あり）
- 届く範囲・力 （影響なし）
- 認知 （影響あり）
- 光過敏 （影響なし）
- 言語・認知・学習の能力が限られる ディスレクシアのある人や、記憶や注意に困難がある人は、読みやすく整った新しい文章のどこが別の約束に変わったかに気づけないことがあります。自分の言い回しを覚えていられず、打ち直せないこともあります。
- 視覚を使わない スクリーンリーダーの利用者は、欄全体を読み直さなければ新しい文章に気づけず、どの言葉が変わったかも伝わらないため、変わった約束を聞き逃しやすくなります。
- 視覚が限られる 拡大して使う人には、欄の文章が一度に数語ずつしか見えないため、消えた文章と新しい文章を比べるには、記憶を頼りに全体を読み直すしかありません。
- 手の操作が限られる スイッチや音声入力、指1本で入力する人は、文章を書くのにずっと長い時間をかけています。望まない書き換えを取り消せなければ、同じ時間をかけて書き直すしかありません。
ボタンには名前があり、テキストボックスにはラベルがあり、ページは自動チェックをすべて通ります。書き換えを比べられるか、取り消せるかは、ボタンを押して初めて分かり、その結果はモデルとサーバーで決まります。EaseWebの診断は、テキストボックスのそばにあるAIの文章作成ボタンを、人がテスト用のアカウントで試す項目として挙げます（ew:ai-rewrite-manual-check）。実際のサイトで押すと誰かの文章を変えてしまうため、診断がボタンを押すことはありません。修正前のコードには、リンターや型チェックが指摘するところもありません。自分の言葉を取り戻せるかどうかは製品の設計の問題で、ボタンを追加するよう頼まれただけのコーディングアシスタントが、その点を問われることはありません。
試してみる
「AIで改善」を押してから、自分の文章を取り戻してみてください。
新しい文章が何を約束しているか読んでください。書いた文章を残せましたか？保存される前に両方を見られましたか？
問題あり 修正できますか？
あなたのプロフィール
修正方法
AIの文章を本人の文章の隣に示して選ぶまで何も変えないか、本人の文章と「元に戻す」ボタンを残します。
- 1AIのボタンが、事前に比べることも元に戻すこともできないまま、保存済みの文章を置き換えないようにする。
- 2AIの文章を本人の文章の隣に示すか、一度押せば戻せる形で本人の文章を残す。
- 3それぞれの操作は、「この文章を使う」「元のままにする」「自分の文章に戻す」のように、何をするかで名前を付ける。
<label for="about">自己紹介</label><textarea id="about" name="about">小さなお店やカフェの帳簿付けを、副業として夜に請け負っています。メッセージには2日以内に返信します。</textarea><button type="button" id="improve">AIで改善</button>書き換えた文章を示し、選ぶまで何も変えない
<label for="about">自己紹介</label><textarea id="about" name="about">小さなお店やカフェの帳簿付けを、副業として夜に請け負っています。メッセージには2日以内に返信します。</textarea><button type="button" id="improve">AIで改善</button><div id="suggestion" hidden> <h2>AIの提案</h2> <p id="suggested-text"></p> <p>選ぶまで、上のあなたの文章はそのままです。言いたいことが変わっていないか確認してください。</p> <button type="button" id="use">この文章を使う</button> <button type="button" id="keep">元のままにする</button></div>この方法を選ぶ理由：確定する前に、注文内容を読み返せるようにする
一度押すだけで、保存済みのプロフィールが変わります。確定する前に新しい文章を元の文章と並べて示すものも、本人に選ばせるものもなく、元の文章はどこにも残らないため、取り消すこともできません。
書き換えた文章は欄の下に提案として表示され、欄には本人の言葉が残るため、何かが変わる前に、二つを続けて読めます。「この文章を使う」を押すまで何も保存されず、「元のままにする」は提案を閉じて、プロフィールをそのままにします。どちらを選んでもフォーカスはテキストボックスに戻るため、自分の文章があるところから続けられます。
どちらも3.3.4を満たします。提案として示す方法を使ってください。本人が選ぶまで、書いた文章は変わらず、依頼する人の目にも触れません。選ぶときには、二つの文章が目の前にあります。「元に戻す」だけでは十分ではありません。誰かが気づくまで、書き換えた文章が公開されているからです。メニューやショートカットなど、ほかの方法でも書き換えを反映できる場合は、「元に戻す」ボタンも併せて置き、どの入り口にも戻り道があるようにします。書き換える前に「文章を置き換えますか？」と尋ねるダイアログでは、ここでは足りません。W3Cは削除の確認（G168）を認めていますが、このダイアログは、まだ見ていない文章を承認するよう求めるからです。
提案はボタンのすぐ後に置き、次のTabや矢印キーで届くようにします。モデルが書いている間の待ち時間と、提案ができたことを伝えることは、それぞれ別の問題です。「読み上げられない読み込み中の表示」と「画面に出ても読み上げられないステータスメッセージ」を参照してください。
数語しか違わない場合は特に、変わった箇所に印を付けると比べやすくなります。印は色だけでなく、太字や下線でも示し、反映するのは提案のプレーンなテキストにします。
会議メモの要約のように、本人の文章と並べて置くべき生成文は、別の欄か、メモの上に置きます。メモそのものに書き込んではいけません。
欄の中に提案を灰色の文字で示し、キーで確定するエディターもあります。その場合は、値を設定するのではなく、document.execCommand('insertText', false, text) で確定した文章を挿入します。Chromiumで試したところ、この方法なら Ctrl+Z で元の文章に戻りました。同じテストで、値を設定した場合やsetRangeText()を使った場合は、Ctrl+Z を押しても新しい文章のままでした。MDNはexecCommandを非推奨としているため、呼び出しは置き換えやすいように一か所にまとめます。再読み込みすれば Ctrl+Z は使えなくなるため、「元に戻す」か提案の段階も併せて用意してください。
「元に戻す」をトーストに入れないでください。自動で消えるトーストは、唯一の戻り道も一緒に消してしまいます。「読む前や元に戻す前に消えるトースト」を参照してください。支払いなど、間違えると損をするほかのデータにも、同じ配慮が必要です。「確認も取り消しもできずに支払いが確定するチェックアウト」を参照してください。
AI コーディングアシスタントで修正しますか？ このガイドを Markdown で取得、または全ガイドをコーディングエージェントで使う。
デザインの案
AIの書き換えは、新しく見せながら、選ぶ権利を本人に残せます。
AIのボタンを押した後の描き方をさらに4通りと、流行りだが不合格の2通りを示します。ボタンを押し、Tabで移動してみてください。4つは本人の言葉にいつでも手が届き、2つは失います。
デザインファイルで
- AIのボタンを押した直後の画面を描き、本人の文章が見えたままにする。
- ボタンには「この文章を使う」「元のままにする」「自分の文章に戻す」のように、何をするかで名前を付ける。
- 変わった語は色だけでなく、取り消し線と下線で示し、色を敷いた上の文字は4.5:1以上にする。
- スマートフォンの画面も描き、両方の文章とすべてのボタンに届くようにする。
- 戻る手段は変更した場所に置き、時間で消えるようにしない。
合格
- 自己紹介
副業として夜に対応。いつでも対応可能。2日1時間以内に返信します。欄の中で変更を示す 消えた語は薄い赤に取り消し線、新しい語は薄い緑に下線を付け、最後に「採用」と「却下」を置きます。どの約束が変わったかが一目で分かり、色を敷いた上の文字は6.44:1と6.49:1です。 - 自己紹介いつでも対応可能。1時間以内に返信します。欄の上の「自分｜AI」切り替え 両方の文章をずっと残し、1回のタップで切り替えるので、比べるのも簡単で、何も失われません。選んだほうが依頼する人に見えるため、元に切り替えるまでAIの文章が公開されます。
- 自己紹介
公開中： 副業として夜に対応。2日以内に返信します。
下書き・AI いつでも対応可能。1時間以内に返信します。下書きとして書き換える AIの文章は「下書き」のバッジ（黄色の上で6.95:1）を付けた下書きに入り、公開中のプロフィールは、本人が公開するまで本人の言葉のままです。プロフィール、出品、投稿など、公開されるものに向きます。 - 自己紹介いつでも対応可能。1時間以内に返信します。「AIで編集」と版の一覧 欄の下の控えめな一文から、以前の版を開けて、それぞれを元に戻せます。普段は目立たず、どの変更も取り消せます。本人が文章を編集するまで、この一文は残ります。
不合格
- 自己紹介副業として夜に対応。2日以内に返信します。きらめいて新しい文章に変わるWCAG 3.3.4 光が流れて変化を示し、動きも止まりますが、古い文章は消えて保存済みです。比べるものも、戻る手段もありません。
- 自己紹介副業として夜に対応。2日以内に返信します。トーストの中の「元に戻す」WCAG 3.3.4 「AIで書き換えました・元に戻す」が現れて5秒で消え、戻る手段も一緒に消えます。新しい文章を読むのに、あるいはトーストに届くのに時間がかかる人には、書き換えが残ります。
修正の確認
マウスを使わない5つの確認
確認方法： キーボード、スクリーンリーダー、ズーム
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。AIの機能、そのプロンプト、エディターを変更した際は、再度確認します。
制限
このサンプルは、どの製品でも同じ結果になることを保証するものではありません。例はプロフィールの自己紹介ですが、下書き、出品の説明、メッセージ、メモ、文書も、AIのボタンが保存される文章に書き込むところでは、同じ配慮が必要です。提案の段階は、提案を読んだ人にしか役立ちません。モデルは、本人が気づかない形で間違えることもあります。AIが書いた文章を読む人に、そうと示すべきかどうかは、WCAGの範囲外です。書き換えを反映するショートカットやメニューも含めて、機能全体を、利用者が使う支援技術や道具で確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。