페이지를 읽기 쉽게 만드는 작은 선택들

페이지는 앞에 앉은 사람이 실제로 쓸 수 있어야 쓸모가 있습니다. 키보드, 작은 화면, 오른쪽에서 왼쪽으로 읽는 글자로도 ipe.rest 를 더 쉽게 읽게 하는 작은 선택들과, 아직 확인하지 못한 것을 적었습니다.

지난번에는 이 사이트가 연결 없이도 열리는 방식을 설명했습니다. 이번 글은 읽는 일 자체에 관한 것입니다. 아래 내용은 모두 키 하나를 누르거나 브라우저의 도구를 열어 직접 확인할 수 있습니다.

메뉴를 건너뛰는 길

언어 페이지와 저널 페이지 어디서든 Tab 키를 누르면 가장 먼저 “본문으로 건너뛰기”라는 링크에 닿습니다. 키보드가 닿기 전에는 보이지 않다가, 닿으면 페이지 위쪽에 나타납니다. 이 링크를 따라가면 머리글을 하나씩 거치지 않고 곧바로 본문으로 갑니다.

지금 어디에 있는지 늘 보입니다

키보드로 움직일 때 지금 있는 링크나 버튼에는 약간의 간격을 둔 2픽셀 파란 테두리가 생깁니다. 브라우저 기본 테두리를 그냥 지우지 않고, 더 또렷한 이 테두리로 바꿨습니다. 눈으로 따라갈 수 없는 페이지는 쓸 수 없는 페이지이기 때문입니다.

손으로 누르기 충분히 크고, 키우기 쉽게

머리글, 바닥글, 언어 전환의 링크와 버튼은 높이가 44픽셀 이상이라 엄지손가락으로 누를 수 있습니다. 본문 글자는 데스크톱에서 17픽셀, 휴대폰에서 16픽셀이고 줄 사이를 넉넉히 비웠으며, 긴 단어와 웹 주소는 페이지를 옆으로 밀어내지 않고 줄을 바꿉니다.

페이지는 핀치 확대를 막지 않으므로 브라우저가 허용하는 만큼 키울 수 있습니다. 그리고 시스템이 움직임 줄이기를 요청하면 사이트는 전환 효과와 부드러운 스크롤을 끕니다.

계산할 수 있는 대비

본문 글자는 거의 흰 바탕 위의 짙은 남색이고, 대비비는 약 17 대 1 입니다. 보조 글자의 회색은 약 6 대 1, 링크의 파란색은 약 6.6 대 1 입니다. 흔히 쓰는 지침은 최소 4.5 대 1 을 요구합니다. 이 숫자는 스타일시트의 색상값을 표준 공식에 넣어 계산한 것이고, 감사 도구로 잰 것이 아닙니다.

모든 언어를, 그 언어의 방향으로

각 페이지는 자신의 언어를 선언하고, 아랍어 페이지는 오른쪽에서 왼쪽을 선언합니다. 배치는 왼쪽·오른쪽 대신 시작과 끝을 기준으로 해서, 건너뛰기 링크와 목록, 들여쓰기가 글자와 함께 뒤집힙니다. 브라우저와 보조 도구는 언어 선언을 보고 알맞은 음성이나 글꼴을 고를 수 있습니다.

아직 하지 않은 것

정식 접근성 감사는 하지 않았고, 모든 화면 낭독기로 시험해 보지도 않았습니다. 사이트에는 밝은 색 구성 하나만 있고 어두운 구성은 없습니다. 읽는 데 걸리는 것이 있으면 문의 페이지로 알려 주세요. 저희가 살펴보겠습니다.

ipe(); // read it the way that works for you

영리한 것은 없습니다. 지우지 않기로 한 기본값 몇 가지를 모아 둔 목록일 뿐이고, 여러분에게 차분하게 남아 있는 페이지는 누구에게나 읽기 쉽습니다.