[서평] 실무에 바로 적용하는 웹 접근성 가이드북

* 이 서평은 <제이펍 서평단>에 선정되어 제공받은 도서를 기반으로 작성된 글입니다.

 

---

📚 <실무에 바로 적용하는 웹 접근성 가이드북>
접근성의 개념부터 태그 의미 있게 사용하기, WAI-ARIA, 리액트 컴포넌트 만들기까지
더 많은 사람과 더 나은 경험을 나누는 코드 작성법
- 김남경, 곽규현 지음 / 제이펍 출판

 

 

개요

어쩌면 내가 가장 기다려온 주제의 책. 🧐

 

이전 회사에서의 업무 경험을 계기로, 웹 접근성에 깊은 관심을 갖게 됐다. 그전까지만 해도, 사실 웹 접근성이라고 하면 '음음,.. div 대신에 시멘틱 태그를 쓰자' 정도가 전부였다. (아니 그 이하인가? 처음에 만들었던 포트폴리오를 되짚어보면 그냥 div 범벅인데... 뭐 아무튼) 내가 속한 팀은 웹 접근성을 정말로 중요하게 여겼다. 돌이켜보면 이커머스라는, 다양한 사용자들이 접근하는 서비스를 만드는 데에 진심이었던 팀이었고, 그 분위기 덕분에 나 역시 자연스럽게 관련된 지식과 감각을 쌓을 수 있었다. 아마 같은 연차 중에서도 꽤 괜찮은 수준의 이해도를 갖고 있었다고 생각한다.

 

그런데 이 지식을 쌓는 과정이 결코 쉽지만은 않았다. WCAG 같은 공식 문서를 지루하게 들여다보며 개념을 익히는 것이 꽤나 장벽이었는데, 그걸 실무에 어떻게 녹여낼지에 대한 실전 예제는 더더욱 찾기 어려웠다. 가끔 누군가가 공유한 예제가 있으면 고맙긴 한데.. 그게 맞는 건지 아닌지도 확신이 안 들었다. 자료의 부재가 주는 막막함에 대해 절실히 느꼈다.

뭐 여차저차 이런 경험은, 지금의 나에게 "비장애인과 장애인 구분 없이, 모두가 사용할 수 있는 서비스를 만들고 싶다"는 프론트엔드 개발자로서의 방향성을 정립하게 해 줬다. 그런 내가 한 걸음 더 나아갈 수 있게 도와줄 이 책의 출간이 정말 정말 반갑다!(진심x100000) 큰 기대를 품고 책을 펼쳤다.

내용

책은 총 8개의 챕터로 구성되어 있고, 이론과 실무를 넘나들며 꽤 넓은 범위를 차근차근 밟아나간다.

단순히 정보만 나열하는 게 아니라, 왜 이게 중요한지, 이걸 제대로 하지 않으면 어떤 일이 벌어지는지에 대해 실제 사례와 실습을 통해 설명하고 있어 설득력이 높다.

 

 

CHAPTER 1: 쉽게 이해하는 접근성 / CHAPTER 2: 웹 접근성의 기초

첫 번째 챕터는 '왜 접근성을 고려해야 하는가'에 대한 본질적인 질문으로 시작한다. 웹 접근성은 단순히 장애인을 위한 것으로 한정지을 수 없으며, 정보 취약 계층의 디지털 정보 격차를 해소하기 위한 수단이자, 모두를 위한 웹을 만들기 위한 필수 요소라는 점을 자연스럽게 인식시켜 준다. '장애인의 권리 보호'나 '법적 의무'로만 보는 시선에서 벗어나게 해주는 중요한 시작점이다.

 

이어서 2챕터에서는 스크린 리더 환경을 중심으로 구체적인 통계 자료를 제공한다. 플랫폼별 스크린 리더 사용률, 주요 브라우저, 운영체제, 탐색 방식 등을 상세하게 비교한다. 그리고 접근성 트리라는 개념을 통해 정보 전달 경로에 대해서 이해를 돕는다.

 

 

CHAPTER 3: HTML 태그, 의미 있게 사용하기

곧바로 실전 챕터의 등장이다. 웹 접근성을 준수하기 위한 첫 번째 걸음인 의미 있는 태그, 즉 시맨틱 태그(semantic tag)의 중요성과 활용 방법을 담았다. div로만 마크업을 구성해도 디자인 시안과 동일하게 화면을 구성할 수 있지만, 눈에 보이는 게 전부가 아님을 다시금 깨닫게 된다.

 

스크린 리더 사용자에게 정보가 어떻게 전달되는지, 어떤 태그가 의미를 어떻게 보완하는지를 예제를 통해 보여주고 있어, 마크업을 짜면서 수소리 참고하면 좋을 챕터다.

 

 

CHAPTER 4: 웹 콘텐츠 접근성 지침

접근성 관련 지침 2가지, 웹 콘텐츠 접근성 지침(WCAG)과 한국형 웹 콘텐츠 접근성 지침(KWCAG)에 대해서 설명한다. 그리고 그중에서도 특히 WCAG를 기반으로 국내 웹 환경에 맞게 재정된 KWCAG에 대해서 깊게 다룬다. KWCAG의 각 원칙 — 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성 — 이 접근성을 준수하는 데 어떤 역할을 하는지와 적절한/부적절한 구현 사례를 비교하는 방식이 굉장히 실무적이다.

KWCAG의 원칙 '인식의 용이성' 중 '적응성' 지침에 대한 예시

 

 

CHAPTER 5: WAI-ARIA

시맨틱 태그만으로 요소의 의미와 문서의 구조 등을 제공하기 어려운 경우 사용할 수 있는 상태값 WAI-ARIA에 대한 이야기이다. role, aria-* 등 각 속성값에 대해서 소개하고, 용도에 맞는 예시를 제공하며 어떤 맥락에서 사용하면 적절할지 가이드를 해준다.

(개인 생각)시맨틱 태그에 비해 비교적 잘 정리된 정보를 찾기 어려운 영역인데, 친절한 예제 덕에 3 챕터와 같이 수시로 학습하면 감각을 키우기 좋을 것 같다.

 

 

CHAPTER 6&7: 웹 접근성을 준수한 React 컴포넌트 만들기

앞서 설명한 내용들을 토대로 React 컴포넌트를 만드는 실습용 챕터이다. 대표적인 UI 컴포넌트인 Tab, Carousel, Select Menu, Dialog 등을 따라 만들어보며 어떤 시맨틱 태그를 사용할 수 있을지, aria 속성은 무엇을 추가할지, 스크린 리더에서 어떻게 읽히는지를 하나하나 체크하며 개발할 수 있도록 돕는다. 실제로 내가 만든 컴포넌트와 비교하면서 개선 포인트를 찾기에 아주 좋을 것 같다.

접근성을 준수한 컴포넌트를 만들어가는 단계별 설명

 

 

CHAPTER 8: 놓치기 쉬운 사례들로 알아보는 접근성

마지막 챕터에서는 실제 상황에서 개발자들이 놓치기 쉬운 접근성 오류들을 귀엽게 문제처럼 제시하고 그에 대한 설명을 제공한다. 무겁지 않은 마무리이다.

🙄🙄🙄

 

 

 

감상

앞서 개요에서 말한 것처럼, 웹 접근성은 제대로 정리된 자료가 워낙 드물다 보니 늘 바랐던 주제였다. 그런 점에서 이 책은 기대를 충분히 만족시켜줬다. 이론적인 내용을 단단히 짚어주면서도, 하나하나 예시를 곁들여 설명해 주는 방식 덕분에 읽기도 어렵지 않았다. 쏘 친절

 

가장 인상 깊었던 챕터는 리액트 컴포넌트를 직접 만드는 실전 챕터였다. 예전에 탭 UI를 직접 구현하면서, 미약하지만 어떻게 접근성을 보완할 수 있을지 고민했던 경험이 있어서 반갑고 또 재밌게 읽혔다. 그리고 지금의 실무 환경에서는 대부분의 UI 컴포넌트에 라이브러리를 결합해 접근성 대응을 하고 있는데, 덕분에 정확히 어떻게 되어있는지는 모르고 지나가고 있었다. 이 책을 읽으면서 어떤 대응이 되어있는지 다시금 궁금해졌고 라이브러리 도움 없이 내가 구현해보고 싶다는 욕심도 조금 들었다. 나만의 디자인 시스템을 만드는 사이드 프로젝트로 발전시켜도 재밌을 것... 같고?ㅎㅎㅎ

 

프론트엔드 개발자 중에서도 웹 접근성에 관심이 있는 사람과 그렇지 않은 사람은 꽤 명확히 나뉘는 것 같다. 워낙 다양한 방향성이 존재하는 분야라 그럴 수밖에. 이 책은 그런 면에서, 두 분류 모두에게 추천하고 싶다. 접근성에 익숙하지 않은 사람들에게는 "아, 이래서 이게 중요하구나?"와 같이 시야를 넓혀주는 계기가 될 수 있고, 이미 관심을 갖고 있는 사람에게는 "실무에서 녹여내는 방법"을 고민하게 해주는 성장 지침이 되어줄 수 있을 것 같다. 다소 개인적인 경험으로 접근성에 관심 없는 사람은 정말 정말 정말 관심이 없어 필요성 자체를 못 느꼈기에, 그런 이들에게 더 추천하고 싶기도 하다. 그만큼 필요성에 대한 설명이 너무 잘 되어있다.

 

'가이드북'이라는 이름처럼, 책상에 두고 반복해서 펼쳐볼 수 있는 책이다.

읽는 내내 많이 배우고, 성장하는 느낌이 들었다. 아주 좋은 독서 경험이었다 😌