Class HyloAccessibilityAnnouncement

The (text)content wrapped inside the HyloAccessibilityAnnouncement component is announced in a screen reader. If the content changes, the updated content will be read in the screen reader. Use the methods "setAnnouncement" and "setText" of the component to change the content.

You can choose when the announcement occurs depending on the importance set.

Hides the content visiualy but keeps it accessable to screen readers.

Keep in mind that actual hidden components are ignored by screen readers.

Properties

important initialText initialTextDelay position role top

Methods

setAnnouncement setFocus setOriginal setText

Properties

important

important: boolean = false

If set, the announcement cuts in as soon as the change occurs. Otherwise the announcement waits until a possible current announcement ends.

initialText

initialText: string

The initial text of the component. This text is set with a delay after the components initialisation. Initial text just nested inside the component in the markup might get overlooked.

initialTextDelay

initialTextDelay: number = 100

The delay the initial text is set in milliseconds.

position

position: boolean = false

By default the content is hidden by using the "clip" css feature.

If the property "position" is set, the content is hidden outside the screen to the "left: -10000px".

role

role: "note" | "alert" = 'note'

The aria role of the announcement field. If you have problems announcing text or need additional attention, set it to "alert".

top

top: boolean = false

Sets the content "top: -500px" instead of "left: -10000px" outside the screen when property "position" is set.

Methods

setAnnouncement

  • setAnnouncement(text, delay?): Promise<void>

  • Announces the text by setting the text as content of the component.

    Changes the content back to the original silently with the next mouse or keyboard event bubbling up to the body.

    If the component is set to aria-hidden="true", it will be set to "false" for the duration of the announcement and set back to "true" when the content is set back to its original.

    Parameters

    • text: string

      the text to be announced

    • delay: number = 150

      the delay in millisecond for the text to be set (min. 150)

    Returns Promise<void>

setFocus

  • setFocus(blur_text?, quietly?): Promise<void>

  • Sets the focus and with it the tab position to the component. Use this instead of element.focus().

    If the tabindex is not set explicitly to 0 or higher, the focusability (reachability by tabulator key) of the component will only last as long as the component has the focus.

    If you change the focus to the component, a screen reader will read the content of the component (again). "setText" right before setting the focus should be done "quietly" because it will be read when gaining focus. Use the third parameter "loud_when_focus" of "setText" when you don't know whether the component has already the focus.

    Parameters

    • Optional blur_text: string

      text which will be set as content of the component after the component looses focus again

    • Optional quietly: boolean

      should the blur text be set unannounced

    Returns Promise<void>

setOriginal

  • setOriginal(): Promise<void>

  • Sets the content back to its original after an announcement. Call this function when you don't want to wait for a mouse or keyboard event.

    Returns Promise<void>

setText

  • setText(text, quietly?, loud_when_focus?): Promise<void>

  • Sets the text of the component permanently.

    Parameters

    • text: string

      text which will be set as content of the component

    • Optional quietly: boolean

      should the text be set unannounced

    • Optional loud_when_focus: boolean

      should the text be set unanounced only when the component doesn't have the focus (set "quietly" true)

    Returns Promise<void>

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc