널리

안녕하세요. 접근성 팀 서미연입니다. 

일반적으로 날짜 또는 시간을 표시할 때 숫자로만 표시하기 때문에 스크린리더가 이 정보를 의미에 맞게 음성 정보를 출력하지 못하는 경우가 많습니다.  이러한 이슈로 접근성에서는 날짜 또는 시간 정보를 스크린리더 사용자가 인지할 수 있도록 연월일, 시분초 정보를 제공될 수 있게 권고하고 있습니다.   

날짜 정보

날짜의 경우 특정 형식의 날짜 표기로 제공한다 하더라도 디바이스별 음성 정보 출력이 달라 HTML과 같이 원소스로 iOS/Android 두 디바이스에서 동일하게 음성 정보를 출력하는데 어려움이 있습니다. 

음성 출력 정보	iOS 형식	Android 형식	이슈
YYYY년 MM월 DD일	YYYY. MM. DD. YYYY. MM. DD *연월일 사이 구분점과 공백 중요	YYYY.MM.DD. YYYY.MM.DD YYYY-MM-DD YYYY/MM/DD *연월일 사이 구분점 중요	iOS/Android 날짜를 인식하는 형식이 상이함.

 

<time> 태그 와 datetime 

HTML에서 날짜를 표현할 때 유용한 time 태그와 datetime 속성에 대해 테스트한 내용 공유드립니다.  HTML5에서는 문서 안의 시간이나 날짜 정보를 더 명확하게 표현하고, 이를 기계가 이해할 수 있도록 <time> 태그를 제공합니다. 

•  <time> 태그 

<time> 태그는 문서 안에서 날짜 또는 시간 정보를 의미적으로 마크업 할 때 사용합니다. 

기본 문법
<time datetime="YYYY-MM-DD">2025.06.23</time>

 

• datetime 속성

datetime 속성은 기계가 읽을 수 있는 표준 포맷(ISO 8601)으로 날짜 및 시간을 지정합니다. 

다음은 몇 가지 ISO 8601 형식을 iOS/Android에서 음성 정보 출력이 어떻게 제공되는지 테스트를 진행해 보았습니다. 

* 스크린리더 음성 정보 테스트(테스트환경: iOS18.4 /Android 14 TalkBack v14.5.00.14)

표현 유형	형식	코드 예시	iOS VoiceOver 음성	Android TalkBack 음성	이슈
연월일	YYYY-MM-DD	<time datetime="2025-06-23"> 25.06.23 </time>	2025년 06월 23일	25점 06점 23	Android 인식 못함.
연월	YYYY-MM	<time datetime="2025-06"> 2025.06 </time>	2025년 6월	2025점 06	Android 인식 못함.
연도	YYYY	<time datetime="2025"> 2025 </time>	2025년	2025	Android 인식 못함.

테스트 확인 결과 iOS의 경우 ISO 8601형식의 음성 정보를 출력하고 있으나 Android 에서는 호환되지 않는것 같습니다. 형식을 제대로 인식하지 못하고 실제 텍스트 정보 기준으로 음성 정보를 제공하고 있습니다.

• iOS 고려사항
  • iOS의 경우 실제 제공하는 텍스트를 한 번 더 출력 제공하고 있습니다. 이와 관련하여 시각장애 사용성에 불편함이 있는지 전맹 테스트 엔지니어의 의견을 받아보았습니다. 
  • 전맹 테스트 엔지니어 의견 : iOS 또는 MacOS에서 original text와 속성을 동시에 읽는다하여 사용성에 치명적인 결함은 없기에 큰 문제가 되지 않으리라 생각합니다.
  •  제 생각에도 연월일을 제공하는 것이 오히려 사용성을 높이므로 이는 사용성에 이슈 없어보입니다. (예:2025점 06점 15, 2025년 6월 15일)
  • 

 

 

 

그래서 Android가 인식할 수 있는 형식 날짜로 텍스트 정보를 제공하고 iOS가 인식할 수 있는  time 태그와 datetime 속성을 제공했더니 다음과 같이 iOS/Android 두 디바이스에서 연월일 음성 정보를 출력하는데 확인했습니다. 

코드 예시	iOS VoiceOver 음성	Android TalkBack 음성
<time datetime="2025-06-23">2025.06.23.</time>	2025년 06월 23일	2025년 06월 23일
<time datetime="2025-06-23">2025.06.23</time>	2025년 06월 23일	2025년 06월 23일
<time datetime="2025-06-23">2025-06-23</time>	2025년 06월 23일	2025년 06월 23일
<time datetime="2025-06-23">2025/06/23</time>	2025년 06월 23일	2025년 06월 23일

