1

投稿送信 URL は次のようになります。

default.cfm?fuseaction=Seasons.edit&sid=2569#errors

エラーに内部アンカーを追加しました。コードは次のようになります。

<a name="errors"/>
<div id="errors">
    <p>An error has occured:</p>
    <ul>    
        <li><label for="name">Missing or invalid season name, click to jump there</label></li>
    </ul>
</div>

<form action="#errors" id="gronk" method="post">
<fieldset>      
<legend>Edit Season</legend>

<div class="row">
    <span class="cell">
        <label for="name"><span class="required">*&nbsp;</span>Season name<span class="wcag_hide"> Required string</span></label>
        <input type="text" name="name" id="name" class="formFields" value="" />
    </span>
</div>
...

これは、エラー報告にアクセスできるようにする有効な方法ですか?

代わりにこれを置くことを考えていましたが、IEでのみ機能すると思います：

...
<li><a href="#name">Missing or invalid season name, click to jump there</a></li>
...
4

2 に答える 2

0

エラーのあるフォームに戻るシナリオでは、主に次のことを行う必要があると思います。

  1. エラーのある入力にユーザーのブラウザをフォーカスします
  2. エラーが発生したこととその原因 (無効な電子メールなど) をユーザーに警告します。

したがって、おそらく、ユーザーをdefault.cfm#errorsに戻すのではなく、エラーのある最初のフィールドにユーザーを集中させることができます。たとえば、ユーザーをdefault.cfm#nameに戻して、フィールド ラベルにエラー メッセージを挿入します。

<li>
    <label for="name"><span title="Error">Missing or invalid season name. Please enter a </span>Season name</label>
    <input id="name" name="name" type="text"/>
</li>

これにより、エラーとフィールド自体の間のセマンティック リンクが得られます。

さらに、エラーが発生する前であっても、最初にフィールドが必須であることを示すテキストをラベルに含めると便利な場合があります。アスタリスクは視覚的な手がかりとしては優れていますが、スクリーン リーダーを使用している場合はそれほど強く感じられない場合があります。

これらのタイプのシナリオでは、より多くのコンテキスト情報をユーザーに提供するために、テキスト コンテンツを画面外に非表示にするクラスを作成できます (display:none ではありません。これはスクリーン リーダーによっても無視されるためです)。

<label for="name">Season name *<span class="contextInfo">(this is a required field)</span>:</label>

ただし、主なことは、実際のスクリーン リーダーでテストすることです。目の不自由なユーザーと同じ体験をすることはありませんが (ブラウジングに慣れていないため、奇妙に思えるかもしれません)、読み上げられるものと読み上げられないものについて警告が表示されます。

NVDAはオープンソースのスクリーン リーダーであり、最も人気のあるJAWSには試用版があります。本物でのテストに勝るものはありません。

于 2012-06-24T17:55:12.647 に答える
0

いいえ、そうではありません。フォーム要素は、ラベルを 1 つだけ持つことができます。2番目のアプローチの方が優れていますが、「クリックしてジャンプ」の部分を削除します。

機能するようにリンクを変更してください<a href="#name" tabindex="-1">....</a>。Chrome にはまだページ内リンクの問題があると思いますが、それは私たちの手に負えません。

于 2012-06-22T15:27:18.393 に答える