bug: no level one heading in apps

[darrylnoakes]

Prequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Make the internal element used by ion-title an h1 when used in a page header. This improves accessibility.

Describe the Use Case

This greatly improves accessibility. There are many more small changes like this that could be made throughout the framework...

Describe Preferred Solution

ion-title currently always uses a div. An actual header element could be used instead.

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Is there a particular issue you are running into with the way ion-title is structured right now? ion-title can be used for more than just top level headings, so I think forcing it to use h1 will cause additional accessibility issues.

[darrylnoakes]

I did state that it should be "when used in a page header", but maybe I didn't make my request clear enough. I was wondering if the the ion-title could detect if it was naming a page (i.e. in a page header), and use an h1 instead of a div only then.

I understand if this would be too complex. If that is the case, please say so, and I will (try to) forget about it.

Alternative, rather hacky solution I think should work for most cases: just put an h* into the slot. <ion-title><h1>Title of the Page</h1></ion-title>

[liamdebeasi]

Thanks for the clarification. I worry that adding this logic into ion-title would rely on it having to make (possibly incorrect) assumptions about how a dev's app is laid out.

Are you running into a particular accessibility issue/warning?

[darrylnoakes]

Currently, axe DevTools gives a warning that the page has no level-one heading, and Windows Narrator (I have not tried other screen readers yet) does not read the title out.

It reads the back button I have in the toolbar, and then reads the content of the page.

[liamdebeasi]

Thanks. I think this is something Ionic should handle/make easier. One idea is to keep the scope extremely limited and just have it render an h1 if it is used inside of ion-header.

[liamdebeasi]

Thanks for the issue. After making a proof of concept and discussing this with the team we have decided to add documentation to inform devs on how to add proper headings in their applications.

We found that trying to automatically account for this in Ionic resulted in very brittle code because ion-title can be use in multiple ways (including using multiple titles within a single header).

The docs are live, so I am going to close this. Let me know if you have any questions.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.