This project is adapted from the clock in the list of Svelte examples. All I did was rewrite it in standard HTML, CSS and JavaScript.
I used a visually hidden element to make the time accessible to screen readers. I have tested this using:
- VoiceOver in Safari 16.1 on macOS Monterey 12.6.1. For example, it reads as "6 hours, 42 minutes and 14 seconds".
- VoiceOver in Safari 16.1 on iOS 16.1.1. For example, it reads as "6 hours, 42 minutes and 14 seconds".
- Narrator in Edge 107 on Windows 10 21H2. For example, it reads as "6:42 and 14 seconds".
- TalkBack in Chrome 107 on Android 13. For example, it reads as "6 hours, 42 minutes and 14 seconds".
I welcome feedback from people who find that this clock not work well with their chosen operating system, browser and/or screen reader.