스크린리더를 사용해보자

html의 시맨틱 마크업은 httml의 태그를 주어진 목적을 위해 사용함 으로써 

 

1. 검색엔진 최적화

2. 접근성

3. 유지보수

 

등의 장점을 추구하는 것이다.

예시를 들자면 header, main, aside, section, article. figure, footer 등등의 태그를 목적에 맞게 사용하는 것이다.

이중 접근성에 관한 요소중 하나는 스크린 리더에서 인식하기 용이하게 하기 위함이라고 알고있다. 

 

스크린 리더란 용어 그대로 스크린을 읽어서 안내해주는 것이다.

스크린리더가 실제로 어떻게 동작하는지 알고싶어서 사용을 해봤고 글을 남긴다.

문서는 아래의 구글 링크를 참조하면 된다.

mac에서는 voiceover라는 내장 스크린리더가 있다.(mac을 사용하고 있어 mac 기준으로만!!)

웹 사이트를 열고 Command + F5 를 클릭하면 된다.

 

사이트의 예시는 개인적으로 시맨틱 마크업이 잘 되어있다고 생각하는 레진 코믹스 사이트를 예시로 들것이다.

voice over을 최초실행시 에는 간단한 tutorial을 진행하게 된다.

아래 사진은 레진코믹스에서 voice over 실행 + 탐색 해본 캡쳐이다.

실행하고 나면 tab 키를 통해 요소들을 하나씩 탐색할 수 있고 탐색할때마다 스크린 리더가 읽어 준다.

command + f5로 실행

 

 

 

느낀점

* 생각보다 실행을 위한 방법을 찾기가 쉽지 않았다. 실제로 사용을 해볼 생각은 잘한것 같다. 이제 내가 만드는 웹사이트의 접근성에 대해 다시한번 생각하게 될것 같다.

* img의 alt 속성은 꼭 입력해 주어야 겠다. 입력해주지 않으면 스크린 리더가 snail로 읽어주어 이미지를 알려줄수가 없다.

 

 

 

 

 

https://support.google.com/voice/answer/9091907?hl=en&co=GENIE.Platform%3DDesktop 

Use Google Voice with a screen reader - Computer - Google Voice Help

https://www.lezhin.com/ko

레진코믹스 - 솔직한 재미 대폭발