<첫 번째 난관> + <해결 방법>
(html 마크업에서)
⭐ 화면에는 보이지 않도록 하고, 스크린리더에서는 읽히게 하기
처음에 공부한 부분에서 적용할만한게 있는지 생각해봤지만 display의 none값의 경우 스크린리더에서도 읽히지 않는다. 불리안 속성인 hidden을 이용해도 마찬가지로 스크린 리더에서는 읽히지 않는다.
구글링을 통해 찾아낸 방법 중, 네이버의 접근성 확보 방식을 소개한 기술블로그를 참고해 적용했다.
참고한 기술블로그 글 : https://omins.tistory.com/90
글에서는 mdn에 따르면 새로운 속성인 clip-path를 사용할 것을 권장했다고 하여 그 코드를 따와서 클래스 명은 내가 편한 쪽으로 바꿔 적용했다. 다들 sr-only 혹은 a11y-hidden을 암묵적으로 많이 사용한다고 해서 그대로 사용했다.
.sr-only {
overflow: hidden;
position: absolute;
clip: rect(0, 0, 0, 0);
clip-path: polygon(0 0, 0 0, 0 0);
width: 1px;
height: 1px;
margin: -1px;
}이렇게 CSS를 작성하니 보이지는 않고 스크린리더에서는 제대로 읽히는 것을 확인했다.
<두 번째 난관> + <해결 방법>
⭐ 스크린리더에서 어떻게 읽힐 지 확인하기
화면에서는 보이지 않고, 스크린리더에서는 읽힌다를 테스트해봐야 하는데 그걸 테스트해볼 수 있는 프로그램이 있지 않을까? 생각했다.
https://www.nvaccess.org/download/
위 사이트는 NVDA 스크린리더라는 프로그램으로 오픈 소스 기반의 무료 프로그램이다.
<사용법>
- 사이트에 접속해 DOWNLOAD를 클릭한다
- 설치 후에 NVDA 이름으로 된 앱을 실행하면 된다.
- 실행 시에 '띠리링'하는 소리가 난다.
- 음성출력 정지를 원하면 ctrl키를 누르면 된다.
- 앱 실행을 중단하고 종료하고 싶을 때는 insert+q 혹은 insert+n을 누르면 된다.
<세 번째 난관> + <해결 방법>
⭐ <picture>태그 이용하기
브라우저에 따라 지원하는 이미지 확장자가 다를 수 있는데, 예를 들어 구글 크롬에서만 지원하는 .webp 확장자의 경우 이 이미지 파일 하나만 연결해놓으면 다른 브라우저에서는 이미지가 뜨지 않는다.
이렇게 브라우저마다 다른 이미지를 띄워야한다거나, 반응형웹을 만들기 위해 이미지의 사이즈를 상황에 따라 연결하는 방법으로 <picture>태그를 이용하는 방법이 있다.
<picture>태그의 사용이 익숙하지가 않아 mdn을 참고했다. mdn을 참고해도 좀 어려워서 구글링으로 다른 기술블로그들을 참고해 방법을 알아냈다.
picture태그의 mdn 사용 예시는 다음과 같다
<picture>
<source srcset="/media/cc0-images/surfer-240-200.jpg" media="(orientation: portrait)" />
<img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>내부 콘텐츠로 source 태그를 이용해 srcset에 이미지 경로를 입력하고, media에 조건을 입력한다. 현재 나의 경우에는 .webp 확장자를 입력해야 하므로 media 대신 source의 type 속성을 이용해 MIME타입으로 작성했다.
그리고 .webp 확장자를 지원하지 않는 경우를 위해 img태그로 다른 확장자의 이미지를 넣었다.
