Form / Form controls 활용하기

Form attributes in depth

Ensure users enter data

가상 키보드와 관련된 고려사항 포함

inputmode 속성은 안드로이드와 iOS에서 지원된다.
type 속성과 대비되는 점은, inputmode 속성은 가상키보드만 변경시키고 요소 그 자체의 행동은 변화시키지 않는다는 것이다.
input의 기본 사용자 인터페이스와 유효성 검사 규칙을 유지하면서 가상키보드를 최적화하고 싶다면 inputmode가 좋은 선택지가 될 수 있다.
type="number"는 제품의 수량과 같은 증분 필드에만 사용하는 것이 좋다. 브라우저에서 type="number"에 대한 위쪽/아래쪽 화살표를 표시하며, 이는 전화번호, 지불 카드 또는 계좌 번호에 대해 의미가 없기 때문이다. 전화번호는 type="tel"을 사용하자. 다른 숫자의 경우 입력 모드="numeric"을 사용하여 화면에 표시되는 숫자 키보드를 가져오도록 한다.

가상키보드의 Enter키도 enterkeyhint 속성을 사용해서 바꿀 수 있다.
enterkeyhint="next" 또는 enterkeyhint="done"은 각각의 버튼 레이블을 적절한 아이콘으로 변경한다.

Styling forms

Ensure form controls are readable for everyone

대부분의 브라우저에 있는 form control들은 너무 작은 기본 font size 값을 가진다.
키워주도록 하자.

.form-element {
  font-size: 1.3rem;
  line-height: 1.2;
}

Help users navigate through your form

form layout을 변경하거나 form 요소 간 간격을 증가시켜서 사용자들이 어떤 요소가 함께 묶이는지 알 수 있게 도와라.
margin padding을 사용하는 것이 좋겠다.

Styling form controls

<input>이나 <button> 대신 <div>를 가능한 사용하지 않는 것이 좋다.
브라우저와 플랫폼 전반에 걸쳐 넓게 지원되고 직접 구현할 필요 없는 사용성과 접근성을 내장하고 있기 때문이다.
하지만 대체로 기본 제공되는 form control style은 못생겼다.
custom하려면 기본 스타일부터 없애주자.
먼저 원래 select 요소에 나타나던 화살표 모양을 없애고,
배경으로 arrow.png 를 사용하여 대신할 수 있도록 해주자.

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url(arrow.png);
  background-repeat: no-repeat;
  background-position: right .7em top 50%, 0 0;
  background-size: .65em auto;
}

크로스 브라우징을 위해서 vendor prefixes도 추가해주었다.

마찬가지로 checkbox radio 버튼도 스타일링 해보자.
역시 기본 버튼을 보이지 않게 하는 것부터 시작한다.

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

이처럼 css를 적용하면 input들이 요소들을 visually hiding 하게 된다.
때문에 accessibility tree에는 여전히 존재하게끔 된다.

그럼 custom form control 표시는 어떻게 해야할까?
:before pseeudo-element와 background 속성을 이용하거나, inline svg 이미지를 사용하는 방법이 있다.
:before 사용방법은 다음과 같다.

input[type="radio"] + label:before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label:before {
  background: black;
}

input 요소가 아닌 label 요소를 활용하여 form control을 가능하게 한다.
다음 글을 참고하면 도움이 될 것 같다.

요소를 이루는 기본 색상을 커스텀하고 싶다면 accent-color 속성을 사용하자.

checkbox {
  accent-color: pink;
}

Ensure users can see the pasword they entered

password 타입의 경우, 사용자가 입력한 값이 보이지 않게끔 처리된다.
하지만 사용자가 자신이 입력한 값을 확인하고자 하는 경우 다음의 예시에서처럼
input의 타입을 text로 변경시키면서 노출할 수도 있다.
여기서 주의할 점은, Show Password 버튼이 accessible해야한다는 것이다.
버튼을 <input type='password'>와 aria-controls 속성으로 연결지어주자.
aria-controls 속성이 모든 스크린 리더에서 지우너되는 것은 아니지만, 없는 것 보다는 있는 것이 훨씬 도움이 될 것이다.
만약 다른 방식으로 스크린 리더 사용자에게 password 노출 여부를 알려주고 싶다면, 숨겨진 요소를 aria-live="polite" 속성과 함께 사용하자. 그리고 그에 맞게 텍스트를 바궈주자.

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

속성이 부여된 곳에서 javascript에 의해 동적인 컨텐츠 변화가 있을 경우를 알 수 있게 된다.
polite는 말 그대로이다. 갱신되는 순간의 중요도를 낮게 여기고, 현재 진행중인 음성 또는 타이핑을 방해하지 않고 뒤늦게 전달하게 된다.