ARIA 접근성 가이드

역할 · 문서 구조

role="math"

수학 식을 나타냅니다. 가능하면 MathML의 <math>를 씁니다.

심화HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<math> (MathML)
이름 정하는 방법
작성자 (author)
이름 필수
아니요
필수 상위 요소
없음
필수 하위 요소
없음

설명

math는 수학 표현식입니다. 내용은 MathML 같은 접근 가능한 형식, 또는 브라우저나 폴리필이 변환할 수 있는 TeX·LaTeX 텍스트로 작성하는 것을 전제로 합니다. 명세상 자식이 표현용이 아니므로(Children Presentational: False) 수식의 구조가 보조기술에 전달될 수 있습니다.

권장 방법

현재 주요 브라우저(Chrome·Edge 109+, Firefox, Safari)가 MathML Core를 지원하므로 HTML 안에 <math>를 직접 쓰는 것이 가장 좋습니다. NVDA(MathCAT 등 추가 기능), JAWS, VoiceOver는 MathML을 탐색 가능한 수식으로 읽어 줍니다.

이미지로 된 수식

기존 콘텐츠처럼 수식이 이미지라면, 명세는 그 수식을 소리 내어 읽듯이 설명하는 이름을 주라고 합니다. 이때는 보통 <img alt="…">만으로 충분하며, role="math"와 aria-label을 함께 쓰는 방식도 있습니다. 다만 이미지 수식은 점자 출력이나 부분 탐색이 되지 않습니다.

함께 쓰는 속성

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

사용 예

MathML (권장)

권장HTML
<math display="block">
  <mi>x</mi><mo>=</mo>
  <mfrac>
    <mrow><mo>−</mo><mi>b</mi><mo>±</mo><msqrt><msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mn>4</mn><mi>a</mi><mi>c</mi></msqrt></mrow>
    <mrow><mn>2</mn><mi>a</mi></mrow>
  </mfrac>
</math>

이미지 수식에 읽기용 이름

HTML
<img src="pythagoras.png" role="math" alt="a 제곱 더하기 b 제곱 은 c 제곱">

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
수식으로 이동수식, x 는 2a 분의 마이너스 b 플러스 마이너스 루트 b 제곱 마이너스 4ac

사용 지침

이렇게 쓰세요

  • 수식은 MathML <math>로 작성합니다.
  • 이미지 수식에는 말로 읽는 형태의 대체 텍스트를 줍니다.

이렇게 쓰지 마세요

  • 수식 이미지에 “수식 이미지” 같은 무의미한 대체 텍스트를 쓰지 않습니다.
imgfigure

참고 자료