테마 · 플러그인 입문
색 대비 — 회색 본문이 기준에서 탈락하는 자리
연한 회색 본문은 시안에서 가장 세련되어 보이고, 실제 화면에서 가장 먼저 읽히지 않습니다. 기준값 세 개만 알면 색을 고르는 그 자리에서 판단할 수 있습니다.
Technote
접근성은 품질이다
접근성을 규정 준수가 아니라 디자인 품질로 다루는 관점. 대비 · 초점 · 대체 텍스트 · 키보드 이동을 실제 화면 위에서 점검하는 방법을 정리합니다.
글 8편
SEO 입문
대체 텍스트 — 장식 이미지와 정보 이미지는 반대로 씁니다
모든 이미지에 설명을 붙이는 것이 정답이 아닙니다. 장식 이미지는 비워야 하고, 정보 이미지는 그림이 아니라 정보를 적어야 합니다.
테마 · 플러그인 실무
초점 표시를 지우지 않기 — outline: none 이 없애는 것
기본 초점 링이 디자인과 맞지 않는 것은 사실입니다. 다만 지우기만 하면 키보드 사용자의 커서가 통째로 사라집니다 — 지우는 대신 바꾸는 방법이 있습니다.
테마 · 플러그인 실무
키보드만으로 통과하기 — 순서가 화면과 어긋나는 자리
마우스를 손에서 놓고 Tab 키만으로 한 바퀴 돌면 5분 만에 문제가 드러납니다. 대부분은 CSS 가 화면 순서를 바꿔 놓은 자리입니다.
테마 · 플러그인 실무
폼 라벨과 오류 메시지 — 플레이스홀더는 라벨이 아닙니다
입력하기 시작하면 사라지는 글자는 라벨이 될 수 없습니다. 라벨을 지운 폼과 색으로만 오류를 알리는 폼이 사람을 잃는 방식은 서로 닮았습니다.
테마 · 플러그인 실무
모션 축소 설정 — 애니메이션이 꺼져도 콘텐츠는 남아야 합니다
모션을 줄여 달라는 설정은 취향이 아니라 증상에서 나옵니다. 그리고 그 설정을 켠 사람에게 화면이 텅 비는 사고는, 접근성을 신경 쓴 코드에서 더 자주 납니다.
SEO 실무
제목 계층 — h1 이 둘이면 화면과 색인이 함께 흐려집니다
제목은 글자 크기가 아니라 문서의 뼈대입니다. 크기로 고른 제목과 구조로 고른 제목이 어긋나기 시작하면, 목차가 사라진 문서가 됩니다.
개발 워크플로우 심화
점검 루틴 — 자동 검사가 잡는 것과 사람이 봐야 하는 것
자동 검사는 기계적으로 판정할 수 있는 부분을 빠르고 정확하게 잡습니다. 나머지 — 대체 텍스트가 맞는 말인지, 순서가 말이 되는지 — 는 사람만 알 수 있습니다.