속성 · 위젯 상태
aria-multiline
텍스트 상자가 여러 줄 입력을 받는지(Enter가 줄바꿈인지) 한 줄 입력인지 알립니다.
한눈에 보기
- 구분
- 속성 (Property)
- 분류
- 위젯 상태
- 값 형식
- true / false
- 기본값
false- 적용 범위
- 특정 역할에만 사용
- HTML 대체
<textarea>(여러 줄),<input type="text">(한 줄)
설명
aria-multiline은 textbox가 여러 줄 텍스트를 받는지 알립니다. true면 Enter가 줄바꿈을 넣고, false(기본값)면 한 줄 입력이라 Enter가 보통 양식 제출이나 확정 같은 다른 동작을 합니다. 화면낭독기는 “여러 줄”이라고 알려 사용자가 Enter 키의 결과를 예측할 수 있게 합니다.
HTML <textarea>와 <input>은 각각 여러 줄·한 줄 정보가 자동으로 전달되므로 이 속성이 필요 없습니다. contenteditable로 만든 리치 텍스트 편집기, 메신저 입력창처럼 role="textbox"를 직접 지정한 경우에만 씁니다.
값은 Enter 키의 실제 동작과 맞아야 합니다. 메신저 입력창처럼 Enter로 메시지를 보내고 Shift+Enter로 줄을 바꾼다면, 기본 입력이 한 줄 동작이므로 판단이 애매할 수 있습니다. 이런 경우 여러 줄 텍스트를 담을 수 있다면 true로 두고, Enter 동작을 aria-describedby나 aria-keyshortcuts로 안내하는 방법이 있습니다.
또한 여러 줄 텍스트 상자 안에서는 위·아래 방향키가 줄 이동에 쓰이므로, 그 안에서 방향키로 다른 요소로 이동하는 기능을 만들면 안 됩니다. 한 줄 텍스트 상자 역할의 searchbox도 이 속성을 상속합니다.
테스트할 때는 텍스트 상자에 포커스했을 때 “여러 줄”이 읽히는지, Enter를 눌렀을 때 실제로 줄바꿈이 되는지(또는 안 되는지) 값과 비교합니다.
값
| 값 | 의미 |
|---|---|
true | 여러 줄 입력을 받습니다. Enter가 줄바꿈을 넣습니다. |
false 기본값 | 한 줄 입력만 받습니다. |
사용 예
네이티브 여러 줄 입력 (권장)
<label for="msg">문의 내용</label>
<textarea id="msg" rows="5"></textarea>contenteditable 편집기
<p id="editor-label">본문</p>
<div role="textbox" contenteditable="true" aria-multiline="true" aria-labelledby="editor-label"></div>한 줄 입력처럼 동작하는데 true (비권장)
<div role="textbox" contenteditable="true" aria-multiline="true" aria-label="태그"></div>
<script>/* Enter를 누르면 줄바꿈 없이 태그를 추가함 */</script>Enter가 줄바꿈이 아니라 확정 동작이면 false(또는 생략)가 맞습니다.
직접 해 보기
편집 영역에 글을 쓰고 Enter를 눌러 보세요. 체크 상자로 aria-multiline을 바꾸면 Enter의 동작도 함께 바뀝니다.
메모
실시간 코드 — 조작하면 속성 값이 바뀌는 모습을 볼 수 있습니다
화면낭독기에서는
| 상황 | 들리는 안내 (예) |
|---|---|
aria-multiline="true" 텍스트 상자에 포커스 | 메모, 편집 창, 여러 줄 |
aria-multiline="false" 텍스트 상자에 포커스 | 메모, 편집 창 |
사용 지침
이렇게 쓰세요
- 가능하면
<textarea>를 씁니다. role="textbox"를 직접 만든 경우 Enter 동작에 맞게 값을 정합니다.- Enter와 Shift+Enter의 동작이 다르면 안내 문구로 알려 줍니다.
이렇게 쓰지 마세요
<textarea>,<input>에 중복으로 쓰지 않습니다.- Enter가 줄바꿈을 하지 않는데
true로 두지 않습니다. - 여러 줄 텍스트 상자 안에서 위·아래 방향키를 다른 기능에 쓰지 않습니다.