대체텍스트용 엘리먼트(visually-hidden) 만들기

접근성 준수를 위해 스크린리더용 텍스트 엘리먼트를 별도로 만드는 방법에 대해 소개하고자 합니다. 테일윈드 등 대부분 UI 프레임워크는 기본적으로 내장하고 있는 내용이지만, 별도의 코드를 통해 구현하고 싶은 경우 활용할 수 있습니다.

HTML

<div class="visually-hidden">이 텍스트는 스크린 리더용입니다.</div>

CSS

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

설명

1. position: absolute;: 요소를 절대 위치시켜 문서 흐름에서 제거합니다.
2. width: 1px; 및 height: 1px;: 요소를 거의 눈에 띄지 않는 크기로 축소합니다.
3. margin: -1px;: 레이아웃에 간격이 남지 않도록 합니다.
4. padding: 0;: 패딩을 제거합니다.
5. overflow: hidden;: 넘치는 콘텐츠를 숨깁니다.
6. clip: rect(0, 0, 0, 0);: 요소를 보이지 않게 클리핑합니다.
7. border: 0;: 테두리가 보이지 않도록 합니다.

이 CSS 기술은 콘텐츠가 스크린 리더에 접근할 수 있게 하지만, 시각적 디자인에는 영향을 주지 않습니다.

사용 예제

폼에서 사용하는 예시는 다음과 같습니다:

<form>
  <label class="visually-hidden" for="username">사용자 이름</label>
  <input type="text" id="username" name="username" placeholder="사용자 이름을 입력하세요">

  <label class="visually-hidden" for="password">비밀번호</label>
  <input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요">

  <button type="submit">로그인</button>
</form>

이 예제는 시각적으로는 깔끔한 디자인을 유지하면서 스크린 리더를 사용하는 사용자들에게 접근 가능한 라벨을 제공합니다.