Liquid – Screen Reader Live

Use the ld-sr-live component in your application to conviniently trigger info and alert messages for screen readers.

How it works #

Add the component to your application, preferably close after the opening <body> tag. The component is invisible as it uses the ld-sr-only class. It listens to two custom events on the window, the ldSrLiveInfo and the ldSrLiveAlert event. As soon as one of those events reaches the window, the component updates the content of one of two contained aria-live reagions, either the one with role="status" or the one with role="alert", depending on the event. For the content it uses the value of event.detail. The "politeness setting" is set to polite, meaning that the screen reader delays new messages until it has finished announcing the current ones. Here is an example on how you can trigger an event including an info message that will be spoken by a screen reader:

Example #

You can test the component in the following example (obviously you'll need to turn on a screen reader of your choice in order to hear the announcements):

<style>
#form-info,
#form-alert {
  display: grid;
  grid-auto-flow: column;
  align-items: flex-end;
  grid-gap: 1rem;
}
</style>

<ld-sr-live></ld-sr-live>

<form id="form-info">
  <ld-label>
    Info message
    <ld-input id="input-info"></ld-input>
  </ld-label>
  <ld-button type="submit">Submit</ld-button>
</form>

<form id="form-alert">
  <ld-label>
    Alert message
    <ld-input id="input-alert"></ld-input>
  </ld-label>
  <ld-button type="submit">Submit</ld-button>
</form>

<script>
const formInfo = document.getElementById('form-info')
const inputInfo = document.getElementById('input-info')
formInfo.addEventListener('submit', ev => {
  ev.preventDefault()
  dispatchEvent(new CustomEvent('ldSrLiveInfo', {
    detail: inputInfo.value || ''
  }))
})

const formAlert = document.getElementById('form-alert')
const inputAlert = document.getElementById('input-alert')
formAlert.addEventListener('submit', ev => {
  ev.preventDefault()
  dispatchEvent(new CustomEvent('ldSrLiveAlert', {
    detail: inputAlert.value || ''
  }))
})
</script>

const infoInputRef = React.useRef(null)
const alertInputRef = React.useRef(null)
const formStyle = {
  display: 'grid',
  gridAutoFlow: 'column',
  alignItems: 'flex-end',
  gridGap: '1rem'
}

return (
  <>
    <LdSrLive />

    <form
      onSubmit={(ev) => {
        ev.preventDefault()
        dispatchEvent(
          new CustomEvent('ldSrLiveInfo', {
            detail: infoInputRef.current.value || '',
          })
        )
      }}
      style={formStyle}
    >
      <LdLabel>
        Info message
        <LdInput ref={infoInputRef} />
      </LdLabel>
      <LdButton type="submit">Submit</LdButton>
    </form>

    <form
      onSubmit={(ev) => {
        ev.preventDefault()
        dispatchEvent(
          new CustomEvent('ldSrLiveAlert', {
            detail: alertInputRef.current.value || '',
          })
        )
      }}
      style={formStyle}
    >
      <LdLabel>
        Alert message
        <LdInput ref={alertInputRef} />
      </LdLabel>
      <LdButton type="submit">Submit</LdButton>
    </form>
  </>
)

ld-sr-live #

How it works #

Example #

Properties #

Dependencies #

Depends on #

Graph #