큰 글자가 필요한 사람, 키보드로 이동하는 사람, 화면을 읽어 주는 도구를 쓰는 사람도 내 페이지를 이해할 수 있어야 합니다. 접근성은 나중에 붙이는 장식이 아니라 처음부터 넣는 기본 설계입니다.
MDN 문서도 접근성을 가능한 많은 사람이 웹사이트를 사용할 수 있게 만드는 일이라고 설명합니다. 장애가 있는 사람뿐 아니라 작은 화면, 느린 환경, 피곤한 상태의 사용자에게도 도움이 됩니다.
아이콘만 있는 버튼은 무엇을 하는지 추측해야 합니다. 접근성 좋은 버튼은 “모임 신청”, “시간표 보기”처럼 행동 이름이 보여서 누르기 전에도 뜻을 알 수 있습니다.
연한 배경 위에 흐린 글자를 쓰면 작은 화면이나 햇빛 아래에서 더 읽기 어렵습니다. 접근성은 보기 좋은 색보다 먼저 읽히는 색을 고르는 습관입니다.
입력칸 안에 흐리게 적힌 글자만 있으면 입력을 시작하는 순간 무엇을 써야 했는지 잊기 쉽습니다. 접근성 좋은 폼은 입력칸 밖에 라벨과 도움말이 따로 있습니다.
WebAIM Contrast Checker 같은 도구를 쓰면 글자색과 배경색의 대비를 직접 검사할 수 있습니다. 눈으로 예뻐 보이는 것과 읽기 쉬운 것은 다를 수 있기 때문에 이런 도구가 도움이 됩니다.
좋은 alt 설명은 사진 속 모든 것을 길게 적는 설명이 아닙니다. 이 이미지가 지금 왜 필요한지, 페이지에서 어떤 뜻을 전달하는지를 짧게 말해 주는 것이 더 좋습니다.
Tab 키로 메뉴, 버튼, 신청 폼을 차례대로 움직일 수 있으면 키보드 사용자도 길을 잃지 않습니다. 현재 어디에 있는지도 눈에 보여야 합니다.
Chrome DevTools 문서도 접근성 기능과 검사 흐름을 안내합니다. 자동 검사로 잡을 수 있는 문제와 직접 키보드로 확인해야 하는 문제를 함께 생각해야 합니다.
“예쁘게 만들어줘”라는 말만으로는 접근성이 생기지 않습니다. 버튼 이름, 읽기 쉬운 대비, alt 설명, Tab 이동처럼 점검할 규칙을 같이 적어야 AI가 안정적으로 반영합니다.
접근성은 분위기로 생기지 않습니다. 무엇이 읽혀야 하고, 무엇이 들려야 하고, 무엇이 이동 가능해야 하는지를 적는 순간 AI 결과가 훨씬 또렷해집니다.
집에서는 만들고 싶은 페이지를 하나 정한 뒤, 버튼 이름 2개, 고쳐야 할 색 1곳, 이미지 alt 설명 1개, Tab으로 먼저 가야 할 버튼 1개를 적어 옵니다. 다음 시간에는 이 점검표를 AI 명령으로 바꿉니다.
접근성은 일부 사람만을 위한 특별 기능이 아니라, 더 많은 사람이 같은 페이지를 읽고 찾고 이동할 수 있게 만드는 기본 설계입니다. 버튼 이름, 글자 대비, 이미지 설명, 키보드 이동처럼 작은 규칙부터 챙기면 웹페이지가 훨씬 쓰기 쉬워집니다.
독서 모임 소개 페이지를 만들어줘. 버튼은 '모임 신청', '시간표 보기'처럼 행동 이름이 보이게 해줘. 글자와 배경은 읽기 쉬운 대비로 잡아줘. 이미지에는 짧은 alt 설명을 넣어줘. Tab 키로 버튼과 링크를 순서대로 이동할 수 있게 해줘.
버튼 이름 2개: ________________________________
읽기 어려운 색 1곳: ___________________________
이미지 alt 설명 1개: __________________________
Tab으로 먼저 가야 할 버튼: ____________________
접근성: 더 많은 사람이 같은 페이지를 쓸 수 있게 만드는 설계입니다.
대비: 글자와 배경이 서로 얼마나 또렷하게 구분되는지입니다.
alt 설명: 이미지를 보지 못해도 역할을 알 수 있게 해 주는 짧은 글입니다.
초점 표시: 키보드 이동 중 지금 어디에 있는지 보여 주는 표시입니다.