웹접근성이란?

안녕하세요

찐망고입니다.

오늘은 웹 접근성 관련 포스팅을 해보려고 합니다.

 

이전 글도 확인하고 올게요~

2021.07.25 - [마크업/HTML] - 웹 표준,크로스브라우징, 시멘틱마크업에 대한 이해

2021.07.26 - [마크업/HTML] - 웹표준, 시멘틱 마크업??

 

웹 접근성에 대해 잘 정의되어있는 사이트의 링크를 걸어볼게요

https://www.w3.org/WAI/fundamentals/accessibility-intro/ko#what

월드 와이드 웹을 창시한 팀 버너스 리는
웹을 “웹의 힘은 보편성에 있으며, 장애에 구애 없이 누구나 손쉽게 접근할 수 있는 공간”으로 정의했다.
또한, W3C에서 만든 웹 접근성 이니셔티브(WAI : Web Accessibility Initiative)에 따르면
웹 접근성은 ‘장애를 가진 사람들도 웹을 이용할 수 있도록 보장하는 것으로,
장애를 가진 사람들이 웹 콘텐츠를 인지하고(Perceivable), 운영하고(Operable),
이해하고(Understandable), 기술에 상관없이 이용할 수 있도록
견고하게(Robust) 웹 콘텐츠를 만드는 것’으로 정의된다.

 

정리를 해보면 웹 접근성이란

장애인이나 비장애인 너나 할 거 없이 웹에 접근하는 데 있어 제약이 있으면 안된다는 뜻인데요.

 

HTML의 5번째 버전인 HTML5가 나오면서 2014년 10월 웹 표준으로 확정되었고,

권고한 사항에 맞춰 표준작업에 맞춰 마크업을 했는데요. 

2014년이면 우리나라는...

 

ie브라우저를 버전별로 체크하던 시기

ie브라우저와 함께 허덕대고 있을 무렵입니다. 

이땐 문제가 많던 Flash를 줄이자고 한창 이슈화 되어있었고, 그걸로 만든 사이트들도 많았고

물론 잘 지켜서 표준화 작업한 사이트들도 있었죠..

여하튼 총체적 난국이었습니다. 

 

이후 우리나라에서는 장애인 차별금지 관련 법안이 나왔습니다.

 

http://www.kwacc.or.kr/Accessibility/Law

제21조(정보통신ㆍ의사소통 등에서의 정당한 편의제공의무)
① (중략) 행위자 등이 생산·배포하는 전자정보 및 비전자정보에 대하여 장애인이 장애인 아닌 사람과 동등하게 접근·이용할 수 있도록 한국수어, 문자 등 필요한 수단을 제공해야 한다.

장애인차별금지 및 권리구제등에 관한 법률 제20조(정보접근에서의 차별금지)
개인·법인·공공기관(이하 이 조에서 “개인 등”이라 한다)은 장애인이 전자정보와 비전자정보를 이용하고 그에 접근함에 있어서 장애를 이유로 제4조제1항제1호 및 제2호에서 금지한 차별행위를 하여서는 아니 된다.

국가정보화 기본법
제32조(장애인ㆍ고령자 등의 정보 접근 및 이용 보장)
국가기관등은 인터넷을 통하여 정보나 서비스를 제공할 때 장애인·고령자 등이 쉽게 웹사이트를 이용할 수 있도록 접근성을 보장하여야 한다.
국내에서도 장애인차별금지법을 단계적으로 적용하면서 2013년 4월11일 이후 모든 공공기관과 법인의 웹사이트에서 웹 접근성 준수가 의무화됐다. 장애인이 차별을 받았거나 의무 이행이 되지 않으면 장애인차별금지법에 따라 권리구제를 신청할 수 있다.

 

위에 쓰여있는 법안이고요.

이법안이 나오면서 차별행위에 따른 3천만 원 이하의 과태료를 처하게 됩니다.

 

웹사이트들도 이젠 어쩔 수 없이 표준작업을 할 수밖에 없는 상황이 되었죠..

그전까지의 마크업은 쓰레기라고 보셔도 됩니다.

 

후에 관련 포스팅을 또 해볼게요..

 

그러면 웹 표준은 HTML각각의 요소들을 상황에 맞춰서 쓴다고 하면

웹 접근성은  어떻게 지켜야 하나요? 

그걸 알아봐야겠죠?

당연히 관련 사이트들이 참 많습니다.

저는 그저 검색 후 링크만 걸뿐 🤣🤣🤣🤣

 

http://www.wa.or.kr/m1/sub1.asp

웹접근성준수고려사항

 

