접근성을 위한 CSS와 타이포그래피

CSS와 접근성의 관계

CSS는 보이는 모습을 정한다. 대부분의 CSS는 스크린 리더가 읽는 내용에 영향을 주지 않지만, 몇 가지는 직접 바꾼다.

또 하나의 전제가 있다. 사용자는 작성자의 CSS를 덮어쓴다. 저시력 사용자는 글자를 키우고 고대비 색을 쓰고, 난독증 사용자는 글꼴과 간격을 바꾸고, 인지 장애 사용자는 단순한 레이아웃을 쓴다. 브라우저의 강제 색상 모드(forced-colors)도 작성자 색을 무시한다. 그래서 페이지는 사용자의 스타일 변경을 견디도록 만들어야 한다.

의미는 HTML에, 표현은 CSS에

CSS를 끄거나 사용자 스타일로 바꿔도 내용과 의미가 남아야 한다(성공 기준 1.3.1 Info and Relationships). CSS로만 만든 의미는 보조 기술에 전달되지 않는다.

시맨틱 태그 선택은 시맨틱 HTML과 문서 구조에 있다.

소스 순서 = 화면 순서

스크린 리더는 내용을 한 줄로 늘어놓아(linearization) 처음부터 순서대로 읽는다. 화면을 보는 사람처럼 레이아웃 전체를 한눈에 훑을 수 없다. 그래서 소스 순서가 곧 듣는 순서이고 Tab 순서다(성공 기준 1.3.2 Meaningful Sequence, 2.4.3 Focus Order).

/* 피한다: 화면에서는 사이드바가 먼저, 읽기와 Tab은 main이 먼저 */
.layout aside { order: -1; }
 
/* 소스 순서대로 배치한다 */
.layout { display: grid; grid-template-columns: 2fr 1fr; }

CSS의 reading-flow 속성은 그리드·플렉스의 시각 순서를 읽기·포커스 순서에 반영하려는 새 기능이다. 지원 브라우저가 제한적이므로, 지금은 소스 순서를 바로 쓰는 것이 기본이다.

숨기기: 누구에게서 숨기나

숨김 방법을 고르는 기준은 하나다. 화면을 보는 사람과 스크린 리더 사용자 모두에게 원하는 결과가 나오는가.

visually-hidden 패턴

오래된 패턴은 left: -10000px로 화면 밖에 밀어냈다. 지금은 제자리에서 1px로 잘라 내는 방식이 표준이다. 위치를 옮기지 않으니 RTL 문서와 스크롤 위치 문제가 없다. clip은 폐기된 속성이라 clip-path를 쓴다.

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap; /* 단어마다 줄바꿈되어 붙어 읽히는 문제를 막는다 */
}

:not(:focus):not(:active)를 붙이면 포커스를 받는 순간 보인다. Bootstrap의 .visually-hidden과 Tailwind의 sr-only가 이 계열이다.

<button>
  <svg aria-hidden="true" focusable="false">…</svg>
  <span class="visually-hidden">검색</span>
</button>
 
<nav aria-label="이동 경로">
  <span class="visually-hidden">현재 위치:</span> 홈 › 문서
</nav>

• 아껴 쓴다. 내용은 원래 두 사용자에게 같아야 한다. 숨긴 텍스트는 시각적으로만 전달되는 의미를 보충할 때만 쓴다.
• 링크·버튼처럼 포커스 가능한 요소를 visually-hidden으로 숨기지 않는다. 보이지 않는 곳에 포커스가 간다. 예외는 포커스 때 나타나는 경우다.
• 숨긴 텍스트 앞뒤에 공백을 둔다. 인라인 <span> 사이에 공백이 없으면 스크린 리더가 앞뒤 단어를 한 단어로 붙여 읽는다(Privacy Policy<span>새 창</span> → 「Policy새」). 화면에 보이지 않아 놓치기 쉬우니 CSS를 끄거나 NVDA 음성 뷰어(Speech Viewer)로 읽힌 글을 확인한다.
• 건너뛰기 링크(skip link)가 그 예외다. 평소에는 숨기고 포커스를 받으면 보이게 한다. 갑자기 나타나면 당황할 수 있으므로 전환 효과를 주기도 한다. 건너뛰기 링크의 역할은 접근 가능한 페이지 구조에 있다.

