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.

Headings

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.

Before

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

After

<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

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.