접근성 고려하기(Aria-label, sr-only)

1. Aria-label

aira-label은 웹 페이지에서 스크린 리더 사용자에게 정보를 전달하는 데 사용되는 HTML 속성

요소가 시각적으로는 명확한 정보를 제공하지만 스크린 리더 사용자들이 이해하기 힘들기 때문에

aira-label을 사용해서 요소의 기능이나 목적을 설명할 수 있음

<button aria-label="검색 버튼">검색</button>

span이나 div 태그에서 aria-label을 사용할 땐 role 속성을 함께 써주는 것이 좋음

 

2. sr-only

스크린리더에서는 읽을 수 있지만 화면에는 보이지 않게 하는 방법 (aria-label과 비슷한 역할을 함)

아래의 코드를 사용함

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