안녕하세요 ! 오늘은 가볍게 넘어갈법한 주제에 대해 간단히 정리해보고자합니다!
배민 테코톡에 올라온 블링님의 웹 접근성을 간단히 정리하는 포스팅정도로 생각하시면 좋겠네요! 바로 시작하시죠!
웹 접근성에 대표적인 타깃은 바로 장애인과 고령자입니다. 웹 사이트에서 제공하는 서비스가 동일해야 한다는 것을 의미하며 이는 법적의무사항이라고까지 명시되어 있지요.
그렇다면 좀더 현실적인 지표로 알아보도록 하겠습니다.
객관적인 수치로 알아보자면, 2021년 보건복지부 제공 국내 등록 장애인의 수는 약 265만명 (인구대비 약5%)라고 합니다.
2021년 기준 Microsoft Edge 브라우저 국내 사용자가 통계청 기준 약 240만명이고,
이는 대구 전체 시민의 규모, 서울 시민 4명 중 1명의 규모와 맘먹는다고 합니다.
꽤나 엄청나죠!?
접근성을 준수하지 않는다면 즉, 이들을 배제한다면 앞서 비슷한 규모의 집단을 배제한다 정도로 이해할 수 있겠네요. 절대 적은 수치가 아니라는 점을 인상깊게 보시면 좋을 것 같습니다.
웹 접근성을 잘 지킨다는 것은 웹 크롤러(봇)에게도 유리하게 작용됩니다.
시각장애인이 이용하는 스크린 리더와 같은 보조기술과 검색엔진에 활용되는 웹 크롤러는 코드를 분석해 서비스를 이용한다는 공통점을 지니고 있습니다.
그런 의미에서 웹 크롤러에 대응하는 검색엔진최적화(SEO)와 웹 접근성의 페이지의 기준이 점차 동기화되고 있다는 것도 이해가 자연스레 되네요.
한가지 예로, 우리가 흔하게 사용하는 img태그의 alt 속성은 스크린리더에게 현재 이미지가 어떤 것을 묘사하는지 설명합니다. 이는 검색엔진 랭킹 계산시 크롤러에게도 이해되는 방식이죠. alt속성을 적절하게 사용하는 것이 웹 접근성과 SEO측면에서도 필수적이라는 겁니다.
흔히 초기 프로젝트에 이를 신경쓰지 못하는 경우가 많은데요. 실제 코드에 어떤식으로 반영해야하는지 살펴보시죠.
만약 스크린리더로 웹 서비스를 이용해야한다는 사용자라면, HTML button 태그는 ‘버튼' 그자체일 뿐입니다. 전혀 추가적인 설명이 없는 경우죠.
스크린 리더는 다음과 같이 동작하게 되는데요.
접근성 트리에 표시되는 요소의 이름은 스크린 리더가 읽는 요소의 이름입니다.
버튼의 경우 부모 요소의 이름이 설정되지 않았을 때 자식 요소의 이름을 모아 하나로 읽게 되는데, 끝에 “버튼"이라는 명칭을 추가적으로 붙여 사용자에게 전달하게 됩니다.
이와 같은 경우를 해결하기 위해선 다음과 같이 작성할 수 있겠습니다.
이렇게 코드를 작성하면, 스크린리더는 버튼을 “장바구니에 추가하기"라고 읽게 되는 것이죠.
다음과 같은 상황은 어떠할까요?
다음은 로그인 폼이 잘못되었을 때 브라우저는 이를 시각화된 메세지로 출력하지만 스크린리더는 이를 즉각적으로 반영하지 못하기 때문에 문제가 발생하게 되는 예시입니다.
그렇다면 이를 어떻게 해결할 수 있을까요? 단순합니다.
스크린리더는 사용자에게 반드시 필요한 정보임을 추가해줘야만, 이를 즉각적으로 반영하게 되는데요. 접근성 트리에 alert라는 role을 주게 되면 즉각적으로 이를 인지하게 됩니다.
정말 신기하지 않나요? 이처럼 접근성을 준수하는 일은 생각보다 복잡하지만은 않습니다. 추가로 기회가된다면 접근성 관련 개발에 도움이되는 Tool들도 경험해보시는 것도 좋을 것 같네요.
** WAVE ( web accessibility evaluation tool ) , Chrome Developer Tools — Accessibility, Lighthouse, NVDA(스크린리더)
이번 주제를 정리하면서 참 많은 생각이 들었는데요. 초기 단계부터 이를 고려한 서비스를 만들어야한다는 경각심이 자연스레 생겼던 것 같습니다. 서비스 규모가 커지고 이를 신경 쓰려면 공수가 꽤나 클 것 같은 느낌이 들기도 하네요. 쉽다면 쉽고 간단하면 간단한 웹 접근성. 조금더 많은 개발자들이 이를 준수해 서비스를 개발하면 어떨까 싶은 생각입니다.
다들 이번주도 행코하시길 바라며 물러나보겠습니다 🙋
