Announcing routes

Another strategy for ensuring a11y of our applications includes announcing our routes. This effectively means that all of our pages include a title so that screen readers can announce the new page to their users. With typical SSR applications, navigation consists of each new page being loaded when navigated to. With SvelteKit, navigation is handled by the client and so full-page reloads are not always necessary. This presents a dilemma for screen readers as they rely on a new title element to be present with each link clicked so that the page may be announced to users.

To play better with screen readers, we can insert a title into each new page we create using the <svelte:head> directive:

src/routes/+page.svelte

<script>
  import db from 'db';
  import url from 'img/demo.svg';
  let status = db.connection;
  let name = 'World';
</script>
<svelte:head>
  ...