Skip to main content

Semantic Elements

Screen readers will use the semantic meaning of an element to help describe it. An element like a div conveys no particular meaning whereas header, button have meaning.


Screen readers and assistive technology rely on headers (<h1> to <h6>) for navigation. Tools like Web Developer Toolbar can help you visualize the semantic structure of your page.

There should be a single h1 per page. - The first heading of a page provides the best glimpse of what the content of the page is about without reading the whole page.

Ionic pages often contain an ion-title which is a good element to mark as a level 1 heading using the role of heading and aria-level of 1.


<ion-title size="large">Food</ion-title>


<ion-title role="heading" aria-level="1" size="large">Food</ion-title>

Sometimes you will want to provide a single level 1 heading but do not want to visually display it.

You can achieve this with css:

.screen-reader-only {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
position: absolute;
white-space: nowrap;
overflow: hidden;
width: 1px;

Then used on the page in html:

<h1 class="screen-reader-only">Title for the page</h1>


Landmarks wrap content to mark up major semantic sections. All content on a page should be wrapped inside of one of the landmark elements supported by newer browsers: <header>, <nav>, <main>, <footer>, <section>, <article>, <aside>.

  • If you use the aside element it should be a sibling of main and not nested inside of it.
  • If you use the section element try to use aria-label with it to allow to be announced with a screen reader.

Other Elements

  • HTML elements can provide a ton of accessibility information for free.
  • Use elements like <ul>, <ol>, <p>, <button>, <table>, <figure>, <hr>.
  • Aria attributes can be used to achieve similar accessibility information but you can avoid these by using the right semantic element.
  • Assistive technologies can navigate by collections of semantic elements.