header
element instead of a div
, which lets the browser know that the elements within provide information about the site as a whole rather than about the specific page.div
with the nav
element, which lets the browser know the elements within are related to accessing different parts of the page or site.router-outlet
within a main
element, which tells the browser that the content loaded into the router outlet is the main content of the page.alt
attribute has been added to the image to let the browser know that it's a logo image. There's also an aria-live
attribute on the main
element.main
tag will be updated on the client-side after the page has loaded and needs to be watched for updates.role="main"
or are defined by default depending on the html element.ul
, button
and nav
respectively. Sometimes however, you may not want or be able to use the standard html element to represent these objects in your application, for example, you may want to create your own button component with it's own distinct logic. In this case you can make use of the role
attribute:button
element to screen readers and browsers, but now have the opportunity to fully control the styling of that component as well as inject your own custom logic.img
tag's alt
attribute lets the reader know what is being shown using a short description.role
of dialog or alertdialog to let the browser know that that component is acting as a modal. The modal component template can use the ARIA attributes aria-labelledby
and aria-described
to describe to readers what the title and purpose of the modal is.