[웹 접근성] 쉽게 배워서 전문가 처럼 사용하기

지난 글에서 왜 웹 접근성을 배워야 하는지 간단하게 알아봤다.

그럼 이젠 웹 접근성을 어디서 어떻게 시작해야 쉽게 배울 수 있는지를 알아볼 차례다.

 

당연한 말 같겠지만, 웹 접근성을 쉽게 배우려면 쉬운 것부터 배우면 된다.

그런데 그 쉬운 게 배울게 좀 많다는 게 함정이다. 그래도 쉬워서 금방 배울 수 있다.

 

본격 적으로 배우기 전에, 어떻게 배울 지도 살펴보자.

개인적으로 무언가를 배울 때 뭘 먼저 배우고, 어떻게 배울지 생각해 본다.

배우는 방법이 어렵거나 복잡하면 쉬운 것도 어려워지기 때문이다.

 

지난 3년 동안 웹 접근성을 공부하고 사용해보니 제일 쉽게 배우는 방법은 직접 보고 테스트해보는 거다.

직접 하나하나 테스트해보면 왜 접근성이 좋은 방식과 그렇지 않은 방식의 차이를 경험해 볼 수 있어 빨리 이해할 수 있다.

 

서론은 이만큼이면 충분하니 이젠 배울 때 필요한 도구들을 알아보자.

 

NVDA 스크린 리더 - 무료

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

Download NVDA

NVDA 사용서

https://dequeuniversity.com/assets/pdf/screenreaders/nvda-guide.pdf

 

웹 브라우저

크롬, 파이어 폭스, 엣지 등등. 익스플로러만 아니면 된다.

 

색 명암 테스터 - 무료

크롬 익스텐션: https://chrome.google.com/webstore/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf

WCAG Color contrast checker

파이어 폭스 익스텐션: https://addons.mozilla.org/en-CA/firefox/addon/wcag-contrast-checker/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search 

WCAG Contrast checker – Get this Extension for 🦊 Firefox (en-CA)

엣지 익스텐션: WCAG Color contrast checker - Microsoft Edge Addons

Microsoft Edge Addons

 

자동 접근성 테스터 - 무료/유료

크롬 익스텐션: https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd

axe DevTools - Web Accessibility Testing

 

엣지 익스텐션: https://microsoftedge.microsoft.com/addons/detail/axe-devtools-web-access/kcenlimkmjjkdfcaleembgmldmnnlfkn

Microsoft Edge Addons

 

 

다음부터는 하나씩 차근차근 하나씩 직접 테스트해보면서 배워보자.