Accessibility / a11y, i18n and Ionic 5

Ionic Framework
1

I am having accessibility issue with screen readers. It is more of annoyance but maybe someone has a solution?

When using the screen reader on iOS (not tested on Android yet), it speaks out “Ionic App” on every page change because that is in the src/index.html in the <head><title> html tags. This title doesn’t change with page changes. This was noticed in Accessibility improvements #11386 on GitHub. The default text for this is “Ionic App” unless you changed it.

Is there a way to make it change to the internationalized title of the actual page changed to (as in the <ion-title> tag)? Or maybe at least the title of the app in the current language? This app has support for many languages.

2

I’ve worked fairly extensively to make our Ionic app as accessible as possible, and unfortunately a lot of features that should be available by default require extensive and time-consuming workarounds. In your case, though, it should be a pretty easy fix.

The “Ionic App” screen reader announcement you are hearing comes from the HTML title tag (not the ion-title). If I can remember correctly it defaults to the appName value in the config.json.

In order to change the title for each page, you would need to explicitly set it on page load.

Inject private titleService: Title into your page, then in ionViewWillEnter() simply set the page title:

this.titleService.setTitle(‘My page title’);