Skip to content

Instantly share code, notes, and snippets.

@chigkim

chigkim/shown_hidden_spoken.html

Created July 28, 2023 21:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chigkim/6e572aa12f70729a90717db1ce0b3dc1 to your computer and use it in GitHub Desktop.
Save chigkim/6e572aa12f70729a90717db1ce0b3dc1 to your computer and use it in GitHub Desktop.
Download ZIP
shown, hidden, spoken
Raw
shown_hidden_spoken.html
<html>
<head>
<title>Test</title>
</head>
<style>
.visually-hidden {
position: absolute;
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}
</style>
<script language='javascript'>
function speakTime() {
document.querySelector("#spoken_content").textContent=new Date().toLocaleString()
}
</script>
<body>
<p aria-hidden="true">This is hidden from screen reader, but visually shown.</p>
<p>Click the button below to have screen reader to announce the current time.</p>
<button onclick='speakTime()'>What time is it?</button>
<p class="visually-hidden" id="spoken_content" aria-live="polite">
This is visible to screen reader, but visually hidden.<br/>
New content will be spoken regardless screen reader focuss.<br/>
This should be the last item in dom tree for This purpose, so screen reader doesn't find it easily.
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment