"접근성 개선" 시리즈로 작성된 6번째 글입니다.

프론트엔드 개발을 하다보면, 사용자에게 다양한 데이터를 입력받기 위해서 폼 양식을 많이 사용하고는 합니다.

로그인 같은 비교적 간단한 폼 부터, 게시판이나 주문 양식 등 복잡한 폼도 존재합니다.

폼 양식이 복잡하고 중요할수록 사용자가 편리하게 정보를 입력하고, 피드백을 받기 위해서 접근성이 중요해지는데요, 이번 글에서는 폼에서 접근성을 향상 시키는 방법에 대해서 알아봅니다.

먼저 간단한 폼을 리액트 컴포넌트로 하나 만들고, 접근성을 고려하지 않은 경우를 살펴보고 접근성에 대한 처리를 추가해나가는 식으로 설명합니다.

접근성을 고려하지 않는 폼 살펴보기

접근성을 고려하지 않는 폼 stackblitz 예제에서 확인해보실 수 있습니다.

예시 폼에 대해서 먼저 설명하자면 게시판에 문의를 남기는 예시로, 아래 정보를 포함합니다

• 문의 유형
• 고객의 이름
• 고객의 전화번호
• 문의 글 제목
• 문의 글 비밀번호
• 문의 내용

이 중 "문의 내용"을 제외한 인풋은 필수 값이고, 전화번호는 알맞은 형식에 맞게 입력하도록, 패스워드는 6자 이상으로 입력하도록 validation 합니다.

input 필드 입력하기

<div className="flex-1 flex flex-col gap-2">
  <span className="block text-gray-400 text-sm">
    제목 <span>*</span>
  </span>
  <input
    name="title"
    value={formValues.title}
    onChange={handleChange}
    className={`w-full ${errors.title ? "border-red-500" : ""}`}
  />
  <p className="text-gray-400 text-sm">문의 제목을 입력해주세요.</p>
  {errors.title && <p className="text-red-500 text-sm">{errors.title}</p>}
</div>

별도의 접근성 처리 없이 단순히 input 요소가 있고, span을 통해서 input을 설명하도록 마크업 되어 있습니다.

이 경우, 스크린 리더기에서는 input 필드를 입력하려고 시도할 때 아래처럼 읽어줍니다.

접근성 처리 전) 스크린 리더기에서 인풋의 뜻을 알지 못함

어떤 필드를 입력하는건지 사용자에게 피드백을 주지 않고 있습니다. 시각적으로는 span 태그로 만들어진 텍스트가 있어서 인풋의 뜻을 알 수 있지만, 스크린 리더기에서는 인풋 필드의 뜻을 알 수 없기 때문에, 단순히 "텍스트 편집"이라고 읽어줍니다.

폼 validation 결과 피드백

일부 입력이 누락된 상태로 폼 제출을 시도한 상황입니다.

필수 항목인 문의 글의 제목이 입력되지 않아 validation에 실패했는데요, 시각적으로는 빨간색상으로 "제목을 입력해주세요"라고 알려주지만, 스크린 리더기에서는 "제출" 버튼을 누른 후 아무일도 일어나지 않은 것 처럼 보여집니다.

접근성 처리 전) 제출 validation 피드백 없음

input validation 실패 이유 피드백

validation에 실패한 input 필드를 다시 포커싱한다고 해도, 스크린 리더기는 왜 실패했는지 이유를 알려주지 않습니다.

접근성 처리 전) 에러 이유 피드백 없음

errors.title && <p className="text-red-500 text-sm">{errors.title}</p>;

에러가 발생했을 때, 별도의 접근성 처리 없이 p 태그로 보여주고 있어서, 시각적으로는 피드백을 제공하지만 스크린 리더기는 이를 알 수 없습니다.

그렇다면 이제 접근성 향상을 위해 마크업을 수정하고, 다시 확인해보겠습니다.

접근성을 고려한 폼 살펴보기

접근성을 고려한 폼 stackblitz 예제에서 확인해보실 수 있습니다.

폼 validation 결과 피드백

접근성을 향상 시키기 위한 필드를 추가해 마크업을 수정했습니다.

