[WEB-004][기초] 키보드로 조작하고 초점을 볼 수 있는 웹 만들기
페이지 정보
본문
[이번 수업]
웹은 마우스를 쓰기 어려운 사람도 키보드로 이용할 수 있어야 합니다.
[선수지식]
WEB-001의 시맨틱 HTML, WEB-002의 CSS 선택자, WEB-003의 반응형 화면을 알면 좋습니다. HTML 파일을 브라우저로 열 수 있으면 따라 할 수 있습니다.
[학습목표]
1. 마우스 없이 모든 기능을 키보드로 조작한다.
2. 현재 키보드 초점이 어디인지 시각적으로 표시한다.
3. 네이티브 button과 aria-expanded·aria-controls를 올바르게 사용한다.
4. 키보드 함정과 의미 없는 tabindex를 피한다.
[핵심개념]
키보드 초점(focus)은 다음 키 입력을 받을 요소를 가리킵니다. 보통 Tab은 다음 요소, Shift+Tab은 이전 요소로 이동합니다. 초점 순서는 화면과 읽기 순서에 맞아야 하며, 사용자가 어느 요소에 있는지 테두리 같은 표시로 알아볼 수 있어야 합니다.
버튼 역할에는 `<div onclick>`보다 HTML `<button>`을 먼저 사용합니다.
접이식 설명(disclosure)은 버튼이 콘텐츠 표시 여부를 바꾸는 패턴입니다. `aria-expanded`는 현재 펼침 상태, `aria-controls`는 제어하는 요소의 id를 연결합니다. `:focus-visible`은 키보드처럼 포커스 표시가 필요한 상황에 스타일을 적용합니다.
WCAG의 키보드 기준은 기능을 키보드 인터페이스로 사용할 수 있게 하고, 사용자가 빠져나오지 못하는 키보드 함정을 만들지 않도록 요구합니다.
[따라하기]
아래 내용을 accessible.html로 저장합니다.
```html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>키보드 접근 가능한 설명</title>
<style>
button:focus-visible {
outline: 3px solid #0b57d0;
outline-offset: 3px;
}
</style>
</head>
<body>
<h1>키보드로 여는 설명</h1>
<button type="button" id="toggle"
aria-expanded="false" aria-controls="details">
설명 열기
</button>
<p id="details" hidden>
네이티브 버튼은 Tab으로 초점을 받고 Enter와 Space로 실행됩니다.
</p>
<script>
const button = document.querySelector('#toggle');
const details = document.querySelector('#details');
button.addEventListener('click', () => {
const willOpen = button.getAttribute('aria-expanded') === 'false';
button.setAttribute('aria-expanded', String(willOpen));
button.textContent = willOpen ? '설명 닫기' : '설명 열기';
details.hidden = !willOpen;
});
</script>
</body>
</html>
```
Windows·macOS·Linux에서 파일을 더블클릭하거나 브라우저로 엽니다. 마우스를 내려놓고 Tab을 누르면 버튼에 파란 윤곽선이 보여야 합니다. Enter 또는 Space를 누르면 설명과 버튼 문구가 바뀌고, 다시 누르면 닫혀야 합니다.
[흔한 실수]
- 클릭 가능한 div만 만들고 키보드 이벤트와 의미를 빠뜨립니다.
- `outline: none`으로 포커스 표시를 없애고 대체 스타일을 주지 않습니다.
- 양수 tabindex로 순서를 억지로 바꿔 DOM 읽기 순서와 어긋납니다.
- 화면만 열고 aria-expanded를 갱신하지 않아 보조기술에 잘못된 상태를 전달합니다.
[보안 주의]
hidden은 화면 표시 상태일 뿐 접근 권한이 아닙니다. 비밀정보를 HTML 안에 넣고 숨기는 방식으로 보호하지 마세요. 사용자 입력을 버튼 문구나 설명에 넣을 때 `innerHTML`로 삽입하지 말고 필요한 경우 `textContent`를 사용해 스크립트 주입을 막습니다.
[직접 해볼 과제]
1. 버튼 포커스 색을 바꾸되 배경과 충분히 구분되는지 눈으로 확인하세요.
2. 두 번째 disclosure를 추가하고 각 aria-controls가 고유 id를 가리키게 하세요.
3. 마우스 없이 Tab·Shift+Tab·Enter·Space만으로 두 설명을 모두 조작하세요.
[확인문제]
1. 클릭 가능한 div보다 네이티브 button을 먼저 써야 하는 이유는 무엇인가요?
2. aria-expanded와 hidden은 각각 어떤 상태를 담당하나요?
3. 포커스 윤곽선을 대체 없이 제거하면 왜 문제가 되나요?
[다음 학습]
번호 우선 순환에 따라 다음 글은 BACK-004 라우팅·컨트롤러·서비스 계층입니다. WEB 다음 수업은 WEB-005 DOM·이벤트·브라우저 API입니다.
[공식 참고 자료]
- WCAG 2.2: https://www.w3.org/TR/WCAG22/
- HTML button 표준: https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element
- WAI-ARIA 키보드 인터페이스: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/
- WAI-ARIA Disclosure 패턴: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
웹은 마우스를 쓰기 어려운 사람도 키보드로 이용할 수 있어야 합니다.
[선수지식]
WEB-001의 시맨틱 HTML, WEB-002의 CSS 선택자, WEB-003의 반응형 화면을 알면 좋습니다. HTML 파일을 브라우저로 열 수 있으면 따라 할 수 있습니다.
[학습목표]
1. 마우스 없이 모든 기능을 키보드로 조작한다.
2. 현재 키보드 초점이 어디인지 시각적으로 표시한다.
3. 네이티브 button과 aria-expanded·aria-controls를 올바르게 사용한다.
4. 키보드 함정과 의미 없는 tabindex를 피한다.
[핵심개념]
키보드 초점(focus)은 다음 키 입력을 받을 요소를 가리킵니다. 보통 Tab은 다음 요소, Shift+Tab은 이전 요소로 이동합니다. 초점 순서는 화면과 읽기 순서에 맞아야 하며, 사용자가 어느 요소에 있는지 테두리 같은 표시로 알아볼 수 있어야 합니다.
버튼 역할에는 `<div onclick>`보다 HTML `<button>`을 먼저 사용합니다.
접이식 설명(disclosure)은 버튼이 콘텐츠 표시 여부를 바꾸는 패턴입니다. `aria-expanded`는 현재 펼침 상태, `aria-controls`는 제어하는 요소의 id를 연결합니다. `:focus-visible`은 키보드처럼 포커스 표시가 필요한 상황에 스타일을 적용합니다.
WCAG의 키보드 기준은 기능을 키보드 인터페이스로 사용할 수 있게 하고, 사용자가 빠져나오지 못하는 키보드 함정을 만들지 않도록 요구합니다.
[따라하기]
아래 내용을 accessible.html로 저장합니다.
```html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>키보드 접근 가능한 설명</title>
<style>
button:focus-visible {
outline: 3px solid #0b57d0;
outline-offset: 3px;
}
</style>
</head>
<body>
<h1>키보드로 여는 설명</h1>
<button type="button" id="toggle"
aria-expanded="false" aria-controls="details">
설명 열기
</button>
<p id="details" hidden>
네이티브 버튼은 Tab으로 초점을 받고 Enter와 Space로 실행됩니다.
</p>
<script>
const button = document.querySelector('#toggle');
const details = document.querySelector('#details');
button.addEventListener('click', () => {
const willOpen = button.getAttribute('aria-expanded') === 'false';
button.setAttribute('aria-expanded', String(willOpen));
button.textContent = willOpen ? '설명 닫기' : '설명 열기';
details.hidden = !willOpen;
});
</script>
</body>
</html>
```
Windows·macOS·Linux에서 파일을 더블클릭하거나 브라우저로 엽니다. 마우스를 내려놓고 Tab을 누르면 버튼에 파란 윤곽선이 보여야 합니다. Enter 또는 Space를 누르면 설명과 버튼 문구가 바뀌고, 다시 누르면 닫혀야 합니다.
[흔한 실수]
- 클릭 가능한 div만 만들고 키보드 이벤트와 의미를 빠뜨립니다.
- `outline: none`으로 포커스 표시를 없애고 대체 스타일을 주지 않습니다.
- 양수 tabindex로 순서를 억지로 바꿔 DOM 읽기 순서와 어긋납니다.
- 화면만 열고 aria-expanded를 갱신하지 않아 보조기술에 잘못된 상태를 전달합니다.
[보안 주의]
hidden은 화면 표시 상태일 뿐 접근 권한이 아닙니다. 비밀정보를 HTML 안에 넣고 숨기는 방식으로 보호하지 마세요. 사용자 입력을 버튼 문구나 설명에 넣을 때 `innerHTML`로 삽입하지 말고 필요한 경우 `textContent`를 사용해 스크립트 주입을 막습니다.
[직접 해볼 과제]
1. 버튼 포커스 색을 바꾸되 배경과 충분히 구분되는지 눈으로 확인하세요.
2. 두 번째 disclosure를 추가하고 각 aria-controls가 고유 id를 가리키게 하세요.
3. 마우스 없이 Tab·Shift+Tab·Enter·Space만으로 두 설명을 모두 조작하세요.
[확인문제]
1. 클릭 가능한 div보다 네이티브 button을 먼저 써야 하는 이유는 무엇인가요?
2. aria-expanded와 hidden은 각각 어떤 상태를 담당하나요?
3. 포커스 윤곽선을 대체 없이 제거하면 왜 문제가 되나요?
[다음 학습]
번호 우선 순환에 따라 다음 글은 BACK-004 라우팅·컨트롤러·서비스 계층입니다. WEB 다음 수업은 WEB-005 DOM·이벤트·브라우저 API입니다.
[공식 참고 자료]
- WCAG 2.2: https://www.w3.org/TR/WCAG22/
- HTML button 표준: https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element
- WAI-ARIA 키보드 인터페이스: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/
- WAI-ARIA Disclosure 패턴: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
- 이전글[BACK-004][기초] 라우터·컨트롤러·서비스 역할 나누기 26.08.31
- 다음글[JSTS-004][기초] 이벤트 루프로 비동기 실행 순서 이해하기 26.08.31
댓글목록
등록된 댓글이 없습니다.