OcHiddenAnnouncer component

Description

The OcHiddenAnnouncer component provides live regions for screen reader announcements.

Accessibility

Screen reader software detect dynamic changes in regions registered as live regions (elements with attributes like aria-live="polite" and aria-live="assertive"). So when using this component or live regions in general, make sure that the region already exists in the DOM and assistive technology can subscribe to its changes. More information about this can be found in the mdn web docs.

Examples

The default use case of the component needs an announcement property to be passed to it. This string is not visible on the screen and will only be read by screen readers.

Default

<template>
  <div>
    <div class="oc-mb-m">Hidden announcer (please inspect element)</div>
    <oc-button @click="announce">Announce</oc-button>
    <oc-hidden-announcer level="polite" :announcement="announcement" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const announcement = ref<string>()

const announce = () => {
  announcement.value = 'Announcement complete'
}
</script>

Properties

Emits

Slots