Title and Screen Readers

[camskene]

I've noticed the title isn't updated until after the page loads.

When using a screen-reader this is problematic as the title is read before the page has finished loading. This initially gives an inaccurate description of the page.

If the title is static could it be set before the model?

[tim-evans]

Yeah, you'd have to move around your routes to get it working I think...

[camskene]

Perhaps there could be two rendering paths?

One that renders the title immediately, in a before model hook, or the like. This would be available to screen-readers.

Another that renders as it does now, waiting for page load.

Currently it renders a static title and a dynamic titles at the same time in a routes lifecycle. This makes sense if the title is based on a model, but the title could be rendered much earlier if it's static string.

eg:

{{title 'my app' model=false}} renders in a beforeModel hook (or sometime early in the routes lifecycle)

or maybe there are 2 helpers

{{static-title 'my app'}} this one knows to render immediately

{{dynamic-title post.title}} this one knows to wait for the model

I don't really like the idea of 2 different helpers though, but I think this clearly communicates my intention.

[tim-evans]

Since this is a rendered helper, it's not really possible to have fine-grained control over the title in this way; I can expose a function that would set the title in the route.

[camskene]

I can expose a function that would set the title in the route.

Not sure what you have in mind, but I'm excited! Let me know if there's anything I can do to help?

[tim-evans]

Yes! Please write up your requirements so I can expose this properly. Please be as detailed as possible

[camskene]

As a screen-reader user I would like the title to be complete before the page finishes loading so the page is described accurately.

To meet this requirement I have been putting static strings in the beforeModel hook or a route. This requires repeating parts of the string though for each route:

// routes/application.js
beforeModel() {
  document.title = 'My App'
}

// routes/about.js
beforeModel() {
  document.title = 'About - My App'

My hope is this addon can solve this use case ie the rendering of static titles much earlier.

A title that relies on a model obviously can't be rendered in a beforeModel hook, and that's ok, that use case just can't be solved, but at least static titles would be accessible.

[tim-evans]

@camskene super, thanks :)

[kmccullough]

@tim-evans

Yeah, you'd have to move around your routes to get it working I think...

Can you describe this in more detail? Currently the title on view page source through fastboot of my app shows that only my page-titles from application.hbs are initially rendered. None of the child routes have promise awaiting models.