Screen Reader

The screen reader is able to read the content of the website via voice synthesis. Click on the content to start the reading. The text being read is highlighted by Guidebot.
The screen reader scans the HTML page and reads the content it detects. It may be that some elements cannot be defined for the screen reader - for example, text written directly into a div - in which case we have to define that the content is readable. We can do this by inserting a data-gb-speech HTML tag. If we specify the HTML tag without a value, the reader will take its content as a base. If you want to modify this, or if the content is such that there is nothing to read (e.g. an image), you can specify the content to be read as the value of the tag. In the case of buttons and links (as long as the screen reader is active), the content will be read on the first click, the page will navigate on the second click.
Examples of the correct setting:

    
<!-- Without value: -->
<p>This content will be automatically recognised and read.</p>
<div data-gb-speech>
    This content cannot be automatically recognized,
    so the data-gb-speech tag is required.
</div>
<a href="#" data-gb-speech>This is a link</a>
<button type="button" data-gb-speech>Button titlee</button>

<!-- With value: -->
<div data-gb-speech="This content will be read aloud">
    This content will only be displayed
</div>
<img src="image.jpg" data-gb-speech="Click on the image to read its content."/>
    

Example of incorrect setting:

    
<!-- Incorrect syntax (nested data-gb-speech tags): -->
<div data-gb-speech="Avoid nesting">
    <div data-gb-speech="There is already one of these in the parent element.">
        ...
    </div>
</div>
    

---

Reader Mode

Reader mode collects the text content on the page and displays it in an easy-to-read format, free of distractions.
For the reader mode to work properly, we need to define the element that contains the page content by inserting a data-gb-content HTML tag.

Examples of the correct setting:

    
<header>...</header>
<main data-gb-content>
    <div id="content-block-1">
        ...
    </div>
    <div id="content-block-2">
        ...
    </div>
</main>
<footer>...</footer>