ブートストラップ4フォーム、アクセシビリティおよびエラー通知

Question

gridシステムを使用してbootsrtap 4フォームを構築しようとしています。これは私の重要なことではない、私は重大な視力問題を抱えており、「かなり」行うことは本当に私にとって不可能である。基本的に私はここにすべての提案を開いています。私は私がしたいと思う何

は以下の通りです：

• 各フォームコントロールはlabel
• を必要とする各コントロールは、検証メッセージが

を配置することができますdivその中に「エラー」を持っている必要があります今のところ、最も複雑なフォームセクションは完全な名前です。私は最後、最初と中間の名前のために別々のフィールドが必要です。 lastとforstは必須で、middleはオプションです。私はこれまでのところ、これを持っている：

<form id="adultCreateForm" class="form-horizontal"> 
     <div id="name" class="form-group row"> 
      <div class="rowHeader col-md-2"> 
       <span class="bold rowLabel col col-3">Name</span> 
      </div> 
      <div class=" rowContent col-md-10"> 
       <div class="row"> 
        <div class="col-md-3 lastNameDiv"> 
         <label for="lastName" class="sr-only">Last Name</label> 
         <input id="lastName" name="lastName" 
           placeholder="Last Name" 
           type="text" maxlength="64" 
           pattern="[a-zA-Z' -]{1,32}" 
           title="Required. 1-32 alpha chars plus space, hyphen and single-quote" 
           required> 
         <div class='error'></div> 
        </div> 
        <div class="col-md-3 firstNameDiv"> 
         <label for="firstName" class="sr-only">First Name</label> 
         <input id="firstName" name="firstName" 
           placeholder="First Name" 
           type="text" maxlength="64" 
           pattern="[a-zA-Z' -]{1,32}" 
           title="Required. 1-32 alpha chars plus space, hyphen and single-quote" 
           required> 
         <div class='error'></div> 
        </div> 
        <div class="col-md-3 middleNameDiv"> 
         <label for="middleName" class="sr-only">Middle Name</label> 
         <input id="middleName" name="middleName" 
           placeholder="Middle Name" 
           type="text" maxlength="64" 
           pattern="[a-zA-Z' -]{1,32}" 
           title="Required. 1-32 alpha chars plus space, hyphen and single-quote" 
           required> 
         <div class='error'></div> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="inlineBlock floatRight"> 
      <button id="cancel" class="btn btn-warning floatRight"> 
       <strong>Cancel</strong> 
      </button> 
     </div> 
    </form> 

は、私は何を取得することは名前のために目に見える「ヘッダ」であると私は標準モニタ上の行のプレースホルダを持つ3つの入力を取得します。 1つの問題は、入力フィールドがわずかに重なり合うように見えることです。また、丸い入力ボックスコーナーの代わりに、正方形です。

私はさまざまな列幅を試しましたが、私は基本的なものを見逃しています。

アイデア？

Answer 1

sr-onlyクラスをlabel要素から削除すると、探しているものを手に入れることができます。