시각 장애인을 위한 디자인 - 스크린 리더

Photo by Ryoji Iwata on Unsplash

시각 장애인이란?

• 시력 장애 - 저시력이나 맹을 이야기한다.
• 색각 장애 - 색약과 색맹을 이야기한다.

그 외에도 시야 장애, 광각 장애, 굴절 장애 등 많은 분류가 있지만 이 글이 시각 장애인에 대한 깊은 조사를 하는 내용이 아니기 때문에 대부분 알고 있는 시력 장애와 색각 장애를 기준으로 이야기해보자.

 

시각 장애인을 위한 기능과 디자인

• 스크린 리더(Screen Reader)
• 핀치 투 줌 (Pinch to Zoom)
• 색상과 형태의 명확한 대비
• 레이블

---

스크린 리더(Screen Reader)

스크린 리더 기능은 TTS(Text To Speech의 약자로 문자를 음성으로 변환해주는 솔루션을 말합니다.)를 활용해서 저시력자 혹은 맹인에게 화면의 텍스트나 이미지를 읽어주는 것을 말한다.

시력 장애를 가진 분들은 Tab키를 이용해서 화면을 이동하는데 이때 지나치는 텍스트나 이미지의 alt 속성에 쓰여있는 텍스트를 음성으로 전달해준다.

alt 속성을 사용해서 이미지를 글로 설명할 수 있다.

 

스크린 리더 사용 시 주의사항

스크린 리더를 사용할 때 주의사항이 몇 가지 있는데

1. 링크를 서술적으로 만들어서 시력 장애를 가진 분들의 이해도를 높여야 한다.
2. 내비게이션의 순서를 타당하게 만들어야 한다.
3. 컨트롤러나 Input-form에는 적절한 레이블이 꼭! 들어가야 한다.

---

1. 링크를 서술적으로 만들어서 시력 장애를 가진 분들의 이해도를 높여야 한다.

시력 장애를 가진 분들의 상황에서 두 가지 케이스를 이야기해보자.

사용자는 Tab을 이용해서 이동을 할 것이고 텍스트를 동일하게 읽어줄 것이다.

그리고 사용자가 무심코 다운로드 링크를 지나치고 다시 되돌아 갔을 때,

1번의 상황에서 시스템은 "여기를 클릭하세요."라는 말만 반복할 것이다.

반면 2번째 상황은 "이미지를 다운"이라는 말을 반복하면서 시력 장애인 분들에게 좀 더 명확하게 의도를 전달할 수 있다.

---

2. 내비게이션의 순서를 타당하게 만들어야 한다.

앞서 말한 것처럼 시력 장애를 가진 사용자는 주로 Tab을 이용해서 화면을 이동한다.

아래 이미지처럼 포커스가 이동하는 위치를 보여주는데 이 순서가 논리적이지 못하고 뒤죽박죽일 경우

(ex: 메일 → 카페 → 블로그 → 지식iN으로 가는 순서가 아니라 메일→블로그→ 카페→ 지식iN 순서로 가는 경우)

사용자의 접근성에 큰 불편을 주게 된다.

 

물론 네이버는 순서가 아주 논리정연하게 잘 정리되어있다.

 

이를 해결하기 위해서 개발 단계에서 프론트엔드 개발자가 tabindex 속성을 이용해서 순서를 정해줘야 한다.

*물론 논리적으로 잘 짜주시는 개발자분들이 있지만.. Tab으로 화면을 날아다니게 하는 개발자분이 계셨었다...

---

3. 컨트롤러나 Input-form에는 적절한 레이블이 꼭! 들어가야 한다.

레이블은 시각 장애인 분들 뿐만 아니라 다른 사용자들에게도 꼭 필요한 부분이다.

레이블이 없다면 어떤 입력단계인지 스크린 리더로 전달해 줄 수 없고 다른 사용자들 역시 플레이스 홀더가 있더라도 작성하는 중에 '어? 내가 뭘 적어야 하더라?' 하는 상황이 발생할 수 있기 때문이다.

 

레이블을 통해 사용자가 어떤 내용을 넣어야하는지 입력 중에도 알 수 있도록 한다.

---

시각 장애인들의 접근성에 대해 궁금해져서 공부 겸 정리를 시작했는데 생각보다 많은 부분의 세심함이 필요하다고 생각되었다. 스크린 리더만 정리했음에도 다 담을 수 없어서 다음 포스팅에는 색각 장애를 가진 사용자들을 위한 디자인에 대해서 공부와 정리를 해보려고 한다.