링크와 단추 가르기

페이지를 옮기는 일은 링크 a로, 지금 페이지에서 무엇을 하는 일은 단추 button으로 씁니다. 생김새는 CSS로 얼마든지 바꿀 수 있지만, 브라우저는 모양이 아니라 요소 이름을 보고 역할을 정하고 키보드로 갈 수 있게 합니다.

화면에서는 파랗게 칠한 글자가 다 누를 수 있는 것처럼 보입니다. 그런데 div에 단추 모양을 입혔다면, 키보드로 다니는 사람은 그 자리에 갈 수 없고 화면 읽기 프로그램은 역할 없는 글로 읽습니다. 이 레슨에서는 링크와 단추를 가르는 기준과, 모양만 단추 · 링크인 요소가 무엇을 잃는지 봅니다.

<a href="index.html">목록</a><div class="btn">담기</div><a>조리 순서</a><button class="btn">담기</button>

1옮기면 a, 그 자리에서 하면 button

<a href="index.html">목록</a>
<button>재료 복사</button>

링크는 누르면 href의 주소로 옮겨 갑니다(브라우저 규칙 1). 단추는 누르면 그 자리에서 일을 합니다 — 폼을 보내거나(단추의 type), JavaScript가 정해 둔 일을 합니다. 화면 읽기 프로그램은 역할로 '링크' · '단추'를 알려, 듣는 사람은 누르기 전에 페이지가 바뀔지 압니다.

가르는 물음은 하나입니다. '누르면 다른 곳으로 가는가?'

2모양만 단추 · 링크인 div와 href 없는 a

<div class="btn">담기</div>
<a>조리 순서</a>
<button class="btn">담기</button>

.btn {
  background-color: #005bb5;
  color: #ffffff;
}

두 '담기'는 같은 색으로 칠했습니다. 그런데 Tab을 한 번 누르면 포커스는 div와 a를 건너뛰고 button에 갑니다. 잰 값 칸의 '지금 포커스'는 키보드 입력을 받는 요소입니다. div의 역할은 generic(이름 없는 묶음)이고 읽는 이름도 없어, 프로그램은 글 '담기'만 읽습니다. href가 없는 a도 갈 곳이 없어 링크가 아닙니다 — 역할은 generic이고, 링크의 파란 밑줄도 그려지지 않습니다.

button과 href 있는 a는 브라우저에서 세 가지를 거저 받습니다. Tab으로 갈 수 있고, 키보드로 누를 수 있고(링크는 Enter, 단추는 Enter · Space), 역할과 이름이 읽힙니다. 모양을 입힌 div에는 셋 다 없습니다(브라우저 규칙 3). Tab이 멈추는 차례는 다음 레슨 키보드로 다니기에서 자세히 봅니다.

예제

레시피 페이지 아래쪽에 둘 네 가지 일입니다. 저마다 a와 button 가운데 무엇으로 쓸지 먼저 고른 뒤 펴 보세요.

1. 목록 페이지로 돌아가기
2. 재료 목록을 복사하기
3. 같은 페이지의 조리 순서로 옮겨 가기
4. 후기 남기기 폼을 보내기

<a href="index.html">목록</a>
<button>재료 복사</button>
<a href="#steps">조리 순서</a>
<button>후기 남기기</button>

자주 틀리는 곳

틀린 생각: 단추처럼 보이고 누르면 일을 하면 단추다.

span에 단추 모양을 입히고 JavaScript로 누를 때 할 일을 붙이면, 마우스로는 단추처럼 눌립니다.

<span class="btn">삭제</span>
<a href="index.html">목록</a>

Tab을 누르면 '삭제'를 건너뛰고 '목록'으로 갑니다. 키보드로 다니는 사람은 이 '단추'에 닿을 수 없고, 프로그램은 '삭제'라는 글만 읽어 누를 수 있는 것인지 모릅니다.

맞는 규칙: 역할은 모양이 아니라 요소 이름에서 나옵니다. 누르는 것은 button으로 씁니다(브라우저 규칙 3).

틀린 생각: 다른 페이지로 가는 것도 단추 모양이면 button으로 쓴다.

<button>목록으로</button>

button에는 갈 주소가 없어, 눌러도 아무 데도 가지 않습니다. JavaScript로 옮겨 가게 만들 수는 있지만, 프로그램은 '단추'라고 읽어 페이지가 바뀔 줄 모르게 합니다.

맞는 규칙: 다른 곳으로 가는 것은 모양이 단추여도 a href로 쓰고, 모양은 CSS로 입힙니다.

틀린 생각: 그 자리에서 하는 일도 a href="#"로 쓰면 된다.

<a href="#">재료 복사</a>

Tab도 멈추고 링크로 읽히지만, 누르면 주소 끝에 # 기호가 붙고 페이지가 맨 위로 굴러갑니다. # 뒤에 이름이 없으면 페이지의 맨 위로 가기 때문입니다.

맞는 규칙: 그 자리에서 하는 일은 button으로 씁니다. a는 갈 곳(href)이 있을 때만 씁니다.

확인 문제

1. 예제의 <button>재료 복사</button>⁠을 <p class="btn">재료 복사</p>⁠로 바꾸고 단추처럼 칠했습니다. Tab을 누를 때마다 포커스가 가는 차례를 읽는 이름으로 쓰세요.

<a href="index.html">목록</a>
<p class="btn">재료 복사</p>
<a href="#steps">조리 순서</a>
<button>후기 남기기</button>

2. 레시피 페이지에 '인쇄하기'를 둡니다. 누르면 그 자리에서 인쇄 창을 엽니다. ____ 두 자리에 같은 요소 이름을 쓰세요.

<____>인쇄하기</____>

<button>인쇄하기</button>

3. 여행 일정 페이지입니다. '일정 펼치기'를 누를 때마다 페이지가 맨 위로 올라가고 주소 끝에 # 기호가 붙습니다. 몇 번 줄을 어떻게 고칠까요?

<h2>오후 일정</h2>
<a href="#">일정 펼치기</a>
<p>감천 문화 마을 걷기</p>

<h2>오후 일정</h2>
<button>일정 펼치기</button>
<p>감천 문화 마을 걷기</p>

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 1절 코드를 hello.html의 body 안에 붙여 저장하고 엽니다. 페이지를 한 번 누른 뒤 Tab을 눌러 포커스가 두 요소에 차례로 가는지 봅니다. 그다음 <button>재료 복사</button>⁠을 <div>재료 복사</div>로 바꿔 저장 · 새로고침하고, Tab이 몇 곳에 멈추는지 다시 셉니다.