CSS의 voice-family 속성은 스크린 리더나 음성 브라우저가 웹 페이지의 내용을 소리 내어 읽을 때 사용할 목소리를 지정하는 속성입니다. 값은 쉼표로 구분된 우선순위 목록 형태로 작성하며, 지정한 순서대로 앞쪽의 목소리부터 차례로 적용을 시도합니다.
속성 값의 종류
- generic-voice − 일반적인 목소리 계열을 의미하는 값입니다. 사용할 수 있는 값은 'male'(남성), 'female'(여성), 'child'(아동) 세 가지입니다.
- specific-voice − 특정 목소리 인스턴스를 의미하는 값입니다. 예를 들어 comedian, trinoids, carlos, lani처럼 시스템에서 제공하는 개별 음성 이름을 지정할 수 있습니다.
사용 예시
다음 코드를 참고하면 voice-family 속성을 실제로 어떻게 적용하는지 쉽게 이해할 수 있습니다. 각 선택자마다 서로 다른 목소리를 지정하고, 해당 목소리를 사용할 수 없는 경우를 대비해 일반 계열 값을 함께 나열한 점에 주목하세요.
<style>
<!--
h1 { voice-family: announcer, male }
p.part.romeo { voice-family: romeo, male }
p.part.juliet { voice-family: juliet, female }
-->
</style>
위 예시에서 h1 요소는 'announcer'라는 특정 음성을 우선 사용하고, 이를 지원하지 않으면 남성 목소리(male)로 대체됩니다. 마찬가지로 로미오 역할의 문단은 'romeo', 줄리엣 역할의 문단은 'juliet' 음성을 우선 적용하며, 실패 시 각각 남성·여성 목소리로 폴백(fallback)됩니다.
참고 사항
voice-family 속성은 원래 CSS2의 청각(aural) 스타일시트 속성으로 도입되었으며, 이후 CSS Speech 모듈에서 다시 표준화되었습니다. 다만 아직 대부분의 일반 브라우저에서는 지원이 제한적이므로, 실무에서는 주로 스크린 리더 환경이나 접근성 전용 기술과 함께 활용된다는 점을 유의하세요.