Accessibility: Page titles

[cjcenizal]

Problem

A succinct, unique, and descriptive page <title> is very important for accessibility. Many users, especially screen reader users, rely on the page title to identify the contents on a page. It also greatly helps search engine optimization and usability of search engine results. The page title should often be the same as, or very similar to, the main content heading (<h1>).

All pages have the same title: "Kibana". The most important information in a title should come first, for example a title for the "Discover" page would be title="Discover", or title="Discover | Kibana".

We could tie this into our routing, but it should probably be something explicitly defined in each route, instead of being wholly dynamic.

Audit

Examine each route and define an appropriate title.

Relevant WCAG Criteria: 2.4.2 WCAG Criterion - Level A

[jamiesmith]

I like this - at the very least include the sub-tab or "app" it is on. From a "bread crumbs" standpoint I would think it would be something like:

• Kibana - Console
• Kibana - Timelion
• Kibana - Management
• Kibana - Monitoring (until monitoring is loaded, in which case it shows what is being monitored)
• Kibana - Graph
• Kibana - Dashboard (When being shown the list of them)
• Kibana - Visualize
• Kibana - Discover

Obviously, anything more specific should be appended to the defaults above, such as a dashboard's name, but you should follow the pattern - for example, when I go from the Management app to the Index Patterns, the title becomes metricbeat-* - Kibana, when it should be more like Kibana - Management - Index Patterns - metricbeat-* (though I could see omitting the Management part)

[rayafratkina]

Closed by mistake

[lukeelmers]

@cjcenizal Resurrecting this old issue :)

Just to clarify, should the main scope here be around auditing the existing titles, or just restructuring the titles as indicated in the description? We are already dynamically updating titles based on the current app, so I'm trying to identify what's left to do here before we close the issue.

[cjcenizal]

@lukeelmers Sorry I'm not at all up-to-date on this work. I suggest reaching out to some folks in the Design org for guidance. Maybe this is something @cchaos can help with?

[cchaos]

This doesn't sound like a Design issue, but something needed to be implemented in a router or view and required by plugins?

[lukeelmers]

I guess I was getting at whether we can close this issue. It seems it was opened when we didn't have dynamic page titles implemented at all. But AFAICT pretty much all apps at this point are changing the title via core.chrome.docTitle.change(...).

e.g.

• Discover - Elastic
• Visualize Library - Elastic
• Enterprise Search - Elastic
• etc

With that in mind, I'll go ahead and close this issue. I think the original goal of having different page titles for different Kibana apps has been achieved.

Of course, there's always room for improvement; if we later want to do a full audit and fine tune each individual page title further, I'd recommend we open that as a separate meta issue as it will be a larger cross-team effort, not a core-specific concern.