.skip-link { position: absolute; transform: translateY(-120%); }
.skip-link:focus { transform: translateY(0); }

확대와 리플로: 1.4.10 Reflow

저시력 사용자는 화면을 크게 확대한다. 난독증 같은 학습 장애가 있는 사람도 확대로 읽기 부담을 줄인다. 확대하면 CSS 뷰포트가 좁아지는데, 이때 레이아웃이 좁은 화면에 맞게 다시 배치되는 것이 리플로(reflow)다. 리플로가 안 되면 한 줄을 읽을 때마다 가로로 스크롤해야 해서 매우 읽기 힘들다.

320 CSS px는 1280px 폭 화면을 400% 확대한 크기와 같다.

예외: 2차원 배치가 의미의 일부인 콘텐츠다. 지도, 다이어그램, 동영상, 게임, 프레젠테이션, 데이터 표, 콘텐츠를 다루는 동안 툴바가 보여야 하는 인터페이스. 예외라도 그 부분만 가로로 스크롤되고 페이지 전체는 리플로돼야 한다.

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 1rem; }
.table-wrap { overflow-x: auto; }       /* 표만 가로 스크롤 */
img, video { max-width: 100%; height: auto; }
pre { white-space: pre-wrap; }          /* 코드 블록이 페이지를 넓히지 않게 */

• 브레이크포인트는 em·rem으로 잡으면 글자 확대에도 반응한다. 브레이크포인트와 상대 단위는 반응형 디자인과 다국어 타이포그래피에 있다.
• 뷰포트 메타에 user-scalable=no나 maximum-scale=1을 넣어 확대를 막지 않는다.
• 고정 헤더·쿠키 배너는 확대하면 화면 대부분을 덮는다. 좁은 뷰포트에서는 고정을 풀거나 접는다.

테스트: 브라우저 창을 1280px 폭으로 맞추고 Ctrl/Cmd + +로 400%까지 키운다. 단계마다 내용과 기능이 그대로인지, 가로 스크롤이 생기지 않는지, 겹치는 요소가 없는지, 대화 상자·아코디언·툴팁·메뉴가 여전히 쓰이는지 본다. DevTools 기기 모드에서 폭 320px로 봐도 된다.

텍스트 간격: 1.4.12 Text Spacing

1.4.12 Text Spacing (AA)은 사용자가 아래 값까지 간격을 넓혀도 내용이나 기능이 사라지지 않을 것을 요구한다. 작성자가 이 값을 써야 한다는 뜻이 아니라, 사용자가 이렇게 바꿔도 견뎌야 한다는 뜻이다.

/* 이 스타일을 북마클릿·확장 프로그램으로 주입해 테스트한다 */
* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
p { margin-bottom: 2em !important; }

간격을 넓히면 텍스트가 길어진다. 깨지는 원인은 대부분 고정 크기 상자다.

글꼴 고르기

사람은 글자를 하나씩 읽지 않고 6~9자 정도의 덩어리를 패턴으로 알아본다. 이 흐름을 끊고 글자를 해독하게 만드는 모든 것이 가독성을 떨어뜨린다.

