Web Accessibility – Essential for Some, Useful for All
The html title attribute is used to give users a feedback where they are. The title is shown in the browser tab, sometimes used as headline for the browser window and announced by screenreaders. In addition bookmarks and search results are using the page title to present it to users . A good title is necessary to know which tab to choose and for screenreader users to know where they are currently. But what makes a good title?
- The current location is in the front and the page title afterwards
- Home – Martin Forstner’s Blog
- Work – Martin Forstner’s Blog
- It is consistent over the whole eco-system (usually your homepage)
- It changes on every site change. For example if a link is resolved
HTML Example
<html><head>
<title>Home - Martin Forstner's Blog
</title>
</head></html>
Angular Example
In Angular it is usually done by importing the Title from @angular/platform-browser. But this is very annoying if you have more than 1 Sit, because therefore you have to set in every component the title manually. I will show you an example with the angular common router.
app.component.ts
In the app.component you are subscribing to NavigationEnd events and furthermore setting the title for every route. The while loop is needed for lazy loaded routes!
import { Component, OnInit, VERSION } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { filter, map } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
name = 'Angular ' + VERSION.major;
constructor(
private title: Title,
private router: Router,
private activatedRoute: ActivatedRoute
) {}
ngOnInit() {
this.router.events
.pipe(
filter((e) => e instanceof NavigationEnd),
map(() => {
let child = this.activatedRoute.firstChild;
while (child) {
if (child.firstChild) {
child = child.firstChild;
} else if (child.snapshot.data && child.snapshot.data['title']) {
return child.snapshot.data['title'];
} else {
return 'No Title up to now';
}
}
})
)
.subscribe((title) => {
this.title.setTitle(title + ' - TestTitle Example');
});
}
}
app.routing.module
Just for example routes. Could be done in any routing.module or lazy laoded feature module
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloComponent } from './hello.component';
const routes: Routes = [
{
path: '',
component: HelloComponent,
data: { title: 'Home' },
},
{
path: 'lazy',
loadChildren: () => import('./lazy-loaded/lazy-loaded.module').then(m =>m.LazyLoadedModule),
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
No Comments