메인으로 이동

| 웹 접근성은 눈에 보이지 않아 중요도에서 밀리기 일쑤입니다. 이번 글에서는 실무자의 부담은 줄이고 웹 접근성은 지키는 방법과 대체 텍스트의 작성 부담을 줄이는 팁을 제안합니다.

안녕하세요. 플랜아이 DX사업본부 디자인그룹 UD3팀 조민지입니다.

디자이너와 퍼블리셔에게 '웹 접근성'은 프로젝트의 숙제처럼 느껴질 때가 많습니다. 막바지에 '아 맞다!'라는 생각이 들어서야 부랴부랴 챙기는 경우도 왕왕 생기죠. 웹접근성에 대해 고민하며 공부하다 보니, '지침'을 지키는 것 이상의 의미를 깨달았습니다. 오늘은 왜 웹접근성이 우리 실무에서 '나중'으로 밀려서는 안 되는지 그 진솔한 생각을 함께 나누고 싶습니다.

접근성은 모두가 언젠가 겪는 문제입니다

예전에 접근성 관련 강의를 들으며 정말 깊이 공감했던 이야기가 있습니다.

"사고로 몸이 불편해지는 것만이 장애가 아닙니다. 우리 모두는 결국 나이가 들고 노안이 오죠. 화면의 작은 글씨가 안 보이고, 대비가 낮은 버튼을 찾기 힘들어지는 순간, 우리 모두는 '접근성'의 직접적인 대상자가 됩니다."

브라우저 글자가 작아 화면을 확대해 본 적이 있다면, 이미 접근성 기술의 도움을 받아 본 것입니다.

접근성은 미래의 나와 부모님이 디지털 서비스를 불편 없이 쓰게 하는 일입니다. 동시에 지금도 접근성을 활용해 서비스를 쓰는 이용자가 있다는 점을 잊으면 안 됩니다.

아누타가 있는 회사이기에 더 놓칠 수 없습니다

플랜아이에는 자회사 아누타가 있습니다. 아누타는 장애인 구성원이 AI 기술로 디지털 콘텐츠를 창작하고 전문가로 성장하도록 돕습니다.

접근성이 없는 서비스와 업무 도구는 장애인 구성원에게 일을 시작할 수 없는 도구가 됩니다. 접근성은 누군가에게 직업을 가질 수 있는지를 가르는 조건이고, 세상과 소통하는 통로입니다. 코드 한 줄을 신경 쓰는 일이 곧 동료가 일할 자리를 지키는 일입니다.

접근성이 밀리는 진짜 이유는 보이지 않아서입니다

프로젝트 과정에서 접근성이 후순위가 되는 이유는 눈에 바로 보이지 않기 때문입니다. 화려한 디자인과 애니메이션엔 곧바로 반응이 오지만, 스크린 리더가 잘 읽도록 마크업을 짜거나 키보드 탭 이동 순서를 다듬는 일은 잘되어 있을 땐 알아채지 못합니다. 안 되어 있을 때만 누군가에게 높은 벽이 됩니다.

먼저 챙길 3가지

1. 이름 없는 버튼

스크린 리더 사용자에게 이름 없는 아이콘 버튼은 그냥 "버튼"으로 읽힙니다. 읽히는 이름(접근 가능한 이름)은 버튼 안의 텍스트나 aria-label로 정해집니다. role은 "이것이 버튼이다"라는 역할을 알려 주고, 이름은 텍스트나 aria-label이 맡습니다. 그래서 순서는 이렇습니다.

• 가능하면 같은 기본 HTML 요소를 쓴다
• 아이콘만 있는 버튼에는 "닫기", "검색"처럼 동작을 알려 주는 aria-label을 단다
• ARIA는 기본 요소로 해결되지 않을 때 보완용으로 쓴다

2. 확대하면 깨지는 화면

저시력 사용자는 확대 프로그램이나 브라우저 확대로 화면을 크게 키워 봅니다. 이때 글자가 겹치거나 잘리면 정보를 읽을 수 없고, 텍스트가 이미지로만 되어 있으면 확대할수록 흐려집니다. 텍스트 크기를 200%까지 키워도 내용이 사라지지 않는지, 좁은 폭에서 가로 스크롤 없이 읽히는지 확인해야 합니다.

3. 대체 수단 없는 영상

영상에는 두 방향의 대체 수단이 필요합니다. 자막은 소리를 듣기 어려운 이용자를 위한 수단입니다. 화면을 볼 수 없는 이용자는 영상에 글자가 나와도 읽을 수 없으므로, 화면으로만 전달되는 정보는 화면해설이나 대본 같은 텍스트로 따로 제공해야 합니다.

대체 텍스트 작성은 AI로 줄이되 검수는 사람이 합니다

"중요한 건 알겠는데 대체 텍스트를 언제 다 쓰나"라는 고민은 실무자라면 누구나 합니다. 이 부담을 줄이려고 개인적으로 OpenAI API를 활용한 대체 텍스트 생성 툴을 만들어 쓰고 있습니다. 이미지를 넣으면 AI가 OCR로 이미지 속 글자를 추출하고 내용을 분석해 alt 초안을 만들어 줍니다.

다만 결과는 초안입니다. 글자를 그대로 옮긴다고 좋은 alt가 되지는 않으므로 사람이 아래 기준으로 확인합니다.

• 글자가 담긴 이미지는 그 글자를 전달한다
• 정보를 담은 이미지(그래프, 도식)는 핵심 의도를 짧게 전달한다
• 장식 이미지는 alt를 비워 스크린 리더가 건너뛰게 한다

AI는 시간을 줄여 주고, 무엇을 전달해야 하는지 판단하는 일은 사람의 몫으로 남습니다.

의지에 기대지 않고 구조로 지킵니다

접근성이 밀리는 이유는 잘되어 있을 때 아무도 알아채지 못하기 때문입니다. 보이지 않는 일을 의지에 맡기면 마감 앞에서 가장 먼저 빠집니다. 그래서 점검 항목과 도구 같은 구조로 정하고 있습니다.

• 이름 있는 버튼, 확대해도 읽히는 화면, 대체 수단이 있는 영상을 시안과 마크업 단계의 점검 항목에 넣어 막바지 숙제가 되지 않게 합니다.
• 반복 작업은 도구로 덜어냅니다. 대체 텍스트처럼 양이 많은 일은 AI로 초안을 만들어 부담을 줄입니다.
• 판단은 사람이 합니다. 무엇을 전달해야 하는지는 검수에서 사람이 정합니다.

alt 텍스트 하나, 시맨틱 태그 한 줄은 만드는 쪽에서 몇 분이면 끝납니다. 그 몇 분이 쌓이면 누군가에게는 포기하지 않아도 되는 웹이 되죠. 접근성을 챙기는 일은 서비스의 잠재 고객과 동료를 문밖으로 밀어내지 않는 일이고, 그 혜택은 나에게도 돌아옵니다. 그래서 플랜아이는 프로젝트 초기부터 웹접근성 점검 기준을 적용하고 있습니다.

플랜아이의 디지털전환 사업이 궁금하시다면 디지털전환 사업 알아보기 페이지를 확인해 보세요.

글 · 조민지 (DX사업본부 디자인그룹 UD3팀 팀장)
편집 · 김현정 (리추얼팀 매니저)