웹 접근성 참고 url (챙겨보기)
프론트엔드 개발자로 나아가기 위해 언젠간 아니 적어도 올해 안까지는 나만의 웹페이지를 만들어 볼 것이다. 그렇게 되면 공신력있는 사이트로 발전하기 위해서 웹접근성에 대해 공부를 해야겠지..? 위 사이트를 꼭 참고해보자.
1. 이미지는 alt 속성에 설명을 넣을 것
<img src="이미지 주소" alt="홈으로">속성에 설명을 넣는 이유는 이미지를 볼수 없는 분들 또한 웹페이지를 접근할수 있기 때문이다. 모든 사용자에게 동등하게 접근 가능토록 하는게 웹 접근성이다.
2. 설명이 필요하지 않더라도 alt 속성 필요
alt 넣지 않으면 스크린 리더가 파일명(src 값)을 읽게 된다.
3. 숨겨진 요소에 설명 넣기 sr-only
스크린리더에는 읽히고 시각적으로 보이지 않게하는 Boostrap의 클래스
css 코드
.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;
}
<body>
<img src="./sr-only.png" alt="">
<p class="sr-only">
노트북으로 뭔가 공부하고 있는 아이의 독백: 코딩을 배우면 아마 굶지는 않을거랬어.
</p>
<dl>
<dt class="sr-only">분야</dt>
<dd>프로그래밍</dd>
<dt class="sr-only">종류</dt>
<dd>스티커</dd>
<dt class="sr-only">디자이너</dt>
<dd>얄코</dd>
<dt class="sr-only">제작년도</dt>
<dd>2021</dd>
</dl>
</body>
4. aria-label 속성으로 설명 넣기
5. aria-hidden 속성과 role 속성
이모지 또한 텍스트이다. 이모지를 스크린 리더에게만 노출하게 하려면 위 속성을 사용
aria-hidden 속성에 true로 만들어주게되면 스크린리더에게만 노출되고 그 이모지를 특정 텍스트로 읽도록 하려면 role 속성을 같이 이용해주면 된다.
해야 되는 일이 하고 싶은 일로