<div className="flex-1 flex flex-col gap-2">
  <label htmlFor="phoneNumber" className="block text-gray-400 text-sm">
    전화번호 <span aria-hidden="true">*</span>
  </label>
  <input
    id="phoneNumber"
    name="phoneNumber"
    value={formValues.phoneNumber}
    onChange={handleChange}
    className={`w-full ${errors.phoneNumber ? "border-red-500" : ""}`}
    aria-invalid={errors.phoneNumber ? "true" : "false"}
    aria-describedby="phoneNumber-desc phoneNumber-error"
    aria-required="true"
  />
  <p id="phoneNumber-desc" className="text-gray-400 text-sm">
    전화번호를 입력해주세요.
  </p>
  {errors.phoneNumber && (
    <p id="phoneNumber-error" className="text-red-500 text-sm">
      {errors.phoneNumber}
    </p>
  )}
</div>

속성별로 하나씩 알아보면,

• htmlFor: label이 어떤 폼 요소와 관련 되어 있는지를 명시합니다. id 값을 참조하기 떄문에 매칭되는 input의 id와 동일하게 설정하면 됩니다.
• aria-invalid: 폼 요소의 값이 잘못되었음을 알려줍니다. 오류가 있을 경우 "true"를 전달합니다.
• aria-describedby: 폼 요소의 설명을 다른 요소를 참조해 알려줍니다. htmlFor과 마찬가지로 id 값을 참조합니다.
• aria-required: 폼 요소가 필수적인 요소인지를 명시합니다.

접근성 처리 후, 에러가 있는 인풋을 포커싱해보면 아래처럼 에러가 났다고 알려주고, 에러가 난 이유도 스크린 리더에서 확인할 수 있습니다.

휴대폰 형식 validation 실패 피드백

필수 값을 입력하지 않은 경우에는 스크린 리더에서 "필수 사항 유효하지 않은 데이터"라고 알려줍니다.

필수 값이 비어있는 경우 안내

제출 시 피드백

접근성 처리 전에는 validation에서 실패했을 때 스크린리더에서 피드백을 주지 않았었는데요, 접근성 처리 이후에는 에러가 있는 폼으로 포커스를 바꿔주고, 스크린 리더에 에러가 있음을 알려줍니다.

validation 실패 피드백

1. validation에 실패한 필드의 정보를 가져와서 포커싱 하는 함수를 추가해줬습니다.

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  const newErrors = validate();
  if (Object.keys(newErrors).length === 0) {
    console.log(formValues);
    // 폼 제출 처리 로직 추가
  } else {
    setErrors(newErrors);
    const firstErrorField = Object.keys(newErrors)[0];
    const element = document.getElementById(firstErrorField);
    if (element) {
      element.focus();
    }
  }
};

2. form 요소에 aria-live="assertive"를 지정해줍니다.

aria-live는 이전 aria에 대한 글에서도 소개했던 속성으로 동적으로 컨텐츠가 업데이트 되면, 스크린 리더가 업데이트된 내용을 읽도록 합니다.

이를 validation 과정에서 에러가 있는 경우 사용자가 이를 즉각적으로 알 수 있도록 피드백 할 수 있습니다.

같은 위계의 input을 묶어주기

시각적으로는 위에서 아래로, 문의 유형 및 고객 정보, 문의글 정보, 문의 내용으로 구분되어 있습니다.

이 경우 사용자가 입력중인 인풋이 어떤 그룹인지를 알 수 있기 때문에 정보 입력 시 편하게 입력할 수 있는데요, 스크린 리더기에서도 이러한 그룹 정보를 알려줄 수 있습니다.

<fieldset
  role="group"
  aria-labelledby="additional-info-group"
  className="flex flex-col gap-4"
>
    <legend
        id="additional-info-group"
        className="block text-white text-lg font-semibold"
    >
        문의글 정보
    </legend>
    <input ... />
    <input ... />
    <input ... />
</fieldset>

fieldset으로 여러 input을 묶고, aria-labelledby에 legend의 id를 지정하여 그룹에 대한 설명을 입력할 수 있습니다.

이렇게 마크업을 입력해주면 스크린 리더기에서 인풋 필드의 정보 뿐 아니라, 그룹의 정보도 알 수 있습니다.