웹 접근성에 대해서

정보 통신 접근성 (Web 접근성)

「지능 정보화 기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용할 수 있도록 보장하는 것
웹 접근성은 법적으로 모든 웹사이트가 갖춰야 한다.
신체적, 환경적 조건에 관계 없이 웹 사이트에서 제공하는 정보를 동등하게 접근하고 이용할 수 있어야 한다.
- 신체적 조건 : 장애를 가진 사람이거나 고령자 등을 의미
- 환경적 조건 : 다양한 기기(PC, 모바일, 태블릿), OS, 브라우저 (IE, FireFox, Safari, Chrome, Opera 등) 또는 저사양 및 저속 회선 사용자나 이미지, 동영상 등을 볼 수 없는 환경을 의미

웹 접근성 관련 체크리스트

이미지 등 텍스트 형태가 아닌 콘텐츠에는 적절한 대체 텍스트가 제공되었는가?
- img 태그의 alt 속성을 통해서 대체 텍스트가 제공되어야 한다.
읽기 쉬운 텍스트와 도움이 되는 기술을 사용하여 작성했는가?
지시사항을 크기, 위치, 방향, 색에 관계없이 인식할 수 있는가?
- 상승, 하락을 의미하는 정보를 특수문자로 제공한 경우
텍스트 콘텐츠와 배경의 명도 대비가 최소 4.5 : 1 이상으로 적절한가?
- 대부분의 웹 콘텐츠에서 지켜지고 있지 않는 사항이다. 해당 사항은 WCAG 2.1 가이드라인에서도 AA 레벨을 가지고 있다.
이웃한 콘텐츠 간에 테두리, 구분선, 서로 다른 패턴을 사용하여 시각적으로 구분되어서 제공하는가?
- 마우스 오버나 키보드 포커스시 시각적으로 구분할 수 있는 방법을 제공해야 한다.
키보드만으로 모든 기능을 사용할 수 있는가?
키보드 사용으로 초점이동이 논리적인 순서로 이동되는가?
가능한 많은 웹 브라우저들과 호환이 가능한가?
페이지, 프레임, 컨텐츠 블록에 적절한 제목을 제공하는가?
문서 타입에 맞는 기본 언어를 명시하는가?
표를 이해할 수 있도록 정보를 제공하고 쉽게 구성되어 있는가?
- 스크린리더를 사용하는 이용자들을 위해서 caption, scope, id, headers, colgroup 등의 속성들을 이용해서 표에 대한 정보 제공이 자연스럽게 이루어질 수 있어야 한다.
링크 텍스트의 용도나 목적을 이해할 수 있도록 제공하는가?
- 링크 텍스트가 어떤 페이지로 이동하는지에 대한 명시를 해야하고, 이동할 것인지 확인해야 한다.
콘텐츠의 순서가 논리적으로 제공되어 계층구조를 이해할 수 있는가?
마크업 요소의 열고 닫음, 속성 선언에 오류가 없는가?

웹 접근성 준수 고려사항

1. 시각

실명, 색각 이상, 다양한 형태의 저시력을 포함한 시각 장애

2. 이동성

파킨슨병, 근육병, 뇌성마비, 뇌졸중과 같은 조건으로 인한 근육속도 저하, 근육 제어 손실로 말미암아 손을 쓰기 어렵거나 쓸 수 없는 상태

3. 청각

영상, 음성 콘텐츠에 자막, 원고, 수화 등의 대체 수단 부제로 인한 인식이 불가능한 상태

4. 인지

문제 해결과 논리 능력, 집중력, 기억력에 문제가 있는 정신 지체 및 발달 장애, 학습 장애(난독증, 난산증)

웹 브라우징에 쓰이는 보조 과학 기술

스크린리더
화면 확대 도구
음성 인식
키보드 오버레이

웹 접근성 준수 예시

접근성이 좋은 페이지와 좋지 않은 페이지를 확인하기 위해서 행정안전부, 서울특별시 교육청, 쿠팡, 신세계몰 페이지의 light house report의 Accessibility Part를 분석해보았다.

전반적으로 모든 항목의 점수가 엎치락 뒤치락하는 부분을 보였지만 절대적으로 공공기관(행정안전부, 서울특별시 교육청)이 웹 접근성 점수가 높은 것을 볼 수 있었다.

웹 접근성 긍정적 예시

행정안전부, 서울특별시교육청

공공기관은 웹 접근성에 대해서 의무사항으로 알고 있다. 하지만 100점을 받지는 못했다.

접근성 위배 항목