적용 고려사항

위 테스트 코드는 클릭 커블 하지 않은 요소에 적용할 때 음성 출력이 되고, link 요소 또는 button 요소 내 적용하더라도 스크린리더가 날짜 정보를 읽어주지 않습니다. 

• <a> 태그는 링크 텍스트로서의 의미가 중요하고, <button> 태그는 버튼으로서 의미가 중요하기 때문에 <time> 태그는 우선순위가 낮거나 무시되는 거 같아요~
• <a> 태그 및 <button> 태그 내  날짜 정보의 경우 aria-label을 통해 연월일을 제공하는 방법도 고려해 볼 수 있겠습니다.

코드 예시	iOS VoiceOver 음성	Android TalkBack 음성
<button> <span>날짜 접근성을 향상 시키는 방법 알아보기</span>  <span aria-label="2025년 06월 23일"> 2025.06.23 </span> </button>	날짜 접근성을 향상 시키는 방법 알아보기 2025년 06월 23일, 버튼	날짜 접근성을 향상 시키는 방법 알아보기 2025년 06월 23일, 버튼

 

시간 정보

시간 정보중 영상 콘텐츠에서 재생 시간을 분초의 의미로 두 자릿수(00:00)로 표기하는 경우가 많습니다. 그러나 스크린리더에서는 시분의 의미로 다르게 해석하여 시분으로 음성 출력하게 됩니다. (00시 00분)

재생 시간에 ISO 8601 Duration 적용하기

ISO 8601 Duration 형식은 비디오 재생 시간, 오디오 길이, 애니메이션 시간, 운동 시간 등 지속 시간(duration) 을 표현할 때 매우 적합합니다.

기본 구조
P[n]Y[n]M[n]DT[n]H[n]M[n]S

• P : 기간 표현 시작 (Period)
• T : 시간 부분의 시작 (Time)
• Y : 연 (Year)
• M : 월 (Month) 또는 분 (Minute) — 위치에 따라 다름
• W : 주 (Week)
• D : 일 (Day)
• H : 시 (Hour)
• S : 초 (Second)

 

분초로 제공할 수 있는 ISO 8601 Duration 형식을 iOS/Android에서 음성 정보 출력이 어떻게 제공되는지 테스트를 진행해 보았습니다. 

*스크린리더 음성 정보 테스트(테스트환경: iOS18.4 /Android 14 TalkBack v14.5.00.14)

표현 유형	형식	코드 예시	iOS VoiceOver 음성	Android TalkBack 음성	이슈
분초	PTnMnS	<time datetime="PT01M15S"> 01:15 </time> <time datetime="PT00M15S"> 00:15 </time>	1분 15초 15초	1시 15분 00시 15분	Android 인식 못함.

 

 

아직까지는 시간 정보를  iOS/Android 두 디바이스에서 동일하게 스크린리더 사용자가 정확하게 인지할 수 있도록 하는 방법은 텍스트 시간 표기를 다음과 같이 시분초 자리(세 자릿수)로 제공하는 것입니다. 

시간 표기
hh:mm:ss

 

코드 예시	iOS VoiceOver 음성	Android TalkBack 음성
<time>00:00:15</time>	0시 15초	0시 0분 15초

 

얻은 결론

• <time> 태그와 datetime 속성은 스크린리더 사용자에게 명확한 시간 정보를 제공하는 데 유용합니다.
• 날짜의 경우 Android 형식 날짜로 텍스트 정보를 제공하고 iOS가 인식할 수 있는 time 태그와 datetime 속성을 제공합니다.
• <a> 태그 및 <button> 태그 내  날짜 정보의 경우 aria-label을 통해 연월일을 제공하는 방법도 고려해 볼 수 있겠습니다. 
• 시간의 경우 세 자릿수로 제공해야 정확한 시간 정보를 제공합니다. 

참고자료

https://developer.mozilla.org/ko/docs/Web/HTML/Element/time

 

이 글을 통해  날짜와 시간 정보의 접근성에 대해 같이 생각해보는 계기가 됐으면 좋겠어요.

혹시 틀린 부분이 있거나 더 나은 제안이 있다면 언제든 알려주세요.

감사합니다.