hidden 그리고 시맨틱 구조와 접근성

강의 시간에 짠 코드를 하나하나 보면서 사용 이유와 왜 사용했을까? 라는 생각이 드는것에 대하여 알아보자. 오늘은 h2태그에 hidden 이라는 속성을 사용한 이유에 대해 알아보자 hidden은 화면에 보이지 않게 하였지만 시맨틱 구조와 접근성을 챙기기 위할때 사용한다고 한다. 하지만 스크린리더에게도 보이지 않는다고 한다.. 그럼 왜 사용 하였을까...

더 나은 방법

<h2 className="sr-only">EventBanner</h2>

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

작은 크기로 만들어 화면에 보이지 않는 위치로 밀어내도록 만듭니다. 이것은 일반 사용자에게 사용되는 것이 아니라 스크린리더를 사용하는 사람들에게 웹 콘텐츠를 구조적으로 이해할 수 있도록 돕기 위하여 이렇게 작성을 합니다. 이러한 방법은 웹 접근성을 더 뛰어나게 해줍니다.