CSS speak-numeral 속성이란?
speak-numeral 속성은 스크린 리더나 음성 합성 기술이 웹 문서의 숫자를 어떤 방식으로 읽어줄지 결정하는 CSS 속성입니다. 접근성(a11y)을 고려한 음성 출력 환경에서 숫자 표기 방식을 세밀하게 조절할 수 있어, 시각 장애인을 위한 웹 콘텐츠 제작에 유용하게 활용됩니다.
사용 가능한 속성값
speak-numeral 속성에는 다음 두 가지 값을 지정할 수 있습니다.
- digits − 숫자를 한 자리씩 개별적으로 읽습니다. 예를 들어 "237"은 "이 삼 칠(또는 Two Three Seven)"처럼 각 숫자를 따로따로 발음합니다. 전화번호처럼 자릿수를 구분해서 들려주고 싶을 때 적합합니다.
- continuous − 숫자를 하나의 완전한 수로 읽습니다. 같은 "237"이라도 "이백삼십칠(Two hundred thirty seven)"처럼 자연스러운 숫자 표현으로 읽어줍니다. 금액, 날짜, 통계 수치 등 일반적인 문맥에서 사용하기 좋습니다.
참고 사항
continuous 값으로 숫자를 읽을 때의 단어 표현은 음성 합성 엔진이 지원하는 언어 설정에 따라 달라집니다. 즉, 한국어 음성 엔진에서는 한국어식 숫자 읽기가 적용되며, 영어 엔진에서는 영어식 표현이 사용됩니다.
활용 예시
p.phone { speak-numeral: digits; }
p.amount { speak-numeral: continuous; }위와 같이 작성하면 전화번호는 한 자리씩, 금액은 하나의 수로 읽히도록 설정할 수 있습니다.