[Meta] 🎙 Text to speech (TTS)

[steffenkleinle]

EDIT by@ztefanie

This is the meta issue for the TTS feature:

• [ ] #2916
• [ ] #2917
• [ ] #2918
• [ ] #2919

Original issue below:

---

:warning: This is not fully written yet. More information is still needed.

As a analphabetic user/less fluent reader I want to have the possibility to get texts read out loud such that I can still use the app and understand the content.

Acceptance Criteria:

• [ ] Add an option in the UI to read the current text
• [ ] This should work for categories (others TBD)
• [ ] It should work in all supported languages (if possible)

Technical Tasks:

TBD

[ztefanie]

See more details in this issue: https://openproject.tuerantuer.org/projects/community-feedback/work_packages/3171/activity

[f1sh1918]

We may use these libraries React: https://github.com/morganney/tts-react React-Native: https://www.npmjs.com/package/react-native-tts

[ztefanie]

We just had a call with UI/UX and decided to do:

• We only read texts of third level categories
• target group for this feature are people with basic reading skills and/or basic language skills, not for people who cannot read at all
• we aim to use the native build in tts functionality
• should be available offline
• should support multiple languages, we may need to navigate to settings where the content language can be downloaded. if language is not available we use the device language and do not disable the feature
• we do not want to read "lists with 3 elements" or stuff like this. We expect user to have basic reading skills and read the text while the tts reads it.
• we aim to support web and native, but we will start with native
• pausing should be possible
• we try to highlight the part of the text that is read out, if this is too much effort we postpone it
• we want to have this feature enabled by default, but design should not be annoying for people who do not want to this feature or add an easy way to turn it off / hide it.

to be discussed:

• should we only display the tts-buttons if there is a long text. @hauf-toni does a little research on best practices and we will decide this based on the results.

[hauf-toni]

🗣️ you can find my design proposal for this functionality here.

my research on limiting the function to content above a certain number of characters will be posted in this thread as soon as it is completed 🕵🏼

[hauf-toni]

🕵️‍♀️ pros and cons of making tts functionality available only for texts over a certain number of characters

Pros	Cons
Relevance Filtering, ensures tts is used for longer, more meaningful content. Avoids unnecessary activation for trivial or very short texts.	Inconsistency in user experience may confuse or frustrate users if tts is not consistently available for all content. They most likely expect tts to work uniformly, regardless of text length.
Reduces potential annoyance from tts reading out short, easily readable texts.	Important short texts may be excluded from tts support, impacting accessibility (e.g. texts on emergency numbers, which are very short and very important). This limits the utility of tts for users who can make much better use of the app with the tts function.
Saves processing power and battery life by limiting frequent tts activations and could possibly optimize performance.

Best Practice:

💡 Tts functionality is generally applied universally, without character limits. 🎛️ Customization allows users to adjust how tts interacts with content, ensuring that the feature meets diverse needs without imposing rigid constraints. 🤖 Some systems incorporate intelligent design (smart features) to optimize the tts experience based on context, but they do not exclude shorter texts by default.

🎯 Recommendation:

Leading platforms prioritize accessibility and user control over imposing character-based restrictions. I would recommend making the tts functionality available for all third level pages, providing a consistent experience for our users.

[ztefanie]

@hauf-toni I am a bit confused we wanted to do this issue for native, but the design proposal is for desktop browsers. Can you please also share a design for mobile /native?