웹 접근성을 제대로 체험할 수 있는 사이트가 있습니다.

https://nax.naver.com/index

[네이버 온라인 장애 체험]

네이버에서 만든 널리라는 사이트인데 아주 유명한 사이트죠

직접 들어가셔서 온라인 웹 접근성 체험을 해보세요.

해보시면 시야가 불편하거나 손이 불편하거나 했을 때의 상황을 조금 더 직접적으로 경험할 수 있을 겁니다.

 

 

https://nuli.navercorp.com/guideline/s01/g01

NULI

그리고 이곳에 다양한 사용자들과 함께 정보에 접근하고, 기술의 혜택을 누릴 수 있는 지침을 소개하는 링크도 있죠

널리 최고 이것만은 찬양한다!!

워낙 양이 많아서 일일이 캡처하진 않았습니다 꼭 확인해주세요.

 

실제로 기획을 하거나 디자인 그리고 마크업을 할 때 꼭 준수해야 하는 사항들입니다.

 

저는 친절하니까 pdf파일을 첨부해 드릴게요..😃

웹접근성_compressed.pdf

2.93MB

 

명도대비체크사이트

https://colorable.jxnblk.com/

 

웹 접근성의 향상 WAI-ARIA

http://seminar1505.publisher.name/#/

리치 인터넷 어플리케이션(RIA)이 있다.

WAI-ARIA에 대해 궁금해서 들어왔는데, 갑자기 왠 애플리케이션??

사실 WAI-ARIA과 RIA는 밀접한 관계가 있는 개념이다.

위키백과에 따르면 리치 인터넷 어플리케이션은 기존 웹 사이트가 갖는 단점인 늦은 응답 속도,

데스크톱 어플리케이션에 비해 떨어지는 조작성 등을 개선하기 위한 기술의 통칭이다.

최근 인터넷 환경에서 접할 수 있는 많은 웹 서비스들이 리치 인터넷 어플리케이션에 해당된다고 할 수 있는데

데스크톱 애플리케이션과 거의 차이가 없는 사용자 경험을 제공하는 것이다.

 

그런데 이런 리치 인터넷 어플리케이션이 많아지면서

JavaScript로 처리하는 동작이 실제 HTML이 제공하는 의미에 부합하지 않는 경우들이 많이 생겼다.

때문에 스크린리더를 사용하는 시각장애인분들이 리치 인터넷 어플리케이션 환경에서 콘텐츠를 이용하는데

어려움이 많아진 것! 이러한 이유로 W3C는 웹 콘텐츠 및 웹 어플리케이션의 접근성과 상호 운용성을 개선하기 위해 WAI-ARIA(Web Accessibility Initiative - Web Accessible Rich Internet Applications)란 명세를 발표하게 된다.

 

(적용 사례)

개념에 대해 읊조리는 것보다 코드 한 줄이 이해하는데 훨씬 도움이 될 것 같다.

키보드 포커스를 받을 수 있는 등의 이점으로 다양하게 활용되는 <a> 요소를 버튼으로 사용했을 경우,

스크린리더에서 해당 버튼을 링크라고 불러주게 되는데,

role을 “button”으로 정해주게 되면 버튼이라고 제대로 읽어주게 된다는 것!

<a href="#" >음악 재생</a> // 스크린리더는 링크로 읽습니다.

<a href="#" role="button">음악 재생</a> // 스크린리더는 버튼으로 읽습니다

 

 

 

마치며,

- 크로스 브라우징 : 한 개의 브라우저가 아닌 여러 브라우저에서 동등한 정보를 보여주는 것.

- 웹 표준 : W3C 등의 표준화 기구에서 정의 해준 명세에 맞게 마크업 하는 것.

- 시멘틱마크업(시멘틱검색) : 요소의 정의에 맞게 사용하는 것

- 웹 접근성 : 이용자, 이용자의 장비에 관계없이 이용할 수 있는 웹 사이트를 구성하는 것.

(시각장애인 등도 이용 할 수 있으며, 여러 PC나 장비에서도 접근 할 수 있는 웹 사이트.)

일반적으로 웹 표준은 크로스 브라우징의 상위 단계이고, 웹 접근성은 웹 표준의 상위 단계이지만,

웹 표준을 맞춘다고 해서 크로스 브라우징이 해결되는 것은 아니며, 웹 접근성은 지켰지만

웹 표준과 크로스 브라우징이 해결되는 것은 아니다.

 

 

모두들 고생하셨습니다.

 

다음 포스팅은 좀 더 재밌는 내용으로 찾아뵐게요~ 굿뱌