<button>: 버튼 요소

이 요소는 전역 특성을 포함합니다.

autofocus

페이지 로드 후, 이 버튼에 포커스가 위치해야 하는지 나타냅니다. 문서 내에서 하나의 요소만 autofocus 특성을 가질 수 있습니다.

autocomplete 비표준

This attribute on a <button> is nonstandard and Firefox-specific. Unlike other browsers, Firefox persists the dynamic disabled state of a <button> across page loads. Setting autocomplete="off" disables this feature; see Firefox bug 654072.

disabled

버튼과 사용자의 상호작용, 즉 누르거나 클릭하는 것을 막습니다.

Firefox, unlike other browsers, persist the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.

form

버튼과 연결할 <form> 요소("양식 소유자"). 같은 문서에 존재하는 <form> 요소의 id 특성 값을 사용해야 합니다. form 특성을 지정하지 않았으나 조상 중 <form> 요소가 존재하면 해당 <form>과 연결됩니다.

form 특성을 사용하면 버튼을 <form> 요소에 넣지 않고도 연결할 수 있고, 조상 중 <form>이 있더라도 소유자를 재정의할 수 있습니다.

formaction

<button>이 제출 버튼인 경우, 제출한 정보를 처리할 URL. 지정한 경우, 버튼의 양식 소유자가 가진 action 특성보다 우선합니다. 양식 소유자가 존재하지 않으면 영향을 주지 않습니다.

formenctype

<button>이 제출 버튼인 경우, formenctype 특성은 양식을 서버로 제출할 때 사용할 양식 데이터 인코딩을 지정합니다. 가능한 값은 다음과 같습니다.

• application/x-www-form-urlencoded: 기본값.
• multipart/form-data: type 특성이 file인 <input>이 존재하는 양식에서 사용하세요.
• text/plain: 디버깅 전용으로 명세에 추가된 값입니다. 실제 양식 제출 시 사용해선 안됩니다.

지정한 경우, 버튼의 양식 소유자가 가진 enctype 특성보다 우선합니다.

formmethod

<button>이 제출 버튼인 경우, formmethod 특성은 양식을 서버로 제출할 때 사용할 HTTP 메서드를 지정합니다. 가능한 값은 다음과 같습니다.

• post: 양식의 데이터를 HTTP 요청 본문에 넣습니다. 비밀번호처럼, 양식 데이터 중 공개하지 않아야 하는 항목이 있으면 사용하세요.
• get: 양식 action URL 뒤에 ? 를 추가한 후 양식 데이터를 덧붙입니다. 검색 양식처럼, 양식이 사이드 이펙트를 갖지 않을 때 사용하세요.

지정한 경우, 버튼의 양식 소유자가 가진 method 특성보다 우선합니다.

formnovalidate

<button>이 제출 버튼인 경우, formnovalidate 특성은 양식을 제출할 때 유효성 검사를 하지 않겠다는 것을 지정합니다. 지정한 경우, 버튼의 양식 소유자가 가진 novalidate 특성보다 우선합니다.

formtarget

<button>이 제출 버튼인 경우, formtarget 특성에는 양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름을 사용할 수 있습니다. 가능한 값은 브라우징 맥락(탭, 창, <iframe>)의 이름 또는 키워드입니다. 지정한 경우, 버튼의 양식 소유자가 가진 target 특성보다 우선합니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.

• _self: 응답을 현재 브라우징 맥락에 표시합니다. 기본값.
• _blank: 응답을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.
• _parent: 응답을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.
• _top: 응답을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.

name

버튼의 이름. 제출할 때, 버튼의 value 특성과 함께 양식 데이터의 일부를 구성합니다.

type

버튼의 행동 방식. 가능한 값은 다음과 같습니다.

• submit: 버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다.
• reset: <input type="reset">처럼, 모든 컨트롤을 초깃값으로 되돌립니다.
• button: 기본 행동이 없으며 클릭했을 때 아무것도 하지 않습니다. 클라이언트측 스크립트와 연결할 수 있습니다.

