CSS의 voice-volume 속성을 사용하면 스크린 리더나 음성 합성(TTS) 기기로 웹 콘텐츠를 읽어줄 때의 상대적인 음량 수준을 조절할 수 있습니다. 이 속성은 CSS Speech Module에 정의되어 있으며, 시각 장애인을 위한 접근성 향상에 활용됩니다.
voice-volume 속성 문법
기본 문법은 다음과 같습니다.
voice-volume: [x-soft | soft | medium | loud | x-loud]
키워드 값은 아래와 같이 다섯 단계로 구성됩니다.
- x-soft – 매우 작게
- soft – 작게
- medium – 보통 (기본값)
- loud – 크게
- x-loud – 매우 크게
키워드 값 사용 예제
다음은 voice-volume 음성 미디어 속성을 사용한 코드 예시입니다.
p {
voice-volume: soft;
}위 코드는 <p> 요소의 텍스트를 음성으로 출력할 때 부드럽고 작은 음량으로 읽도록 설정합니다.
데시벨(dB) 단위로 음량 지정하기
키워드 대신 데시벨(dB) 단위를 사용해 더 정밀하게 음량을 지정할 수도 있습니다.
p {
voice-volume: 2dB;
}양수 값은 기본 음량보다 크게, 음수 값(예: -3dB)은 더 작게 조절합니다.
키워드와 데시벨 함께 사용하기
음량 수준 키워드와 데시벨 값을 동시에 지정하는 것도 가능합니다.
p {
voice-volume: medium 3dB;
}위 코드는 'medium' 수준을 기준으로 3dB만큼 음량을 높여 출력하도록 설정합니다.
참고 사항
voice-volume 속성은 CSS Speech Module 사양의 일부로, 아직 대부분의 주요 브라우저에서 완전히 지원되지 않습니다. 실제 적용 여부는 사용 중인 스크린 리더 및 보조 기술의 구현 상태에 따라 달라질 수 있으므로, 프로덕션 환경에서 사용하기 전에 호환성을 확인하는 것이 좋습니다.