CSS cue-before 속성 완벽 정리 – 음성 출력 전 재생할 소리 지정하기

CSS cue-before 속성이란?

cue-before 속성은 스크린 리더 등 음성 브라우저가 요소의 내용을 읽기 직전에 재생할 소리를 지정하는 CSS 속성입니다. 특정 요소가 시작되기 전에 짧은 효과음을 삽입하여 다른 콘텐츠와 명확하게 구분할 수 있도록 도와줍니다.

예를 들어, 링크를 클릭하기 전에 '딩동' 소리를, 제목이 읽히기 전에 '팝' 소리를 재생하도록 설정하면 청각적으로 콘텐츠의 구조를 더 쉽게 인식할 수 있습니다.

사용 가능한 값

• url − 재생할 사운드 파일의 URL 경로를 지정합니다.
• none − 어떤 소리도 재생하지 않습니다.

예제 코드

아래 코드를 실행하면 CSS에서 cue-before 속성이 실제로 어떻게 적용되는지 확인해 볼 수 있습니다.

<style>
   <!--
   a {cue-before: url("bell.aiff");}
   h1 {cue-before: url("pop.au"); }
   -->
</style>

위 예제에서는 앵커(<a>) 태그의 내용이 읽히기 전에 bell.aiff 파일이, <h1> 제목이 읽히기 전에 pop.au 파일이 각각 재생됩니다.

참고 사항

cue-before 속성은 주로 접근성(a11y) 향상을 위해 음성 기반 브라우저 환경에서 활용됩니다. 일반적인 시각 브라우저에서는 효과가 나타나지 않으므로, 실제 서비스에서는 스크린 리더 사용자를 위한 보조 수단으로 이해하고 사용하는 것이 좋습니다.