누구나 읽기 쉬운 홈페이지를 만들고 싶다면 직접 확인할 수 있는 항목부터 보는 것이 좋습니다. 이미지에 같은 뜻의 글이 붙어 있는지, 글자와 배경 대비가 충분한지, 색만으로 정보를 구분하지 않는지, 키보드로도 이동할 수 있는지, 버튼이 누르기 쉬운 크기인지, 입력칸마다 이름표가 있는지 여섯 가지입니다.
이 항목들은 W3C가 만든 웹 콘텐츠 접근성 지침(WCAG)에 실제로 있는 기준에서 골랐습니다. 전문 도구가 없어도 화면을 보고, 키보드를 눌러 보고, 색을 바꿔 보는 것만으로 상당 부분을 확인할 수 있습니다.
웹 접근성 기준은 누가 만들었나요?
홈페이지 접근성을 이야기할 때 대표적으로 참고하는 기준은 W3C의 웹 콘텐츠 접근성 지침, WCAG입니다. W3C는 WCAG를 장애가 있는 사람이 웹 콘텐츠를 더 쉽게 이용할 수 있도록 하는 방법을 설명하는 문서라고 소개합니다. WCAG 2 가운데 가장 최근 판인 WCAG 2.2는 2023년 10월 5일에 발표됐고 2024년 12월 12일에 갱신판이 나왔습니다.
WCAG 2.2는 인식할 수 있어야 한다, 조작할 수 있어야 한다, 이해할 수 있어야 한다, 견고해야 한다는 네 가지 원칙 아래 13개 지침으로 짜여 있습니다. 지침마다 확인할 수 있는 성공 기준이 있고, 기준은 A, AA, AAA 세 단계로 나뉩니다. 이 글에서 고른 여섯 가지는 모두 A나 AA 단계의 기준입니다.
직접 확인할 여섯 가지는 무엇인가요?
기준 문서는 길지만 처음부터 전부 볼 필요는 없습니다. 화면을 보는 쪽에서 세 가지, 조작하는 쪽에서 세 가지를 먼저 확인해 보면 어디가 불편한지 감이 잡힙니다.
각 항목 옆에 WCAG 기준 번호를 함께 적어 두었습니다. 제작사와 이야기할 때 번호를 함께 말하면 어떤 부분을 뜻하는지 서로 같은 문서를 보며 확인할 수 있습니다.
이미지와 글자 색은 어떻게 확인하나요?
먼저 이미지입니다. WCAG 1.1.1은 글이 아닌 콘텐츠에 같은 목적을 하는 대체 텍스트를 두도록 정하고 있습니다. 화면을 읽어 주는 프로그램을 쓰는 사람은 이미지를 볼 수 없으니, 메뉴판이나 약도처럼 정보가 담긴 이미지라면 그 내용을 글로도 알려야 합니다. 꾸밈용 이미지까지 길게 설명할 필요는 없습니다.
다음은 글자와 배경의 대비입니다. WCAG 1.4.3은 본문 글자의 대비를 4.5:1 이상, 큰 글자는 3:1 이상으로 정하고 있습니다. 흰 배경에 연한 회색 글씨를 쓰면 보기에는 차분해 보여도 이 값에 못 미칠 수 있습니다. 색상 코드를 넣으면 대비 값을 계산해 주는 도구로 확인할 수 있습니다.
세 번째는 색만으로 구분하지 않기입니다. WCAG 1.4.1은 색을 정보 전달의 유일한 수단으로 쓰지 않도록 정하고 있습니다. 필수 칸을 빨간 점으로만 표시하거나 오류를 빨간 테두리로만 알리면 색을 구분하기 어려운 사람은 알아차리기 어렵습니다. '필수'라는 글자나 오류 문장을 함께 두면 됩니다.
키보드와 버튼, 입력칸은 어떻게 확인하나요?
마우스를 내려놓고 키보드의 Tab 키만으로 페이지를 지나가 보세요. WCAG 2.1.1은 모든 기능을 키보드로 조작할 수 있게 하도록, 2.4.7은 키보드로 이동할 때 지금 어디에 있는지 표시가 보이도록 정하고 있습니다. 메뉴나 상담 버튼에 닿지 못하거나, 어디에 있는지 표시가 보이지 않으면 고칠 곳입니다.
버튼과 링크의 크기도 봅니다. WCAG 2.2에 새로 들어온 2.5.8은 누르는 대상의 크기를 24×24 CSS 픽셀 이상으로 정하고, 간격이 충분한 경우 같은 예외를 두고 있습니다. 휴대폰에서 작은 아이콘이나 붙어 있는 링크를 눌러 보며 다른 곳이 눌리지 않는지 확인합니다.
마지막으로 입력칸입니다. WCAG 3.3.2는 입력이 필요한 곳에 이름표나 안내를 두도록 정하고 있습니다. 칸 안에 흐린 글씨로만 '이름'이라고 적어 두면 글자를 입력하는 순간 사라져서 무엇을 적던 칸인지 헷갈릴 수 있습니다. 칸 위에 이름표를 따로 두는 편이 안전합니다.
위 그림은 이해를 돕기 위한 가상의 상황이며 실제 고객 사례가 아닙니다. 같은 상담 폼이라도 글자 색, 이름표 위치, 필수 표시 방법, 버튼 크기만 바꿔도 여섯 가지 중 여러 항목이 함께 나아집니다. 디자인을 처음부터 다시 하지 않아도 고칠 수 있는 부분이 많다는 뜻입니다.
자동 검사 도구만 돌리면 충분하지 않나요?
검사 도구는 대비 부족이나 빠진 대체 텍스트처럼 기계로 찾을 수 있는 문제를 빠르게 알려 줍니다. 다만 W3C는 평가 도구가 모든 접근성 측면을 자동으로 확인할 수는 없고 사람의 판단이 필요하다고 안내합니다. 대체 텍스트가 붙어 있어도 내용이 이미지와 맞는지, 키보드 이동 순서가 자연스러운지는 직접 봐야 압니다.
또 이 글의 여섯 가지는 출발점일 뿐입니다. 공공기관이나 특정 업종처럼 접근성 요구가 따로 정해진 경우에는 적용되는 기준과 확인 방법이 다를 수 있습니다. 인증이나 의무 여부가 궁금하다면 해당 기관의 공식 안내나 전문 평가 기관에 확인하는 것이 안전합니다.
뉴클리어웹은 접근성을 어떻게 다루나요?
뉴클리어웹은 제작 안내에 적어 둔 대로 구현 단계에서 PC·태블릿·모바일 화면의 읽기, 링크, 화면 잘림과 겹침을 확인합니다. 뉴클리어웹 사이트 첫 화면에도 키보드로 이동하는 사람이 메뉴를 건너뛰고 본문으로 갈 수 있는 '본문 바로가기' 링크를 두고 있습니다.
다만 이 글의 여섯 가지를 확인했다고 해서 접근성 인증이나 특정 기준 충족을 뜻하지는 않습니다. 홈페이지 제작 상담 때 이 글의 여섯 가지 중 꼭 확인하고 싶은 항목을 알려 주시면 제작 범위를 정할 때 함께 살펴봅니다. 상담 방법은 무료 상담 신청하기 페이지에서 확인하실 수 있고, 전화 010-5611-8632로도 이야기를 시작할 수 있습니다.
자주 묻는 질문
접근성을 챙기면 디자인이 밋밋해지나요?
꼭 그렇지는 않습니다. 대비 기준은 색을 쓰지 말라는 뜻이 아니라 글자와 배경의 밝기 차이를 확보하라는 뜻이어서, 같은 브랜드 색 안에서도 짙기를 조절해 맞출 수 있습니다. 버튼 크기와 이름표도 화면 배치를 정할 때 함께 고려하면 됩니다.
이미 만든 홈페이지도 고칠 수 있나요?
글자 색, 대체 텍스트, 이름표처럼 내용과 스타일을 바꾸는 항목은 비교적 손대기 쉬운 편입니다. 키보드 이동처럼 화면 구조와 관련된 항목은 사이트가 어떻게 만들어졌는지에 따라 작업량이 달라지므로 먼저 현재 상태를 확인해 보는 것이 좋습니다.
모바일 사용성 점검과는 무엇이 다른가요?
모바일 점검은 휴대폰에서 읽고 누르고 문의하기가 불편한지를 봅니다. 접근성 점검은 시력이나 조작 방법이 다른 사람도 같은 정보를 얻고 같은 기능을 쓸 수 있는지를 봅니다. 휴대폰에서 직접 해 보는 점검 방법은 모바일 사용성 점검 글에, 입력칸 구성은 문의 폼 항목 글에 정리해 두었습니다.
