ラベル内に意味入力エラーメッセージがあります

Question

私は<label>を使用して入力をラップして、成功とエラーメッセージがラベルの中に表示されるようにします。このシナリオでもっともセマンティックなマークアップは何だと思いますか？

<label> 
    <b>Username</b> 
    <input> 
    <strong>Username already taken :(</strong> 
</label> 

エラーの場合は、strongが適切ですか？またはspanが良いですか？ role=statusは適切ですか？

Answer 1

The WCAG provides an exampleのいずれも、aria-invalidとaria-describedbyのプロパティを使用して表示しています。あなたの例では

、コードは次のようになります。

<label> 
    <b>Username</b> 
    <input aria-invalid="true" aria-describedby="error"> 
    <strong id="error">Username already taken :(</strong> 
</label> 

strongことが重要予告のように見えるとして適切です。 ロール（statusではなく）は、#errorエレメントaccording to the W3Cに適用する方が適切です。

Answer 2

強力なタグを使用するのが適切です。

強いタグは重要な意味を持ち、パスワードは間違っていることが重要です。これは、ユーザーが処理をブロックするためです。

Answer 3

技術的には、両方の要素を使用して、探している適切なエラーメッセージを適切なCSSで作成することができます。最も意味のあるのは、私の考えでは、正式には、パスワードの重要性を強調したいと思うので、強いタグを使用することです。font-weight:bold;をCSSで使用する必要はありません。

また、アクセシビリティの問題が関係するため、Strongタグはスクリーンリーダーにとって優れているため、アクセシビリティがより使いやすくなります。

全体的には、このシナリオでは<strong>を<span>より速く、簡単に、使いやすくすると思います。

Answer 4

"Username is already taken"は、カジュアルなものではなく、深刻な通知です。

Answer 5

私は強いタグ を保ち、エラーとして表示するにはCSS赤色を使用することをお勧めします。