ARIA 접근성 가이드

역할 · 문서 구조

role="code"

컴퓨터 코드 조각을 나타냅니다. HTML <code>에 대응합니다.

중급HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<code>
이름 정하는 방법
금지 (prohibited)
이름 필수
아니요
필수 상위 요소
없음
필수 하위 요소
없음

설명

code는 내용이 컴퓨터 코드임을 보조기술에 알립니다. 명세는 화면낭독기 같은 음성 출력 도구가 이 영역에서 문장 부호를 모두 읽도록(예: -, ;) 처리하는 것을 권장합니다. 다만 실제 지원은 화면낭독기마다 다릅니다.

이 역할은 WAI-ARIA 1.2에서 HTML 텍스트 수준 요소와 짝을 맞추기 위해 추가되었습니다. 이름(aria-label, aria-labelledby)을 붙일 수 없고, 화면낭독기가 기본 설정에서 따로 알려 주지 않는 경우가 많습니다. 대응 HTML 요소를 쓰는 것이 가장 간단하고 확실합니다.

여러 줄 코드는 <pre><code>로 씁니다.

함께 쓰는 속성

전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.

사용 예

인라인 코드

권장HTML
<p>버튼에는 <code>type="button"</code>을 지정합니다.</p>

역할로 지정 (대응 요소가 없을 때만)

HTML
<span role="code">npm install</span>

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
코드가 있는 문장 읽기버튼에는 type 같음 따옴표 button 따옴표 을 지정합니다

사용 지침

이렇게 쓰세요

  • 코드 조각은 <code>로 표시합니다.

이렇게 쓰지 마세요

  • 코드 영역에 aria-label로 이름을 붙이지 않습니다(이름 금지).
paragraphgeneric

참고 자료