[자꾸 까먹어서 기록 중] 웹접근성 검수

최근에 면접을 보면서 느낀 점이 있다.

질문이 들어왔을 때 일목요연하게 말하고 싶은데,

한마디로 정리가 안된 나 자신을 마주하게 된다.

그동안 뭐 하고 살았나 한탄할 바에는 우선 정리부터 해보자.

 

웹접근성

내 퍼블리셔 인생 통틀어서 가장 먼저 온 시련이었다.

웹접근성은 대체 무엇이고, 왜 해야 하는지

모르는 게 많다 보니 온갖 것들이 나에겐 궁금함을 넘어서 답답하기도 했다.

그래도 해야지 라는 마음에 맨땅에 헤딩하듯이 풀어나갔다.

---

# 웹접근성이란?

포털사이트에서 검색하자마자 나오는 첫 글인 '한국웹접근성인증평가원'의 설명글을 참고해 보자.

정리하자면 '모든 이가 동등하게 웹을 사용할 수 있도록 보장하는 것'이 웹접근성이라 할 수 있겠다.

또한 W3C에서 웹접근성의 대해 자세한 설명과 유튜브 영상을 올려놓았으니 참고하면 좋을 것 같다.

 

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

웹접근성이란? > WA : 한국웹접근성인증평가원

 

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

웹 접근성 소개

 

 

 

 

 

# 왜 해야 하는가?

웹접근성의 소개글들을 보다 보면, 우리가 왜 해야 하는지를 알 수밖에 없게 만든다.

우리는 서로가 너무나 다르며 언제 어디서 어떠한 사항에 처할지 아무도 모른다.

법으로 정해진 '장애인차별금지법'을 지켜야 할 의무도 있지만, 한 발 더 나아가 자연스러운 것이 되도록 만들어가야 하지 않을까 생각된다.

아래 '한국디지털접근성진흥원'에서 고지해 놓은 관련법률을 참고해 보자.

 

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

한국디지털접근성진흥원

 

 

 

 

 

# 검수 방법

여러 갈래로 검수를 하다 보니, 몇 가지 검수 방향으로 정리할 수 있었다.

1. 크롬 프로그램
2. 스크린 리더
3. 수기
4. 웹표준과 웹호환성

 

 

1. 크롬 확장 프로그램

크롬 확장프로그램에는 참 좋은 오픈프로그램들이 많다 보니, 내가 직접 사용해 보고 주변에 추천을 하거나 오히려 추천을 받기도 한다.

그만큼 접근성 체크에 사용하기 좋은 툴이 많이 있다. 몇 가지 툴을 소개하니 직접 사용해 보면 좋을 듯!

 

1-1. OpenWAX

접근성 업무를 진행하면 가장 많이 사용하는 툴인 거 같다.

내가 현재 접속한 페이지를 접근성 지침에 나온 체크리스트 별로 체크를 해준다.

예전엔 점수도 내줬었는데, 이젠 점수는 사라진 듯.

 

https://chromewebstore.google.com/detail/openwax/bfahpbmaknaeohgdklfbobogpdngngoe?hl=ko&utm_source=ext_sidebar

OpenWAX

 

 

1-2. WAVE Evaluation Tool

일단 이거 너무 맘에 든다.ㅋㅋㅋㅋㅋ

아직 업무에서 사용해 본 적은 없지만, 실행하면 해당 페이지에서 수정이 필요한 부분이나 현재 화면의 논리적 순서까지 알려준다.

심지어 이미지의 대비도 적합에 맞는 부분까지 체크해 준다.(오올)

다음 프로젝트에서 이 툴을 사용해 봐야겠다.

 

https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=ko&utm_source=ext_sidebar

WAVE Evaluation Tool

 

 

 

 

2. 스크린 리더

확장프로그램으로 이리저리 찾아보고 고친 뒤 스크린 리더기로 화면을 하나씩 읽어 나간다.

어떻게 보면 수기 작업을 들어가기 전 단계라고 할 수 있겠다.

한창 화면 검수할 때 모니터도 꺼놓고 테스트한 적이 있었는데, 그때 느낀 감정은 이루 말할 수 없던 거 같다.

화면을 못보는 답답함과 이렇게 까지 해야 하는 양가적 감정과 상황들ㅎㅎ

 

스크린 리더는 크게 NVDA와 센스리더를 사용했었다.

NVDA는 무료제공인 점과 다국어를 제공하는 점이 좋았고,

센스리더는 무료사용시 시간제한이 있어서 유의해서 사용했던 기억이 있다.

 

https://www.nvaccess.org/download/

Download NVDA

 

https://xvtech.com/services

(주)엑스비전테크놀로지-XVision Technology

 

 

 

3. 수기

개인적으로 가장 힘들지만, 가장 보람찬 검수법이다.😌

프로그램으로 1차로 검수를 진행하고, 누락된 사항들을 수정해 준 뒤 검수할 사이트를 일일이 수기로 검수한다.

• 키보드로 운용하면서 화면을 논리적으로 순서대로 읽어주고 있는지(혹은 못 읽고 있는 게 있는지)
• 스크립트가 적용된 요소도 키보드로 잘 운용되는지
• 페이지 제목이나 보조텍스트가 필요하거나 빠진 곳은 없는지
• 컬러나 굵기 밑줄 등 콘텐츠의 내용이 잘 구분되는지

우선 위에 작성된 4가지를 중점으로 검수를 진행하며, 웹접근성 콘텐츠 지침에 맞춰 체크리스트를 작성하여 더 정밀하게 체크한다.

 

https://www.wah.or.kr:444/Participation/guide.asp

한국형 웹 콘텐츠 접근성 지침 2.2 | 웹 접근성 연구소

 

 

 

4. 웹표준과 웹호환성

웹표준과 웹호환성을 함께 묶은 이유는, 작업자 입장에서 표준과 호환은 늘 가지고 있어야 하는 작업마인드라 생각하기 때문이다.

웹발전 연구소에서 제공한 설명글에 보다 자세하게 설명하고 있으니, 좀 더 개념적인 측면에서 참고하면 좋을 것 같다.

 

http://www.smartebiz.kr/new/subpage02_02.html

웹 표준과 웹 호환성 - 웹 접근성 | 웹발전연구소

 

 

 

그렇담 웹표준 검증은 어떻게 진행해야 할까?

많은 퍼블리셔분들이 사용하고 알고 있는 'W3C'에서 '문법 검증'을 한다.

아마 포트폴리오를 만들고있는 분들도 코드검증을 위해 사용하고 계실 거라 본다.

이곳에서 코드 컴증을 하고 크로스 브라우징을 통한 웹호환성을 맞춰나가는 작업을 하면 퍼펙트!

 

HTML검증(웹)

https://validator.w3.org/

The W3C Markup Validation Service

 

HTML검증(모바일)

https://dev.w3.org/2008/mobileok-webui/

W3C mobileOK Checker

 

CSS검증

https://jigsaw.w3.org/css-validator/

W3C CSS 검사 서비스

 

 

 

 

 

# 마치며

오랜만에 접근성에 관련된 내 생각과 경험들을 정리해 보니 아직도 내가 모르는 게 너무 많고, 참 할 것이 많다는 걸 느낀다.

마무리로 접근성 분야에서 유명한 김혜일님의 인터뷰를 첨부하며 마칩니다.

 

https://m.blog.naver.com/rebehayan/222400202287?referrerCode=1

정보접근성 전문가 10년차 김혜일 인터뷰