brunch

You can make anything
by writing

- C.S.Lewis -

by 이현아 Jun 10. 2022

8. 모두를 위한 서비스

말문을 트이게 만드는 IT지식

이번 글은 총 10개 중 8번째 챕터입니다. 원활한 이해를 위해 차례로 읽어보시는 것을 추천드려요. 글 하단에 모든 챕터를 확인하실 수 있습니다.



”이미지마다 Alt값 좀 입력해주실래요?”
“장차법(장애인차별금지법)에 위반돼서 설계를 바꿔야 돼요.”





1. 웹 접근성


서비스는 다양한 사람들이 사용할 수 있도록 만들어야 해요. 눈이 보이지 않는 시각장애인, 복잡한 동작을 하기 힘든 정신지체 장애인을 포함해 노인, 어린아이까지 모두가 편리하게 사용할 수 있는 서비스를 만드는 것을 ‘웹 접근성을 확보한다’고 합니다. 누구나 웹 앞에서 장애인이 될 수 있기 때문에 웹 접근성은 ‘배려’보다는 사용자에게 좀 더 편리한 서비스를 제공한다는 차원에서 접근해야 해요.


※출처 : [네이버 지식백과] 웹 접근성 (용어로 보는 IT, 2016. 02. 25., 채반석)



웹 접근성은 3단계로 이뤄지는데 최소한의 단계인 A등급, 보다 높은 AA등급, 최상의 단계인 AAA등급이 있어요. 보통은 AA등급으로 제작하지만, 금융 어플 등 생활에 필수적인 서비스의 경우 ‘장애인차별금지법’을 적용시켜 보다 엄격한 심사를 거쳐요.





2. 모두를 위한 서비스 수칙


2–1. 시각장애인

시각장애인들이 모두 앞이 아예 안 보이는 사람들은 아니에요. 보이는 정도에 따라 저시력 시각장애인과 전맹 시각장애인으로 나뉩니다. 저시력 시각장애인은 익숙한 길은 혼자 걸어 다닐 수 있기도 하지만 일반인보다 시력이 많이 떨어지기에 스마트폰의 글자를 읽기 위해서는 돋보기를 사용하는 경우가 많습니다. 이처럼 저시력 시각장애인들이 서비스를 편하게 이용하기 위해서는 색의 대비를 충분히 주는 것이 필요합니다. 아래 그림처럼 대비가 강해야 구분하기가 편해요. 참고로 길에 설치된 점자블록이 노란색인 것도 이 분들을 위한 거예요.


저시력 시각장애인들을 위한 디자인



네이버는 색맹, 색약 이용자들을 위해 지하철 노선도를 만들었어요.


네이버가 제작한 색각이상자를 위한 지하철 노선도



그리고 전맹 시각장애인은 앞이 전혀 보이지 않는 사람들을 말합니다. 이 분들에게 점자를 사용할 수 없는 매끈매끈한 스마트폰을 사용하는 건 정말 불편한 일이에요. 그래서 스마트폰에 기본으로 탑재되어있는 텍스트를 음성으로 변환하여 들려주는 기능을 사용합니다. 그렇다면 이미지는 음성으로 어떻게 변환할까요? 코드를 짤 때 이미지에 텍스트로 설명을 적어둡니다. 이것이 ‘대체 텍스트’입니다. Alternate text를 줄여 Alt값이라고도 불러요. 눈에는 보이지 않지만, 시각장애인들이 손으로 이미지에 접근하면 입력한 대체 텍스트를 변환하여 음성으로 들려줘요.


대체 텍스트(ALT값) 입력하기



또한, 모니터를 볼 수 없는 시각장애인들은 마우스 대신 키보드를 이용해 웹 서비스를 이용합니다. 키보드를 누르면 어떤 콘텐츠인지 음성으로 하나씩 들려주죠. 그래서 순서가 뒤죽박죽 섞여 있으면 원하는 기능을 찾기 힘들어요. 보편적으로 ‘좌>우' / ‘위>아래'로 순서로 읽기 때문에 맞춰서 설계하는 것이 좋아요. 주요 메뉴는 좌측 상단에 배치하면 시각장애인들이 찾기 쉽겠죠? 그리고 기능을 제공할 때도 순서가 매우 중요합니다. 예를 들면, 아래 이미지의 왼쪽처럼 로그인 시 초점 순서가 ‘아이디 입력> 비밀번호 입력 > 로그인 > 아이디 저장'이라면 아이디 저장은 하고 싶어도 하지 못할 가능성이 있겠죠. 이럴 때는 오른쪽처럼 ‘아이디 입력 > 비밀번호 입력 > 아이디 저장 > 로그인'순으로 제공해야 아이디 저장을 인지하기 더 편할 거예요.


시각장애인을 위한 초점 이동 설계



그리고 소리가 자동으로 재생되는 콘텐츠는 피해 주세요. 시각장애인은 음성으로 텍스트를 듣는 중에 소리가 섞이게 되어 불편할 수 있습니다. 소리가 있는 콘텐츠는 처음에는 음소거 상태로 제공하고 선택 시 소리를 들을 수 있게 설계하는 것이 좋아요!




2–2. 청각장애인


청각장애인은 소리를 듣는 것이 불편해요. 그래서 소리가 있는 콘텐츠는 시각적으로 보여줄 수 있는 자막이나 수화를 함께 제공하면 서비스 이용이 편리할 거예요.








겪어보지 않아서 몰랐던 부분이 많죠? 그렇기에 디자인하는 것도 더 어려운 것 같아요. 하지만 모두가 편리한 서비스를 만들기 위한 매우 의미 있고 아름다운 공부라고 생각해요!


잘못된 표현이나 추가적으로 덧붙이고 싶은 내용이 있다면 언제든 댓글 달아주세요 :)






글쓴이: 이현아


오늘이 모여 인생을 만든다. 오늘도 성장하고 있는 2년 차 UX 디자이너 이현아입니다. 자라온 날보다 성장할 오늘이 더 많은, 그렇기에 다양한 경험으로 인생을 다채롭게 채워가고 싶은 주니어 이현아입니다.





다른 시리즈 보러가기

말문을 트이게 만드는 IT 지식



1. 운영체제(OS)와 웹, 네이티브, 하이브리드


2. 개발자라고 다 같지 않다 : 프론트엔드, 백엔드


3. 밤샘 개발을 줄여주는 도구들 : 라이브러리, 프레임워크, SDK


4. 한 번 보면 더 볼 일 없는 네트워크 관련 용어들


5. 갑자기 물어보면 말문이 막히는 서버와 클라이언트


6. 서버와 클라이언트, 그 사이의 용어들


7. 화면 크기에 반응하는 웹 UI : 반응형 웹, dp, dpi, em, rem


8. 모두를 위한 서비스 : 웹 접근성, 대체텍스트  --> 현재글


9. 콘텐츠의 재탄생 : 파싱, 크롤링


10. 데이터 바꿔치기 : SPA 





※참고 자료


https://book.naver.com/bookdb/book_detail.nhn?bid=16415934

https://nossodia.tistory.com/84

https://blog.naver.com/naver_map/220325668005


매거진의 이전글 7. 화면 크기에 반응하는 웹 UI

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari