label에 focus가 되지 않는 경우 해결 방법

<label for=""></label>
<input id="">

 

구조는 이런 식으로 되어 있고, input에는 display: none;을 준 경우, label에는 focus가 가지 않는다.

오래된 사이트를 유지보수 하다 보면 이런 것들이 접근성 심사에서 걸린다.

예를 들어 '문의하기' 페이지에서 form 형식을 보면 파일첨부 버튼이 이런 식으로 들어가 있는 경우가 있다.

 

예시 이미지

 

 

[해결 방법]

 1. label 태그 하위에 input 태그를 넣고,

 2. css 변경
- display: none;을 줘 버리면 영역 자체가 사라져 버리기 때문에 opacity: 0;으로 주고, 영역은 살리되 눈에는 보이지 않게 만드는 것이 중요 ! 그리고 이 방법은 개발 구조는 유지하면서 시간은 많이 들이지 않는 야매 방법이다...

더이상 손 쓸 필요가 없는 오래된 사이트에서만 이 방법을 추천한다 !  

 

label:has(input:focus) {
  	outline: 2px solid #000;
	outline-offset: 3px; 
} 
   
label:has(input) input {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
}​