[웹접근성] aria-label, aria-hidden, sr-only, visually hidden

웹 접근성 관련 정리

1. aria-label

스크린리더에게 텍스트로 전달할 수 있는 속성

 

2. aria-hidden

딱히 의미있지 않아서 스크린리더에도 보이지 않게 가리기

 

3. sr-only 혹은 visually hidden

위 클래스이름을 사용해서 화면에는 보이지 않지만, 브라우저나 스크린리더에게 텍스트로 의미를 전달할 수 있다.
보통 sr-only 라고도 많이 사용하고, 최근 부트스트랩에서 visually hidden으로 사용하고 있는데 명시적인 이름이라고 생각되어 이것도 사용하려고 함.
다음과 같은 css 속성을 사용하여 화면에는 숨긴다.

.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

 

 

참조: 김버그님 강의 '김버그의 HTML&CSS는 재밌다'