HTML と CSS を使用してアクセシブルなフォームをデザインする方法

目次

1. はじめに
2. フォームのコンポーネント
3. HTML を使用したアクセス可能なフォーム
4. 結論

---

導入

フォームはウェブサイトの構築に不可欠な部分です。これらは、ユーザーが詳細を送信するときにユーザーからデータを収集するために使用されます。フォームは、ユーザーがサインアップ フォームを送信したり、フォームにログインしたり、ニュースレターを購読したり、フィードバックを受け取るためにメッセージを送信したりする際に重要です。アクセシブルなフォームを作成することは、誰にとっても、特にスクリーン リーダーが問題なくフォームに入力できるようにするために重要です。

---

フォームのコンポーネント

フォームは、

などのさまざまなコンポーネントで構成されます。

• form: これは、入力タグ、送信ボタン、テキストエリア、チェックボックス、ラジオ ボタンなどの他のすべてのフォーム要素を受け入れるコンテナです。

• input: これは、ユーザーの詳細を受け入れる HTML 要素です。 input タグは、入力の目的に応じて提供されます。テキスト、番号、パスワード、メールアドレスなど

• label: 入力に記入する詳細の概要を示すこのタグ。 input タグに関連付けられます。

Email

• textarea: this is an multi-line input tag that accept 524,288 characters by default except the maxlength attribute is set up to a value. It is used to accept reviews, messages and comments from the users

Message: <ul> <li> <strong>select</strong>: this element is for creating a dropdown in which the users are able to select one option by default or more options when the attribute multiple is being used. </li> </ul> <pre class="brush:php;toolbar:false"></pre> <form> <select> <ul> <li> <strong>checkbox</strong>: this element allow users to select one or more options. </li> </ul> <pre class="brush:php;toolbar:false"></pre> <form> <label for="subscribe"></label> <input type="checkbox"> <ul> <li> <strong>button</strong>: this tag will the users the opportunity to submit their details upon completion. These details are submitted to server. </li> </ul> <pre class="brush:php;toolbar:false"></pre> </form> <form> <button type="submit">Submit</button> </form> <hr> <h2> HTML を使用したアクセシブルなフォーム </h2> <ul> <li>セマティックタグを含める</li> </ul> <p></p> <form>、<input>、<label>、<select>、<button> などの適切なセマティック タグを使用する。および <textarea><br> <pre class="brush:php;toolbar:false"></pre> <form> <label for="name">Name</label> <input type="type"> <ul> <li>Always use label in your forms</li> </ul> <p>This gives the screen readers access to input with ease. Using the for Attribute in label element must match the id of the input element.<br> </p> <pre class="brush:php;toolbar:false"></pre> </form> <form> <label for="username">Username:</label> <input type="text"> <ul> <li>Proper use of Accessible Rich Internet Application (ARIA) attributes.</li> </ul> <p>Examples are aria-label, aria-labelledBy, aria-hidden, aria-describedBy, aria-required, aria-invalid, aria-placeholder, aria-expanded, aria-checked.<br> </p> <pre class="brush:php;toolbar:false"></pre> </form> <form> <button aria-label="add">+</button> </form> <pre class="brush:php;toolbar:false"></pre> <form> <h2> </h2> <p>❌ Don't over use them</p> <ul> <li>Provide clear instructions</li> </ul> <p>This includes the guide before or while filling the form to outline the information that is relevant. it could be a hint inform of paragraph or a placeholder text.</p> <ul> <li>Provide error message.</li> </ul> <p>This is essential to users which notify them that an error has been made. The error message should be descriptive.</p> <ul> <li>Use HTML built-in validations in the forms</li> </ul> <p>Examples are required, maxlength, minlength,pattern,type,min and max.<br> </p> <pre class="brush:php;toolbar:false"></pre> </form> <form> <label for="username">Username:</label> <input type="text"> <pre class="brush:php;toolbar:false"></pre> </form> <form> <label for="quantity">Quantity (1-10):</label> <input type="number"> <h2> Accessible forms with CSS </h2> <ul> <li><p>Make form responsive<br> Create forms that are accessible across devices.</p></li> <li><p>Provide focus inclined inputs<br> This allow users to navigate the form properly.<br> </p></li> </ul> <pre class="brush:php;toolbar:false">input:focus{ outline: 3px solid #000080; } </pre> <pre class="brush:php;toolbar:false">input:valid{ outline: 3px solid #000080; } </pre> <pre class="brush:php;toolbar:false">input:invalid{ outline: 2px solid red; } </pre> <ul> <li>非表示のラベル 視覚的なラベルが不要な場合は、視覚的に非表示になるようにスタイル設定するか、クラス名を sr-only にします。</li> </ul> <h3> 結論 </h3> <p>HTML と CSS を使用してアクセシブルなフォームを作成する適切な方法についてご理解いただけたでしょうか。次回まで、X と Linkedin で私を捕まえてください</p> </form>

以上がHTML と CSS を使用してアクセシブルなフォームをデザインする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。