접근성

82editor는 키보드만으로 모든 버튼과 메뉴를 쓸 수 있고, 화면 읽기 프로그램이 버튼 이름과 상태를 읽도록 만들어져 있습니다. 쓴 글에 대체 텍스트 없는 사진 같은 문제가 있는지는 접근성 검사 버튼으로 찾습니다.

createEditor('#editor', {
  toolbar: 'heading | bold | link image table | a11y help',
});

접근성 검사

툴바 항목 이름은 a11y 입니다. board 와 full 프리셋의 ⋯ 메뉴에 있습니다. 누르면 지금 글을 살펴보고 문제 목록을 보여 줍니다.

목록의 항목을 누르면 대화상자가 닫히고 그 자리로 스크롤합니다. 사진이면 사진을 고른 상태가 됩니다. 문제가 없으면 "문제가 없어요"라고 나옵니다.

키보드로 쓰기

• 툴바는 Tab 한 번에 들어갑니다. 안에서는 ← → 로 버튼을, Home End 로 처음과 끝 버튼으로 갑니다. 툴바를 지나 Tab 을 한 번 더 누르면 편집 영역입니다.
• 편집 영역에서 Shift+Tab 을 누르면 툴바로 돌아갑니다. 다만 목록 안에서는 내어쓰기, 표 안에서는 앞 칸 이동으로 쓰입니다.
• 보통 문단에서는 Tab 이 다음 입력칸으로 넘어갑니다. 목록에서는 들여쓰기, 표에서는 다음 칸, 코드 블록에서는 공백 두 칸입니다.
• 드롭다운 메뉴는 열면 첫 항목에 초점이 갑니다. ↑ ↓ 로 움직이고 Enter 로 고르며 Esc 로 닫으면 초점이 버튼으로 돌아옵니다.
• 대화상자(링크, 사진, 검사 결과 등)는 열리면 첫 입력칸에 초점이 가고, Tab 이 대화상자 밖으로 나가지 않습니다. Esc 로 닫으면 원래 자리로 초점이 돌아옵니다.
• Ctrl+/ 로 단축키 목록을 엽니다. 전체 목록은 단축키 문서에 있습니다.

화면 읽기 프로그램

• 편집 영역은 role="textbox", aria-multiline="true" 이고, placeholder 가 이름(aria-label)으로 쓰입니다. 무엇을 쓰는 칸인지 알 수 있게 적으세요.
• 툴바는 role="toolbar" 입니다. 아이콘 버튼마다 화면 언어로 된 이름이 있고, 굵게처럼 켜고 끄는 버튼은 aria-pressed 로 상태를 알립니다.
• 메뉴를 여는 버튼은 aria-haspopup, ⋯ 버튼은 aria-expanded 로 열림 상태를 알립니다. 메뉴 항목은 role="menuitemradio" 와 aria-checked 로 지금 고른 것을 알립니다.
• 상태바의 글자 수, 찾기 결과 수, 알림 메시지는 aria-live="polite" 로 읽힙니다.

저장되는 글의 접근성

사진을 넣을 때 대체 텍스트를 적을 수 있고, 사진을 누르면 나오는 사진 막대에서도 바꿀 수 있습니다. 표는 표 막대에서 첫 행을 머리글(th)로 바꿉니다. 글을 올리기 전에 접근성 검사를 한 번 눌러 보는 습관이면 충분합니다.

<p><img src="/files/map.png" alt="본사 오시는 길 지도"></p>
<table>
  <thead><tr><th>이름</th><th>전화</th></tr></thead>
  <tbody><tr><td>홍길동</td><td>010-0000-0000</td></tr></tbody>
</table>

옵션