CSS pause-after 속성이란?
pause-after 속성은 스크린 리더나 음성 합성 기술(TTS)이 요소의 콘텐츠를 읽어 준 직후에 적용되는 일시 정지 시간을 지정하는 CSS 속성입니다. 이 속성을 활용하면 음성 출력의 리듬과 호흡을 조절하여 사용자가 내용을 더 쉽게 이해할 수 있도록 도울 수 있습니다.
pause-after 속성에 사용할 수 있는 값은 다음 두 가지입니다.
1. time (절대 시간 단위)
초(seconds) 또는 밀리초(milliseconds)와 같은 절대 시간 단위로 일시 정지 길이를 직접 표현합니다.
- 예:
pause-after: 2s;→ 요소 음성 출력 후 2초간 정지 - 예:
pause-after: 500ms;→ 500밀리초(0.5초)간 정지
2. percentage (백분율)
speech-rate(음성 속도) 속성 값의 역수를 기준으로 상대적인 일시 정지 길이를 지정합니다.
예를 들어, 음성 속도(speech-rate)가 분당 120단어라면 한 단어를 발음하는 데 약 반 초, 즉 500ms가 걸립니다. 이때 백분율 값은 다음과 같이 계산됩니다.
- pause-after: 100% → 500ms(0.5초)의 일시 정지
- pause-after: 20% → 100ms(0.1초)의 일시 정지
활용 팁
pause-after 속성은 주로 웹 접근성(a11y) 향상을 위해 사용됩니다. 문단 사이나 제목 뒤에 적절한 정지 시간을 부여하면 스크린 리더 사용자가 콘텐츠 구조를 더 명확하게 인식할 수 있습니다. 다만 모든 브라우저에서 완전히 지원되지는 않으므로, 실제 프로젝트에 적용하기 전에 대상 환경에서의 지원 여부를 확인하는 것이 좋습니다.