CSS speak-as 속성이란?
speak-as는 CSS 음성(speech) 미디어 속성 중 하나로, 화면 낭독 프로그램(screen reader)이 텍스트를 어떤 방식으로 읽어줄지 결정합니다. 텍스트를 그대로 말할 수도 있고, 한 글자씩 철자를 읽거나 숫자를 개별 자릿수로 발음하도록 설정할 수도 있습니다.
speak-as의 주요 값
- normal: 기본값으로, 문서 언어 규칙에 따라 일반적인 방식으로 읽습니다.
- spell-out: 텍스트를 한 글자씩 철자를 읽듯이 발음합니다. 약어나 두문자어에 유용합니다.
- digits: 숫자를 하나의 수로 읽지 않고 각 자릿수별로 개별적으로 읽습니다. 예를 들어 '123'을 '백이십삼'이 아닌 '일 이 삼'처럼 읽습니다.
- literal-punctuation: 마침표나 쉼표 같은 구두점을 실제로 소리 내어 읽습니다.
- no-punctuation: 구두점을 읽지 않고 건너뜁니다.
spell-out 사용 예제
텍스트를 철자 단위로 읽게 하려면 spell-out
abbr {
speak-as: spell-out;
}위 코드에서는 spell-out
활용 시 주의사항
speak-as 속성은 CSS Speech 모듈에 정의되어 있으며, 접근성을 높이기 위한 오디오 렌더링 환경에서 활용됩니다. 다만 현재 대부분의 웹 브라우저에서 완전하게 지원되지 않으므로, 실제 프로젝트에 적용하기 전에 대상 브라우저의 지원 여부를 반드시 확인하는 것이 좋습니다.