HTML 및 CSS를 사용하여 접근성 있는 양식을 디자인하는 방법

목차

1. 소개
2. 양식 구성요소
3. HTML로 접근 가능한 양식
4. 결론

---

소개

양식은 웹사이트 구축에 있어 필수적인 부분입니다. 이는 사용자가 세부 정보를 제출할 때 사용자로부터 데이터를 수집하는 데 사용됩니다. 양식은 사용자가 가입 양식을 제출하고, 양식에 로그인하고, 뉴스레터를 구독하고, 피드백을 받기 위해 메시지를 보내는 상호 작용에 중요합니다. 모든 사람, 특히 스크린 리더가 문제 없이 양식을 작성하려면 액세스 가능한 양식을 만드는 것이 중요합니다.

---

양식의 구성 요소

양식은

과 같은 다양한 구성요소로 구성됩니다.

• form: 입력 태그, 제출 버튼, 텍스트 영역, 체크박스, 라디오 버튼과 같은 다른 모든 양식 요소를 수용하는 컨테이너입니다.

<form></form>

• input: 사용자 세부정보를 받아들이는 HTML 요소입니다. 입력 태그는 입력 목적에 따라 제공됩니다. 문자, 번호, 비밀번호, 이메일 등

<form>
      <input type="text" />
      <input type="email" />
      <input type="password" />
      <input type="radio" />
      <input type="checkbox" />
      <input type="file" />
      <input type="range" />
      <input type="color" />
      <input type="date"/>
</form>

• 레이블: 입력 사항을 채울 세부 사항의 개요를 제공하는 태그입니다. 입력 태그와 연결됩니다.

<form>
<label for="email">Email</label>
<input type="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

<form>
<label for="message">Message:</label>
<textarea>

• select: 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.

<form>
<select>

• checkbox: this element allow users to select one or more options.

<form>
<label for="subscribe"></label>
<input type="checkbox">

• button: this tag will the users the opportunity to submit their details upon completion. These details are submitted to server.

<form>
<button type="submit">Submit</button>
</form>

---

HTML로 접근 가능한 양식

• 의미 태그 포함

,, , ,과 같은 올바른 의미 태그 사용 및 <텍스트 영역>

<form>
<label for="name">Name</label>
<input type="type">

• Always use label in your forms

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.

<form>
      <label for="username">Username:</label>
      <input type="text">

• Proper use of Accessible Rich Internet Application (ARIA) attributes.

Examples are aria-label, aria-labelledBy, aria-hidden, aria-describedBy, aria-required, aria-invalid, aria-placeholder, aria-expanded, aria-checked.

<form>
<button aria-label="add">+</button>
</form>

<form>
<h2>



<p>❌ Don't over use them</p>

• Provide clear instructions

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.

• Provide error message.

This is essential to users which notify them that an error has been made. The error message should be descriptive.

• Use HTML built-in validations in the forms

Examples are required, maxlength, minlength,pattern,type,min and max.

<form>
      <label for="username">Username:</label>
      <input type="text">






  Quantity (1-10):
  

Accessible forms with CSS

로그인 후 복사

• Make form responsive
  Create forms that are accessible across devices.

• Provide focus inclined inputs
  This allow users to navigate the form properly.
  

input:focus{
  outline: 3px solid #000080; 
}

input:valid{
  outline: 3px solid #000080; 
}

input:invalid{
  outline: 2px solid red;
}

• 숨겨진 라벨 시각적인 라벨을 원하지 않는다면 시각적으로 숨기도록 스타일을 지정하거나 클래스 이름을 sr-only로 지정하세요.

결론

HTML과 CSS를 사용하여 접근 가능한 양식을 만드는 올바른 방법에 대해 확신하셨기를 바랍니다. 다음 시간까지 X와 Linkedin에서 저를 만나보세요

위 내용은 HTML 및 CSS를 사용하여 접근성 있는 양식을 디자인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!