background, foreground color의 대조 비율이 낮다.
Heading Element를 semantic 태그의 의미로 사용되고 있지 않다.
- H3 태그를 text를 꾸미기 위한 용도로 사용했다.

공공기관 또한 지속적인 접근성 체크를 통해서 접근성 갱신이 필요하다고 생각된다.

또한 기술적인 취약점이 많이 드러나고 있는데, 지속적인 개발 및 유지보수가 어렵기 때문이라고 생각한다.

웹 접근성 부정적 예시

쿠팡, 신세계몰

접근성 위배 항목

img 태그에 alt 속성의 값이 존재하지 않는다.
- 쇼핑몰 특성상 많은 이미지로 제품을 표시하기 때문에 alt 속성의 값이 존재하지 않으면 시각 장애인들은 해당 제품이 무엇인지 알 수 있는 방법이 없다.
- 신세계몰은 일부 img 태그에서 alt 속성의 값을 제공하고 있지만, 접근성 점수에서는 쿠팡보다 낮은 점수를 보이고 있다.
HTML 마크업을 준수하지 않고 있다.
- 로그인, 회원가입, 고객센터를 표현하는 HTML 태그에서는 ul이나 ol 속성이 존재하지 않고 li 속성으로 구성되어 있다.
background, foreground color의 대조 비율이 낮다.
form 요소가 label을 가지고 있지 않다.
해당 링크 이미지나 텍스트가 어디로 이동되는지에 대한 명시가 나타나 있지 않다.

시각뿐만 아니라 이동성, 청각, 인지 중에 한 가지라도 결여되는 순간 웹사이트에서 제공하는 정보를 비장애인들과 100% 동등하게 접근할 수 없다고 생각한다.

개인적 견해 및 기술 방향성 제시

모든 웹 서비스의 웹 접근성은 TRUE OR FALSE

어느 한 기사에서, 시각 장애인 분이 스크린리더를 이용해서 쇼핑몰을 어느 정도 이용할 수 있다고 말한 적이 있다.

하지만 실질적으로 주문을 하지 못한다고 했다. 일정 과정 이후에는 스크린리더 등의 보조 과학기술로 해결할 수 없기 때문이다.

웹 접근성 측면에서 봤을 때 이 서비스는 FALSE라고 생각한다.

결론적으로 해당 서비스를 이용하는 사용자들에게서 주문이라는 목적을 달성하지 못했기 때문이다.

이분법적인 사고라고 생각할 수 있지만, 결국 여러 장애인 분들 입장에서는 시도하다가 하지 못한 시스템이 돼버린 것이다.

보조 과학 기술의 진화가 필요하다.

현재 여러 브라우저 및 OS 등 여러 환경에서 스크린 리더를 지원하고 있다.

나는 모든 구성이 맥 환경으로 되어있기 때문에 Voice Over 프로그램을 사용해본 적이 있다.

초기 설정을 어떻게 해야 하는지, 현재 듣는 부분을 어떻게 하면 넘길 수 있는지 알 수 있는 방법이 없었다.

실제 시각 장애인 분들에게는 듣는 정보 자체가 매우 귀하다고 생각할 수 있지만,

윈도우에서 스크린 리더 프로그램 자체를 설치하러 가는 길을 알 수 없다면 그것 또한 문제가 될 수 있다고 생각한다.

튜토리얼적인 부분(접근성을 높일 수 있는 부분)을 많이 살릴 수 있어야 한다고 생각한다.

웹 접근성 디바이스를 통한 100% 정보 제공

현재는 100% 정보를 제공하고 있다고 생각하지 않는다.

그렇다고 보이지 않는 사람들에게 실제 이미지를 머릿속에서 보여주는 등의 기술을 이야기하는 것은 아니다.

청각 장애인 분들은 진동을 통해서 음악을 느낄 수 있다고 한다.

촉각이 많이 발달했고, 음악을 진동으로 바꿔서 진동을 느끼는 원리라고 한다.

실사용까지는 아니지만 위의 뮤직시트를 통해서 청각장애인 분들이 진동을 통해 음악을 느낄 수 있다고 했다.

느끼지 못하는 장애인 분들도 계신다. 하지만,

영상을 수화나 텍스트로 대체 정보를 접하는 것보다 뮤직시트 등의 디바이스를 통해서 대체 정보를 접하는 것이 100%의 정보 제공이라고 생각한다.

S/W의 발전도 중요하지만, 그에 따른 H/W의 발전이 따라줘야 한다.

특정 감각에 의존할 수밖에 없는 장애인 분들이나 노약자 분들에게는 더욱더 필요한 부분이라고 생각한다.

write_code