• 글자 크기: WCAG에 최소 크기는 없다. 그래도 작은 글자는 사용성을 해친다. 사용자의 브라우저 글자 크기 설정을 따르도록 rem·em·%로 준다. 대비 기준과 큰 텍스트 정의는 색과 움직임의 접근성에 있다.
• 대비는 최대가 정답이 아니다. 순수한 검정·흰색 조합은 눈이 쉽게 피로하고, 일부 난독증 독자에게 글자가 번지거나 겹쳐 보이는 효과를 준다. 기준을 넘는 범위에서 약간 부드러운 색이 낫다.
• 이미지 텍스트를 쓰지 않는다(성공 기준 1.4.5 Images of Text). 실제 텍스트는 사용자가 크기·글꼴·색·간격을 바꾸고, 번역하고, 복사하고, 리플로할 수 있다. 이미지 속 글자는 이 모두를 잃고 확대하면 깨진다. 로고는 예외다.
• 웹폰트는 접근성 문제가 아니다. 텍스트가 실제 텍스트로 남아 있으면 스크린 리더는 글꼴과 무관하게 읽는다. 문제는 가독성이 낮은 글꼴을 고르는 것이다. 웹폰트 선언과 로딩은 웹 타이포그래피: 가독성, 글줄 길이, 웹폰트에 있다.

텍스트 배치

스크린 리더를 고려한 설계

스크린 리더 사용자는 페이지를 처음부터 끝까지 듣지 않는다. 숙련자는 분당 300단어 넘는 속도로 듣고, 요소 단위로 건너뛴다.

• 문서 언어를 <html lang="ko">로 정하고, 다른 언어 구절에는 그 요소에 lang을 단다. 발음 엔진과 자동 번역이 이 값을 쓴다.
• 스크린 리더는 구두점과 문단 끝에서 쉬고, 발음할 수 있는 약어는 단어로, 아니면 한 글자씩 읽는다. 비밀번호 칸은 "별표"로 읽는다. 철자가 같고 발음이 다른 단어와 기호는 설정에 따라 다르게 읽힌다.
• 스크린 리더마다 단축키와 알림 방식이 다르다. 특정 제품에 맞춰 코딩하지 말고 표준과 일반 기법을 따른다.
• 화면을 보면서 스크린 리더를 쓰는 사람이 많다. 시각장애인 다수는 전맹이 아니라 저시력이어서, 읽히는 곳이 화면에도 보여야 맥락을 잡는다. 숨긴 콘텐츠를 음수 위치로 밀어내면 읽는 순간 화면이 위로 튀고, 약관처럼 긴 글을 overflow: auto 상자에 넣으면 스크린 리더에 따라 읽는 위치를 따라 상자가 스크롤되지 않는다. 긴 글은 페이지 스크롤로 펼치거나 화면을 거의 채우는 대화 상자로 보여 주고, 상자 안 스크롤은 줄인다.

페이지 구조(제목·랜드마크·표)는 접근 가능한 페이지 구조에, 링크 텍스트는 대체 텍스트, 링크, 쉬운 글에, 실제 스크린 리더 조작은 스크린 리더로 테스트하기에 있다.

정리

• 의미는 HTML이 지고 CSS는 표현만 맡는다. 소스 순서를 화면 순서와 맞춘다.
• 숨길 때는 모두에게 숨길지, 화면에서만 숨길지 먼저 정한다. 화면에서만 숨길 때는 clip-path: inset(50%) 기반 visually-hidden 패턴을 쓰고, 포커스 가능한 요소는 숨기지 않는다.
• 320 CSS px(400% 확대)에서 두 방향 스크롤 없이 읽혀야 하고, 사용자가 줄·문단·자간·단어 간격을 넓혀도 고정 크기 상자가 내용을 자르지 않아야 한다.
• 글꼴은 익숙하고 글자 구분이 쉬운 것으로 적게 쓰고, 텍스트는 이미지가 아닌 실제 텍스트로 둔다.
• 사용자가 스타일을 바꿔도 견디는 페이지가 접근 가능한 페이지다.

관련 노트: 웹 타이포그래피: 가독성, 글줄 길이, 웹폰트, 반응형 디자인과 다국어 타이포그래피, 색과 움직임의 접근성, 시맨틱 HTML과 문서 구조, 접근 가능한 폼과 오류 처리, 접근 가능한 페이지 구조, 스크린 리더로 테스트하기