value

버튼의 초깃값. 제출할 때, 버튼의 value 특성과 함께 양식 데이터의 일부를 구성합니다.

<button> 요소는 <input> 요소보다 스타일을 적용하기 훨씬 수월합니다. <input>은 value 특성에 텍스트 값밖에 지정할 수 없지만, <button>은 내부 HTML 콘텐츠(<em>, **, 심지어 <img>도)에 더해 ::after와 ::before 의사 요소를 사용하는 복잡한 렌더링도 가능합니다.

양식 제출용 버튼이 아니라면 type 특성을 button으로 지정하는걸 잊지 마세요. 기본값에서는 버튼을 눌렀을 때 양식 데이터를 제출하고, (존재하지 않는) 응답을 불러오려고 시도하는 과정에서 문서의 현재 상태가 사라질 수 있습니다.

아이콘만 사용해 기능을 표현하는 버튼은 접근 가능한 이름을 갖지 않습니다. 접근 가능한 이름은 스크린 리더 등 접근성 보조 기술이 문서를 분석하고 접근성 트리를 생성할 때 사용할 수 있는 프로그램 훅을 제공합니다. 그 후 보조 기술이 페이지 콘텐츠를 탐색하고 조작할 때 접근성 트리를 사용합니다.

아이콘 버튼에 접근 가능한 이름을 부여하려면, <button> 요소의 기능을 간략히 묘사하는 텍스트를 안에 포함하세요.

예제

<button name="favorite" type="button">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  </svg>
  Add to favorites
</button>

텍스트를 숨기고 싶은 경우, 접근 가능한 방식은 CSS 속성을 조합해 시각적으로는 숨기고, 보조 기술은 읽을 수 있는 형태로 남기는 것입니다.

그러나, 버튼의 텍스트를 시각적으로 남겨놓는 것은 아이콘의 뜻이나 버튼의 기능에 익숙하지 않은 사용자도 도울 수 있다는 점을 명심해야 합니다. 특히 기술과 가깝지 않거나, 문화적으로 다른 해석을 할 수 있는 사용자를 고려하세요.

• What is an accessible name? | The Paciello Group
• MDN Understanding WCAG, Guideline 4.1 explanations
• Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0

크기

버튼과 같은 대화형 요소는 상호작용하기 충분한 크기의 활성화 영역을 가져야 합니다. 충분한 크기는 운동 조절 장애를 가진 사용자와, 터치스크린처럼 정확하지 않은 입력 도구 사용자처럼 다양한 사람을 돕습니다. 최소 44x44의 CSS 픽셀 크기를 권고합니다.

• Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1
• Target Size and 2.5.5 | Adrian Roselli
• Quick test: Large touch targets - The A11Y Project

간격

버튼과 같은 대화형 요소 다수를 시각적으로 가까이 배치할 땐 서로를 분리하는 공간을 둬야 합니다. 간격은 운동 조절 장애를 가진 사용자가 원하지 않는 상호작용을 하는걸 방지할 수 있습니다.

간격은 margin과 같은 CSS 속성으로 설정할 수 있습니다.

• Hand tremors and the giant-button-problem - Axess Lab

Firefox will add a small dotted border on a focused button. This border is declared through CSS in the browser stylesheet, but you can override it to add your own focused style using <a href="/ko/docs/Web/CSS/::-moz-focus-inner">button::-moz-focus-inner { }</a>.

If overridden, it is important to ensure that the state change when focus is moved to the button is high enough that people experiencing low vision conditions will be able to perceive it.

Color contrast ratio is determined by comparing the luminosity of the button text and background color values compared to the background the button is placed on. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for large text. (Large text is defined as 18.66px and bold or larger, or 24px or larger.)

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

<button>을 클릭했을 때 포커스를 얻는 여부는 브라우저와 운영체제에 따라 다릅니다. 아래 표는 <input>이 type="button" 또는 type="submit"일 때도 동일합니다.