본문으로 건너뛰기
가이드
이 페이지의 내용
  1. 키보드
  2. 스크린 리더
  3. 휴대폰과 태블릿
  4. 고대비와 동작
  5. 설정
  6. 콘텐츠 작성
페이지 도구

접근성

참고

이 페이지는 영어 원문의 번역입니다. 내용이 다르면 영어 문서가 우선합니다.

테마는 따로 설정하지 않아도 WCAG 2.2 AA를 목표로 합니다. 이 페이지는 테마가 독자를 위해 하는 일과, 이를 바꾸는 두 가지 설정을 정리합니다.

키보드

키 위치 동작
Tab 모든 페이지 첫 번째 위치는 “본문으로 건너뛰기”이며, 누르면 본문으로 포커스가 이동합니다
/ 또는 Ctrl+K (macOS는 Cmd+K) 검색이 있는 페이지 검색창으로 포커스 이동 (입력란에 입력 중일 때 /는 무시)
↓ ↑ 검색 결과 결과 사이를 이동하고 검색창으로 돌아가기
Esc 검색 결과에서 나가거나 검색창 비우기
← → Home End 탭 탭 전환. 오른쪽에서 왼쪽으로 쓰는 페이지에서는 좌우가 읽는 방향을 따릅니다
↓ ↑ Esc 언어 메뉴, 내비게이션 “더 보기” 메뉴, 페이지 동작 항목 사이 이동. Esc는 메뉴를 닫고 포커스를 되돌립니다
Tab 넓은 코드 블록과 표 가로로 스크롤되는 블록은 이름이 붙은 영역이 되어, 포커스한 뒤 화살표 키로 스크롤할 수 있습니다

포커스는 항상 보입니다. 탭, 패널, 스크롤 영역 안에서는 포커스 테두리가 잘리지 않도록 상자 안쪽에 그려집니다.

스크린 리더

랜드마크(헤더, 내비게이션, 본문, 푸터), 내비게이션·이동 경로·언어 메뉴의 현재 페이지 표시(aria-current), 아이콘 버튼·코드 블록·표의 이름이 기본으로 들어 있습니다. 이름은 lang:에 따라 23개 언어로 나옵니다(설정 참고). 아이콘은 이름이 없으면 장식으로 처리됩니다.

휴대폰과 태블릿

  • 안전 영역. 페이지가 노치, 둥근 모서리, 홈 표시줄 아래까지 그려지고, 헤더·좌우 여백·푸터는 그 영역을 피해 배치됩니다.
  • 터치 대상. 터치 화면에서는 헤더 링크, 메뉴, 탭, 복사 버튼, 페이지 이동 링크의 높이가 44 px 이상이고, 검색창 글자는 16 px라 iOS가 확대하지 않습니다.
  • 브라우저 색상. 주소창 색이 라이트·다크 모드의 페이지 배경과 맞춰집니다.

고대비와 동작

  • Windows 고대비(강제 색상)에서도 아이콘 버튼과 검색창의 테두리가 보입니다.
  • “동작 줄이기”를 켜면 전환 효과와 애니메이션이 꺼집니다.

설정

modootoday:
  viewport_fit: auto           # default: cover (draw under the notch with safe-area padding)
  theme_color: {light: "#ffffff", dark: "#0d1117"}  # or one "#hex", or false
키 기본값 효과
viewport_fit cover auto는 페이지를 안전 영역 안에 두고 여백을 브라우저에 맡깁니다
theme_color 페이지 배경 브라우저 막대 색. "#hex" 하나, {light, dark}, 또는 태그를 빼려면 false

직접 작성한 CSS에서는 --mt-safe-top, --mt-safe-right, --mt-safe-bottom, --mt-safe-left로 여백 값을 읽을 수 있습니다.

콘텐츠 작성

콘텐츠 자체는 테마가 고칠 수 없습니다. 흔한 문제는 게시 전에 modootoday-check가 알려 줍니다.

  • 이미지: 모든 이미지에 무엇을 보여 주는지 알 수 있는 alt 텍스트를 쓰세요(![5월 매출이 두 배로 늘었다](chart.png)). 정보가 없는 장식 이미지일 때만 alt를 비워 두세요. HTML <img>에 alt가 없으면 오류입니다.
  • 일러스트와 장식: include에 그린 장면은 <figure class="mt-illustration" role="img" aria-label="…">로 씁니다. 스크린 리더는 role=img의 자식을 읽지 않으므로, 레이블에 무엇을 보여 주는지와 .mt-illustration-tag 글자를 함께 넣으세요. 이것이 빠진 .mt-illustration은 modootoday-check가 알립니다. 순수한 장식은 decor:에 넣으면 테마가 보조 기술에서 숨깁니다.
  • 링크: 링크 문구만 읽어도 어디로 가는지 알 수 있어야 합니다. 빈 링크는 오류이고, “여기”나 “더 보기”는 경고입니다. 내려받는 파일은 형식을 함께 적으세요. 예: [가격표 (PDF, 2 MB)](prices.pdf).
  • 제목: 페이지 제목만 # 제목입니다. 본문은 ##부터 시작하고 단계를 건너뛰지 마세요(## 다음 ####는 경고). 스크린 리더 사용자는 제목 단계로 이동합니다.
  • 표: 모든 표에 머리글 행을 두고, 표 앞에 무엇을 나열하는지 알리는 문장이나 제목을 쓰세요.
  • ID: 한 페이지에서 같은 id를 두 번 쓰면 오류입니다. 앵커와 레이블이 깨집니다.
  • 언어: 번역한 페이지마다 lang:을 지정해야 스크린 리더가 알맞은 음성으로 읽습니다. 오른쪽에서 왼쪽으로 쓰는 언어에는 dir="rtl"이 자동으로 붙습니다.

검색 결과는 나타날 때 읽어 주고, 복사 버튼은 복사가 끝나면 알려 줍니다.

이 페이지 편집