Skip to content

Instantly share code, notes, and snippets.

@simonw
Created January 8, 2025 03:33
Show Gist options
  • Save simonw/50946b742ef5da7d0435c341b2d6fa8b to your computer and use it in GitHub Desktop.
Save simonw/50946b742ef5da7d0435c341b2d6fa8b to your computer and use it in GitHub Desktop.

Live Region Notification Demonstration

human (Jan 7, 2025, 07:27 PM)

<!-- Empty live region container present in the HTML -->
<div id="notification" aria-live="assertive"></div>

Put that on a page, then have buttons which will insert text into that div

One button should be called "Insert notification now" and one should be "Insert notification in five seconds"

assistant (Jan 7, 2025, 07:28 PM)

I'll create a simple HTML page with buttons that demonstrate live region notifications.

create Live Region Notification Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Live region notification demo</title>
  <style>
  * {
    box-sizing: border-box;
  }

  body {
    font-family: Helvetica, Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }

  h1 {
    color: #333;
    margin-bottom: 30px;
  }

  input, 
  textarea {
    font-size: 16px;
  }

  button {
    background: #0066cc;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    margin-right: 10px;
    padding: 8px 16px;
  }

  button:hover {
    background: #0052a3;
  }

  #notification {
    background: #f0f0f0;
    border-radius: 4px;
    margin-top: 20px;
    min-height: 50px;
    padding: 15px;
  }
  </style>
</head>
<body>
  <h1>Live region notification demo</h1>
  
  <div>
    <button id="notifyNow">Insert notification now</button>
    <button id="notifyLater">Insert notification in five seconds</button>
  </div>

  <div id="notification" aria-live="assertive"></div>

  <script type="module">
const notificationElement = document.getElementById('notification')
const notifyNowButton = document.getElementById('notifyNow')
const notifyLaterButton = document.getElementById('notifyLater')

function insertNotification() {
  const time = new Date().toLocaleTimeString()
  notificationElement.textContent = `A notification was inserted at ${time}`
}

notifyNowButton.addEventListener('click', insertNotification)

notifyLaterButton.addEventListener('click', () => {
  const startTime = new Date().toLocaleTimeString()
  notificationElement.textContent = `Notification scheduled at ${startTime}...`
  
  setTimeout(() => {
    insertNotification()
  }, 5000)
})
  </script>
</body>
</html>

I've created a clean HTML page that demonstrates the live region functionality. Key features:

  1. Uses vanilla HTML, CSS, and JavaScript with no dependencies
  2. Follows the specified formatting for CSS and JavaScript
  3. Has two buttons that trigger notifications:
    • "Insert notification now" shows a message immediately
    • "Insert notification in five seconds" shows a pending message, then updates after 5 seconds
  4. The notifications include timestamps so you can see when they were triggered
  5. Uses Helvetica as the primary font with Arial as fallback
  6. All interactive elements use 16px font size
  7. Clean, minimal styling with good visual hierarchy

Let me know if you'd like any adjustments to the styling or functionality!

human (Jan 7, 2025, 07:28 PM)

now add step by step instructions to that page telling people exactly how to enable VoiceOver, try the page out and then turn VoiceOver off again - include instructions for both macOS and iOS

assistant (Jan 7, 2025, 07:28 PM)

I'll add clear instructions for both platforms.

rewrite Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Live region notification demo</title>
  <style>
  * {
    box-sizing: border-box;
  }

  body {
    font-family: Helvetica, Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }

  h1, h2 {
    color: #333;
    margin-bottom: 30px;
  }

  h2 {
    margin-top: 40px;
  }

  input, 
  textarea {
    font-size: 16px;
  }

  button {
    background: #0066cc;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    margin-right: 10px;
    padding: 8px 16px;
  }

  button:hover {
    background: #0052a3;
  }

  #notification {
    background: #f0f0f0;
    border-radius: 4px;
    margin-top: 20px;
    min-height: 50px;
    padding: 15px;
  }

  .instructions {
    background: #f8f8f8;
    border-left: 4px solid #0066cc;
    margin: 20px 0;
    padding: 20px;
  }

  .instructions h3 {
    margin-top: 0;
  }

  .instructions ol {
    padding-left: 20px;
    line-height: 1.5;
  }

  .instructions li {
    margin-bottom: 10px;
  }

  kbd {
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 6px;
    font-family: monospace;
  }
  </style>
</head>
<body>
  <h1>Live region notification demo</h1>

  <section class="instructions">
    <h3>Testing with VoiceOver on macOS</h3>
    <ol>
      <li>Press <kbd>Command</kbd> + <kbd>F5</kbd> to turn on VoiceOver
        <ul>
          <li>If using a Touch Bar MacBook, press the Touch ID button three times</li>
          <li>If prompted, click "Use VoiceOver" in the dialog</li>
        </ul>
      </li>
      <li>Try clicking both buttons below to hear the notifications</li>
      <li>When finished, press <kbd>Command</kbd> + <kbd>F5</kbd> again to turn off VoiceOver (or triple-press Touch ID)</li>
    </ol>
  </section>

  <section class="instructions">
    <h3>Testing with VoiceOver on iOS</h3>
    <ol>
      <li>Go to Settings → Accessibility → VoiceOver</li>
      <li>Toggle VoiceOver on
        <ul>
          <li>You can also add VoiceOver to Accessibility Shortcut: Settings → Accessibility → Accessibility Shortcut</li>
          <li>Then triple-click the side button to toggle VoiceOver</li>
        </ul>
      </li>
      <li>Basic VoiceOver gestures:
        <ul>
          <li>Tap once to select an item</li>
          <li>Double-tap anywhere to activate the selected item</li>
          <li>Swipe right/left with one finger to move to next/previous item</li>
        </ul>
      </li>
      <li>Try using the buttons below to hear the notifications</li>
      <li>When finished, return to Settings → Accessibility → VoiceOver and toggle it off
        <ul>
          <li>Or use your Accessibility Shortcut if configured</li>
        </ul>
      </li>
    </ol>
  </section>

  <h2>Demo</h2>
  
  <div>
    <button id="notifyNow">Insert notification now</button>
    <button id="notifyLater">Insert notification in five seconds</button>
  </div>

  <div id="notification" aria-live="assertive"></div>

  <script type="module">
const notificationElement = document.getElementById('notification')
const notifyNowButton = document.getElementById('notifyNow')
const notifyLaterButton = document.getElementById('notifyLater')

function insertNotification() {
  const time = new Date().toLocaleTimeString()
  notificationElement.textContent = `A notification was inserted at ${time}`
}

notifyNowButton.addEventListener('click', insertNotification)

notifyLaterButton.addEventListener('click', () => {
  const startTime = new Date().toLocaleTimeString()
  notificationElement.textContent = `Notification scheduled at ${startTime}...`
  
  setTimeout(() => {
    insertNotification()
  }, 5000)
})
  </script>
</body>
</html>

I've updated the page to include:

  1. Detailed instructions for both macOS and iOS
  2. Clear step-by-step procedures for enabling and disabling VoiceOver
  3. Alternative methods (Touch ID for MacBooks, Accessibility Shortcut for iOS)
  4. Basic VoiceOver gesture guide for iOS users
  5. Styled instructions with:
    • Left border for visual separation
    • Monospace keyboard shortcuts
    • Nested lists for alternative methods
    • Comfortable spacing and typography

The original demo functionality remains unchanged, but now users have clear guidance on how to test it with VoiceOver on either platform. Let me know if you'd like any adjustments to the instructions or styling!

human (Jan 7, 2025, 07:30 PM)

change the text of the notification scheduled one to just say A notifaction has been scheduled without including the timestamp

assistant (Jan 7, 2025, 07:30 PM)

I'll update the scheduled notification text to be simpler.

update live-region-demo

Find this:

  notificationElement.textContent = `Notification scheduled at ${startTime}...`

Replace with this:

  notificationElement.textContent = 'A notification has been scheduled'

I've simplified the scheduled notification message. Now when you click "Insert notification in five seconds":

  1. It will first show "A notification has been scheduled"
  2. After 5 seconds, it will still show the timestamp in the final notification

Let me know if you'd like any other changes!

human (Jan 7, 2025, 07:30 PM)

change that button to in ten seconds

assistant (Jan 7, 2025, 07:30 PM)

I'll update the button text and the timeout duration to 10 seconds.

update live-region-demo

Find this:

<button id="notifyLater">Insert notification in five seconds</button>

Replace with this:

<button id="notifyLater">Insert notification in ten seconds</button>

update live-region-demo

Find this:

  }, 5000)

Replace with this:

  }, 10000)

I've updated both the button label and the timeout duration to 10 seconds. Now when you click the button:

  1. It will show "A notification has been scheduled"
  2. After 10 seconds (instead of 5), it will show the timestamp notification
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment