Skip to content

Commit f34d1d0

Browse files
simonwsimonw
committed
aria-live-regions
https://gist.github.com/simonw/50946b742ef5da7d0435c341b2d6fa8bw
1 parent 1472c5d commit f34d1d0

File tree

2 files changed

+160
-0
lines changed

2 files changed

+160
-0
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ This collection is partly **an experiment** in how much it's possible to get don
4444
- [Bluesky WebSocket Firehose](https://tools.simonwillison.net/bluesky-firehose) showing a live firehose of Bluesky activity, [described here](https://simonwillison.net/2024/Nov/20/bluesky-websocket-firehose/)
4545
- [Bluesky resolve DID](https://tools.simonwillison.net/bluesky-resolve) turns a Bluesky ID such as `simonwillison.net` into a DID
4646
- [Prompts.js](https://tools.simonwillison.net/prompts-js) small JavaScript library enabling `await Prompts.alert("hi")` and `await Prompts.confirm("Continue?")` and `await Prompts.prompt("Enter your name")`
47+
- [aria-live-regions](https://tools.simonwillison.net/aria-live-regions) demonstrates ARIA live regions
4748

4849
## On Observable
4950

‎aria-live-regions.html

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Live region notification demo</title>
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
body {
13+
font-family: Helvetica, Arial, sans-serif;
14+
max-width: 800px;
15+
margin: 0 auto;
16+
padding: 20px;
17+
}
18+
19+
h1, h2 {
20+
color: #333;
21+
margin-bottom: 30px;
22+
}
23+
24+
h2 {
25+
margin-top: 40px;
26+
}
27+
28+
input,
29+
textarea {
30+
font-size: 16px;
31+
}
32+
33+
button {
34+
background: #0066cc;
35+
border: none;
36+
border-radius: 4px;
37+
color: white;
38+
cursor: pointer;
39+
font-size: 16px;
40+
margin-right: 10px;
41+
padding: 8px 16px;
42+
}
43+
44+
button:hover {
45+
background: #0052a3;
46+
}
47+
48+
#notification {
49+
background: #f0f0f0;
50+
border-radius: 4px;
51+
margin-top: 20px;
52+
min-height: 50px;
53+
padding: 15px;
54+
}
55+
56+
.instructions {
57+
background: #f8f8f8;
58+
border-left: 4px solid #0066cc;
59+
margin: 20px 0;
60+
padding: 20px;
61+
}
62+
63+
.instructions h3 {
64+
margin-top: 0;
65+
}
66+
67+
.instructions ol {
68+
padding-left: 20px;
69+
line-height: 1.5;
70+
}
71+
72+
.instructions li {
73+
margin-bottom: 10px;
74+
}
75+
76+
kbd {
77+
background: #eee;
78+
border: 1px solid #ccc;
79+
border-radius: 3px;
80+
padding: 2px 6px;
81+
font-family: monospace;
82+
}
83+
</style>
84+
</head>
85+
<body>
86+
<h1>Live region notification demo</h1>
87+
88+
<section class="instructions">
89+
<h3>Testing with VoiceOver on macOS</h3>
90+
<ol>
91+
<li>Press <kbd>Command</kbd> + <kbd>F5</kbd> to turn on VoiceOver
92+
<ul>
93+
<li>If using a Touch Bar MacBook, press the Touch ID button three times</li>
94+
<li>If prompted, click "Use VoiceOver" in the dialog</li>
95+
</ul>
96+
</li>
97+
<li>Try clicking both buttons below to hear the notifications</li>
98+
<li>When finished, press <kbd>Command</kbd> + <kbd>F5</kbd> again to turn off VoiceOver (or triple-press Touch ID)</li>
99+
</ol>
100+
</section>
101+
102+
<section class="instructions">
103+
<h3>Testing with VoiceOver on iOS</h3>
104+
<ol>
105+
<li>Go to Settings → Accessibility → VoiceOver</li>
106+
<li>Toggle VoiceOver on
107+
<ul>
108+
<li>You can also add VoiceOver to Accessibility Shortcut: Settings → Accessibility → Accessibility Shortcut</li>
109+
<li>Then triple-click the side button to toggle VoiceOver</li>
110+
</ul>
111+
</li>
112+
<li>Basic VoiceOver gestures:
113+
<ul>
114+
<li>Tap once to select an item</li>
115+
<li>Double-tap anywhere to activate the selected item</li>
116+
<li>Swipe right/left with one finger to move to next/previous item</li>
117+
</ul>
118+
</li>
119+
<li>Try using the buttons below to hear the notifications</li>
120+
<li>When finished, return to Settings → Accessibility → VoiceOver and toggle it off
121+
<ul>
122+
<li>Or use your Accessibility Shortcut if configured</li>
123+
</ul>
124+
</li>
125+
</ol>
126+
</section>
127+
128+
<h2>Demo</h2>
129+
130+
<div>
131+
<button id="notifyNow">Insert notification now</button>
132+
<button id="notifyLater">Insert notification in ten seconds</button>
133+
</div>
134+
135+
<div id="notification" aria-live="assertive"></div>
136+
137+
<script type="module">
138+
const notificationElement = document.getElementById('notification')
139+
const notifyNowButton = document.getElementById('notifyNow')
140+
const notifyLaterButton = document.getElementById('notifyLater')
141+
142+
function insertNotification() {
143+
const time = new Date().toLocaleTimeString()
144+
notificationElement.textContent = `A notification was inserted at ${time}`
145+
}
146+
147+
notifyNowButton.addEventListener('click', insertNotification)
148+
149+
notifyLaterButton.addEventListener('click', () => {
150+
const startTime = new Date().toLocaleTimeString()
151+
notificationElement.textContent = 'A notification has been scheduled'
152+
153+
setTimeout(() => {
154+
insertNotification()
155+
}, 10000)
156+
})
157+
</script>
158+
</body>
159+
</html>

0 commit comments

Comments
 (0)