In our Frontend we’re displaying toast notifications to the user in order to inform about status updates like tasks finished successfully or error notifications due to failed fetch operations.

Each notification is based on the following structure:

<div class="toast-notifiaction" role="status">
  <div class="toast-notification__title">Information</div>
  <button aria-label="close">
    <!-- contains a close icon as inline svg -->
  </button>
  <div class="toast-notification__text">Lorem ipsum dolor</div>
</div>

The idea behind is a non-disruptive behaviour analogue to aria-live="polite". Unfortunately it’s not possible to exclude the close-button from being read out loud as well. The desired behavior would be reading out: “Information. Lorem ipsum dolor”.

Is that possible without defining a non-visible div containing the desired text?