Ionic2 How to handle the screen reader text?

Question

I turned on the voiceOver screen reader on iOS device to test it on ionic2 project.

The screen reader read the html tags like: Header 1 for <h1> also reads the images tags with the images extension : "Image tag png" for <img> .

I don't need to speak the html and the images tags.

So how to handle the screen reader in the ionic projects?

thanks.

Answer 1

I believe VoiceOver announcing that something is Heading Level 1, 2, 3, etc is expected behavior as it tells the user the level of importance of the text.

For the images, be sure to provide an alt tag to describe the image if it conveys necessary information

<img src="horse.png" at="A gray horse galloping across a green meadow at sunset" />

If it is a decorative image with no useful content or is described by surrounding text, just add an empty alt attribute attribute and the VoiceOver should skip it.

<img src="decorative.png" alt="" />

OR

<img src="horse.png" alt="" />
<p>A gray horse galloping across a green meadow at sunset.</p>