[HTML] form 태그와 웹접근성

🏷️ <form> 태그

---

사용하지 않더라도 필수로 <form action="">과 같이 빈값으로 속성을 넣어줌

 

 

 

🏷️ <label> 태그

---

폼 요소에 레이블을 붙이기 위한 태그

<label> 태그 사용시 폼 요소와 레이블 텍스트가 서로 연결되어 있는 점을 브라우저에게 알림

<label> 태그 사용 

1. 명시적 작성 방법

<label> 요소와 폼 요소를 따로 사용하고 <lable>의 for 속성과 폼 요소의 id 속성을 이용해 연결

<label for=“id이름”>레이블</label>
<input id=“id이름”>

2. 암시적 작성 방법

<label> 태그 안에 폼 요소를 넣는 방법

<label>
	레이블
	<input type="text" ... />
</label>

placeholder 속성을 label로 사용?

placeholder는 label을 대신하여 제공할 수 없다.

• 입력 시 내용의 사라짐
• 스크린리더에서 읽히지 않을 수 있음
• 번역 시 브라우저에서 건너뜀

디자인 상의 이유로 label를 화면에 명시하지 못할 경우

title 속성 활용

<input type="text" title="아이디" />
<input type="password" title="비밀번호" />

 

스크린리더는 label과 title을 둘 다 읽어주지만

둘 다 제공시 스크린리더에 따라 레이블을 읽어주기도 하고 타이틀을 읽어주기도 한다.

중복 제공을 피하기 위해 우선적으로 레이블을 제공하고 이외의 경우에는 타이틀로 설명을 제공

 

 

🏷️ <input> 태그

---

type="image" 사용시 alt와 title 모두 명시