🎉 Early bird offer: Save only 10% on your assistant software in June with the code "Free10"!

How the Eye-Able screen reader works and can be adapted to the website

Sharing is desired:

Brille die auf einem Buch liegt

How the screen reader works

The screen reader function “Read aloud website” supports several options how the page can be read aloud:

  • Firstly, via the play button read the entire page from the first heading. The forward and back keys (and the left-right keyboard keys) can be used to skip items.
  • Just like in tab navigation, elements specifically via keyboard shortcuts, eg H for headings, can be approached and read out. The available shortcuts are available in the manual (by keyboard via ALT+F2).
  • You can also use the function Read mouse pointer Read text and pictures under the mouse pointer. This is particularly helpful for people who only want to read a small section of the page to themselves.
Abbildung des Screenreader-Fensters von Eye-Able

The eye-able screen reader and tab navigation recognizes the following elements of the page:

  • headlines
  • pictures
  • tables
  • Lists and List Entries
  • input fields
  • counter
  • forms
  • selection lists
  • Embedded elements (iFrame, audio, video,...)
  • Left
  • Unlinked text

The available elements and their keyboard shortcuts are based on the freely available screen reader NVDA, which is widespread among blind users.

Optimization of the website read aloud function

Various rules can be used to optimize the automatic reading function for the entire page. It is possible set the first element read (CSS class “eyeAble_SrStart”). By default, the h1 heading is chosen as the first element. It is also possible to use the read-aloud function only run in selected blocks of the page (CSS class “eyeAble_SrText”) and Exclude items from auto-lecture (CSS class “eyeAble_SrSkip”). With these functions, the automatic reading flow can be controlled and individually adapted to subpages. It is also possible to adapt the relevant CSS classes to existing systems on your website (more on this here).

If you are interested or have any questions, please contact our support.

Leave a Comment

Your email address will not be published.

interest aroused? We're here to help.

With over 25 functions related to digital accessibility, Eye-Able also helps you to reduce your barriers in the long term. In this way you make your information accessible to everyone and do not exclude any visitors - in short: you open up a new target group without high marketing volumes.

Non-binding consultation on digital accessibility in general

Discussion of possible optimization potentials on your website

Presentation of the assistance software directly on your website

more comments

If it may be something more.

Das Bild zeigt Code in einer Computer-Konsole.

Integration with dynamic reloading

In addition to loading the Eye-Able assets directly from the Eye-Able or local server, there is also the option of downloading the data from Eye-Able by clicking on