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;
}
728x90