웹 접근성 관련 참고자료
중요 내용들
1. 이미지는 alt 속성에 설명을 넣을 것
<img src="house-shape.png" alt="홈으로">
2. 의미 없는, 또는 읽을 필요 없는 이미지에도 공백의 alt 속성 필요
- 불릿이나 배경 이미지 등
장바구니에 담기
<img src="shopping-cart.png" alt="">
장바구니에 담기
alt를 넣지 않으면 스크린 리더가 파일명(src 값)을 읽게 됩니다.
3. 숨겨진 요소에 설명 넣기
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
4. aria-label 속성으로 설명 넣기
5. aria-hidden 속성과 role 속성
👉 NULI 무료강좌 수강하기
figure와 figcaption 태그
아래의 페이지를 원본보기로 살펴보세요.
이미지에 긴 설명을 넣거나(img 요소의 alt는 비움)
아스키 아트 등 다른 종류의 미디어에 설명을 붙일 때
이들을 <figure> 안에 넣고, 역시 그 안에 나란히
<figcaption>을 사용하여 설명을 넣는 방식도 널리 사용됩니다.