Written by Tobias Greiner on July 18, 2023

How the Eye-Able® Assist read aloud function works and can be adapted to the website

Help-Center

How the Eye-Able® Assist read aloud function works and can be adapted to the websiteA pair of glasses lie on an open book.

How the screen reader works

The "Web Page Read Aloud" feature in Eye-Able® Assist supports multiple options on how the page can be read aloud:

  • On the one hand, the Play key can be used to read out the entire page starting with the first heading. Through the forward and back keys (and the left-right keyboard keys) elements can be skipped.

  • Just like in tab navigation, elements can be targeted and read aloud using keyboard shortcuts, e.g. H for headings. The available shortcuts are available in the manual (via keyboard using ALT+F2).

  • In addition, you can use the mouse pointer read aloud function to read text and images under the mouse pointer. This is especially helpful for people who only want a small section of the page to be read aloud.Depiction of the Screenreader operation.The Eye-Able® read aloud function and tab navigation recognizes the following elements of the page:

  • Headings

  • Images

  • Tables

  • Lists and list entries

  • Input fields

  • Switch

  • Forms

  • Selection lists

  • Embedded elements (iFrame, audio, video,...)

  • Links

  • Text not linked

The available elements and their keyboard shortcuts are based on the freely available screen reader NVDA, which is widely used.

Optimization of the website read aloud function

To optimize the automatic read aloud function for the whole page, different rules can be used. It is possible to set the first element read aloud (CSS class "eyeAble_SrStart"). By default the h1 heading is chosen as the first element. It is also possible to execute the read aloud function only in selected blocks of the page (CSS class "eyeAble_SrText") and to exclude elements from the automatic reading (CSS class "eyeAble_SrSkip"). With these functions, the automatic reading flow can be directed and individually adapted to subpages. It is also possible to adapt the CSS classes relevant for this to existing systems on your website(more about this here).

If you are interested or have any questions, please contact our support team at support@eye-able.com.

Sebastian Fjeld

Sebastian Fjeld has been part of the team as a professional voiceover artist and copywriter at Eye-Able® since the beginning. He studied voice acting at a university and was trained by actors. Currently he is completing his education as an interpreter for various languages.

More contributions

If it may be a little more

Filter

Filter by category

Confirm your selection with the button at the end of the list after choosing the categories.

Reset filters
An open book can be seen. The middle pages are bent, so they form a heart.

World Literacy Day and inclusion: Reading opens up worlds

Read story
A computer screen can be seen with Eye-Able Assist opened on the Website of Glücksgefühle. In the down left corner is the stick figure symbol of accessibility and in the upper left corner the Eye-Able Logo is depictured.

Barrier Breakers - Eye-Able® and Glücksliga for more inclusion in sports

Read story
Auf dem Bild ist eine Frau in einem weißen Trikot zu sehen. Sie sitzt in einem Rollstuhl und jubelt. Sie trägt einen Fahrradhelm und eine große Sonnenbrille.

How inclusive are the Paralympics?

Read story
One can see a girl with downsyndrome on the left side. On the right side a scheme can be seen depicting a longer text part and a shortened text part to symbolize the principle of Plain Language.

Talking to everyone about everything Part 2: Simple- and Plain language

Read story

You need more informations?

Write to us and we will be happy to help you.

A man and a woman look at a monitor and laugh