# 접근성 > [!NOTE] > 이 페이지는 [영어 원문](../../../guides/accessibility/)의 번역입니다. 내용이 다르면 영어 문서가 우선합니다. 테마는 따로 설정하지 않아도 WCAG 2.2 AA를 목표로 합니다. 이 페이지는 테마가 독자를 위해 하는 일과, 이를 바꾸는 두 가지 설정을 정리합니다. ## 키보드 | 키 | 위치 | 동작 | |---|---|---| | `Tab` | 모든 페이지 | 첫 번째 위치는 "본문으로 건너뛰기"이며, 누르면 본문으로 포커스가 이동합니다 | | `/` 또는 `Ctrl`+`K` (macOS는 `Cmd`+`K`) | 검색이 있는 페이지 | 검색창으로 포커스 이동 (입력란에 입력 중일 때 `/`는 무시) | | `↓` `↑` | 검색 결과 | 결과 사이를 이동하고 검색창으로 돌아가기 | | `Esc` | 검색 | 결과에서 나가거나 검색창 비우기 | | `←` `→` `Home` `End` | 탭 | 탭 전환. 오른쪽에서 왼쪽으로 쓰는 페이지에서는 좌우가 읽는 방향을 따릅니다 | | `↓` `↑` `Esc` | 언어 메뉴, 내비게이션 "더 보기" 메뉴, 페이지 동작 | 항목 사이 이동. `Esc`는 메뉴를 닫고 포커스를 되돌립니다 | | `Tab` | 넓은 코드 블록과 표 | 가로로 스크롤되는 블록은 이름이 붙은 영역이 되어, 포커스한 뒤 화살표 키로 스크롤할 수 있습니다 | 포커스는 항상 보입니다. 탭, 패널, 스크롤 영역 안에서는 포커스 테두리가 잘리지 않도록 상자 안쪽에 그려집니다. ## 스크린 리더 랜드마크(헤더, 내비게이션, 본문, 푸터), 내비게이션·이동 경로·언어 메뉴의 현재 페이지 표시(`aria-current`), 아이콘 버튼·코드 블록·표의 이름이 기본으로 들어 있습니다. 이름은 `lang:`에 따라 23개 언어로 나옵니다([설정](../configuration/#언어) 참고). 아이콘은 이름이 없으면 장식으로 처리됩니다. ## 휴대폰과 태블릿 - **안전 영역.** 페이지가 노치, 둥근 모서리, 홈 표시줄 아래까지 그려지고, 헤더·좌우 여백·푸터는 그 영역을 피해 배치됩니다. - **터치 대상.** 터치 화면에서는 헤더 링크, 메뉴, 탭, 복사 버튼, 페이지 이동 링크의 높이가 44 px 이상이고, 검색창 글자는 16 px라 iOS가 확대하지 않습니다. - **브라우저 색상.** 주소창 색이 라이트·다크 모드의 페이지 배경과 맞춰집니다. ## 고대비와 동작 - Windows 고대비(강제 색상)에서도 아이콘 버튼과 검색창의 테두리가 보입니다. - "동작 줄이기"를 켜면 전환 효과와 애니메이션이 꺼집니다. ## 설정 ```yaml 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 ``에 `alt`가 없으면 오류입니다. - **일러스트와 장식:** include에 그린 장면은 `