CSS speak-punctuation 속성 – 구두점 음성 출력 방식 지정하기

CSS speak-punctuation 속성이란?

speak-punctuation 속성은 화면 낭독 프로그램(스크린 리더)과 같은 음성 합성 장치가 웹 문서를 읽어 줄 때 구두점(문장 부호)을 어떻게 처리할지 지정하는 CSS 속성입니다.

이 속성을 활용하면 세미콜론(;), 중괄호({ })와 같은 기호를 실제로 소리 내어 읽게 하거나, 반대로 읽지 않고 자연스러운 휴지(멈춤)로 대체할 수 있습니다.

사용 가능한 값

• code – 세미콜론, 중괄호 등의 구두점을 문자 그대로 소리 내어 읽습니다. 코드나 수학적 표현을 낭독할 때 유용합니다.
• none – 구두점을 소리 내어 읽지 않고, 대신 문장의 흐름에 맞는 자연스러운 멈춤으로 처리합니다. 일반적인 문서 낭독에 적합합니다.

사용 예시

아래와 같이 작성하면 해당 요소를 낭독할 때 모든 구두점이 그대로 읽힙니다.

p { speak-punctuation: code; }

참고 사항

speak-punctuation 속성은 CSS Speech(음성) 모듈에 정의되어 있으며, 현재 대부분의 브라우저에서 지원되지 않습니다. 따라서 실제 서비스에 적용하기 전에 브라우저 호환성을 반드시 확인하는 것이 좋습니다.