접근성

접근성을 위해서 사용하는 클래스 중 자주 사용하는 클래스를 정리해보고자 한다
aria-hidden="true" : 화면에선 보이지만 스크린리더에서 안읽어줌

display: none, visibility: hidden : 화면에서도 안보이고 스크린 리더에서도 안읽어줌

.sr-only / a11y-hidden : 화면에서 안보이지만 스크린리더에서 읽어줌

1. aria-hidden="true"

화면에서 보이지만 스크린 리더에선 안읽어준다
어떤 경우냐면
로그인 : 회원가입 : 영어모드
이런식의 디자인이 될것인데 스크린 리더 사용자는 중간에 특수 문자가 들어가 있으면 당황할 수 있다
그래서 마크업을 할때

<ul>
	<li>><span aria-hidden="true">:</span><a href="#"></a></li>
    <li><span aria-hidden="true">:</span><a href="#"></a></li>
    <li><span aria-hidden="true">:</span><a href="#"></a></li>
</ul>

이렇게 집어 넣어주면 특수문자는 보이지만 스크린 리더에선 읽어주지 않는다

2. display: none, visibility: hidden

이것은 사실 접근성을 위해서라면 안쓰는것이 맞다
물론 아예 안보이게 할작정이라면 모르겠지만
제목같은 부분을 이걸로 감추다가는 스크린 리더 사용자는 안된다
화면에서도 안보이고 스크린리더에서도 안읽어준다

3. .sr-only / a11y-hidden

같은 것인데 보통 sr-only를 더 많이 쓴다고 하더라
어떤 것인지는 다른 글에 정리해놨다