친절한 웹사이트가 되는 법(5분컷 웹 접근성 기초)
당신의 웹사이트, 모두에게 열려 있나요? 5분 만에 실천하는 웹 접근성 기초
우리가 만드는 웹사이트는 과연 '모두'를 위한 공간일까요? 웹 개발을 시작할 때 우리는 종종 기능과 디자인에 집중한 나머지, 누군가에게는 이 웹사이트가 넘을 수 없는 벽이 될 수 있다는 사실을 잊곤 합니다.
웹 접근성(Web Accessibility)이란 장애의 여부나 신체 능력과 관계없이 누구나 웹사이트의 정보에 동등하게 접근하고 이용할 수 있도록 보장하는 것을 의미합니다. 이는 단순히 시각장애인만을 위한 개념이 아닙니다. 깁스를 해서 마우스를 쓰기 힘든 상황, 안경을 잃어버려 화면이 잘 보이지 않는 순간, 나이가 들어 눈이 침침해진 우리 부모님까지, 웹 접근성은 결국 미래의 나와 우리 모두를 위한 배려입니다.
'그림으로 쉽게 배우는 HTML+CSS+자바스크립트' 12장에서는 이 중요한 주제를 다루고 있습니다. 오늘은 이 책의 내용을 바탕으로, 개발 초보자도 당장 5분 안에 실천할 수 있는 웹 접근성 기초 3가지를 알아보겠습니다.
"이 이미지는 무엇인가요?" - alt 속성으로 그림에 이름표 달아주기
시각장애인들은 화면의 내용을 음성으로 읽어주는 스크린 리더(Screen Reader)라는 보조 프로그램을 사용해 웹을 이용합니다. 스크린 리더는 텍스트를 훌륭하게 읽어주지만, 이미지는 분석할 수 없습니다.
이때 필요한 것이 바로 <img> 태그의 alt 속성입니다.
작동 방식
스크린 리더는 이미지를 만나면 alt 속성에 적힌 텍스트를 사용자에게 읽어줍니다. 만약 alt 속성이 없다면 어떻게 될까요? 스크린 리더는 "image_123.jpg"와 같이 의미 없는 파일 경로를 읽어버려 사용자에게 큰 혼란을 줍니다.
실전 사례
단순히 alt 속성을 추가하는 것만으로도 웹 접근성은 크게 향상됩니다.
HTML
<img src="dog.jpg" alt="공원에서 원반을 물고 있는 골든 리트리버">
<img src="dog.jpg">
꿀팁: 장식용 이미지는 alt=""로 비워두세요!
만약 아이콘처럼 의미 전달보다는 순수하게 디자인을 위한 장식용 이미지라면 alt 속성을 비워두는 것이 좋습니다. 이렇게 하면 스크린 리더가 불필요한 정보를 읽지 않고 그냥 지나치게 됩니다.
"글씨가 잘 안 보여요!" - 명도 대비로 가독성 확보하기
옅은 회색 배경에 흰색 글씨. 디자인적으로는 멋져 보일지 몰라도, 저시력자나 노년층에게는 전혀 읽을 수 없는 텍스트일 수 있습니다. 웹 접근성의 국제 가이드라인(WCAG)에서는 텍스트와 배경색의
명도 대비를 최소 4.5:1 이상으로 유지할 것을 권장합니다.
작동 방식
명도 대비는 두 색상 간의 밝기 차이를 의미합니다. 이 비율이 높을수록 텍스트를 더 쉽게 읽을 수 있습니다. 복잡한 계산은 필요 없습니다. 웹에는 명도 대비를 쉽게 확인할 수 있는 무료 도구들이 많이 있습니다.
실전 사례
'WebAIM Contrast Checker'나 'Stark' 같은 도구를 검색해 보세요. 내가 사용하려는 텍스트 색상과 배경 색상의 코드를 입력하기만 하면 즉시 명도 대비 비율과 통과 여부(Pass/Fail)를 알려줍니다.
3. "마우스를 쓸 수 없어요!" - 키보드만으로 길 찾기
손 떨림이나 신체적 제약으로 마우스를 사용하기 어려운 사람들은 키보드나 다른 보조 기기로 웹을 탐색합니다. 따라서 웹사이트의 모든 기능은 키보드만으로도 완벽하게 조작 가능해야 합니다.
작동 방식
키보드의 Tab 키를 누르면 링크, 버튼, 입력창 등 상호작용이 가능한 요소들 사이를 차례로 이동합니다. 이때 현재 선택된 요소를 알려주는 파란색 테두리를 '초점(Focus)'이라고 합니다10.
실전 사례
지금 당장 여러분의 웹사이트에서 마우스를 손에서 떼고 Tab 키를 눌러보세요.
초점(Focus)이 잘 보이나요? 디자인을 해친다는 이유로 이 초점 테두리를 없애는 경우가 있는데, 이는 키보드 사용자가 길을 잃게 만드는 것과 같습니다. 절대 초점을 숨기지 마세요.
이동 순서가 논리적인가요? 초점은 위에서 아래로, 왼쪽에서 오른쪽으로, 즉 우리가 글을 읽는 순서와 동일하게 이동해야 합니다. 순서가 뒤죽박죽이라면 사용자는 큰 혼란을 겪게 됩니다.
마치며
오늘 소개한 alt 속성 추가, 명도 대비 확인, 키보드 사용성 점검은 웹 접근성을 위한 수많은 지침 중 가장 기본적이고 실천하기 쉬운 3가지 방법입니다. 이 작은 변화만으로도 여러분의 웹사이트는 훨씬 더 많은 사람들에게 열린 공간이 될 수 있습니다.
'그림으로 쉽게 배우는 HTML+CSS+자바스크립트'는 개발의 기초뿐만 아니라 이처럼 모두를 포용하는 개발자가 되기 위한 중요한 가치까지 알려줍니다. 오늘 배운 내용을 시작으로, 더 많은 사람이 장벽 없이 정보를 얻을 수 있는 멋진 웹을 함께 만들어 나가길 바랍니다.
웹 개발을 처음 배우려고 할 때 가장 먼저 드는 생각은 “대체 어디서부터 시작해야 하지?”입니다. 낯선 용어, 익숙하지 않은 코드, 구조를 이해하기 어려운 화면 구성 등 초보자 입장에서 웹 개발을 배우는 일은 쉽지 않습니다.
『그림으로 쉽게 배우는 HTML+CSS+자바스크립트』는 이러한 고민을 가진 분들을 위해 만들어진 책입니다. 웹 페이지의 뼈대를 구성하는 HTML, 스타일을 담당하는 CSS, 동적인 기능을 구현하는 자바스크립트까지, 웹 개발의 핵심 기술을 그림과 실생활 비유를 활용해 누구나 이해하기 쉽게 풀어냈습니다.
